/* ES4 - Waarom wij de markt op gaan: NAVY ankerpaneel op het cream middenrif.
   v3 (feedback Timo 10-09-2026, ronde 2). Twee recepten van /over-ons overgenomen
   met .es-prefix, zodat deze shell geen over-ons-stylesheets laadt:
   - het paneel uit css/over-ons/o3.css (.oa-keuze-panel): radial gradient navy,
     r-lg, paneelschaduw, ruime padding;
   - de dot-figuur uit css/over-ons/o2.css (.oa-problem-card/-dots/-legend): 10x5
     bolletjes, bovenste rij accent = 20%, gestaffelde fade-in op .is-in.
   De balk-animatie van v2 is vervallen. */

/* Sectie op cream; horizontaal clippen zodat de paneelschaduw nooit een scrollbalk geeft. */
.es-markt.section {
  position: relative;
  padding-block: var(--space-section-s);
  overflow-x: clip;
}

/* ---------- Paneel (o3-recept) ---------- */
.es-markt-paneel {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 140% at 85% -30%, var(--navy-800) 0%, transparent 60%),
    var(--navy-950);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-panel);
  padding: clamp(2.5rem, 4.5vw, 4rem);
  color: var(--text-body-inv);
}

/* Grid 6/5: argument links, dot-kaart rechts (o2-verdeling). */
.es-markt-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  column-gap: var(--gap-lg);
  row-gap: var(--gap-md);
  align-items: center;
}

.es-markt-copy .kicker-line { margin-bottom: 22px; }

/* De eyebrow heeft in base.css geen eigen ondermarge; elke sectie zet die zelf (18-20px).
   In dit paneel ontbrak hij, en in de solo-stand (ws12, sr11) plakte "ONZE AANPAK" met 1px
   gemeten tegen de kop. Timo 15-09: "onze aanpak staat er ook heel dicht op, boven die titel."
   ⛔ sr2.css zet er een eigen 18px overheen op .sr-probleem; die is specifieker en wint. */
.es-markt-copy .eyebrow { margin-bottom: 20px; }

.es-markt-copy h2 {
  /* Lange kop in een 6/11-kolom binnen paneelpadding: iets onder --text-h2, zelfde
     recept als de kop in het probleemblok op /over-ons. */
  font-size: clamp(2.2rem, 3.5vw, 3.3rem);
  margin-bottom: clamp(22px, 2.6vw, 32px);
  max-width: 21ch;
  color: var(--text-strong-inv);
}

.es-markt-copy .lead {
  max-width: 54ch;
  margin-bottom: 18px;
  color: var(--text-body-inv);
}

.es-markt-slot {
  max-width: 54ch;
  color: var(--text-body-inv);
  line-height: 1.65;
}

/* ---------- Dot-kaart (o2-recept) ---------- */
.es-markt-kaart {
  margin: 0;
  background: var(--surface-card-dark);
  border: var(--border-inv);
  border-radius: var(--r-md);
  padding: var(--gap-md);
}

.es-dots {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: clamp(6px, .9vw, 12px);
}

.es-dot {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--navy-700);
}

.es-dot--accent { background: var(--blue-200); }

/* Accentbolletjes liften mee op het centrale reveal-mechanisme: zodra motion.js
   .is-in op de kaart zet, faden ze gestaffeld in (--i per bolletje). Fail-open:
   zonder html.motion staat alles gewoon aan. */
html.motion .es-markt-kaart .es-dot--accent {
  opacity: 0;
  transform: scale(.35);
  transition:
    opacity .45s cubic-bezier(.22, .61, .36, 1),
    transform .45s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(.45s + var(--i, 0) * .04s);
}
html.motion .es-markt-kaart.is-in .es-dot--accent { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.motion .es-markt-kaart .es-dot--accent { opacity: 1; transform: none; transition: none; }
}

/* ---------- Legenda ---------- */
.es-legenda {
  margin: var(--gap-sm) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.es-legenda-rij { display: flex; align-items: flex-start; gap: 14px; }

.es-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--navy-700);
  border: 1px solid var(--line-inv);
  margin-top: 5px;
}

.es-swatch--accent { background: var(--blue-200); }

.es-legenda-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.es-legenda-cijfer {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .005em;
  line-height: 1;
  font-size: clamp(1.25rem, 1.5vw, 1.45rem);
  color: var(--text-strong-inv);
}

.es-legenda-noot {
  font-size: var(--text-small);
  line-height: 1.5;
  color: var(--text-muted-inv);
}

/* ---------- Tablet / mobiel ---------- */
@media (max-width: 880px) {
  .es-markt-grid { grid-template-columns: 1fr; row-gap: var(--gap-md); }
  .es-markt-kaart { max-width: 480px; }
  .es-markt-copy h2 { max-width: none; }
}

@media (max-width: 560px) {
  .es-markt-paneel { padding: clamp(1.75rem, 6vw, 2.5rem); }
  /* De vaste regelbreuk in de kop is bemeten op de desktopkolom; op mobiel liet hij
     "zoekt," alleen op een regel staan (gemeten 10-09-2026). Hier vloeit de kop. */
  .es-markt-copy h2 br { display: none; }
  .es-markt-copy .kicker-line { margin-bottom: 18px; }
  .es-markt-kaart { padding: 24px 20px; }
  .es-dots { gap: 6px; }
}