/* ================================================================
   sv-odi.css — scoped under body[data-page="sv-odi"]
   Concept: Dark Cyber scrollytelling for a sports club SEO case.
   Pure system tokens (var(--accent) = cyan, set by header.php).
   No per-page palette overrides. Thin layout + spacing only.
   ================================================================ */

/* ── HERO ────────────────────────────────────────────────────── */
body[data-page="sv-odi"] .odi-hero {
  padding-block: clamp(4.5rem, 11vw, 8rem) clamp(0rem, 2vw, 0rem);
  position: relative;
}

body[data-page="sv-odi"] .odi-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}

body[data-page="sv-odi"] .odi-hero__headline {
  font-family: var(--gl-font-display);
  font-size: clamp(4.5rem, 16vw, 13rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.04em;
  margin: .25rem 0 .5rem;
}

body[data-page="sv-odi"] .odi-hero__line {
  display: block;
}

body[data-page="sv-odi"] .odi-hero__line--grad {
  background: var(--gl-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body[data-page="sv-odi"] .odi-hero__line--ghost {
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--gl-fg) 35%, transparent);
}

body[data-page="sv-odi"] .odi-hero__sub {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.72;
  color: var(--gl-muted);
  max-width: 54ch;
  margin: 0;
}

/* Service tags */
body[data-page="sv-odi"] .odi-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

body[data-page="sv-odi"] .odi-tag {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding: .3rem .85rem;
  border-radius: 999px;
}

/* Scoreboard strip */
body[data-page="sv-odi"] .odi-scoreboard {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--gl-surface);
  border: 1px solid var(--gl-border);
  border-radius: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: center;
}

body[data-page="sv-odi"] .odi-score-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .1rem;
}

body[data-page="sv-odi"] .odi-score-item__num {
  font-family: var(--gl-font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1;
  color: var(--gl-fg);
}

body[data-page="sv-odi"] .odi-score-item__unit {
  font-family: var(--gl-font-display);
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--accent);
  margin-left: .05em;
}

body[data-page="sv-odi"] .odi-score-item__label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-muted);
  margin-top: .2rem;
}

body[data-page="sv-odi"] .odi-score-divider {
  width: 1px;
  height: 2.75rem;
  background: var(--gl-border);
  align-self: center;
  flex-shrink: 0;
}

/* ── SHARED SECTION TYPOGRAPHY ───────────────────────────────── */
body[data-page="sv-odi"] .odi-section-title {
  font-family: var(--gl-font-display);
  font-size: clamp(2.25rem, 6vw, 5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--gl-fg);
  margin: 0 0 1rem;
}

body[data-page="sv-odi"] .odi-section-lead {
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.75;
  color: var(--gl-muted);
  max-width: 58ch;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
}

body[data-page="sv-odi"] .odi-section-lead em {
  font-style: normal;
  color: color-mix(in srgb, var(--gl-muted) 70%, transparent);
}

/* ── UITDAGING — 2×2 glass card grid ────────────────────────── */
body[data-page="sv-odi"] .odi-challenge-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

body[data-page="sv-odi"] .odi-block {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

body[data-page="sv-odi"] .odi-block__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  flex-shrink: 0;
}

body[data-page="sv-odi"] .odi-block__title {
  font-family: var(--gl-font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--gl-fg);
  margin: 0;
}

body[data-page="sv-odi"] .odi-block__body {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--gl-muted);
  margin: 0;
}

/* ── AANPAK — zigzag rows ────────────────────────────────────── */
body[data-page="sv-odi"] .odi-aanpak {
  position: relative;
}

/* Phase visual panel (replaces a media image) */
body[data-page="sv-odi"] .odi-phase-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  background: var(--gl-surface);
}

body[data-page="sv-odi"] .odi-phase-visual__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem;
}

body[data-page="sv-odi"] .odi-phase-visual__num {
  font-family: var(--gl-font-display);
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.06em;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--accent) 50%, transparent);
  user-select: none;
}

body[data-page="sv-odi"] .odi-phase-visual__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
}

body[data-page="sv-odi"] .odi-phase-visual__tags span {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: .2rem .65rem;
  border-radius: 999px;
}

/* Phase text body */
body[data-page="sv-odi"] .odi-phase-label {
  font-family: var(--gl-font-display);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .5rem;
}

body[data-page="sv-odi"] .odi-phase-title {
  font-family: var(--gl-font-display);
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--gl-fg);
  margin: 0 0 .85rem;
}

body[data-page="sv-odi"] .odi-phase-body {
  font-size: clamp(.9rem, 1.8vw, 1rem);
  line-height: 1.75;
  color: var(--gl-muted);
  margin: 0;
  max-width: 52ch;
}

/* ── RESULTAAT — metric cards ────────────────────────────────── */
body[data-page="sv-odi"] .odi-metrics {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.25rem;
}

body[data-page="sv-odi"] .odi-metric {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: border-color .35s var(--gl-ease), box-shadow .35s var(--gl-ease);
}

body[data-page="sv-odi"] .odi-metric:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--gl-border));
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--accent) 30%, transparent);
}

body[data-page="sv-odi"] .odi-metric__num {
  font-family: var(--gl-font-display);
  font-size: clamp(3.25rem, 8vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--gl-fg);
  display: inline;
}

body[data-page="sv-odi"] .odi-metric__unit {
  font-family: var(--gl-font-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  color: var(--accent);
  margin-left: .05em;
  display: inline;
}

body[data-page="sv-odi"] .odi-metric__label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gl-muted);
  margin-top: .5rem;
}

body[data-page="sv-odi"] .odi-metric__note {
  font-size: .82rem;
  line-height: 1.55;
  color: color-mix(in srgb, var(--gl-muted) 70%, transparent);
  margin: .4rem 0 0;
}

/* Disclaimer */
body[data-page="sv-odi"] .odi-disclaimer {
  margin: 2rem 0 0;
  font-size: .78rem;
  color: color-mix(in srgb, var(--gl-muted) 55%, transparent);
  letter-spacing: .03em;
}

/* ── VOLGENDE CASE ───────────────────────────────────────────── */
body[data-page="sv-odi"] .odi-next {
  padding-block: clamp(4rem, 9vw, 7rem);
  border-top: 1px solid var(--gl-border);
}

body[data-page="sv-odi"] .odi-next__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

body[data-page="sv-odi"] .odi-next__link {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  text-decoration: none;
  transition: gap .3s var(--gl-ease);
}

body[data-page="sv-odi"] .odi-next__link:hover {
  gap: 1.5rem;
}

body[data-page="sv-odi"] .odi-next__client {
  font-family: var(--gl-font-display);
  font-size: clamp(2.75rem, 10vw, 8rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .92;
}

body[data-page="sv-odi"] .odi-next__arrow {
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .3s var(--gl-ease);
}

body[data-page="sv-odi"] .odi-next__link:hover .odi-next__arrow {
  transform: translateX(8px);
}

body[data-page="sv-odi"] .odi-next__sub {
  font-size: clamp(.9rem, 1.8vw, 1rem);
  color: var(--gl-muted);
  margin: 0;
  max-width: 46ch;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 760px) {
  body[data-page="sv-odi"] .odi-challenge-grid {
    grid-template-columns: 1fr;
  }
  body[data-page="sv-odi"] .odi-metrics {
    grid-template-columns: 1fr 1fr;
  }
  body[data-page="sv-odi"] .odi-score-divider {
    display: none;
  }
}

@media (max-width: 480px) {
  body[data-page="sv-odi"] .odi-metrics {
    grid-template-columns: 1fr;
  }
  body[data-page="sv-odi"] .odi-hero__line--ghost {
    -webkit-text-stroke-width: 1.5px;
  }
}