/* ==========================================================================
   LAYOUT — DIGART Studio
   Infraestructura oficial del Sistema de Layout (UI Design System, Cap. 4).

   Este archivo consume exclusivamente los Design Tokens declarados en
   tokens.css. No define componentes, Patterns, páginas, Hero, Home,
   navegación ni color.

   Nota técnica: las Custom Properties no pueden evaluarse dentro de la
   condición de un @media query; los umbrales responsive de este archivo
   reproducen en valor literal los tokens --breakpoint-tablet y
   --breakpoint-mobile de tokens.css, indicados en cada bloque.
   ========================================================================== */

/* --------------------------------------------------------------------
   1. Full Width Container
   Contenedor fluido para secciones inmersivas (Cap. 4.2). No incluye
   contenido propio: los Patterns anidan su Content Container dentro.
   -------------------------------------------------------------------- */
.l-full-width {
  width: 100%;
}

/* --------------------------------------------------------------------
   2. Content Container
   Contenedor de ancho máximo, centrado, para contenido editorial.
   El ancho máximo reutiliza el token --breakpoint-desktop como
   referencia oficial de ancho de lectura; los márgenes laterales se
   resuelven exclusivamente mediante los tokens de espaciado (Cap. 4.2).
   -------------------------------------------------------------------- */
.l-container {
  width: 100%;
  max-width: var(--breakpoint-desktop);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* --------------------------------------------------------------------
   3. Grid oficial de 12 columnas (CSS Grid nativo)
   -------------------------------------------------------------------- */
.l-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-5);
}

/* --------------------------------------------------------------------
   4. Separación entre columnas
   Resuelta mediante column-gap/row-gap del Grid (3) y adaptada por
   dispositivo en el bloque Responsive (8).
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   5. Utilidades estructurales — columnas, filas y alineación
   -------------------------------------------------------------------- */
.l-col-1 { grid-column: span 1; }
.l-col-2 { grid-column: span 2; }
.l-col-3 { grid-column: span 3; }
.l-col-4 { grid-column: span 4; }
.l-col-5 { grid-column: span 5; }
.l-col-6 { grid-column: span 6; }
.l-col-7 { grid-column: span 7; }
.l-col-8 { grid-column: span 8; }
.l-col-9 { grid-column: span 9; }
.l-col-10 { grid-column: span 10; }
.l-col-11 { grid-column: span 11; }
.l-col-12 { grid-column: span 12; }

/* Columna que ocupa la totalidad del Grid activo, independientemente
   del número de columnas vigente en el breakpoint (12/8/4). */
.l-col-full {
  grid-column: 1 / -1;
}

/* Fila: agrupa columnas dentro de una sección manteniendo la misma
   escala de Grid y de espaciado. */
.l-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-5);
}

/* Reordenación de columnas para la alternancia de posición entre
   contenido y recurso visual (Cap. 4.3), sin duplicar estructura. */
.l-order-first {
  order: -1;
}

.l-order-last {
  order: 1;
}

/* Alineación dentro del Grid/Row. */
.l-items-start { align-items: start; }
.l-items-center { align-items: center; }
.l-items-end { align-items: end; }
.l-items-stretch { align-items: stretch; }

.l-justify-start { justify-content: start; }
.l-justify-center { justify-content: center; }
.l-justify-end { justify-content: end; }
.l-justify-between { justify-content: space-between; }

.l-self-start { align-self: start; }
.l-self-center { align-self: center; }
.l-self-end { align-self: end; }

/* --------------------------------------------------------------------
   6. Espaciado oficial entre secciones
   -------------------------------------------------------------------- */
.l-section {
  padding-block: var(--space-8);
}

/* --------------------------------------------------------------------
   7. Reglas Desktop First
   Los bloques anteriores representan la referencia Desktop; la
   adaptación hacia Laptop, Tablet y Mobile se resuelve exclusivamente
   en el bloque Responsive (8), sin sistemas de layout alternativos.
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   8. Adaptación responsive (breakpoints oficiales de tokens.css)
   -------------------------------------------------------------------- */

/* --breakpoint-tablet: 768px */
@media (max-width: 768px) {
  .l-grid,
  .l-row {
    grid-template-columns: repeat(8, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-4);
  }

  .l-container {
    padding-inline: var(--space-4);
  }

  .l-section {
    padding-block: var(--space-6);
  }

  /* Remapeo oficial de spans (corrección de infraestructura RWD-08).
     Las utilidades .l-col-* declaran sus spans en proporción al Grid
     Desktop de 12 columnas; sin remapeo, sobre las plantillas reducidas
     (8/4) esos spans producen envolturas de ancho parcial, layouts 2+1
     accidentales y pistas implícitas fuera de la plantilla (spans
     mayores que el Grid activo). A partir de este umbral, toda columna
     ocupa la totalidad del Grid activo (mismo comportamiento que
     .l-col-full): las composiciones editoriales Desktop se linealizan
     en una sola columna, criterio ya aprobado en los Patterns adaptados
     (Call To Action RWD-05, Footer RWD-06), sin obligar a cada Pattern
     a declarar media queries propias. La franja de móviles reales
     376px–430px opera dentro de este mismo régimen, por lo que queda
     cubierta sin alterar los breakpoints oficiales. El bloque Mobile
     (≤375px) hereda este remapeo y solo compacta gaps y paddings. */
  .l-col-1,
  .l-col-2,
  .l-col-3,
  .l-col-4,
  .l-col-5,
  .l-col-6,
  .l-col-7,
  .l-col-8,
  .l-col-9,
  .l-col-10,
  .l-col-11,
  .l-col-12 {
    grid-column: 1 / -1;
  }
}

/* --breakpoint-mobile: 375px */
@media (max-width: 375px) {
  .l-grid,
  .l-row {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--space-3);
    row-gap: var(--space-3);
  }

  .l-container {
    padding-inline: var(--space-3);
  }

  .l-section {
    padding-block: var(--space-5);
  }
}

/* --------------------------------------------------------------------
   9. Infraestructura reutilizable
   Components y Patterns consumen estas clases estructurales (Full
   Width, Content Container, Grid, columnas, filas y alineación) sin
   redefinir un sistema de layout paralelo.
   -------------------------------------------------------------------- */