/**
 * IDPSection — ported 1:1 from components/sections/IDPSection.module.css.
 * Module root .idp → .s-idp; other module classes scoped under .s-idp.
 */
.s-idp {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: var(--c-midnight);
}

/* Wrapper that holds the wall + type, so it can be swept off as one unit. */
.s-idp .inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

/* ── Curated image wall (docs/06) ───────────────────────────────────── */
.s-idp .grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
}

@media (max-width: 768px) {
  .s-idp .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.s-idp .cell {
  position: relative;
  overflow: hidden;
}

.s-idp .cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* darker documentary grade — this is the section's dark beat */
  filter: grayscale(0.25) contrast(1.05) brightness(0.72) saturate(0.9);
}

/* Dark scrim — bright type over a graded image wall. */
.s-idp .scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    120% 90% at 50% 50%,
    rgba(14, 17, 22, 0.78) 0%,
    rgba(14, 17, 22, 0.55) 55%,
    rgba(14, 17, 22, 0.45) 100%
  );
}

.s-idp .phrase {
  position: relative;
  z-index: 2;
  margin: 0;
  /* Cap width + size so the expanded phrase always fits the viewport (it was
     clipped by the section's overflow:hidden at ~1280–1440px). */
  max-width: 92vw;
  padding-inline: var(--gutter);
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-size: clamp(1.75rem, 5vw, 4.5rem);
  color: var(--c-text-on-dark);
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 4px 60px rgba(0, 0, 0, 0.5);
}

/* Green initials (I·D·P) — heritage identity inside the phrase. */
.s-idp .cap {
  color: var(--c-green-soft);
}

/* inline-flex + baseline keeps the cap and the (animating-width) remainder
   aligned while the remainder's width is tweened. */
.s-idp .word {
  display: inline-flex;
  align-items: baseline;
}
.s-idp .word:not(:last-child) {
  margin-right: 0.28em;
}

.s-idp .rest {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}