/* ============================================
   MODERN INTRINSIC GRID SYSTEM
   Uses CSS Custom Properties, Container Queries,
   and Modern Layout Techniques
   ============================================ */

/* ============================================
   CORE CONFIGURATION
   ============================================ */
:where([class*="grid--"]) {
  /* Default spacing values */
  --gap-default: var(--wp--style--block-gap, 1.5rem);
  --content-size: var(--wp--style--global--content-size, 1200px);
  
  /* Grid system defaults */
  --grid-gap: var(--gap-default);
  --column-count: 1; /* Changed from 1 to 12 as default */
  --grid-repeat: auto-fit;
  
  /* Dynamic calculation: (100% - total gap space) / columns */
  --grid-basis: calc((100% - (var(--column-count) - 1) * var(--grid-gap)) / var(--column-count));
  
  display: grid !important;
  gap: var(--grid-gap) !important;
  inline-size: 100%;
  container-type: inline-size;
  grid-template-columns: repeat(var(--grid-repeat), minmax(min(var(--grid-basis), 100%), 1fr)) !important;
}

/* ============================================
   AUTO GRID - Intrinsic Responsive Grid
   ============================================ */
:where([class*="grid--auto"]:not([class*="rows"])) {
  display: grid !important;
  gap: var(--grid-gap) !important;
  inline-size: 100%;
  container-type: inline-size;
  
  /* Dynamic grid template */
  grid-template-columns: repeat(
    var(--grid-repeat, auto-fit),
    minmax(min(var(--grid-basis), 100%), 1fr)
  ) !important;
}

:where([class*="grid--auto"]:not([class*="rows"])) > * {
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: break-word;
}

/* Column count modifiers using data attributes or classes */
:where(.grid--auto-2, [data-columns="2"]) { --column-count: 2; }
:where(.grid--auto-3, [data-columns="3"]) { --column-count: 3; }
:where(.grid--auto-4, [data-columns="4"]) { --column-count: 4; }
:where(.grid--auto-5, [data-columns="5"]) { --column-count: 5; }
:where(.grid--auto-6, [data-columns="6"]) { --column-count: 6; }
:where(.grid--auto-7, [data-columns="7"]) { --column-count: 7; }
:where(.grid--auto-8, [data-columns="8"]) { --column-count: 8; }
:where(.grid--auto-9, [data-columns="9"]) { --column-count: 9; }
:where(.grid--auto-10, [data-columns="10"]) { --column-count: 10; }
:where(.grid--auto-11, [data-columns="11"]) { --column-count: 11; }
:where(.grid--auto-12, [data-columns="12"]) { --column-count: 12; }

/* Auto-fit vs Auto-fill */
:where(.grid--auto-fill) { --grid-repeat: auto-fill; }
:where(.grid--auto-fit) { --grid-repeat: auto-fit; }

/* ============================================
   ASYMMETRIC GRIDS - Ratio-based Layouts
   ============================================ */
:where(.grid--ratio) {
  display: grid;
  gap: var(--grid-gap);
  inline-size: 100%;
  grid-template-columns: var(--grid-ratio) !important;
}

:where(.grid--1-2, .grid--ratio-1-2) { --grid-ratio: minmax(0, 1fr) minmax(0, 2fr); }
:where(.grid--1-3, .grid--ratio-1-3) { --grid-ratio: minmax(0, 1fr) minmax(0, 3fr); }
:where(.grid--2-1, .grid--ratio-2-1) { --grid-ratio: minmax(0, 2fr) minmax(0, 1fr); }
:where(.grid--2-3, .grid--ratio-2-3) { --grid-ratio: minmax(0, 2fr) minmax(0, 3fr); }
:where(.grid--3-1, .grid--ratio-3-1) { --grid-ratio: minmax(0, 3fr) minmax(0, 1fr); }
:where(.grid--3-2, .grid--ratio-3-2) { --grid-ratio: minmax(0, 3fr) minmax(0, 2fr); }

/* Stack asymmetric grids using container queries */
@container (inline-size < 768px) {
  :where([class*="grid--ratio"], [class*="grid--1-"], [class*="grid--2-"], [class*="grid--3-"]) {
    --grid-ratio: 1fr;
  }
}

/* ============================================
   FIXED COLUMN GRIDS
   ============================================ */
:where([class*="grid--"][class*="col-"]:not([class*="auto"])) {
  display: grid !important;
  gap: var(--grid-gap) !important;
  inline-size: 100%;
  /* grid-template-columns: repeat(var(--column-count), minmax(0, 1fr)) !important; */
  grid-template-columns: repeat(auto-fill, minmax(max(5rem, calc(100% / var(--column-count))), 1fr)) !important;
}

/* Base column counts with intrinsic responsive behavior */
:where(.grid--1, .grid--col-1) { --column-count: 1; }
:where(.grid--2, .grid--col-2) { --column-count: 2; }
:where(.grid--3, .grid--col-3) { --column-count: 3; }
:where(.grid--4, .grid--col-4) { --column-count: 4; }
:where(.grid--5, .grid--col-5) { --column-count: 5; }
:where(.grid--6, .grid--col-6) { --column-count: 6; }
:where(.grid--7, .grid--col-7) { --column-count: 7; }
:where(.grid--8, .grid--col-8) { --column-count: 8; }
:where(.grid--9, .grid--col-9) { --column-count: 9; }
:where(.grid--10, .grid--col-10) { --column-count: 10; }
:where(.grid--11, .grid--col-11) { --column-count: 11; }
:where(.grid--12, .grid--col-12) { --column-count: 12; }

/* ============================================
   ROW TEMPLATES
   ============================================ */
:where([class*="grid-rows--"]) {
  grid-template-rows: repeat(var(--row-count), minmax(0, 1fr));
}

:where(.grid-rows--1) { --row-count: 1; }
:where(.grid-rows--2) { --row-count: 2; }
:where(.grid-rows--3) { --row-count: 3; }
:where(.grid-rows--4) { --row-count: 4; }
:where(.grid-rows--5) { --row-count: 5; }
:where(.grid-rows--6) { --row-count: 6; }
:where(.grid-rows--7) { --row-count: 7; }
:where(.grid-rows--8) { --row-count: 8; }
:where(.grid-rows--9) { --row-count: 9; }
:where(.grid-rows--10) { --row-count: 10; }
:where(.grid-rows--11) { --row-count: 11; }
:where(.grid-rows--12) { --row-count: 12; }

/* Auto-sized rows */
:where(.grid--auto-rows) {
  grid-auto-rows: minmax(min-content, 1fr);
}

/* ============================================
   GAP UTILITIES - Using Logical Properties
   ============================================ */
/* :where(.gap-0) { --grid-gap: 0; }
:where(.gap-1) { --grid-gap: 0.25rem; }
:where(.gap-2) { --grid-gap: 0.5rem; }
:where(.gap-3) { --grid-gap: 0.75rem; }
:where(.gap-4) { --grid-gap: 1rem; }
:where(.gap-5) { --grid-gap: 1.25rem; }
:where(.gap-6) { --grid-gap: 1.5rem; }
:where(.gap-8) { --grid-gap: 2rem; }
:where(.gap-10) { --grid-gap: 2.5rem; }
:where(.gap-12) { --grid-gap: 3rem; }
:where(.gap-16) { --grid-gap: 4rem; } */

/* WordPress preset spacing */
:where(.gap-xs) { --grid-gap: var(--wp--preset--spacing--xs, 0.5rem); }
:where(.gap-sm) { --grid-gap: var(--wp--preset--spacing--sm, 0.75rem); }
:where(.gap-md) { --grid-gap: var(--wp--preset--spacing--md, 1rem); }
:where(.gap-lg) { --grid-gap: var(--wp--preset--spacing--lg, 1.5rem); }
:where(.gap-xl) { --grid-gap: var(--wp--preset--spacing--xl, 2rem); }
:where(.gap-2xl) { --grid-gap: var(--wp--preset--spacing--2xl, 3rem); }

/* ============================================
   GRID ITEM PLACEMENT
   ============================================ */
:where([class*="col-span--"]) {
  grid-column: span var(--col-span);
}

:where([class*="row-span--"]) {
  grid-row: span var(--row-span);
}

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

:where(.row-span--1) { --row-span: 1; }
:where(.row-span--2) { --row-span: 2; }
:where(.row-span--3) { --row-span: 3; }
:where(.row-span--4) { --row-span: 4; }
:where(.row-span--5) { --row-span: 5; }
:where(.row-span--6) { --row-span: 6; }
:where(.row-span--7) { --row-span: 7; }
:where(.row-span--8) { --row-span: 8; }
:where(.row-span--9) { --row-span: 9; }
:where(.row-span--10) { --row-span: 10; }
:where(.row-span--11) { --row-span: 11; }
:where(.row-span--12) { --row-span: 12; }

/* Grid positioning */
:where([class*="col-start--"]) { grid-column-start: var(--col-start); }
:where([class*="col-end--"]) { grid-column-end: var(--col-end); }
:where([class*="row-start--"]) { grid-row-start: var(--row-start); }
:where([class*="row-end--"]) { grid-row-end: var(--row-end); }

:where(.col-start--1) { --col-start: 1; }
:where(.col-start--2) { --col-start: 2; }
:where(.col-start--3) { --col-start: 3; }
:where(.col-start--4) { --col-start: 4; }
:where(.col-start--5) { --col-start: 5; }
:where(.col-start--6) { --col-start: 6; }
:where(.col-start--7) { --col-start: 7; }
:where(.col-start--8) { --col-start: 8; }
:where(.col-start--9) { --col-start: 9; }
:where(.col-start--10) { --col-start: 10; }
:where(.col-start--11) { --col-start: 11; }
:where(.col-start--12) { --col-start: 12; }

/* ============================================
   ALTERNATING LAYOUTS
   ============================================ */
:where(.grid--alternate) > :where([class*="grid--"]):nth-of-type(even) {
  direction: rtl;
  
  & > * {
    direction: ltr;
  }
}

/* Specific alternating patterns for ratio grids */
:where(.grid--alternate) > .grid--1-2:nth-of-type(even) { --grid-ratio: minmax(0, 2fr) minmax(0, 1fr); }
:where(.grid--alternate) > .grid--1-3:nth-of-type(even) { --grid-ratio: minmax(0, 3fr) minmax(0, 1fr); }
:where(.grid--alternate) > .grid--2-1:nth-of-type(even) { --grid-ratio: minmax(0, 1fr) minmax(0, 2fr); }
:where(.grid--alternate) > .grid--2-3:nth-of-type(even) { --grid-ratio: minmax(0, 3fr) minmax(0, 2fr); }
:where(.grid--alternate) > .grid--3-1:nth-of-type(even) { --grid-ratio: minmax(0, 1fr) minmax(0, 3fr); }
:where(.grid--alternate) > .grid--3-2:nth-of-type(even) { --grid-ratio: minmax(0, 2fr) minmax(0, 3fr); }

/* ============================================
   RESPONSIVE MODIFIERS - Container Queries
   ============================================ */

/* Small screens (< 480px) */
@container (inline-size < 480px) {
  :where([class*="-s-1"]) { --column-count: 1; }
  :where([class*="-s-2"]) { --column-count: 2; }
  :where([class*="-s-3"]) { --column-count: 3; }
  :where([class*="-s-4"]) { --column-count: 4; }
  
  :where(.col-span--s-all) { grid-column: 1 / -1; }
  :where(.gap-xs-s) { --grid-gap: var(--wp--preset--spacing--xs, 0.5rem); }
  :where(.gap-sm-s) { --grid-gap: var(--wp--preset--spacing--sm, 0.75rem); }
  :where(.gap-md-s) { --grid-gap: var(--wp--preset--spacing--md, 1rem); }
}

/* Medium screens (480px - 768px) */
@container (inline-size >= 480px) and (inline-size < 768px) {
  :where([class*="-m-1"]) { --column-count: 1; }
  :where([class*="-m-2"]) { --column-count: 2; }
  :where([class*="-m-3"]) { --column-count: 3; }
  :where([class*="-m-4"]) { --column-count: 4; }
  :where([class*="-m-6"]) { --column-count: 6; }
  
  :where(.col-span--m-all) { grid-column: 1 / -1; }
  :where(.gap-xs-m) { --grid-gap: var(--wp--preset--spacing--xs, 0.5rem); }
  :where(.gap-sm-m) { --grid-gap: var(--wp--preset--spacing--sm, 0.75rem); }
  :where(.gap-md-m) { --grid-gap: var(--wp--preset--spacing--md, 1rem); }
}

/* Large screens (768px - 992px) */
@container (inline-size >= 768px) and (inline-size < 992px) {
  :where([class*="-l-1"]) { --column-count: 1; }
  :where([class*="-l-2"]) { --column-count: 2; }
  :where([class*="-l-3"]) { --column-count: 3; }
  :where([class*="-l-4"]) { --column-count: 4; }
  :where([class*="-l-6"]) { --column-count: 6; }
  :where([class*="-l-8"]) { --column-count: 8; }
  
  :where(.col-span--l-all) { grid-column: 1 / -1; }
  :where(.gap-lg-l) { --grid-gap: var(--wp--preset--spacing--lg, 1.5rem); }
  :where(.gap-xl-l) { --grid-gap: var(--wp--preset--spacing--xl, 2rem); }
}

/* Extra large screens (992px - 1366px) */
@container (inline-size >= 992px) and (inline-size < 1366px) {
  :where([class*="-xl-2"]) { --column-count: 2; }
  :where([class*="-xl-3"]) { --column-count: 3; }
  :where([class*="-xl-4"]) { --column-count: 4; }
  :where([class*="-xl-6"]) { --column-count: 6; }
  :where([class*="-xl-12"]) { --column-count: 12; }
  
  :where(.col-span--xl-all) { grid-column: 1 / -1; }
}

/* ============================================
   FALLBACK FOR LEGACY BROWSERS
   ============================================ */
@supports not (container-type: inline-size) {
  /* Use media queries as fallback */
  @media (max-width: 480px) {
    :where([class*="-s-1"]) { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    :where([class*="-s-2"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }
  
  @media (max-width: 768px) {
    :where([class*="-m-1"]) { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    :where([class*="-m-2"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    :where([class*="-m-3"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }
  
  @media (max-width: 992px) {
    :where([class*="-l-2"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    :where([class*="-l-3"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    :where([class*="-l-4"]) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
:where(.grid--dense) { grid-auto-flow: dense; }
:where(.grid--column-flow) { grid-auto-flow: column; }
:where(.grid--center-items) { place-items: center; }
:where(.grid--stretch-items) { place-items: stretch; }
:where(.grid--start-items) { place-items: start; }
:where(.grid--end-items) { place-items: end; }