/* =========================
   UTILITIES — page grid, shared type, button, build-on-view pieces
========================= */

/* One 12-column grid with one pair of margins. The axis is column 6 (≈ 42%):
   headings start on it, the zone to its left holds figures and side matter. */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding-inline: var(--margin);
}

/* ---------- Section headings: set on an accent mark, like a highlighter ----------
   The mark is an inline span, so a heading that wraps gets one block per line.
   On view the mark is uncovered left to right: a panel in the section's own
   ground (--ground) shrinks off it. It replays with the other [data-build]
   blocks (js/build.js). */
.section-title {
  position: relative;
  justify-self: start;
  width: fit-content;
  font-size: var(--step-head);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

/* Sub-headings (Vision, Mission) carry the same mark at a smaller size */
.section-title--sub {
  font-size: clamp(1.75rem, 1rem + 1.7vw, 2.75rem);
}

.section-title__mark {
  padding: 0 0.12em;
  background: var(--accent);
  color: var(--accent-ink);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

@media (prefers-reduced-motion: no-preference) {
  .motion .section-title[data-build]::after {
    content: "";
    position: absolute;
    inset: -0.1em -0.2em;
    background: var(--ground, var(--carbon));
    transform-origin: right;
  }

  .motion .section-title.is-built::after {
    transform: scaleX(0);
    transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.1s;
  }
}

/* Read by screen readers, not shown (e.g. the final figure of a counter that animates) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Button: flat accent fill, square corners ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: 0;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-body);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: transform 0.35s var(--ease);
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(1px) scale(0.98);
}

.button:disabled {
  cursor: progress;
}

/* Arrow variant: the arrow sits in its own darker accent cell and moves on hover */
.button--arrow {
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding: 0 0 0 1.5rem;
}

.button__icon {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 3.5rem;
  background: var(--accent-press);
}

.button__icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  transition: transform 0.45s var(--ease);
}

.button--arrow:hover .button__icon svg,
.button--arrow:focus-visible .button__icon svg {
  transform: translateX(4px);
}

/* ---------- Build pieces (inside or on a [data-build] block: js/build.js) ----------
   .build-slide  comes in along --dir (1 from the right, -1 from the left):
                 text moves towards the thing it sits beside
   .build-rise   comes up from below
   .build-shutter a picture uncovered by a panel in the section's ground
                 (--ground) as it settles from a slight zoom
   --delay staggers a piece within its block. Nothing is hidden without the
   .motion class, and reduced motion leaves everything in place. */
.build-shutter {
  position: relative;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .motion [data-build] .build-slide,
  .motion .build-slide[data-build] {
    opacity: 0;
    transform: translate3d(calc(var(--dir, 1) * 2.5rem), 0, 0);
  }

  .motion [data-build] .build-rise,
  .motion .build-rise[data-build] {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
  }

  .motion .is-built .build-slide,
  .motion .build-slide.is-built,
  .motion .is-built .build-rise,
  .motion .build-rise.is-built {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.7s var(--ease) var(--delay, 0s),
      transform 1s var(--ease) var(--delay, 0s);
  }

  .motion .build-shutter img {
    transform: scale(1.12);
  }

  .motion .build-shutter::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ground, var(--carbon));
    transform-origin: right;
  }

  .motion .build-shutter.is-built img {
    transform: none;
    transition: transform 1.6s var(--ease);
  }

  .motion .build-shutter.is-built::after {
    transform: scaleX(0);
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  }
}