/* ============================================================================
   TAMBIÉN PUEDES EMPEZAR POR AQUÍ · los cuatro recursos
   ----------------------------------------------------------------------------
   Nuestra capa. Manda sobre .c-resource de home.css (111-133), que queda muerta.

   Diseño: archivo de Figma, nodo 119-117, medido pieza a pieza.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   NO ES UNA REJILLA DE 2×2, Y ESA ES TODA LA GRACIA.
   ----------------------------------------------------------------------------
   Medido en el archivo, con la sección a 2732 de ancho:

       imagen 1 (izq)    x  210 → 1150     y  559 → 1768
       texto  1 (der)    x 1387 → 2327     y  645 → 1137
       imagen 2 (der)    x 1582 → 2522     y 1369 → 2578
       texto  2 (izq)    x  405 → 1345     y 1854 → 2438

   La imagen 1 acaba en y=1768 y la imagen 2 ya ha empezado en y=1369: se
   solapan 399 px. No son dos filas, son dos columnas que fluyen cada una por su
   cuenta, y como la imagen es alta y el texto corto, se entrelazan.

   Se resuelve dando a cada recurso DOS franjas de rejilla: la imagen ocupa las
   dos y el texto solo una. Con eso, la colocación automática mete el texto del
   recurso siguiente en la franja libre, al lado de la imagen anterior:

       imagen 1  col 1, franjas 1-2      texto 1  col 2, franja 1
       imagen 2  col 2, franjas 2-3      texto 2  col 1, franja 3
       imagen 3  col 1, franjas 4-5      texto 3  col 2, franja 4
       …

   Alterna sola, con dos recursos o con seis. No hay que numerar nada.

   ⚠️ Los cuatro recursos tienen que estar en la MISMA sección. Antes era una
   <section class="cmp"> por recurso, y dos secciones hermanas no se pueden
   solapar jamás: .cmp declara container-type, que hace de cada una un contexto
   de apilado cerrado. Es el mismo muro que nos encontramos con el trazo.
   ------------------------------------------------------------------------- */
.c-recursos__rejilla {
  display: grid;
  gap: var(--wp--preset--spacing--60);
}

.c-recurso__foto {
  margin: 0;
}

.c-recurso__foto img {
  width: 100%;
  height: auto;
  /* 940 × 1209 en el archivo. */
  aspect-ratio: 940 / 1209;
  object-fit: cover;
}

.c-recurso__texto {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--40);
  align-items: flex-start;
}

.c-recurso__texto > * {
  margin: 0;
}

.c-recurso__titulo {
  font-family: var(--wp--preset--font-family--display);
  font-weight: var(--wp--custom--typography--weight--regular);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: var(--wp--custom--typography--leading--h2);
  letter-spacing: var(--wp--custom--typography--tracking--display);
  color: var(--wp--preset--color--primary);
}

.c-recurso__texto p {
  max-width: var(--wp--custom--layout--measure);
}

@container (min-width: 64rem) {
  .c-recursos__rejilla {
    grid-template-columns: 1fr 1fr;
    /* 432 de hueco sobre 2312 de contenido. */
    column-gap: 18.7%;
    /* ⚠️ EL HUECO ENTRE FRANJAS DECIDE CUÁNTO SE MONTAN LAS IMÁGENES, y por eso
       no es un valor cualquiera.

       La imagen ocupa dos franjas y el texto una, así que lo que asoma de la
       imagen por debajo del texto es:  alto de imagen − (alto del texto + hueco).
       Subir el hueco baja el solapamiento.

       Medido a 1440: la imagen mide 644, la primera franja 314. Con el hueco en
       32 el solapamiento salía 298 —el 46% de la imagen— y el archivo pide 399
       sobre 1209, o sea el 33%. Hacían falta unos 117 de hueco; el paso más alto
       de la escala es 104 y deja el ratio en 0,35. La diferencia que queda es
       menor que la que ya provocan los cuatro textos entre ellos, que miden 282,
       332, 252 y 369.

       Se usa el paso de la escala y no 117 a pelo: la escala la manda theme.json
       y un valor suelto aquí se desalinea en cuanto alguien la toque. */
    row-gap: var(--wp--preset--spacing--80);
    align-items: start;
  }

  /* Las dos líneas que hacen el entrelazado. */
  .c-recurso__foto {
    grid-row: span 2;
  }

  .c-recurso__texto {
    grid-row: span 1;
  }

  /* ------------------------------------------------------------------------
     LA SANGRÍA HACIA EL CENTRO, que es lo otro que se ve raro y es el diseño.

     Las dos imágenes tocan el margen exterior: 210 a la izquierda y 210 a la
     derecha, simétrico. Los textos van 195 px METIDOS hacia el centro respecto
     a la imagen de su lado — el 20,7% del ancho de una columna.

     O sea que la imagen del cuarto cuadrante no está desplazada por capricho:
     está donde le toca, en la vora, y es el TEXTO el que se mete.

     Va con `inset` sobre un elemento en posición relativa, no con margen: así
     el texto se desplaza sin cambiar de tamaño ni mover las franjas de la
     rejilla, que es lo que sostiene el entrelazado de arriba.

     Se puede afinar por recurso desde el editor sobreescribiendo la variable.
     ---------------------------------------------------------------------- */
  .c-recurso__texto {
    position: relative;
  }

  .c-recurso__texto--izq {
    inset-inline-start: var(--cds-recurso-sangria, 20.7%);
  }

  .c-recurso__texto--der {
    inset-inline-end: var(--cds-recurso-sangria, 20.7%);
  }

  /* ------------------------------------------------------------------------
     Y LA FOTO SE PUEDE EMPUJAR IGUAL, hacia la vora o hacia el centro.
     ------------------------------------------------------------------------
     Se escoge en la barra lateral, en Estilos: «Hacia la vora» o «Hacia el
     centro». Sin escoger nada la foto se queda donde está, que es la rejilla
     pareja de siempre. Con ellos se puede desparejar a mano y componer el
     desequilibrio del diseño recurso a recurso.

     ⚠️ NO se usa la alineación del núcleo. `align: left|right` en core/image
     hace FLOTAR la imagen, la saca de su franja de rejilla y deshace el
     entrelazado entero. Un estilo de bloque solo añade una clase.

     «La vora» no es siempre el mismo lado: para la foto de la izquierda es la
     izquierda y para la de la derecha, la derecha. De ahí las cuatro reglas.

     ⚠️ EL EMPUJE ESTÁ ACOTADO PARA QUE NUNCA TOQUE EL TEXTO. Hacia dentro el
     hueco libre entre la foto y el texto de enfrente es el canal (18,7%) menos
     la sangría del texto (20,7% de columna ≈ 8,4% de rejilla), o sea un 10%
     largo de la rejilla; el empuje es del 12% de la COLUMNA, que es la mitad de
     eso. Hacia fuera el tope es el margen de .cmp__inner, que a 1440 son 104 px
     contra los ~60 que mueve.

     Va con `inset` sobre posición relativa, igual que el texto: la foto se
     desplaza sin cambiar de tamaño ni mover las franjas, así que el
     entrelazado de arriba no se entera.
     ---------------------------------------------------------------------- */
  .c-recurso__foto {
    position: relative;
    --cds-foto-empuje: 12%;
  }

  .c-recurso__foto--izq.is-style-hacia-la-vora {
    inset-inline-start: calc(-1 * var(--cds-foto-empuje));
  }

  .c-recurso__foto--izq.is-style-hacia-el-centro {
    inset-inline-start: var(--cds-foto-empuje);
  }

  .c-recurso__foto--der.is-style-hacia-la-vora {
    inset-inline-end: calc(-1 * var(--cds-foto-empuje));
  }

  .c-recurso__foto--der.is-style-hacia-el-centro {
    inset-inline-end: var(--cds-foto-empuje);
  }
}

/* ----------------------------------------------------------------------------
   La newsletter es un recurso más, con formulario en vez de enlace.
   ----------------------------------------------------------------------------
   ⚠️ EL CAMPO Y EL BOTÓN VAN SIEMPRE UNO DEBAJO DEL OTRO.

   componentes.css lo declara `flex-wrap: wrap` con el campo en `flex: 1 1 14rem`,
   así que en cuanto hay sitio se ponen en fila. Eso era razonable cuando la
   newsletter ocupaba una sección entera a lo ancho; dentro de una columna de la
   rejilla queda un campo estrecho pegado a un botón ancho, y se ve mal.

   `flex-direction: column` gana sin tocar la librería, que es la regla de esta
   capa. El botón deja de estirarse a lo ancho con `align-self`.
   ------------------------------------------------------------------------- */
.c-recurso__texto .c-news__form {
  width: 100%;
  max-width: var(--wp--custom--layout--measure);
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--wp--preset--spacing--40);
}

.c-recurso__texto .c-news__form .c-field {
  flex: 0 0 auto;
  width: 100%;
}

.c-recurso__texto .c-news__form .c-btn {
  align-self: flex-start;
}

/* ----------------------------------------------------------------------------
   En móvil, cada foto tiene que leerse con SU texto.
   ----------------------------------------------------------------------------
   En una columna el orden es foto, su texto, foto, su texto… y con un hueco
   igual para todos pasaba lo contrario de lo que hace falta: medido a 375, de la
   foto a su propio texto había 79 px —los 48 del hueco más el medio interlineado
   del titular— y del texto a la foto SIGUIENTE, 48. Cada foto quedaba más lejos
   de lo suyo que de lo de al lado, y los pares no se leían como pares.

   Se aprieta el hueco general y se separa cada foto de la anterior, menos la
   primera. La cuenta queda en unos 43 dentro del par y 84 entre pares.
   ------------------------------------------------------------------------- */
@container (max-width: 63.99rem) {
  .c-recursos__rejilla {
    row-gap: var(--wp--preset--spacing--30);
  }

  .c-recurso__foto:not(:first-child) {
    margin-top: var(--wp--preset--spacing--70);
  }
}