/**
 * Page skeleton: the container, the section rhythm, the split panels and the
 * repeating auto-fit grids.
 *
 * Every grid in the design is `repeat(auto-fit, minmax(<floor>, 1fr))` — the
 * columns are never declared per breakpoint, they simply stop fitting. The
 * floor is what differs between grids, so it is the one value each modifier
 * sets.
 */

/* ============================================================== container */

.dk-container {
  max-width: var(--dk-container);
  margin: 0 auto;
  padding: 0 var(--dk-gutter);
}

/* ================================================================ section */

.dk-section {
  background: var(--dk-white);
}

.dk-section__inner {
  max-width: var(--dk-container);
  margin: 0 auto;
  padding: var(--dk-section-pad-top) var(--dk-gutter) var(--dk-section-pad-bottom);
}

/** The alternating warm band. */
.dk-section--beige {
  background: var(--dk-beige);
}

.dk-section--seam-top {
  border-top: 1px solid var(--dk-border-soft);
}

.dk-section--seam-bottom {
  border-bottom: 1px solid var(--dk-border-soft);
}

/** Centred heading block: title, rule, standfirst. */
.dk-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.dk-head__title {
  margin: 0;
  font-family: var(--dk-font-display);
  font-size: clamp(28px, 3.3vw, 40px);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: var(--dk-track-section);
  text-transform: uppercase;
  color: var(--dk-ink);
}

.dk-head__lede {
  margin: 0;
  max-width: 760px;
  font: 400 18px/1.8 var(--dk-font-body);
  color: var(--dk-muted);
  text-wrap: pretty;
}

/** Left-aligned variant used by the Mission, FAQ and call-back columns. */
.dk-head--start {
  align-items: flex-start;
  text-align: left;
}

/* ================================================================== grids */

.dk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--dk-grid-floor, 280px), 1fr));
  gap: var(--dk-grid-gap, 30px);
}

.dk-grid--pillars {
  --dk-grid-floor: 280px;
  --dk-grid-gap: 52px 40px;
  margin-top: 64px;
}

.dk-grid--cards {
  --dk-grid-floor: 300px;
  --dk-grid-gap: 30px;
  margin-top: 58px;
}

.dk-grid--steps {
  --dk-grid-floor: 250px;
  --dk-grid-gap: 44px 34px;
  margin-top: 60px;
}

.dk-grid--gallery {
  --dk-grid-floor: 180px;
  --dk-grid-gap: 16px;
  margin-top: 48px;
}

.dk-grid--twoup {
  --dk-grid-floor: 320px;
  --dk-grid-gap: 56px 64px;
}

.dk-grid--footer {
  --dk-grid-floor: 260px;
  --dk-grid-gap: 48px 56px;
  padding-bottom: 56px;
}

/** Centres a section's closing call to action. */
.dk-section__cta {
  display: flex;
  justify-content: center;
  margin-top: var(--dk-cta-gap, 56px);
}

/* ================================================================= splits */

/**
 * A full-bleed two-panel band: an image placeholder beside a text column.
 * Below 340px of available width per column the two stack, which is exactly
 * what the auto-fit floor achieves without a media query.
 */
.dk-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.dk-split__media {
  position: relative;
  display: block;
  min-height: var(--dk-split-media-height, 520px);
  background-color: var(--dk-slate);
  background-image: var(--dk-glow-split);
}

a.dk-split__media:hover {
  background-color: var(--dk-slate-hover);
}

/* The grey split panels are lighter than the hero's navy, so their captions
   need more contrast to sit at the same visual weight. */
.dk-split__media .dk-placeholder {
  color: var(--dk-on-dark-edge-strong);
}

.dk-split__panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}

.dk-split__body {
  width: 100%;
  max-width: 620px;
}

/* ============================================================ dark bands */

.dk-dark {
  position: relative;
  background-color: var(--dk-navy);
  background-image: var(--dk-glow-hero);
  color: var(--dk-on-dark);
}

.dk-dark--quote {
  background-color: var(--dk-navy-quote);
}

/** Photo placeholder ground used by cards and gallery tiles. */
.dk-photo {
  position: relative;
  overflow: hidden;
  background-color: var(--dk-slate-light);
  background-image: var(--dk-glow-card);
}