/* =============================================================================
 * Prelect — LAYOUT
 * =============================================================================
 * Containers, grids, and section primitives.
 *
 * MOBILE-FIRST. Every base rule targets the smallest viewport. Enhancements are
 * added with min-width media queries only, so nothing has to be undone for
 * mobile (rules.txt section 5).
 *
 * Breakpoints (section 7) — three, content-driven, never device-named:
 *   base       < 768px   phones
 *   768px+               tablets
 *   1024px+              laptops and desktops
 *   1280px+              large desktops
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1. CONTAINER
 * -----------------------------------------------------------------------------
 * `width: 100%; max-width: N; margin-inline: auto` rather than a fixed width
 * (section 6). Never `width: 100vw` for a normal container: 100vw includes the
 * scrollbar, which causes horizontal overflow (section 8).
 * -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;

  /*
	 * Fluid gutter. `min()` keeps the gutter from eating the content on small
	 * screens while still being generous on large ones.
	 */
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

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

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

/* Full-bleed: paint edge-to-edge inside the current containing block.
 * Never use 100vw — that unit includes the scrollbar and creates sideways
 * scroll on every page (§8). Parent overflow-x:clip is the safety net. */
.full-bleed {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/* -----------------------------------------------------------------------------
 * 2. SECTIONS
 * -----------------------------------------------------------------------------
 * Vertical rhythm. Generous but bounded, so a short page does not become
 * mostly whitespace.
 * -------------------------------------------------------------------------- */

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

.section--tight {
  padding-block: calc(var(--section-y) * 0.5);
}

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

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

/* Background variants. Using semantic tokens means each one adapts to the active
 * colour scheme and to light/dark automatically. */
.section--surface {
  background-color: var(--color-surface);
}

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

.section--inverse {
  background-color: var(--color-primary);
  color: var(--color-primary-contrast);
}

.section--inverse h1,
.section--inverse h2,
.section--inverse h3,
.section--inverse h4 {
  color: var(--color-primary-contrast);
}

.section--gradient {
  background-image: var(--gradient-hero);
  background-size: cover;
  background-position: center;
  color: #fff;
}

.section--accent-gradient {
  background-image: var(--gradient-accent);
  color: var(--color-accent-contrast);
}

/* Section header block: eyebrow, heading, lead. */
.section__header {
  max-width: var(--measure);
  margin-block-end: var(--space-lg);
}

.section__header--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-block-end: var(--space-xs);

  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.section__lead {
  margin-block-start: var(--space-sm);
  font-size: var(--step-1);
  line-height: var(--leading-snug);
  color: var(--color-muted);
  max-width: var(--measure);
}

.section--inverse .section__lead,
.section--gradient .section__lead {
  color: inherit;

  /* Slightly transparent rather than a separate token: it reads correctly
	 * against any of the eight schemes without needing eight tokens. */
  opacity: 0.85;
}

/* -----------------------------------------------------------------------------
 * 3. GRIDS
 * -----------------------------------------------------------------------------
 * CSS Grid with `auto-fit` + `minmax()` where possible: the grid decides its own
 * column count from the available space, so there is no per-breakpoint column
 * arithmetic. Fewer media queries, and it responds to container width rather than
 * viewport width.
 *
 * `min(100%, N)` prevents the classic auto-fit bug where a single item overflows
 * on a narrow screen because N is wider than the viewport.
 * -------------------------------------------------------------------------- */

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

/* Card grid: 1 column on phones, more as space allows. No media queries needed. */
.grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: var(--space-lg);
}

.grid--cards-wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: var(--space-lg);
}

/* Explicit column counts where the design genuinely requires them. */
.grid--2 {
  grid-template-columns: 1fr;
}

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

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

@media (min-width: 768px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

@media (min-width: 1024px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }

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

/* -----------------------------------------------------------------------------
 * 4. SPLIT LAYOUT
 * -----------------------------------------------------------------------------
 * Image beside content. Stacks on mobile, side-by-side from 768px.
 *
 * `align-items: center` and a sensible gap ratio keep it balanced without
 * per-instance tuning.
 * -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}

@media (min-width: 768px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  /* Reverse the visual order without changing DOM order, so the heading still
	 * comes first for screen readers and in the tab sequence (section 13). */
  .split--reverse .split__media {
    order: 2;
  }
}

/* Uneven splits where the text needs more room than the image. */
@media (min-width: 768px) {
  .split--wide-text {
    grid-template-columns: 1.4fr 1fr;
  }

  .split--wide-media {
    grid-template-columns: 1fr 1.4fr;
  }
}

/* -----------------------------------------------------------------------------
 * 5. FLEX HELPERS
 * -----------------------------------------------------------------------------
 * A small set covering the recurring cases, rather than a utility framework.
 * -------------------------------------------------------------------------- */

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

.cluster--between {
  justify-content: space-between;
}

.cluster--center {
  justify-content: center;
}

.cluster--end {
  justify-content: flex-end;
}

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

.stack--tight {
  gap: var(--space-2xs);
}

.stack--loose {
  gap: var(--space-lg);
}

/* -----------------------------------------------------------------------------
 * 6. VISIBILITY
 * -----------------------------------------------------------------------------
 * A minimal set, used to show different markup at different sizes where a design
 * genuinely differs (for example a compact mobile menu button).
 *
 * Deliberately sparse: hiding content by viewport usually means the content is
 * wrong, not that it needs hiding (section 7).
 * -------------------------------------------------------------------------- */

.hide-mobile {
  display: none;
}

@media (min-width: 1024px) {
  .hide-mobile {
    display: block;
  }

  .hide-desktop {
    display: none;
  }
}

/* -----------------------------------------------------------------------------
 * 7. CONTAINER QUERIES (progressive enhancement)
 * -----------------------------------------------------------------------------
 * Where supported, components respond to their container rather than the
 * viewport. That is more correct: a card in a narrow sidebar should lay out as a
 * narrow card regardless of screen size (section 6).
 *
 * `@supports` guards it, so browsers without support simply use the viewport
 * media queries above and nothing breaks.
 * -------------------------------------------------------------------------- */

@supports (container-type: inline-size) {
  .card-host {
    container-type: inline-size;
    container-name: card;
  }

  @container card (min-width: 22rem) {
    .card--adaptive {
      flex-direction: row;
    }
  }
}

/* -----------------------------------------------------------------------------
 * 8. OVERFLOW GUARDS
 * -----------------------------------------------------------------------------
 * Belt-and-braces for section 8. These are the elements that most commonly
 * introduce horizontal scrolling.
 * -------------------------------------------------------------------------- */

/* Any direct child of main must not exceed its container. */
main > * {
  max-width: 100%;
}

/* A pre or table inside a wide content area gets its own scroll rather than
 * pushing the page. */
.overflow-guard {
  max-width: 100%;
  overflow-x: auto;
}

/* Flex and grid children default to `min-width: auto`, which means a long word
 * can force the container wider. `min-width: 0` permits shrinking, which is what
 * makes ellipsis and wrapping work inside flex/grid. */
.flex-child-shrink > *,
.grid > * {
  min-width: 0;
}