/**
 * sm-post.css — entrada del blog (/blog/{entrada}.html)
 *
 * Depende de sm-site.css, que aporta los tokens, la tipografía, la cabecera
 * clara, el skyline, el pie y los botones. Aquí solo la ficha del artículo y su
 * prosa.
 *
 * El cuerpo se estiliza por etiqueta (p, h2, h3, img…) en lugar de por clases:
 * los artículos los escribe gente distinta y vienen con HTML sencillo, así que
 * es más fiable que exigir una clase en cada elemento.
 */

/* Medida de lectura: ~720px son unas 90 caracteres con esta tipografía, que es
   donde el ojo deja de perder el renglón al saltar de línea. */
.post__inner { max-width: var(--sm-measure); }

/* ---------- Miga de pan ---------- */

.post-breadcrumb {
    padding-top: 22px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 14px;
    color: var(--sm-muted-2);
}
.post-breadcrumb a { color: var(--sm-blue); text-decoration: none; font-weight: 600; }
.post-breadcrumb a:hover { text-decoration: underline; }
.post-breadcrumb__sep { color: #A8B2C1; }

/* ---------- Cabecera del artículo ---------- */

.post-masthead { padding: clamp(22px, 4vw, 34px) 0 clamp(20px, 3vw, 28px); }
.post-masthead__meta {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sm-blue);
}
.post-masthead__title {
    margin: 0;
    font-size: clamp(30px, 4.6vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--sm-ink-hero);
}

/* ---------- Cuerpo ---------- */

.post-body {
    padding-bottom: clamp(32px, 5vw, 52px);
    font-size: 17px;
    line-height: 1.75;
    color: var(--sm-muted);
}
.post-body p { margin: 0 0 20px; }
.post-body a { color: var(--sm-blue); }
.post-body a:hover { color: var(--sm-blue-dark); }

/* Los artículos usan h2 para las partes y h3 para los apartados de dentro. */
.post-body h2 {
    margin: clamp(34px, 5vw, 46px) 0 14px;
    font-family: var(--sm-serif);
    font-weight: 400;
    font-size: clamp(23px, 3vw, 29px);
    line-height: 1.2;
    color: var(--sm-ink-hero);
}
.post-body h3 {
    margin: clamp(26px, 4vw, 34px) 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--sm-ink-hero);
}

.post-body img {
    display: block;
    width: 100%;
    height: auto;
    margin: 26px 0;
    border-radius: 12px;
}

/* Los vídeos vienen del marcado con width="1280" en el atributo. Sin esta regla
   se saldrían de la columna, que mide 720. Mismo marco que las imágenes, con
   fondo negro para las bandas mientras carga el póster. */
.post-body video {
    display: block;
    width: 100%;
    height: auto;
    margin: 26px 0;
    border-radius: 12px;
    background: #000;
}

/* El embed del mapa trae su propio alto; aquí solo se le da el marco. */
.post-embed {
    margin: 26px 0;
    border-radius: 12px;
    overflow: hidden;
    background: var(--sm-surface);
}
.post-embed iframe { display: block; width: 100%; border: 0; }

/* ---------- Piezas propias de algunos artículos ---------- */

/* Clases que traen unos pocos artículos de su maquetación original. Todas van
   nombradas bajo .post-body porque compiten con `.post-body img`, que al sumar
   clase y etiqueta gana a un selector de una clase sola. */

/* Pie de foto. El margen negativo lo acerca a la imagen de encima, que deja
   26px por debajo. */
.post-body .caption {
    margin: -16px 0 26px;
    font-size: 14px;
    font-style: italic;
    color: var(--sm-muted-2);
}

/* Dos imágenes en fila. Dos artículos la nombran distinto; se cubren ambos. */
.post-body .dos-img,
.post-body .two-img-container {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 26px 0;
}
/* min-width:0 es imprescindible: un hijo flex arranca con min-width:auto y, en
   una imagen, eso equivale a su ancho intrínseco. Alguna pareja tiene un fichero
   del doble de lo que declara el marcado (686px donde pone 343), así que entre
   las dos pedían más de los 812 de la columna y flex-wrap las mandaba a líneas
   distintas, a todo lo ancho. Con esto pueden encoger y caben las dos. */
.post-body .dos-img img,
.post-body .two-img-container img {
    flex: 1 1 220px;
    width: auto;
    min-width: 0;
    margin: 0;
}

/* Imagen flotada con el texto rodeándola. */
.post-body .float-left-img {
    float: left;
    width: 100%;
    max-width: 320px;
    margin: 6px 26px 16px 0;
}

/* Firma con la que cierra algún artículo: nombre, cargo e institución de quien
   lo escribe. Se separa del cuerpo para que no se lea como un párrafo más. */
.post-body .post-signature {
    margin-top: clamp(30px, 4vw, 40px);
    padding-top: 24px;
    border-top: 1px solid var(--sm-border);
    font-size: 14px;
    line-height: 1.65;
    color: var(--sm-muted-2);
}
.post-body .post-signature strong { font-size: 15px; color: var(--sm-ink-hero); }

/* ---------- Testimonio ---------- */

/* La foto va flotada y el texto la rodea, como en el original: la cita es larga
   y así sigue a todo el ancho por debajo en lugar de quedarse en una columna
   estrecha. `flow-root` hace que el bloque contenga su propio flotado, para que
   el borde superior y el relleno no se descuadren ni se cuele en lo que venga
   después. */
.post-testimonial {
    display: flow-root;
    margin: clamp(34px, 5vw, 46px) 0 0;
    padding-top: 28px;
    border-top: 1px solid var(--sm-border);
}
/* Va nombrada dentro de .post-body a propósito: ese bloque declara
   `img { width: 100% }`, que con una clase y una etiqueta gana por
   especificidad a un selector de una sola clase. Sin esto, la foto se iba al
   ancho entero de la columna y el texto quedaba en una rendija a su derecha. */
/* Solo se fija el ancho: el alto va libre para que la foto conserve sus
   proporciones. Son retratos de gente y vienen con la forma que vengan, así que
   imponerles una caja cuadrada les cortaría la cabeza. */
.post-body .post-testimonial__photo {
    float: left;
    width: 100%;
    max-width: 320px;
    height: auto;
    margin: 4px 28px 16px 0;
    border-radius: 12px;
}
/* Nombradas bajo .post-body por lo mismo que la foto: son <p>, y `.post-body p`
   les ganaría el margen. */
.post-body .post-testimonial__quote {
    margin: 0 0 12px;
    font-size: 15.5px;
    font-style: italic;
    line-height: 1.7;
    color: var(--sm-muted);
}
/* Sin `clear`: la firma sigue al texto de la cita y, si esta es corta, se queda
   junto a la foto en lugar de empujarse hasta debajo dejando un hueco vacío a su
   derecha. Cuando la cita es larga y ya rebasa la foto, cae debajo igualmente. */
.post-body .post-testimonial__author {
    margin: 0;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sm-ink-hero);
}
/* Alguna entrada pone bajo el nombre los enlaces de la persona, en un bloque
   aparte. Se distingue del nombre sin necesidad de clase propia. */
.post-body .post-testimonial__author div {
    padding-top: 5px;
    font-size: 13.5px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--sm-muted-2);
}

/* ---------- Pie del artículo ---------- */

.post-back {
    padding-bottom: clamp(40px, 6vw, 72px);
}
.post-back a {
    font-size: 15px;
    font-weight: 700;
    color: var(--sm-blue);
    text-decoration: none;
}
.post-back a:hover { color: var(--sm-blue-dark); text-decoration: underline; }

@media (max-width: 560px) {
    /* Sin sitio para rodear nada: las imágenes dejan de flotar y el texto va
       debajo. Las parejas se apilan solas por el flex-wrap. */
    .post-body .post-testimonial__photo {
        float: none;
        max-width: 260px;
        margin: 0 0 18px;
    }
    .post-body .float-left-img {
        float: none;
        max-width: 100%;
        margin: 26px 0;
    }
}