/*
======================================================
   assets/css/components/blog-post-card.css 
======================================================
*/

.post-card {
    background-color: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
}

.post-card__image-wrapper img {
    width: 100%;
    /*height: auto;*/
  	height: 100%;          /* La imagen se estira para llenar el 100% del contenedor */
    /*aspect-ratio: 16 / 9; *//* Mantiene la proporción */
    object-fit: cover;
}

/* Reduce el padding general del contenido */
.post-card__content {
    padding: 1rem 1rem 0.75rem; 
}

/* Título más ajustado */
.post-card__title {
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 0.3rem;
}

.post-card__title a {
    text-decoration: none;
    color: var(--ast-global-color-2); /* Color de cabecera */
}

.post-card__title a:hover {
    color: var(--ast-global-color-0); /* Color primario */
}

/* Excerpt más contenido */
.post-card__excerpt p {
    margin-bottom: 0;
    color: var(--ast-global-color-3); /* Color del texto */
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Ajusta el espaciado entre texto y botón */
.post-card__footer {
    padding: 0 1rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    border-top: 1px solid #eaeaea;
    margin-top: auto; /* Se asegura que esté pegado al fondo */
}

/* Espaciado más compacto debajo de la fecha/meta */
.post-card__meta {
    font-size: 0.8rem;
    color: #7a7a7a;
    padding-top: 0.3rem;
}

.post-card__read-more.astra-button {
  	width: 100%; /* El botón ocupa todo el ancho */
}

/*.post-card__image-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}*/

/*
 * ========================================================================
 * AJUSTES PARA ESCRITORIO
 * Aumentamos el padding y el tamaño de fuente para una mejor legibilidad
 * en pantallas grandes.
 * ========================================================================
 */
@media (min-width: 992px) {
    .post-card__content {
        padding: 2rem 0rem 1rem;
    }

    .post-card__footer {
        padding: 0 1.5rem 1.5rem;
    }

    .post-card__title {
        font-size: 1.35rem; /* Hacemos el título ligeramente más grande */
    }
}