/* ================================================
   VORTICE CSS — Grid System
   v1.0
   ================================================

   Utility-first. Sin BEM. Cero valores hardcodeados
   — todo spacing viene de tokens.css.

   REGLA DE ARCHIVO (una línea, sin excepciones):
   · grid.css    → estructura pura: columnas, gaps, alineación
   · layout.css  → patrones nombrados del proyecto: header,
                   footer, hero, secciones específicas

   CÓMO PORTAR A OTRO PROYECTO:
   1. Copiar este archivo tal cual
   2. Asegurar que tokens.css esté cargado antes
   3. No requiere ninguna otra modificación

   ÍNDICE:
   1. Container
   2. Grid
   3. Auto-grid (WooCommerce-ready)
   4. Flex
   5. Stack
   6. Gap
   7. Responsive (md: 768px · lg: 1024px)
   ================================================ */


/* ------------------------------------------------
   1. CONTAINER
   Padding responsive incorporado — no requiere
   clases modificadoras para funcionar en mobile.
   ------------------------------------------------ */

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: var(--space-sm);   /* 16px — mobile  */
}

@media (min-width: 768px) {
  .container { padding-inline: var(--space-lg); }  /* 32px — tablet  */
}

@media (min-width: 1024px) {
  .container { padding-inline: var(--space-xl); }  /* 48px — desktop */
}

.container-narrow  { max-width: 768px;  }   /* formularios, checkout   */
.container-content { max-width: 65ch;   }   /* texto corrido / prose   */
.container-wide    { max-width: 1440px; }   /* secciones full-bleed    */


/* ------------------------------------------------
   2. GRID
   Columnas 1–6. Si necesitás más, es trabajo
   de layout.css, no de una utilidad.
   ------------------------------------------------ */

.grid { display: grid; }

/* Columnas */
.cols-1 { grid-template-columns: repeat(1, 1fr); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cols-5 { grid-template-columns: repeat(5, 1fr); }
.cols-6 { grid-template-columns: repeat(6, 1fr); }

/* Span — cuántas columnas ocupa un ítem */
.span-1    { grid-column: span 1; }
.span-2    { grid-column: span 2; }
.span-3    { grid-column: span 3; }
.span-4    { grid-column: span 4; }
.span-5    { grid-column: span 5; }
.span-6    { grid-column: span 6; }
.span-full { grid-column: 1 / -1; }

/* Row span */
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }


/* ------------------------------------------------
   3. AUTO-GRID
   Responsive sin definir columnas explícitas.
   El browser calcula cuántas caben según el ancho.
   Patrón principal para grillas de productos.

   auto-grid    → mínimo 280px — productos estándar
   auto-grid-sm → mínimo 180px — thumbnails, variantes
   auto-grid-lg → mínimo 380px — cards destacadas
   ------------------------------------------------ */

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.auto-grid-sm {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.auto-grid-lg {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
}

/* WooCommerce — ul.products usa auto-grid por defecto.
   Override aquí para no modificar los templates de WC.   */
ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}


/* ------------------------------------------------
   4. FLEX
   ------------------------------------------------ */

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

/* Alineación vertical (align-items) */
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

/* Alineación horizontal (justify-content) */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

/* Crecimiento */
.flex-1    { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: none; }


/* ------------------------------------------------
   5. STACK
   Columna vertical con gap uniforme entre hijos.
   Patrón para listas de contenido, formularios,
   secciones apiladas.

   Uso: <div class="stack"> — gap-md por defecto
        <div class="stack stack-sm"> — gap-sm
        <div class="stack stack-lg"> — gap-lg
   ------------------------------------------------ */

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

.stack > * + *    { margin-top: var(--space-md); }
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-lg > * + * { margin-top: var(--space-lg); }


/* ------------------------------------------------
   6. GAP
   Compartido entre .grid y .flex.
   Vinculado directamente a tokens.css — si cambia
   el token, cambia el gap sin tocar este archivo.

   gap-{escala}   → gap en ambos ejes
   gap-x-{escala} → solo column-gap
   gap-y-{escala} → solo row-gap
   ------------------------------------------------ */

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

.gap-x-xs { column-gap: var(--space-xs); }
.gap-x-sm { column-gap: var(--space-sm); }
.gap-x-md { column-gap: var(--space-md); }
.gap-x-lg { column-gap: var(--space-lg); }

.gap-y-xs { row-gap: var(--space-xs); }
.gap-y-sm { row-gap: var(--space-sm); }
.gap-y-md { row-gap: var(--space-md); }
.gap-y-lg { row-gap: var(--space-lg); }


/* ------------------------------------------------
   7. RESPONSIVE
   Mobile-first. Solo los patrones que un proyecto
   e-commerce / landing realmente usa.
   Breakpoints definidos en tokens.css Sección 3.

   Prefijo md- → min-width: 768px
   Prefijo lg- → min-width: 1024px
   ------------------------------------------------ */

@media (min-width: 768px) {

  /* Grid */
  .md-cols-1 { grid-template-columns: repeat(1, 1fr); }
  .md-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md-cols-4 { grid-template-columns: repeat(4, 1fr); }

  /* Span */
  .md-span-1    { grid-column: span 1; }
  .md-span-2    { grid-column: span 2; }
  .md-span-3    { grid-column: span 3; }
  .md-span-full { grid-column: 1 / -1; }

  /* Flex */
  .md-flex     { display: flex; }
  .md-flex-row { flex-direction: row; }
  .md-flex-col { flex-direction: column; }
}

@media (min-width: 1024px) {

  /* Grid */
  .lg-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .lg-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lg-cols-4 { grid-template-columns: repeat(4, 1fr); }
  .lg-cols-6 { grid-template-columns: repeat(6, 1fr); }

  /* Span */
  .lg-span-1    { grid-column: span 1; }
  .lg-span-2    { grid-column: span 2; }
  .lg-span-3    { grid-column: span 3; }
  .lg-span-4    { grid-column: span 4; }
  .lg-span-full { grid-column: 1 / -1; }

  /* Flex */
  .lg-flex-row { flex-direction: row; }
  .lg-flex-col { flex-direction: column; }
}