/* Componente card-post (contenidos, v2 #60). Solo tokens de style.css.
 * Es una `tarjeta` de shell (superficie, sombra, enlace que cubre la tarjeta,
 * subida al pasar y foco alrededor) con una `insignia` y una `ilustracion`:
 * sus hojas salen antes que esta. Aquí solo lo propio del artículo: la imagen
 * (o la portada del tema) en 16:9, el tema que se parte en dos líneas si no
 * cabe, los separadores del pie, el acercamiento de la imagen al pasar y la
 * variante destacada (desde 768px, imagen a la izquierda). */

.pf-card-post .pf-tarjeta__media {
    position: relative;
    aspect-ratio: 16 / 9;
}

.pf-card-post .pf-card-post__img {
    height: 100%;
    object-fit: cover;
}

/* La portada es 16:9 y su fondo es el de la caja (bg-alt): centrada en su hueco. */
.pf-card-post .pf-card-post__portada {
    display: flex;
    align-items: center;
    height: 100%;
}

/* El nombre del tema es largo: se parte en dos líneas antes que desbordar. */
.pf-card-post .pf-insignia {
    white-space: normal;
}

/* Quien firma y el tiempo de lectura; el separador va con el dato que lo sigue. */
.pf-card-post .pf-tarjeta__pie {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pf-space-3xs) var(--pf-space-2xs);
    line-height: var(--pf-leading-snug);
}

.pf-card-post .pf-tarjeta__pie > * + *::before {
    content: "·";
    content: "·" / "";
    margin-inline-end: var(--pf-space-2xs);
}

/* Al pasar, la imagen se acerca un poco dentro de su marco (sin movimiento reducido). */
@media (prefers-reduced-motion: no-preference) {
    .pf-card-post .pf-tarjeta__media > * {
        transition: transform var(--pf-transition);
    }

    .pf-card-post.pf-tarjeta--enlace:hover .pf-tarjeta__media > * {
        transform: scale(1.04);
    }
}

/* -------------------------------------------------------------------------
 * Destacada: el primer artículo de la portada del blog
 * ---------------------------------------------------------------------- */

.pf-card-post--destacada .pf-tarjeta__titulo {
    font-size: var(--pf-text-2xl);
    font-weight: var(--pf-weight-black);
    line-height: var(--pf-leading-tight);
}

.pf-card-post--destacada .pf-tarjeta__texto {
    font-size: var(--pf-text-md);
    line-height: var(--pf-leading-normal);
}

@media (min-width: 768px) {
    .pf-card-post--destacada {
        flex-direction: row;
    }

    /* La imagen ocupa su columna a lo alto; la fila mide lo que el texto o el 4:3. */
    .pf-card-post--destacada .pf-tarjeta__media {
        flex: 0 0 55%;
        aspect-ratio: 4 / 3;
        border-radius: var(--pf-radius-card) 0 0 var(--pf-radius-card);
    }

    .pf-card-post--destacada .pf-tarjeta__media > * {
        position: absolute;
        inset: 0;
    }

    .pf-card-post--destacada .pf-tarjeta__cuerpo {
        justify-content: center;
        gap: var(--pf-space-sm);
        padding: var(--pf-space-lg);
    }

    .pf-card-post--destacada .pf-tarjeta__pie {
        margin-top: var(--pf-space-2xs);
    }
}

@media (min-width: 1025px) {
    .pf-card-post--destacada .pf-tarjeta__cuerpo {
        padding: var(--pf-space-xl);
    }
}