/* ==========================================================================
   LAYOUT.CSS
   Sistema de grilla y columnas. Capa puramente estructural: no define
   color ni tipografía, solo cómo se distribuyen los bloques en pantalla.

   Uso básico:
     <div class="grid grid--cols-12">
       <div class="col-span-6 col-span-md-12">...</div>
       <div class="col-span-6 col-span-md-12">...</div>
     </div>

   Mobile-first: por defecto cada .col-span-* ocupa el ancho definido;
   los modificadores -sm/-md/-lg reducen la cantidad de columnas que
   ocupa el bloque a partir de ESE breakpoint hacia abajo en pantalla
   (ver comentario en cada media query).
   ========================================================================== */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gutter);
}

@media (min-width: 1024px) {
  .grid {
    gap: var(--grid-gutter-lg);
  }
}

/* Variantes de número de columnas explícito, para grillas que no
   necesitan las 12 columnas completas (ej. una grilla de 3 tarjetas) */
.grid--cols-2  { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3  { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4  { grid-template-columns: repeat(4, 1fr); }
.grid--cols-6  { grid-template-columns: repeat(6, 1fr); }
.grid--cols-12 { grid-template-columns: repeat(12, 1fr); }

/* Todas las variantes de columnas explícitas colapsan a 1 columna en
   mobile por defecto — cada sección puede sobreescribir esto si
   necesita un comportamiento distinto en su propio archivo CSS. */
@media (max-width: 767.98px) {
  .grid--cols-2,
  .grid--cols-3,
  .grid--cols-4,
  .grid--cols-6 {
    grid-template-columns: 1fr;
  }
}

/* --- col-span-* (para grid--cols-12) ------------------------------------ */

.col-span-1  { grid-column: span 1; }
.col-span-2  { grid-column: span 2; }
.col-span-3  { grid-column: span 3; }
.col-span-4  { grid-column: span 4; }
.col-span-5  { grid-column: span 5; }
.col-span-6  { grid-column: span 6; }
.col-span-7  { grid-column: span 7; }
.col-span-8  { grid-column: span 8; }
.col-span-9  { grid-column: span 9; }
.col-span-10 { grid-column: span 10; }
.col-span-11 { grid-column: span 11; }
.col-span-12 { grid-column: span 12; }

/* Modificadores responsive — "en tablet, ocupa N columnas" */
@media (max-width: 1023.98px) {
  .col-span-md-4  { grid-column: span 4; }
  .col-span-md-6  { grid-column: span 6; }
  .col-span-md-12 { grid-column: span 12; }
}

/* "en mobile, ocupa N columnas" (normalmente 12, es decir, ancho completo) */
@media (max-width: 767.98px) {
  .col-span-sm-12 { grid-column: span 12; }
}

/* --------------------------------------------------------------------
   CONTENEDORES — variantes de ancho
   .container ya está definido en components.css con --container-max.
   Estas variantes cubren los casos donde una sección necesita ser
   más angosta (texto largo) o angosta al máximo (formularios).
   -------------------------------------------------------------------- */

.container--narrow {
  max-width: 860px;
}

.container--form {
  max-width: 560px;
}

/* --------------------------------------------------------------------
   UTILIDADES DE FLEX
   Para alineaciones puntuales que no ameritan una grilla completa
   (ej. header, footer bottom row — ya usadas en header-footer.css).
   -------------------------------------------------------------------- */

.flex-row {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------
   ESPACIADO VERTICAL DE SECCIÓN
   Todo <section> de contenido del sitio debe usar una de estas dos
   clases para su padding vertical — nunca un valor suelto. Mantiene
   el ritmo vertical consistente en todo el sitio (ver README).
   -------------------------------------------------------------------- */

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

.section-padding--lg {
  padding-block: var(--space-10);
}

@media (max-width: 767.98px) {
  .section-padding {
    padding-block: var(--space-7);
  }
  .section-padding--lg {
    padding-block: var(--space-8);
  }
}