/**
 * Dinnup Layout System — Nível Shopify
 * Tokens de layout, grid inteligente, containers aninhados, spacing por escala.
 * Compatível com a engine atual (dinnup-container, dinnup-section).
 */

/* ========== 1. TOKENS DE LAYOUT (extensão dos design tokens) ========== */
:root {
  /* Gap = mesma escala que spacing (consistência) */
  --gap-xs: var(--space-xs, 4px);
  --gap-sm: var(--space-sm, 8px);
  --gap-md: var(--space-md, 16px);
  --gap-lg: var(--space-lg, 24px);
  --gap-xl: var(--space-xl, 32px);
  --gap-xxl: var(--space-xxl, 48px);

  /* Grid */
  --grid-cols-mobile: 1;
  --grid-cols-tablet: 2;
  --grid-cols-desktop: 4;
  --grid-cols-large: 4;
  --grid-gap: var(--space-lg, 24px);
  --grid-min-item: 260px;
  --grid-align: stretch;
  --grid-justify: stretch;

  /* Container nested */
  --container-max-width: 1200px;
  --container-nested-pct-2: 95%;
  --container-nested-pct-3: 92%;
  --container-padding-level-1: var(--space-lg, 24px);
  --container-padding-level-2: var(--space-md, 16px);
  --container-padding-level-3: var(--space-sm, 8px);

  /* Breakpoints (referência para media queries) */
  --bp-mobile: 0;
  --bp-tablet: 640px;
  --bp-desktop: 1024px;
  --bp-large: 1280px;

  /* Z-index scale (evitar valores soltos) */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* ========== 2. GRID ENGINE ========== */

/* Base: auto-fit + minmax — colunas dinâmicas, impossível quebrar */
.dinnup-grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-min-item), 100%), 1fr));
  align-items: var(--grid-align);
  justify-items: var(--grid-justify);
  min-width: 0;
  box-sizing: border-box;
}

/* Responsivo: colunas fixas por breakpoint */
.dinnup-grid--responsive {
  grid-template-columns: repeat(var(--grid-cols-mobile), 1fr);
}

@media (min-width: 640px) {
  .dinnup-grid--responsive {
    grid-template-columns: repeat(var(--grid-cols-tablet), 1fr);
  }
}

@media (min-width: 1024px) {
  .dinnup-grid--responsive {
    grid-template-columns: repeat(var(--grid-cols-desktop), 1fr);
  }
}

@media (min-width: 1280px) {
  .dinnup-grid--responsive {
    grid-template-columns: repeat(var(--grid-cols-large), 1fr);
  }
}

/* 12 colunas (opcional) — uso: grid-column: span N */
.dinnup-grid--12 {
  grid-template-columns: repeat(12, 1fr);
}

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

@media (min-width: 640px) {
  .dinnup-grid--12 .dinnup-col-t-1 { grid-column: span 1; }
  .dinnup-grid--12 .dinnup-col-t-2 { grid-column: span 2; }
  .dinnup-grid--12 .dinnup-col-t-3 { grid-column: span 3; }
  .dinnup-grid--12 .dinnup-col-t-4 { grid-column: span 4; }
  .dinnup-grid--12 .dinnup-col-t-6 { grid-column: span 6; }
  .dinnup-grid--12 .dinnup-col-t-12 { grid-column: span 12; }
}

@media (min-width: 1024px) {
  .dinnup-grid--12 .dinnup-col-d-1 { grid-column: span 1; }
  .dinnup-grid--12 .dinnup-col-d-2 { grid-column: span 2; }
  .dinnup-grid--12 .dinnup-col-d-3 { grid-column: span 3; }
  .dinnup-grid--12 .dinnup-col-d-4 { grid-column: span 4; }
  .dinnup-grid--12 .dinnup-col-d-6 { grid-column: span 6; }
  .dinnup-grid--12 .dinnup-col-d-8 { grid-column: span 8; }
  .dinnup-grid--12 .dinnup-col-d-12 { grid-column: span 12; }
}

/* Modificadores de gap */
.dinnup-grid--gap-xs { gap: var(--gap-xs); }
.dinnup-grid--gap-sm { gap: var(--gap-sm); }
.dinnup-grid--gap-md { gap: var(--gap-md); }
.dinnup-grid--gap-lg { gap: var(--gap-lg); }
.dinnup-grid--gap-xl { gap: var(--gap-xl); }
.dinnup-grid--gap-xxl { gap: var(--gap-xxl); }

/* Alinhamento */
.dinnup-grid--align-start { align-items: start; }
.dinnup-grid--align-center { align-items: center; }
.dinnup-grid--align-end { align-items: end; }
.dinnup-grid--justify-start { justify-items: start; }
.dinnup-grid--justify-center { justify-items: center; }
.dinnup-grid--justify-end { justify-items: end; }

/* ========== 3. SPACING UTILITIES (apenas escala) ========== */
.dinnup-p-xs { padding: var(--space-xs, 4px); }
.dinnup-p-sm { padding: var(--space-sm, 8px); }
.dinnup-p-md { padding: var(--space-md, 16px); }
.dinnup-p-lg { padding: var(--space-lg, 24px); }
.dinnup-p-xl { padding: var(--space-xl, 32px); }
.dinnup-p-xxl { padding: var(--space-xxl, 48px); }

.dinnup-m-xs { margin: var(--space-xs, 4px); }
.dinnup-m-sm { margin: var(--space-sm, 8px); }
.dinnup-m-md { margin: var(--space-md, 16px); }
.dinnup-m-lg { margin: var(--space-lg, 24px); }
.dinnup-m-xl { margin: var(--space-xl, 32px); }
.dinnup-m-xxl { margin: var(--space-xxl, 48px); }

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

/* ========== 4. CONTAINER SYSTEM ========== */

/* Container base (usa variáveis; engine pode injetar nível) */
.dinnup-container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  min-width: 0;
}

.dinnup-container--level-1 {
  max-width: var(--container-max-width);
  padding-left: var(--container-padding-level-1);
  padding-right: var(--container-padding-level-1);
}

.dinnup-container--level-2 {
  max-width: var(--container-nested-pct-2);
  padding-left: var(--container-padding-level-2);
  padding-right: var(--container-padding-level-2);
}

.dinnup-container--level-3 {
  max-width: var(--container-nested-pct-3);
  padding-left: var(--container-padding-level-3);
  padding-right: var(--container-padding-level-3);
}

/* Section: espaçamento vertical por token */
.dinnup-section {
  padding-top: var(--space-xxl, 48px);
  padding-bottom: var(--space-xxl, 48px);
  box-sizing: border-box;
}

@media (max-width: 639px) {
  .dinnup-section {
    padding-top: var(--space-xl, 32px);
    padding-bottom: var(--space-xl, 32px);
  }
}

/* ========== 5. COMPATIBILIDADE COM ENGINE ATUAL ========== */

/* Containers gerados pela engine com classe de nível já recebem estilos inline;
   estas classes permitem override ou uso sem inline quando o layout system está ativo. */
.dinnup-engine-preview .dinnup-container.dinnup-container-level-1,
.dinnup-store .dinnup-container.dinnup-container-level-1 {
  max-width: var(--container-max-width);
}

.dinnup-engine-preview .dinnup-container:has(.dinnup-product-card),
.dinnup-store .dinnup-grid--products {
  gap: var(--grid-gap);
}

/* Garantir que filhos de grid não estourem */
.dinnup-grid > *,
.dinnup-grid--responsive > *,
.dinnup-grid--12 > * {
  min-width: 0;
}