/**
 * gökberk design system — layout utilities (light-DOM helper classes).
 *
 * Ready-to-use containers and grids that consume the LAYOUT / GRID + BREAKPOINTS tokens
 * from tokens.css. Pure consumers — every value is a `var(--gok-*)`, nothing hardcoded —
 * so theming/retuning happens in one place.
 *
 * Requires tokens.css, and must be loaded AFTER it.
 *
 * Brand: minimal & editorial. The container comes in a SCALE, because width does two
 * different jobs — a narrow reading MEASURE for text, and a wide CANVAS for layout/media.
 * Vary block width down a page (prose ↔ content ↔ wide ↔ bleed) for an editorial spread.
 * Logical properties throughout (inline/block) so it mirrors for RTL.
 */

/* ─────────────  CONTAINER  ─────────────
 * Centered, capped, and padded. `box-sizing: border-box` keeps the fluid page gutter
 * INSIDE the max-width. Default cap is the content canvas; modifiers re-point the cap. */
.gok-container {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: var(--gok-container-content);
  margin-inline: auto;
  padding-inline: var(--gok-container-inline-pad);
}

/* Reading measure — for long-form text (~70 chars/line). */
.gok-container--prose {
  max-inline-size: var(--gok-container-prose);
}

/* Wide canvas — galleries, media, split layouts. */
.gok-container--wide {
  max-inline-size: var(--gok-container-wide);
}

/* Full-bleed — a full-width band; keeps the page gutter so content isn't glued to the
 * edge. For true edge-to-edge media, zero the padding on the inner element. */
.gok-container--bleed {
  max-inline-size: none;
}

/* ─────────────  GRID  ─────────────
 * `.gok-grid` is the explicit column grid (12 by default); children set their span with
 * `grid-column: span N`. `--auto` is the self-collapsing variant — it reflows by track
 * size with NO breakpoint, the brand's preferred responsive primitive. */
.gok-grid {
  display: grid;
  grid-template-columns: repeat(var(--gok-grid-columns), minmax(0, 1fr));
  gap: var(--gok-grid-gutter);
}

.gok-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(var(--gok-grid-min), 1fr));
}