/* ==========================================================================
   WINTEAM — LAYOUT & UTILITIES
   Each one must earn its place: if it is used once, it belongs in the
   component instead.
   ========================================================================== */

/* ----------------------------------------------------------------- Layout */

/*  The single source of edge distance. Every measure is a max-width on the
    same centred box, so switching one does not change the gutter.          */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
  max-width: calc(var(--measure-content) + var(--gutter) * 2);
}

.container--wide {
  max-width: calc(var(--measure-wide) + var(--gutter) * 2);
}

.container--text {
  max-width: calc(var(--measure-text) + var(--gutter) * 2);
}

.container--narrow {
  max-width: calc(var(--measure-narrow) + var(--gutter) * 2);
}

.container--full {
  max-width: none;
}

/*  Vertical rhythm. `--space-section` is generous by design: negative space
    is a brand asset.                                                       */
.section {
  padding-block: var(--space-section);
}

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

/*  Twelve columns, collapsing to one below the large breakpoint. Components
    opt in to a span with `.col-N`; anything unspanned is full width.       */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

@media (min-width: 64rem) {
  .grid--12 {
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  }

  .col-3 { grid-column: span 3; }
  .col-4 { grid-column: span 4; }
  .col-5 { grid-column: span 5; }
  .col-6 { grid-column: span 6; }
  .col-7 { grid-column: span 7; }
  .col-8 { grid-column: span 8; }
  .col-9 { grid-column: span 9; }
  .col-12 { grid-column: span 12; }

  .col-start-2 { grid-column-start: 2; }
  .col-start-6 { grid-column-start: 6; }
  .col-start-7 { grid-column-start: 7; }
}

/*  Escapes a constrained container back to the viewport edges without
    breaking document flow.                                                 */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/*  Block-level rhythm inside a section. */
.stack-block > * + * {
  margin-block-start: var(--space-block);
}

.mt-block { margin-block-start: var(--space-block); }
.mt-6 { margin-block-start: 1.5rem; }
.mt-4 { margin-block-start: 1rem; }
.mt-3 { margin-block-start: 0.75rem; }
.mt-2 { margin-block-start: 0.5rem; }

/* ------------------------------------------------------------------ Glass */

/*  Subtle glass, not frosted plastic. Low opacity, high blur, a single
    hairline.

    Do not hand-write a `-webkit-backdrop-filter` twin: on the Next build the
    prefixed copy was de-duplicated down to the prefixed form alone and the
    blur silently stopped applying. Every browser this site targets supports
    the unprefixed property.                                                */
.glass {
  background-color: var(--glass-bg);
  border: 1px solid var(--glass-line);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
}

/*  Heavier variant for full-screen overlays where content must stay legible
    over arbitrary imagery.                                                 */
.glass-heavy {
  background-color: color-mix(in oklab, var(--surface) 88%, transparent);
  border-color: var(--glass-line);
  backdrop-filter: blur(calc(var(--glass-blur) * 1.6)) saturate(120%);
}

/* ------------------------------------------------------------------ Rules */

.rule-t { border-top: 1px solid var(--line); }
.rule-b { border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------------ Masks */

/*  Reveal masks. Lines animate from `translateY(110%)` inside these, which is
    how every line-level reveal on the site is built.                       */
.mask-clip {
  overflow: hidden;
  clip-path: inset(0 0 0 0);
}

.fade-x {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 8%,
    black 92%,
    transparent
  );
}

/* ------------------------------------------------------------ Interaction */

/*  Editorial underline: draws in from the left on hover, retracts to the
    right on exit. Apply to the element itself, not a wrapper.              */
.underline-draw {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease-editorial);
}

.underline-draw:hover,
.underline-draw[data-active="true"] {
  background-size: 100% 1px;
}

/* ------------------------------------------------------------ Housekeeping */

.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/*  Visually hidden but available to assistive technology. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/*  The skip link: hidden until it takes focus, then a real target. */
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  z-index: var(--z-modal);
  padding: 0.75rem 1.25rem;
  background-color: var(--surface);
  color: var(--content);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------- Colours */

.text-muted { color: var(--content-muted); }
.text-subtle { color: var(--content-subtle); }
.text-accent { color: var(--accent); }