/* Hintr — section layout + grid */

.container {
  width: 100%;
  max-width: var(--container-default);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-wide); }

/* ─── Section rhythm: dark ↔ light alternation ─────── */
.section {
  padding-top: var(--section-y-mobile);
  padding-bottom: var(--section-y-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--section-y-desktop);
    padding-bottom: var(--section-y-desktop);
  }
}

.section--dark {
  background: var(--c-black);
  color: var(--c-text-on-dark);
}
.section--light {
  background: var(--c-light);
  color: var(--c-text);
}
.section--white {
  background: var(--c-white);
  color: var(--c-text);
}
.section--graphite {
  background: var(--c-graphite-4);
  color: var(--c-text-on-dark);
}

/* Section eyebrow + heading + lead */
.section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.section-eyebrow {
  display: inline-block;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-text-faint);
  margin-bottom: 16px;
}
.section-lead {
  margin-top: 20px;
  font-size: var(--fs-21);
  line-height: var(--lh-snug);
  color: var(--c-text-muted);
}
.section--dark .section-lead {
  color: var(--c-text-on-dark-muted);
}

/* ─── Grid utilities ───────────────────────────────── */
.grid {
  display: grid;
  gap: 24px;
}
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
.grid--2 { grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Reveal animation (Intersection Observer adds .is-visible) ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}