/* ==========================================================================
   LAYOUT
   Containers, section rhythm and the reusable grid primitives.
   Page structure is Grid + Flexbox only — no absolute-positioned page layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Containers
   -------------------------------------------------------------------------- */

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

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

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

/* --------------------------------------------------------------------------
   Sections
   Vertical rhythm plus the alternating background treatment.
   -------------------------------------------------------------------------- */

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

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

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

.section--deep {
  background-color: var(--color-black);
}

/* Hairline divider between adjacent sections that share a background */
.section--ruled {
  border-top: 1px solid var(--color-border-soft);
}

/* Section intro block: eyebrow + heading + lede, strongly left aligned */
.section-head {
  max-width: 42rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-head--wide {
  max-width: 56rem;
}

.section-head--center {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

.section-head--center .lede {
  margin-inline: auto;
}

/* Heading + supporting copy side by side on wide screens */
.section-head--split {
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-xl);
  align-items: end;
}

/* --------------------------------------------------------------------------
   Grids
   Column counts step down at the tablet/mobile breakpoints in responsive.css.
   -------------------------------------------------------------------------- */

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

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.grid--tight { gap: var(--space-sm); }
.grid--loose { gap: var(--space-lg); }

/* Two-column content/media split used by the hero and player sections */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.split--content-first {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.split--media-narrow {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.split--top {
  align-items: start;
}

/* --------------------------------------------------------------------------
   Flow spacing
   -------------------------------------------------------------------------- */

.stack > * + * {
  margin-top: var(--space-sm);
}

.stack--lg > * + * {
  margin-top: var(--space-md);
}

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