/**
 * Estilos para el cuerpo de las noticias (contenido clásico de WordPress).
 *
 * Las noticias antiguas se editaron con el editor clásico: párrafos e imágenes
 * "size-large" / "size-full" (o <figure class="wp-caption">) sueltas, una tras
 * otra, sin bloques del tema ni galería. Por eso en el front se apilaban a lo
 * alto.
 *
 * El filtro PHP `fundacion_iris\blog\group_classic_images` envuelve al vuelo cada
 * grupo de imágenes consecutivas en un <div class="single-post__gallery">, y
 * aquí las mostramos como galería en cuadrícula. También se centra el cuerpo con
 * el mismo ancho que los bloques del tema.
 *
 * Alcance: todo está limitado a .single-post__content. No afecta al hero (bloque
 * del tema) ni a los bloques nuevos.
 */

.single-post__content {
    --single-post-gallery-gap: clamp(0.75rem, 0.3rem + 1.2vw, 1.5rem);
    --single-post-gallery-columns: 3;

    max-width: var(--wp--custom--width--03);
    margin-inline: auto;
    padding-inline: var(--wp--custom--gap--page);
    margin-block: clamp(2.5rem, 0.714rem + 4.762vw, 5rem);
}

.single-post__content > p {
    margin-block: 0 1em;
}

/* Galería: grupo de imágenes clásicas envueltas por el filtro PHP. */
.single-post__gallery {
    display: grid;
    grid-template-columns: repeat(var(--single-post-gallery-columns), minmax(0, 1fr));
    gap: var(--single-post-gallery-gap);
    margin-block: clamp(1.5rem, 0.429rem + 2.857vw, 3rem);
}

.single-post__gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.single-post__gallery .wp-caption {
    max-width: none; /* WordPress fija un width inline; lo cede a la cuadrícula */
    width: auto;
    margin: 0;
}

.single-post__gallery .wp-caption-text {
    font-size: 12px;
    color: var(--wp--preset--color--alternative);
    margin-block-start: 8px;
    text-align: center;
}

/* Imagen clásica suelta (una sola, sin grupo): la limitamos para que no se
   desborde y quede consistente con el ancho del cuerpo. */
.single-post__content > img.size-large,
.single-post__content > img.size-full,
.single-post__content > .wp-caption {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
    margin-block: clamp(1.5rem, 0.429rem + 2.857vw, 3rem);
}

.single-post__content > .wp-caption img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    display: block;
}

/* Vídeo auto-alojado (wp-video) y embeds a ancho de columna. */
.single-post__content .wp-video,
.single-post__content video,
.single-post__content iframe {
    max-width: 100%;
    width: 100%;
    border-radius: 16px;
}

@media (max-width: 800px) {
    .single-post__content {
        --single-post-gallery-columns: 2;
    }
}

@media (max-width: 500px) {
    .single-post__content {
        --single-post-gallery-columns: 1;
    }
}