/* =============================================================================
   TekFocus — layout.css
   Containers, grid, section rhythm, and structural utilities.

   Mobile-first throughout: base rules target the smallest viewport, @media
   (min-width) rules layer on enhancements. Breakpoints (literal, since custom
   properties cannot be used in media queries):
     sm  40rem (640)   md  48rem (768)   lg  64rem (1024)   xl  80rem (1280)
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Page skeleton
   -------------------------------------------------------------------------- */

.page {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100svh;
}

/* Footer sticks to the bottom on short pages. */
.page > main {
  flex: 1 0 auto;
}

/* -----------------------------------------------------------------------------
   2. Containers
   -----------------------------------------------------------------------------
   Center content and apply the responsive page gutter. Width variants cap the
   measure for different content types.
   -------------------------------------------------------------------------- */

.container {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-inline-size: var(--container-wide);
}

.container--narrow {
  max-inline-size: var(--container-narrow);
}

.container--prose {
  max-inline-size: var(--container-prose);
}

/* Break a child out to full viewport width from inside a container. */
.full-bleed {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* -----------------------------------------------------------------------------
   3. Sections & vertical rhythm
   -----------------------------------------------------------------------------
   .section provides the standard fluid block padding. Surface modifiers paint
   the band; use .is-inverse on dark bands so focus rings / borders adapt.
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--section-space);
}

.section--tight {
  padding-block: var(--section-space-sm);
}

.section--flush-top {
  padding-block-start: 0;
}

.section--flush-bottom {
  padding-block-end: 0;
}

.surface-cream {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.surface-raised {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.surface-sunken {
  background-color: var(--color-surface-sunken);
  color: var(--color-text);
}

/* Inverse (purple) band. Re-points text/heading/border roles to their
   on-dark variants so descendants read correctly without per-element classes. */
.surface-inverse,
.is-inverse {
  background-color: var(--color-surface-inverse);
  color: var(--color-text-on-inverse);
  --color-text: var(--color-text-on-inverse);
  --color-text-muted: var(--color-text-on-inverse-muted);
  --color-heading: var(--color-cream-100);
  --color-border: var(--color-border-inverse);
  --color-link: var(--color-gold-400);
  --color-link-hover: var(--color-cream-100);
}

.surface-inverse-deep {
  background-color: var(--color-surface-inverse-deep);
  color: var(--color-text-on-inverse);
  --color-text: var(--color-text-on-inverse);
  --color-text-muted: var(--color-text-on-inverse-muted);
  --color-heading: var(--color-cream-100);
  --color-border: var(--color-border-inverse);
  --color-link: var(--color-gold-400);
  --color-link-hover: var(--color-cream-100);
}

/* Section heading block (eyebrow + title + intro), capped to a sane measure. */
.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-inline-size: var(--measure);
  margin-block-end: var(--space-xl);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* -----------------------------------------------------------------------------
   4. Stack — vertical flow with a consistent gap
   -------------------------------------------------------------------------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--flow-gap, var(--space-md));
}

.stack > * {
  margin-block: 0;
}

.stack--2xs {
  --flow-gap: var(--space-2xs);
}
.stack--xs {
  --flow-gap: var(--space-xs);
}
.stack--sm {
  --flow-gap: var(--space-sm);
}
.stack--md {
  --flow-gap: var(--space-md);
}
.stack--lg {
  --flow-gap: var(--space-lg);
}
.stack--xl {
  --flow-gap: var(--space-xl);
}

/* Owl-selector flow for content where children shouldn't be flex items
   (e.g. converted markdown). Adds top margin between adjacent siblings only. */
.flow > * + * {
  margin-block-start: var(--flow-gap, var(--space-md));
}

/* -----------------------------------------------------------------------------
   5. Cluster — horizontal grouping that wraps (nav, tag rows, button rows)
   -------------------------------------------------------------------------- */

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-sm));
}

.cluster--xs {
  --cluster-gap: var(--space-2xs);
}
.cluster--sm {
  --cluster-gap: var(--space-xs);
}
.cluster--md {
  --cluster-gap: var(--space-md);
}
.cluster--between {
  justify-content: space-between;
}
.cluster--center {
  justify-content: center;
}
.cluster--end {
  justify-content: flex-end;
}

/* -----------------------------------------------------------------------------
   6. Grid system
   -----------------------------------------------------------------------------
   Two strategies:
   (a) .auto-grid  — responsive without media queries; columns fit to a min size.
   (b) .grid-cols-N — explicit column counts that collapse to 1 on mobile.
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-lg));
}

.grid--gap-sm {
  --grid-gap: var(--space-md);
}
.grid--gap-lg {
  --grid-gap: var(--space-xl);
}

/* Auto-fit: tracks are at least --col-min wide, then share remaining space. */
.auto-grid {
  display: grid;
  gap: var(--grid-gap, var(--space-lg));
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--col-min, 18rem), 100%), 1fr)
  );
}

.auto-grid--narrow {
  --col-min: 14rem;
}
.auto-grid--wide {
  --col-min: 24rem;
}

/* Explicit columns — single column first, expand at md (768px). */
.grid-cols-2,
.grid-cols-3,
.grid-cols-4 {
  display: grid;
  gap: var(--grid-gap, var(--space-lg));
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Item span helpers (apply within an explicit grid at lg and up). */
@media (min-width: 64rem) {
  .col-span-2 {
    grid-column: span 2;
  }
  .col-span-3 {
    grid-column: span 3;
  }
  .col-span-full {
    grid-column: 1 / -1;
  }
}

/* -----------------------------------------------------------------------------
   7. Split — asymmetric two-column (content + aside / media + text)
   -----------------------------------------------------------------------------
   Stacks on mobile, splits at lg (1024px). Ratio is tunable via --split-ratio.
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--grid-gap, var(--space-xl));
  align-items: var(--split-align, start);
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: var(--split-ratio, 1fr 1fr);
  }
  .split--7-5 {
    --split-ratio: 7fr 5fr;
  }
  .split--5-7 {
    --split-ratio: 5fr 7fr;
  }
  .split--8-4 {
    --split-ratio: 2fr 1fr;
  }
  .split--center {
    --split-align: center;
  }
  /* Visually swap columns without changing DOM/reading order. */
  .split--reverse > :first-child {
    order: 2;
  }
}

/* -----------------------------------------------------------------------------
   8. Container-query context
   -----------------------------------------------------------------------------
   Mark a wrapper as a query container so components inside (e.g. cards) can
   respond to the space they're given rather than the viewport. Components opt
   in via @container rules in components.css.
   -------------------------------------------------------------------------- */

.cq {
  container-type: inline-size;
}

.cq-cards {
  container: cards / inline-size;
}

/* -----------------------------------------------------------------------------
   9. Spacing & sizing utilities
   -------------------------------------------------------------------------- */

.measure {
  max-inline-size: var(--measure);
}
.measure-narrow {
  max-inline-size: var(--measure-narrow);
}

.center {
  margin-inline: auto;
}

.mbs-0 {
  margin-block-start: 0;
}
.mbe-0 {
  margin-block-end: 0;
}
.mbs-sm {
  margin-block-start: var(--space-sm);
}
.mbs-md {
  margin-block-start: var(--space-md);
}
.mbs-lg {
  margin-block-start: var(--space-lg);
}
.mbs-xl {
  margin-block-start: var(--space-xl);
}
.mbe-sm {
  margin-block-end: var(--space-sm);
}
.mbe-md {
  margin-block-end: var(--space-md);
}
.mbe-lg {
  margin-block-end: var(--space-lg);
}
.mbe-xl {
  margin-block-end: var(--space-xl);
}

/* -----------------------------------------------------------------------------
   10. Display & flex helpers
   -------------------------------------------------------------------------- */

.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.justify-end {
  justify-content: flex-end;
}
.flex-1 {
  flex: 1 1 0;
}
.grow {
  flex-grow: 1;
}
.gap-2xs {
  gap: var(--space-2xs);
}
.gap-xs {
  gap: var(--space-xs);
}
.gap-sm {
  gap: var(--space-sm);
}
.gap-md {
  gap: var(--space-md);
}
.gap-lg {
  gap: var(--space-lg);
}

.hidden {
  display: none;
}

/* Show only at md+ / hide only at md+ (responsive visibility). */
@media (max-width: 47.99rem) {
  .hidden-mobile {
    display: none;
  }
}

@media (min-width: 48rem) {
  .only-mobile {
    display: none;
  }
}