/* ============================================================================
 * layout.css — containers, bands, grids. Mobile first throughout.
 * ==========================================================================*/

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

.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: calc(var(--space-section) * 0.6); }
/* 12: two light bands in a row stack two full section paddings and leave a
 * strip of nothing between them. A finale that follows another light band
 * drops its own top padding; one that follows a dark band keeps it, so the
 * card never touches the ground above it. */
.band--surface + .section--finale.band--surface { padding-top: 0; }

/* --- bands ---------------------------------------------------------------
 * A band owns its ground. Dark bands set their own text colours so nothing
 * inside has to know where it sits.
 * ------------------------------------------------------------------------*/
.band { position: relative; }
.band--page { background: var(--page); }
.band--surface { background: var(--surface); }

.band--dark {
  background: var(--navy-900);
  color: var(--on-dark);
  /* clip, not hidden: `hidden` would make the band a scroll container and a
   * sticky child inside it would never stick. */
  overflow: clip;
}
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4 { color: #fff; }
/* Teal is a label mark, not text: a link on a dark ground is white with a
 * muted underline instead. Buttons keep their own colours. */
.band--dark a:not(.btn) { color: #fff; text-decoration-color: var(--on-dark-mute); }
.band--dark a:not(.btn):hover { color: #fff; text-decoration-color: #fff; }

/* --- grids ---------------------------------------------------------------*/
.grid { display: grid; gap: var(--space-block); }

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

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

.stack { display: flex; flex-direction: column; gap: var(--s4); }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }

/* One section head, one measure, one rhythm below it. */
.section__head { max-width: 62ch; margin-bottom: var(--space-block); }
/* A head that runs across two columns rather than one measure of prose. */
.cols--head { margin-bottom: var(--space-block); }

/* --- cols ----------------------------------------------------------------
 * A two-column split whose ratio the markup sets with --split, so a section
 * can lean toward its copy or its picture without a new class each time.
 * One column below 900px, always.
 * ------------------------------------------------------------------------*/
.cols {
  display: grid;
  gap: var(--space-block);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .cols {
    grid-template-columns: var(--split, 1fr 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  .cols--top { align-items: start; }
  .cols--reverse > *:first-child { order: 2; }
  .cols > .device { justify-self: center; }
}

/* --- props ---------------------------------------------------------------
 * The value-prop set. Deliberately not four equal boxes in a row: the first
 * card is wider, so the grid reads as a composition rather than a template.
 * ------------------------------------------------------------------------*/
.props {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .props { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .props { grid-template-columns: 1.35fr 1fr 1fr; }
  .props > :first-child { grid-row: span 2; }
  .props > :nth-child(4) { grid-column: 2 / -1; }
}

/* A grid or flex child will not shrink below the intrinsic width of what it
 * holds unless it is told it may. The wallet replicas are rendered at their
 * true pixel width and scaled down, so without this a 900px screen would prise
 * its column open and the whole page would scroll sideways. */
.cols > *,
.grid > *,
.stack,
.rep-host { min-width: 0; }