/* =========================================================================
   Corsair Design System — Layout Grid
   Source: Figma "Grids" frame (node 675-699) + Layout token collection.
   Responsive 4 / 6 / 12 column grid.

     Breakpoint            Cols   Margin   Gutter
     Mobile      ≤640       4      16px     16px
     Tablet      641–1023   6      48px     16px
     Desktop     1024–2103  12     152px*   24px   (*clamps below 1280)
     Desktop XL  ≥2104      12     auto     24px   (128px cols, 1800px content, centered)
   ========================================================================= */

:root {
  --cor-cols: 4; /* @kind other */
  --cor-margin: 16px;
  --cor-gutter: 16px;
}

@media (min-width: 641px) {
  :root { --cor-cols: 6; /* @kind other */ --cor-margin: 48px; --cor-gutter: 16px; }
}

@media (min-width: 1024px) {
  /* margin scales 48→152 between 1024 and 1280, then holds at 152 */
  :root { --cor-cols: 12; /* @kind other */ --cor-margin: clamp(48px, calc(48px + (100vw - 1024px) * 0.40625), 152px); --cor-gutter: 24px; }
}

@media (min-width: 1280px) {
  :root { --cor-margin: 152px; }
}

@media (min-width: 2104px) {
  /* margin grows to keep the 1800px content band centered (12×128 + 11×24) */
  :root { --cor-margin: calc((100vw - 1800px) / 2); --cor-gutter: 24px; }
}

/* -------------------------------------------------------------------------
   Container — page-level horizontal frame. Margins handle centering at every
   tier (at XL the margin grows so content holds at a centered 1800px band),
   so full-bleed section backgrounds can still inset:0 to the viewport edge.
   ------------------------------------------------------------------------- */
.cor-container {
  width: 100%;
  padding-inline: var(--cor-margin);
  box-sizing: border-box;
}

/* -------------------------------------------------------------------------
   Grid — the 4/6/12 column track set with token gutters
   Put .cor-grid on a child of .cor-container (or use both on one element).
   ------------------------------------------------------------------------- */
.cor-grid {
  display: grid;
  grid-template-columns: repeat(var(--cor-cols), minmax(0, 1fr));
  column-gap: var(--cor-gutter);
  row-gap: var(--cor-gutter);
}

/* Container + grid in one element */
.cor-container.cor-grid { display: grid; }

/* -------------------------------------------------------------------------
   Column spans — desktop (12-col) base, then tablet (6) + mobile (4) caps.
   Use .cor-col-N for span N. Spans clamp to the available column count so a
   12-col layout collapses gracefully on tablet/mobile.
   ------------------------------------------------------------------------- */
.cor-col-1 { grid-column: span 1; }
.cor-col-2 { grid-column: span 2; }
.cor-col-3 { grid-column: span 3; }
.cor-col-4 { grid-column: span 4; }
.cor-col-5 { grid-column: span 5; }
.cor-col-6 { grid-column: span 6; }
.cor-col-7 { grid-column: span 7; }
.cor-col-8 { grid-column: span 8; }
.cor-col-9 { grid-column: span 9; }
.cor-col-10 { grid-column: span 10; }
.cor-col-11 { grid-column: span 11; }
.cor-col-12 { grid-column: span 12; }

/* tablet: nothing wider than 6 */
@media (max-width: 1023px) {
  .cor-col-7 { grid-column: span 6; }
  .cor-col-8 { grid-column: span 6; }
  .cor-col-9 { grid-column: span 6; }
  .cor-col-10 { grid-column: span 6; }
  .cor-col-11 { grid-column: span 6; }
  .cor-col-12 { grid-column: span 6; }
}

/* mobile: nothing wider than 4 */
@media (max-width: 640px) {
  .cor-col-5 { grid-column: span 4; }
  .cor-col-6 { grid-column: span 4; }
  .cor-col-7 { grid-column: span 4; }
  .cor-col-8 { grid-column: span 4; }
  .cor-col-9 { grid-column: span 4; }
  .cor-col-10 { grid-column: span 4; }
  .cor-col-11 { grid-column: span 4; }
  .cor-col-12 { grid-column: span 4; }

  /* common mobile pattern: half-width tiles */
  .cor-col-sm-2 { grid-column: span 2; }
  .cor-col-sm-4 { grid-column: span 4; }
}

/* explicit tablet override hooks (opt-in) */
@media (min-width: 641px) and (max-width: 1023px) {
  .cor-col-md-2 { grid-column: span 2; }
  .cor-col-md-3 { grid-column: span 3; }
  .cor-col-md-6 { grid-column: span 6; }
}

/* -------------------------------------------------------------------------
   Column start (offsets) — desktop only; ignored once tracks collapse.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .cor-start-1 { grid-column-start: 1; }
  .cor-start-2 { grid-column-start: 2; }
  .cor-start-3 { grid-column-start: 3; }
  .cor-start-4 { grid-column-start: 4; }
  .cor-start-5 { grid-column-start: 5; }
  .cor-start-6 { grid-column-start: 6; }
  .cor-start-7 { grid-column-start: 7; }
  .cor-start-8 { grid-column-start: 8; }
  .cor-start-9 { grid-column-start: 9; }
  .cor-start-10 { grid-column-start: 10; }
  .cor-start-11 { grid-column-start: 11; }
  .cor-start-12 { grid-column-start: 12; }
}

/* -------------------------------------------------------------------------
   Full-bleed escape hatch — break a child out of the container margins.
   ------------------------------------------------------------------------- */
.cor-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}