/* ==========================================================================
   layout.css
   --------------------------------------------------------------------------
   Estructura de página: contenedores, rejillas, cabecera, pie y secciones.
   Define el "esqueleto" — dónde van las cosas, no qué aspecto tienen.

   Se carga DESPUÉS de base.css y ANTES de components.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   PATRÓN DE ANCHOS DEL PROYECTO
   --------------------------------------------------------------------------
   Regla general: EL FONDO VA A ANCHO COMPLETO, EL CONTENIDO VA CONTENIDO.

   Una sección a ancho completo (hero, banda de color, imagen de fondo, vídeo)
   se marca con .gt-section-fullwidth: su fondo llega de borde a borde en
   móvil, tablet y desktop, sin márgenes ni padding laterales.

   Su contenido de texto NUNCA es hijo directo de esa sección: se envuelve
   siempre en .gt-container, que lo limita a --content-max (1280px), lo centra
   y le aplica el margen lateral del breakpoint. Así el texto no queda pegado
   a los bordes en pantallas grandes ni se estira sin límite.

   Estructura HTML prevista:

     <section class="gt-section-fullwidth" style="background: …">
       <div class="gt-container">
         … contenido de texto, máx. 1280px …
       </div>
     </section>
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   .gt-container
   Contenedor central del contenido. Mobile-first: en móvil solo aplica el
   margen lateral reducido; a partir de 768px crece el margen lateral y se
   limita el ancho a --content-max, centrado.
   -------------------------------------------------------------------------- */

.gt-container {
  width: 100%;
  padding-inline: var(--side-margin-mobile);
}

@media (min-width: 768px) {
  .gt-container {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: var(--side-margin);
  }
}


/* --------------------------------------------------------------------------
   .gt-section-fullwidth
   Sección a ancho completo del viewport.

   TÉCNICA ELEGIDA: width 100% (no 100vw).

   Motivo: 100vw incluye el ancho de la barra de desplazamiento vertical. En
   desktop con scrollbar clásica (Windows), 100vw es ~15px más ancho que el
   área visible, lo que provoca scroll horizontal en toda la página — un fallo
   que además no se reproduce en Mac ni en las herramientas de desarrollo, así
   que se detecta tarde. Con width 100% la sección hereda el ancho real de su
   padre, sin desbordar nunca.

   CONDICIÓN: la sección debe colgar de un padre que ya sea full-width (el
   body, o un wrapper sin max-width). Es el caso normal si la sección se
   inserta al nivel superior de la plantilla. Si por la estructura del tema
   padre quedase dentro de un contenedor ya limitado en ancho, usar además el
   modificador --breakout de abajo.
   -------------------------------------------------------------------------- */

.gt-section-fullwidth {
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}


/* --------------------------------------------------------------------------
   .gt-section-fullwidth--breakout
   Modificador OPCIONAL: solo para cuando la sección esté atrapada dentro de
   un contenedor con max-width y no se pueda mover en la plantilla.

   Rompe hacia fuera del padre con márgenes negativos calculados. Sí usa
   unidades vw, con la salvedad del scrollbar descrita arriba; por eso la
   regla `overflow-x: clip` en html es su compañera obligatoria (ver más
   abajo). Preferir siempre mover la sección en la plantilla antes que
   recurrir a este modificador.
   -------------------------------------------------------------------------- */

.gt-section-fullwidth--breakout {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Compañera obligatoria del modificador --breakout: evita el scroll
   horizontal que introducen las unidades vw cuando hay barra de
   desplazamiento visible.
   Se usa `clip` y no `hidden` a propósito: `hidden` crea un contexto de
   scroll que rompe position: sticky en toda la página. */
html {
  overflow-x: clip;
}


/* --------------------------------------------------------------------------
   .gt-page-body
   Cuerpo de una página sencilla: la que solo tiene cabecera y texto, como las
   legales. El mismo ritmo vertical que el listado de noticias, para que una
   sección y otra no respiren distinto.
   -------------------------------------------------------------------------- */

.gt-page-body {
  padding-block: 48px;
}

@media (min-width: 768px) {

  .gt-page-body {
    padding-block: 64px;
  }

}