/*
 * ================================================================
 *  GD Grid Columns — CSS display:grid column utilities
 *  All practical column combinations: equal, asymmetric, sidebar,
 *  auto-fill, subgrid, and responsive variants.
 * ================================================================
 */

/* ── BASE GRID WRAPPER ─────────────────────────────────────────── */

.grid {
  display: grid;
  gap: var(--grid-gap, 24px);
  max-width: 1180px;
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 auto;
}

.grid-full {
  display: grid;
  gap: var(--grid-gap, 24px);
}

/* Gap size modifiers */
.grid--gap-0  { --grid-gap: 0; }
.grid--gap-xs { --grid-gap: 8px; }
.grid--gap-sm { --grid-gap: 16px; }
.grid--gap-md { --grid-gap: 24px; }   /* default */
.grid--gap-lg { --grid-gap: 40px; }
.grid--gap-xl { --grid-gap: 64px; }

/* Column-gap / row-gap overrides */
.grid--col-gap-sm  { column-gap: 16px; }
.grid--col-gap-lg  { column-gap: 40px; }
.grid--row-gap-sm  { row-gap: 16px; }
.grid--row-gap-lg  { row-gap: 40px; }


/* ── 1 COLUMN ──────────────────────────────────────────────────── */

.grid--1   { grid-template-columns: 1fr; }


/* ── 2 COLUMNS — EQUAL ─────────────────────────────────────────── */

.grid--2          { grid-template-columns: repeat(2, 1fr); }
.grid--2-auto     { grid-template-columns: repeat(2, auto); }


/* ── 2 COLUMNS — ASYMMETRIC (content + sidebar) ────────────────── */

/* Golden-ratio-ish splits */
.grid--2-60-40    { grid-template-columns: 60fr 40fr; }
.grid--2-40-60    { grid-template-columns: 40fr 60fr; }
.grid--2-70-30    { grid-template-columns: 70fr 30fr; }
.grid--2-30-70    { grid-template-columns: 30fr 70fr; }
.grid--2-75-25    { grid-template-columns: 75fr 25fr; }
.grid--2-25-75    { grid-template-columns: 25fr 75fr; }
.grid--2-65-35    { grid-template-columns: 65fr 35fr; }
.grid--2-35-65    { grid-template-columns: 35fr 65fr; }
.grid--2-80-20    { grid-template-columns: 80fr 20fr; }
.grid--2-20-80    { grid-template-columns: 20fr 80fr; }

/* Fixed sidebar variants */
.grid--sidebar-left        { grid-template-columns: 280px 1fr; }
.grid--sidebar-right       { grid-template-columns: 1fr 280px; }
.grid--sidebar-left-sm     { grid-template-columns: 220px 1fr; }
.grid--sidebar-right-sm    { grid-template-columns: 1fr 220px; }
.grid--sidebar-left-lg     { grid-template-columns: 360px 1fr; }
.grid--sidebar-right-lg    { grid-template-columns: 1fr 360px; }

/* min-content / max-content */
.grid--2-min-1fr  { grid-template-columns: min-content 1fr; }
.grid--2-1fr-min  { grid-template-columns: 1fr min-content; }
.grid--2-max-1fr  { grid-template-columns: max-content 1fr; }
.grid--2-1fr-max  { grid-template-columns: 1fr max-content; }

/* fit-content columns */
.grid--2-fit-1fr  { grid-template-columns: fit-content(300px) 1fr; }
.grid--2-1fr-fit  { grid-template-columns: 1fr fit-content(300px); }


/* ── 3 COLUMNS — EQUAL ─────────────────────────────────────────── */

.grid--3          { grid-template-columns: repeat(3, 1fr); }
.grid--3-auto     { grid-template-columns: repeat(3, auto); }


/* ── 3 COLUMNS — ASYMMETRIC ────────────────────────────────────── */

/* Two wide + narrow */
.grid--3-2-1-1    { grid-template-columns: 2fr 1fr 1fr; }
.grid--3-1-1-2    { grid-template-columns: 1fr 1fr 2fr; }
.grid--3-1-2-1    { grid-template-columns: 1fr 2fr 1fr; }
.grid--3-3-1-1    { grid-template-columns: 3fr 1fr 1fr; }
.grid--3-1-1-3    { grid-template-columns: 1fr 1fr 3fr; }
.grid--3-2-2-1    { grid-template-columns: 2fr 2fr 1fr; }
.grid--3-1-2-2    { grid-template-columns: 1fr 2fr 2fr; }

/* Centre-feature layouts */
.grid--3-narrow-wide-narrow   { grid-template-columns: 1fr 2fr 1fr; }
.grid--3-wide-narrow-wide     { grid-template-columns: 2fr 1fr 2fr; }

/* Fixed gutter/sidebar + fluid centre */
.grid--3-fixed-fluid-fixed    { grid-template-columns: 200px 1fr 200px; }
.grid--3-sidebar-fluid-sidebar { grid-template-columns: 240px 1fr 240px; }


/* ── 4 COLUMNS — EQUAL ─────────────────────────────────────────── */

.grid--4          { grid-template-columns: repeat(4, 1fr); }
.grid--4-auto     { grid-template-columns: repeat(4, auto); }


/* ── 4 COLUMNS — ASYMMETRIC ────────────────────────────────────── */

.grid--4-2-1-1-1  { grid-template-columns: 2fr 1fr 1fr 1fr; }
.grid--4-1-1-1-2  { grid-template-columns: 1fr 1fr 1fr 2fr; }
.grid--4-1-2-1-1  { grid-template-columns: 1fr 2fr 1fr 1fr; }
.grid--4-1-1-2-1  { grid-template-columns: 1fr 1fr 2fr 1fr; }
.grid--4-2-2-1-1  { grid-template-columns: 2fr 2fr 1fr 1fr; }
.grid--4-1-1-2-2  { grid-template-columns: 1fr 1fr 2fr 2fr; }
.grid--4-3-1-1-1  { grid-template-columns: 3fr 1fr 1fr 1fr; }
.grid--4-1-3-1-1  { grid-template-columns: 1fr 3fr 1fr 1fr; }


/* ── 5 COLUMNS ─────────────────────────────────────────────────── */

.grid--5          { grid-template-columns: repeat(5, 1fr); }
.grid--5-auto     { grid-template-columns: repeat(5, auto); }
.grid--5-2-1-1-1-1 { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
.grid--5-1-2-1-1-1 { grid-template-columns: 1fr 2fr 1fr 1fr 1fr; }


/* ── 6 COLUMNS ─────────────────────────────────────────────────── */

.grid--6          { grid-template-columns: repeat(6, 1fr); }
.grid--6-auto     { grid-template-columns: repeat(6, auto); }

/* Mix 6-col with span helpers (see span section below) */


/* ── 7–12 COLUMNS ──────────────────────────────────────────────── */

.grid--7          { grid-template-columns: repeat(7, 1fr); }
.grid--8          { grid-template-columns: repeat(8, 1fr); }
.grid--9          { grid-template-columns: repeat(9, 1fr); }
.grid--10         { grid-template-columns: repeat(10, 1fr); }
.grid--11         { grid-template-columns: repeat(11, 1fr); }
.grid--12         { grid-template-columns: repeat(12, 1fr); }


/* ── AUTO-FILL / AUTO-FIT (responsive without media queries) ────── */

/* auto-fill — keeps empty tracks */
.grid--fill-160   { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.grid--fill-200   { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid--fill-240   { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid--fill-280   { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--fill-300   { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--fill-320   { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid--fill-360   { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.grid--fill-400   { grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); }

/* auto-fit — collapses empty tracks (items stretch to fill) */
.grid--fit-160    { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid--fit-200    { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid--fit-240    { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--fit-280    { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--fit-300    { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--fit-320    { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--fit-360    { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.grid--fit-400    { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }


/* ── MASONRY-STYLE (dense packing) ─────────────────────────────── */

.grid--masonry-3  { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
.grid--masonry-4  { grid-template-columns: repeat(4, 1fr); grid-auto-rows: auto; }
/* Apply grid-auto-flow: dense to child items to enable masonry-like dense fill */
.grid--dense      { grid-auto-flow: dense; }


/* ── NAMED TEMPLATE AREAS ──────────────────────────────────────── */

/* Holy Grail layout: header / left-sidebar + main + right-sidebar / footer */
.grid--holy-grail {
  grid-template-columns: 240px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header  header"
    "sidebar main    aside"
    "footer  footer  footer";
  min-height: 100vh;
}
.grid--holy-grail > .area-header  { grid-area: header; }
.grid--holy-grail > .area-sidebar { grid-area: sidebar; }
.grid--holy-grail > .area-main    { grid-area: main; }
.grid--holy-grail > .area-aside   { grid-area: aside; }
.grid--holy-grail > .area-footer  { grid-area: footer; }

/* Sidebar + content */
.grid--area-sidebar-content {
  grid-template-columns: 280px 1fr;
  grid-template-areas: "sidebar content";
}
.grid--area-sidebar-content > .area-sidebar { grid-area: sidebar; }
.grid--area-sidebar-content > .area-content { grid-area: content; }

/* Content + sidebar */
.grid--area-content-sidebar {
  grid-template-columns: 1fr 280px;
  grid-template-areas: "content sidebar";
}
.grid--area-content-sidebar > .area-content { grid-area: content; }
.grid--area-content-sidebar > .area-sidebar { grid-area: sidebar; }

/* Feature + 2-up below */
.grid--area-feature-2up {
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "feature feature"
    "left    right";
}
.grid--area-feature-2up > .area-feature { grid-area: feature; }
.grid--area-feature-2up > .area-left    { grid-area: left; }
.grid--area-feature-2up > .area-right   { grid-area: right; }

/* Feature + 3-up below */
.grid--area-feature-3up {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "feature feature feature"
    "col1    col2    col3";
}
.grid--area-feature-3up > .area-feature { grid-area: feature; }
.grid--area-feature-3up > .area-col1    { grid-area: col1; }
.grid--area-feature-3up > .area-col2    { grid-area: col2; }
.grid--area-feature-3up > .area-col3    { grid-area: col3; }

/* Bento-style 4-area */
.grid--area-bento {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "big   big   tall"
    "small mid   tall";
}
.grid--area-bento > .area-big   { grid-area: big; }
.grid--area-bento > .area-tall  { grid-area: tall; }
.grid--area-bento > .area-small { grid-area: small; }
.grid--area-bento > .area-mid   { grid-area: mid; }


/* ── COLUMN SPAN HELPERS ───────────────────────────────────────── */

/* Use these on child elements within any .grid */
.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; }
.col-span-full { grid-column: 1 / -1; }

/* Row span helpers */
.row-span-1  { grid-row: span 1; }
.row-span-2  { grid-row: span 2; }
.row-span-3  { grid-row: span 3; }
.row-span-4  { grid-row: span 4; }
.row-span-full { grid-row: 1 / -1; }

/* Explicit column-start placements */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-auto { grid-column-start: auto; }

/* Explicit column-end placements */
.col-end-last { grid-column-end: -1; }
.col-end-2    { grid-column-end: 2; }
.col-end-3    { grid-column-end: 3; }
.col-end-4    { grid-column-end: 4; }


/* ── ALIGNMENT MODIFIERS ───────────────────────────────────────── */

/* Justify (inline/horizontal axis) */
.grid--justify-start   { justify-items: start; }
.grid--justify-end     { justify-items: end; }
.grid--justify-center  { justify-items: center; }
.grid--justify-stretch { justify-items: stretch; } /* default */

/* Align (block/vertical axis) */
.grid--align-start     { align-items: start; }
.grid--align-end       { align-items: end; }
.grid--align-center    { align-items: center; }
.grid--align-stretch   { align-items: stretch; }  /* default */
.grid--align-baseline  { align-items: baseline; }

/* Content distribution (when grid is larger than its tracks) */
.grid--content-start   { align-content: start; }
.grid--content-center  { align-content: center; }
.grid--content-end     { align-content: end; }
.grid--content-between { align-content: space-between; }
.grid--content-around  { align-content: space-around; }
.grid--content-evenly  { align-content: space-evenly; }


/* ── SUBGRID ────────────────────────────────────────────────────── */
/*
 * Requires a parent .grid with explicit column tracks.
 * The child with .subgrid inherits the parent's column lines.
 */
.subgrid {
  display: grid;
  grid-column: span var(--subgrid-span, 2);
  grid-template-columns: subgrid;
}

/* Preset spans for subgrid */
.subgrid--span-2 { --subgrid-span: 2; }
.subgrid--span-3 { --subgrid-span: 3; }
.subgrid--span-4 { --subgrid-span: 4; }
.subgrid--span-full { grid-column: 1 / -1; }


/* ── RESPONSIVE BREAKPOINTS ─────────────────────────────────────── */
/*
 * Suffix convention:
 *   @lg  (≤ 1200px)
 *   @md  (≤ 900px)
 *   @sm  (≤ 600px)
 *
 * Usage: <div class="grid--4 grid--2@md grid--1@sm">
 */

@media (max-width: 1200px) {
  .grid--1\@lg   { grid-template-columns: 1fr; }
  .grid--2\@lg   { grid-template-columns: repeat(2, 1fr); }
  .grid--3\@lg   { grid-template-columns: repeat(3, 1fr); }
  .grid--4\@lg   { grid-template-columns: repeat(4, 1fr); }

  .grid--sidebar-left\@lg       { grid-template-columns: 240px 1fr; }
  .grid--sidebar-right\@lg      { grid-template-columns: 1fr 240px; }

  .col-span-full\@lg { grid-column: 1 / -1; }
  .col-span-2\@lg    { grid-column: span 2; }
}

@media (max-width: 900px) {
  .grid--1\@md   { grid-template-columns: 1fr; }
  .grid--2\@md   { grid-template-columns: repeat(2, 1fr); }
  .grid--3\@md   { grid-template-columns: repeat(3, 1fr); }

  .grid--2-60-40\@md   { grid-template-columns: 60fr 40fr; }
  .grid--2-40-60\@md   { grid-template-columns: 40fr 60fr; }
  .grid--2-50-50\@md   { grid-template-columns: 50fr 50fr; }
  .grid--2-70-30\@md   { grid-template-columns: 70fr 30fr; }
  .grid--2-30-70\@md   { grid-template-columns: 30fr 70fr; }

  .grid--sidebar-left\@md       { grid-template-columns: 200px 1fr; }
  .grid--sidebar-right\@md      { grid-template-columns: 1fr 200px; }
  .grid--stacked\@md            { grid-template-columns: 1fr; }

  /* Collapse named-area layouts to single column */
  .grid--holy-grail\@md,
  .grid--area-sidebar-content\@md,
  .grid--area-content-sidebar\@md {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "aside"
      "footer";
  }

  .col-span-full\@md { grid-column: 1 / -1; }
  .col-span-2\@md    { grid-column: span 2; }
  .col-span-1\@md    { grid-column: span 1; }
}

@media (max-width: 600px) {
  .grid--1\@sm   { grid-template-columns: 1fr; }
  .grid--2\@sm   { grid-template-columns: 1fr; }
  .grid--3\@sm   { grid-template-columns: 1fr; }
  .grid--4\@sm   { grid-template-columns: 1fr; }

  /* All asymmetric 2-col grids collapse to single column */
  .grid--2-60-40\@sm,
  .grid--2-40-60\@sm,
  .grid--2-70-30\@sm,
  .grid--2-30-70\@sm,
  .grid--2-75-25\@sm,
  .grid--2-25-75\@sm,
  .grid--2-65-35\@sm,
  .grid--2-35-65\@sm { grid-template-columns: 1fr; }

  .grid--stacked\@sm            { grid-template-columns: 1fr; }
  .grid--sidebar-left\@sm       { grid-template-columns: 1fr; }
  .grid--sidebar-right\@sm      { grid-template-columns: 1fr; }

  .col-span-full\@sm { grid-column: 1 / -1; }
  .col-span-1\@sm    { grid-column: span 1; }
}


/* ── INTRINSIC SIZING UTILITIES ─────────────────────────────────── */

/* Fixed-width track helpers (useful alongside fr units) */
.grid--2-fixed-320-fluid  { grid-template-columns: 320px 1fr; }
.grid--2-fluid-320-fixed  { grid-template-columns: 1fr 320px; }
.grid--2-fixed-480-fluid  { grid-template-columns: 480px 1fr; }

/* clamp-based fluid column sizing */
.grid--fluid-3  { grid-template-columns: repeat(3, clamp(200px, 30%, 480px)); }
.grid--fluid-4  { grid-template-columns: repeat(4, clamp(160px, 23%, 360px)); }


/* ── AUTO ROWS ──────────────────────────────────────────────────── */

.grid--rows-auto    { grid-auto-rows: auto; }
.grid--rows-equal   { grid-auto-rows: 1fr; }
.grid--rows-min     { grid-auto-rows: min-content; }
.grid--rows-64      { grid-auto-rows: 64px; }
.grid--rows-128     { grid-auto-rows: 128px; }
.grid--rows-200     { grid-auto-rows: 200px; }
.grid--rows-300     { grid-auto-rows: 300px; }

/* ── PLACE-SELF (self-alignment on individual cells) ────────────── */

.place-self-center    { place-self: center; }
.place-self-start     { place-self: start; }
.place-self-end       { place-self: end; }
.place-self-stretch   { place-self: stretch; }
.justify-self-center  { justify-self: center; }
.justify-self-end     { justify-self: end; }
.align-self-center    { align-self: center; }
.align-self-end       { align-self: end; }
.align-self-start     { align-self: start; }