/* Estilos del blog. Se carga después de main.css y reutiliza sus variables
   (--bg-delt, --delt) para que el verde sea exactamente el mismo del resto. */

/* Pie pegado abajo. Sin esto, una página corta (filtrar por una etiqueta que
   solo tiene un artículo, por ejemplo) deja una franja blanca debajo del pie.
   Este fichero solo se carga en /blog, así que tocar body aquí no afecta al
   resto del sitio.

   height: auto anula el height: 100% que main.css pone en body: combinado con
   flex, recortaría los artículos largos en vez de dejarlos crecer. */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto;
}

.blog-page {
    flex: 1 0 auto;
}

.site-footer {
    flex-shrink: 0;
}

.blog-page {
    /* 74px de barra fija más aire. Mismo criterio que el scroll-margin-top de
       los anclajes en main.css. */
    /* La franja ya deja el hueco de la barra fija, así que aquí no hace falta. */
    padding: 26px 24px 80px;
    max-width: 780px;
    /* width: 100% no es redundante con el max-width.

       .blog-page es un elemento flexible del body, y la fila de filtros que hay
       dentro no se parte (flex-wrap: nowrap). Sin esta línea, esa fila estiraba
       la caja de la página más allá del ancho de la pantalla: el contenido salía
       cortado por la derecha mientras la franja verde y la barra, que no tienen
       ese problema, se quedaban en su sitio. Se veía sobre todo en móvil.

       Atando el ancho al contenedor, el max-width sigue limitando en escritorio
       y en móvil manda la pantalla. */
    width: 100%;
    margin: 0 auto;
}

/* Las páginas de artículo no llevan franja, así que siguen necesitándolo. */
.blog-post {
    padding-top: 80px;
}

/* ── Franja de cabecera ──────────────────────────────────────────────────── */

/* Mismo verde claro que .vol-hero en volunteers.css, para no inventar otro
   patrón: el sitio ya tenía uno para esto.

   Lista para llevar foto: añade background-image aquí y el degradado de
   .blog-band::before la oscurece lo justo para que el texto siga legible, igual
   que el hero de la home. */
.blog-band {
    position: relative;
    background-color: #c6e1bd;
    /* Lo justo para despejar la barra fija de 74px y respirar. Antes eran 130 y
       48: con la tarjeta principal debajo, la primera pantalla se quedaba sin
       sitio y había que desplazarse para ver un solo artículo. */
    padding: 104px 24px 30px;
    text-align: center;
}

.blog-band-inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}

/* Sin imagen de fondo esta capa es invisible. Cuando la haya, la separa del
   texto sin tener que tocar nada más. */
.blog-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(198,225,189,0) 0%, rgba(198,225,189,.45) 100%);
    pointer-events: none;
}

/* ── Índice ──────────────────────────────────────────────────────────────── */

.blog-index-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    color: #216344;   /* 5,08:1 sobre el verde claro */
    margin-bottom: 8px;
    text-wrap: balance;
}

.blog-index-intro {
    font-size: 0.98rem;
    line-height: 1.55;
    /* #555 daba 3,9:1 sobre el verde claro. Este verde oscuro llega a 5,08. */
    color: #216344;
    max-width: 58ch;
    margin: 0 auto;
}

/* Una sola fila. Si no caben, se desplaza en horizontal en vez de partirse en
   dos alturas, que dejaba un bloque de píldoras desordenado.

   El padding vertical no es decorativo: el ::after de cada filtro sobresale 7px
   por arriba y por abajo para agrandar el área táctil, y un contenedor con
   overflow-x lo recortaría. Con el padding, cabe dentro. */
.blog-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 24px;
    overflow-x: auto;
    padding: 7px 0;
    /* La píldora cortada al borde ya avisa de que hay más; una barra de
       desplazamiento encima de los filtros solo ensucia. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.blog-filters::-webkit-scrollbar {
    display: none;
}

/* Sin esto se comprimirían para caber, que es justo lo que no queremos. */
.blog-filter {
    flex: 0 0 auto;
}

.blog-filter {
    border: 1px solid #d9e2dd;
    background: #fff;
    color: #4a5a52;
    border-radius: 20px;
    padding: 6px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

/* El foco de teclado tiene que verse: sin esto, quien navega con tabulador no
   sabe dónde está. */
.blog-filter:focus-visible,
.blog-tag:focus-visible,
.blog-back:focus-visible,
.blog-cta-button:focus-visible,
.blog-card-title a:focus-visible {
    outline: 2px solid #327C57;
    outline-offset: 2px;
}

.blog-filter:hover {
    border-color: #B8551F;
    color: #994717;
}

/* #B8551F y no #CC6633: con texto blanco encima, el coral puro se queda en
   3,81:1 y este llega a 4,82. */
.blog-filter.is-active {
    background: #B8551F;
    border-color: #B8551F;
    color: #fff;
}

.blog-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.blog-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
    padding-bottom: 28px;
    border-bottom: 1px solid #ecefed;
}

.blog-card:last-child {
    border-bottom: none;
}

/* ── Tarjeta principal ───────────────────────────────────────────────────── */

/* Se distingue por tamaño y forma, no por color de fondo.

   A dos columnas y no con la imagen a todo lo ancho: así entra en la primera
   pantalla junto con la cabecera y los filtros, en vez de obligar a desplazarse
   para ver un solo artículo. */
.blog-hero-card {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 24px;
    align-items: center;
    padding-bottom: 28px;
    margin-bottom: 4px;
    border-bottom: 1px solid #ecefed;
}

.blog-hero-image {
    display: block;
    aspect-ratio: 40 / 21;
}

.blog-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    display: block;
}

.blog-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.35rem, 2.6vw, 1.6rem);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 8px;
    text-wrap: balance;
}

.blog-hero-title a {
    color: #216344;
    text-decoration: none;
}

.blog-hero-title a:hover {
    text-decoration: underline;
}

.blog-hero-summary {
    font-size: 0.98rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 10px;
}

/* La proporción se fija aquí y no en los atributos de la imagen: así una foto
   cuadrada o vertical se recorta a la forma de la tarjeta en vez de descolocar
   la fila, y el espacio queda reservado antes de que el fichero llegue. Es la
   misma trampa de reserva de espacio que hubo con las imágenes de "How it
   works", resuelta de raíz. */
.blog-card-image {
    display: block;
    aspect-ratio: 40 / 21;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.blog-card-meta {
    font-size: 0.82rem;
    /* #8a948f daba 2,95:1 sobre blanco y 2,80 sobre la tarjeta destacada: por
       debajo del 4,5:1 que pide la WCAG AA. Este es el gris más claro que pasa
       en ambos fondos (5,08 y 4,80). */
    color: #667169;
    margin-bottom: 6px;
    font-family: 'Montserrat', sans-serif;
}

.blog-dot {
    margin: 0 6px;
}

.blog-card-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 8px;
    text-wrap: balance;
}

.blog-card-title a {
    color: #216344;
    text-decoration: none;
}

.blog-card-title a:hover {
    text-decoration: underline;
}

.blog-card-summary {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 10px;
}

.blog-empty {
    color: #667169;
    font-style: italic;
    padding: 24px 0;
}

/* ── Etiquetas ───────────────────────────────────────────────────────────── */

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Naranja corporativo. Las etiquetas y el filtro por etiquetas son el mismo
   sistema, así que comparten color.

   No es el #CC6633 exacto: ese da 2,7:1 sobre estos fondos y hace falta 4,5.
   #994717 es el mismo naranja un punto más oscuro y llega a 5,8. */
.blog-tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    background: #fdf1ea;
    color: #994717;
    border-radius: 12px;
    padding: 3px 10px;
    text-decoration: none;
}

a.blog-tag:hover {
    background: #994717;
    color: #fff;
}

/* ── Artículo ────────────────────────────────────────────────────────────── */

.blog-post-header {
    margin-bottom: 32px;
}

.blog-back {
    color: #327C57;
    text-decoration: none;
    font-size: 0.9rem;
}

.blog-back:hover {
    text-decoration: underline;
}

.blog-post-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 4.5vw, 2.5rem);
    line-height: 1.2;
    color: #216344;
    margin: 12px 0;
    text-wrap: balance;
}

.blog-post-meta {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    color: #667169;   /* ver nota de contraste en .blog-card-meta */
    margin-bottom: 10px;
}

/* El cuerpo sale de Markdown, así que se estilan las etiquetas directamente:
   no hay clases que poner en el texto que escribe una persona. */
.blog-post-body {
    font-size: 1.05rem;
    line-height: 1.75;
    color: #333;
}

.blog-post-body > * + * {
    margin-top: 1.1em;
}

.blog-post-body h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #216344;
    margin-top: 2em;
    text-wrap: balance;
}

.blog-post-body h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #2d5c47;
    margin-top: 1.6em;
}

.blog-post-body a {
    color: #327C57;
}

.blog-post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* ── Figuras y pies de foto ──────────────────────────────────────────────── */

.blog-post-body figure {
    margin: 2em 0;
}

/* Un tope de alto para que una foto no se coma la pantalla. Se limita el alto y
   se deja que el ancho se deduzca, así la foto encoge entera en vez de
   recortarse: nada de perder media escena para caber. */
.blog-post-body figure img {
    max-height: 420px;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

.blog-post-body figcaption {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #667169;   /* el mismo gris que la fecha; 5,08:1 sobre blanco */
    margin-top: 8px;
    text-align: center;
}

/* Foto que se sale de la columna de texto, para dar aire a un artículo largo.
   Se escribe así en el Markdown:

       ![Alt](css/images/blog/foto.jpg "Pie"){: .wide }

   Solo por encima de 1100px: por debajo no hay margen lateral del que salir, y
   forzarlo provocaría desbordamiento horizontal, que es el error que costó
   encontrar el 23/09. */
@media (min-width: 1100px) {
    .blog-post-body figure.wide,
    .blog-post-body img.wide {
        width: calc(100% + 160px);
        max-width: none;
        margin-left: -80px;
    }

    /* La clase wide la llevan la figura Y la imagen, porque una viene del
       Markdown y la otra la copia el build. Sin este reset, la imagen heredaba
       también el margin-left negativo y quedaba 80px a la izquierda dentro de
       una figura que sí estaba centrada. */
    .blog-post-body figure.wide img {
        width: 100%;
        max-width: 100%;
        max-height: 520px;
        object-fit: cover;
        margin-left: auto;
        margin-right: auto;
    }
}

.blog-post-body blockquote {
    border-left: 3px solid #327C57;
    padding-left: 18px;
    color: #555;
    font-style: italic;
}

.blog-post-body ul,
.blog-post-body ol {
    padding-left: 1.4em;
}

.blog-post-body li + li {
    margin-top: 0.4em;
}

.blog-post-body code {
    background: #f2f5f3;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* Tablas anchas: el cuerpo de la página nunca debe desplazarse en horizontal. */
.blog-post-body table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
}

.blog-post-body th,
.blog-post-body td {
    border: 1px solid #e3e9e6;
    padding: 8px 12px;
    text-align: left;
}

.blog-post-body th {
    background: #f6f9f7;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
}

/* ── Llamada a la acción del final ───────────────────────────────────────── */

.blog-cta {
    margin-top: 56px;
    padding: 28px;
    background: #f6f9f7;
    border: 1px solid #e0eae4;
    border-radius: 12px;
    text-align: center;
}

.blog-cta-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    color: #216344;
    margin-bottom: 18px;
    text-wrap: balance;
}

.blog-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.blog-cta-button {
    display: inline-block;
    background: #327C57;
    color: #fff;
    border-radius: 24px;
    padding: 10px 26px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background .15s ease;
}

.blog-cta-button:hover {
    background: #3d9469;
    color: #fff;
}

.blog-cta-button-outline {
    background: transparent;
    color: #216344;
    border: 1px solid #327C57;
}

.blog-cta-button-outline:hover {
    background: #327C57;
    color: #fff;
}

/* Cierre de un artículo de campaña: un solo botón, y más grande. Es la única
   acción de la página, así que no compite con nada. */
.blog-cta-campaign {
    background: #eef4f1;
    border-color: #cfe3d8;
}

.blog-cta-button-large {
    font-size: 1.05rem;
    padding: 14px 40px;
    border-radius: 28px;
}

.blog-cta-campaign .blog-cta-text {
    font-size: 1.1rem;
    max-width: 46ch;
    margin-left: auto;
    margin-right: auto;
}

/* Separado del cierre por una línea, para que se lea como una salida y no como
   una tercera opción junto a los botones. */
.blog-back-bottom {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #ecefed;
    text-align: center;
}

/* ── Móvil ───────────────────────────────────────────────────────────────── */

/* La tarjeta principal pasa a una columna por debajo de 768px. Entre 640 y 768
   las dos columnas dejaban la imagen en 270px de ancho, que ya no se lee como
   entrada principal. Una tableta en vertical tiene alto de sobra para la imagen
   ancha; el formato de dos columnas se reserva para donde escasea el alto. */
@media (max-width: 767.98px) {
    .blog-hero-card {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Objetivos táctiles. Los filtros son el elemento interactivo principal de la
   página y se quedaban en 34px de alto; 44 es la medida cómoda para un dedo.
   Se aplica por puntero grueso, no por ancho: un portátil táctil también lo
   necesita, y un móvil con teclado no. */
@media (pointer: coarse), (max-width: 767.98px) {
    /* El filtro se ve pequeño y se pulsa grande.

       Forzar 44px de alto real dejaba un botón hinchado y medio vacío alrededor
       de una letra de 12px. Aquí la píldora mide lo que pide su contenido y el
       ::after extiende el área sensible 7px por arriba y por abajo hasta los 44,
       sin dibujar nada.

       El row-gap sube a 16px por esto: con 8 los rectángulos invisibles de dos
       filas seguidas se solaparían y un toque cerca del borde activaría el
       filtro de al lado. */
    /* La fila sangra hasta el borde de la pantalla: así la píldora siguiente
       asoma cortada por el lado y se entiende que hay más. Si acabara en el
       margen del texto, parecería que se acaba ahí.

       Ya no hace falta separar las filas: solo hay una. */
    .blog-filters {
        gap: 8px;
        margin-left: -18px;
        margin-right: -18px;
        padding: 7px 18px;
    }

    .blog-filter {
        position: relative;
        padding: 5px 14px;
        font-size: 0.75rem;
    }

    .blog-filter::after {
        content: "";
        position: absolute;
        inset: -7px 0;
    }

    .blog-tag {
        padding: 4px 10px;
        font-size: 0.72rem;
    }

    .blog-back {
        display: inline-block;
        padding: 8px 0;
    }
}

@media (max-width: 640px) {
    .blog-band {
        padding: 92px 18px 24px;
    }

    .blog-page {
        padding: 28px 18px 60px;
    }

    .blog-post {
        padding-top: 70px;
    }

    /* Los artículos de la lista conservan la miniatura al lado, pequeña. Si se
       apilaran como la principal, todas las imágenes tendrían el mismo tamaño y
       la jerarquía que da la tarjeta principal desaparecería justo en la
       pantalla donde más falta hace. Es el patrón de portada de periódico:
       apertura grande arriba, teletipos debajo. */
    .blog-card {
        grid-template-columns: 104px 1fr;
        gap: 12px;
        align-items: start;
    }

    .blog-card-image {
        aspect-ratio: 1 / 1;
    }

    /* A 104px de miniatura, el resumen se queda en una columna demasiado
       estrecha para leerse. El titular y las etiquetas bastan para decidir si
       se entra; la principal sí lo conserva. */
    .blog-card .blog-card-summary {
        display: none;
    }

    .blog-card-title {
        font-size: 1.05rem;
    }

    /* Más pequeñas que las de la principal: acompañan a un titular de lista, no
       al de apertura. La jerarquía también se lleva en los detalles.

       El min-height es obligatorio, no estético: son enlaces, y con solo el
       relleno se quedaban en 22px, por debajo de los 24 que exige la WCAG 2.5.8
       para algo que se pulsa. La letra puede encoger; el área que toca el dedo,
       no. */
    .blog-card .blog-tag {
        font-size: 0.68rem;
        padding: 3px 9px;
        min-height: 24px;
        display: inline-flex;
        align-items: center;
    }

    .blog-cta {
        padding: 22px 18px;
    }
}