/* ============================================================
   SINGLE RECURSO (página individual de cada guía) — opensalud Style
   Fuentes: Space Grotesk (titulares) + Inter (texto)
   Prefijo: .sr-
   ============================================================ */

/* Mismas medidas y tipografía que blocks/texto-imagen (col-text/col-image,
   50/50, gap 60px, tope 1320px/1600px según ancho de pantalla), con nombres
   de clase propios (.sr-*) — mismo criterio ya usado en index.php/arc-* y
   page-recursos.php/pr-* frente a sus equivalentes de bloque. Se mantiene el
   padding superior porque esta plantilla no tiene una sección hero propia
   encima (esta es la primera sección de la página, justo bajo el menú).
   Mismo hueco superior que .single-entry de single.css (118px / 50px). */
.sr-article {
    padding-block: 118px var(--wp--custom--section--y);
    /* A sangre como .single-entry: anula el root-padding de 16px que el tema
       aplica a los contenedores de nivel raíz — si no, el contenido queda 16px
       más estrecho y desplazado respecto a single en todos los anchos salvo
       el que casualmente compense con los márgenes automáticos de .sr-layout. */
    padding-inline: 0;
}

/* Mismo modelo de gutter que .entry-header-layout en single.css: el padding
   lateral (60 / 20px) va DENTRO de la caja centrada y limitada a 1320/1600px,
   no en el contenedor a sangre — así el ancho real de las columnas y el borde
   del título coinciden con single (antes .sr-article llevaba el padding fuera
   del tope, dejando el contenido ~120px más ancho y desplazado). */
.sr-layout {
    /* El tope incluye el gutter, como el header: el contenido llega a 1600px
       y su borde coincide con el del header en todos los anchos. */
    max-width: calc(var(--wp--custom--layout--content-size) + 2 * var(--wp--custom--section--x));
    margin: 0 auto;
    padding-inline: var(--wp--custom--section--x);
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 60px;
}

.sr-content {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 24px;
}

@media (max-width: 1440px) {
    .sr-content {
        max-width: 650px;
    }
}

@media (min-width: 1920px) {
    .sr-content {
        max-width: 650px;
    }
}

.sr-tag {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--wp--preset--color--transparent--blue);
    border-radius: var(--wp--custom--radius--full);
    background: var(--wp--preset--color--transparent--blue);
    color: var(--wp--preset--color--main-blue);
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    margin: 18px 0px 0px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sr-title {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size-h2);
    line-height: var(--wp--preset--line-height-h2);
    font-weight: var(--wp--custom--weight-500);
    color: var(--wp--preset--color--black);
    text-wrap: balance;
}

.sr-descripcion {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--preset--line-height--medium);
    font-weight: var(--wp--custom--weight-400);
    color: var(--wp--preset--color--black);
    text-wrap: balance;
}

/* Lista "Encontrarás" (sin título) — mismo estilo que .texto-image-list. */
.sr-list {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.sr-list-item {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-400);
    color: var(--wp--preset--color--black);
}

.sr-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--white-02);
    color: var(--wp--preset--color--black);
}

.sr-list-icon.is-check svg {
    width: 14px;
    height: 14px;
}

/* Imagen a sangre en su propia columna, no enmarcada — mismo tratamiento que
   .image-texto-image de texto-imagen (sin bordes redondeados). */
.sr-media {
    width: 50%;
    position: relative;
}

.sr-media img {
    width: 100%;
    display: block;
    min-height: 495px;
    object-fit: cover;
}

/* .sr-cta hereda relleno azul, píldora, MAYÚSCULAS, hover (-2px + azul
   oscuro) y foco visible de "Botón unificado" (assets/css/base.css).
   Aquí solo queda la animación de la flecha. */
.sr-button-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.sr-cta:hover .sr-button-arrow {
    transform: translateX(4px);
}

@media (min-width: 1441px) {
    .sr-media {
        max-width: 700px;
    }

    .sr-media img {
        height: 604px;
    }
}

/* 1230px, no 920px: mismo punto en el que el menú cambia a hamburguesa, para
   que toda la familia de bloques/páginas de dos columnas pase a móvil a la
   vez que la navegación (ver blocks/texto-imagen). */
@media (max-width: 1230px) {
    .sr-layout {
        flex-direction: column-reverse;
        row-gap: 12px;
    }

    .sr-content,
    .sr-media {
        width: 100%;
        max-width: none;
    }

    .sr-title {
        font-size: var(--wp--preset--font-size-h4);
    }
}

/* 920px: mismo punto que single.css (--pad-h / --pad-top-hero / --min-height-image)
   — el hueco superior baja a 50px, el padding lateral de 60px a 20px y el alto
   mínimo de la imagen de 495px a 349px. Va aparte del breakpoint de 1230px
   (colapso a una columna) a propósito. */
@media (max-width: 920px) {
    .sr-article {
        padding-block: 50px var(--wp--custom--section--y-compact-mobile);
    }

    .sr-layout {
        padding-inline: var(--wp--custom--section--x-mobile);
    }

    .sr-media img {
        min-height: 349px;
    }
}

@media (max-width: 768px) {
    .sr-tag {
        text-wrap: balance;
    }
}