/* ==========================================================================
   Ontdek · ontdek.html + ontdek-artikel.html
   Podium (donker) voor ontdekken en beleven, papier (licht) voor lezen en kiezen.
   Alle selectors beginnen met .ont- ; alleen tokens, geen losse hexwaarden.
   ========================================================================== */

/* ---------- gedeelde bouwstenen ---------- */
.ont-type {
  display: inline-flex; align-items: center; gap: 6px; height: 24px;
  font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); font-weight: 600; letter-spacing: var(--gg-ls-caps);
  text-transform: uppercase; color: var(--gg-ink-2); white-space: nowrap;
}
.ont-type .gg-icon { width: 15px; height: 15px; stroke-width: 1.75; }
.on-dark .ont-type { color: var(--gg-on-dark); }
.on-dark .ont-type .gg-icon { color: var(--gg-violet); }

.ont-card__labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.ont-card__meta { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-mono); color: var(--gg-muted); text-transform: uppercase; }

.ont-crumb { margin-bottom: var(--gg-s-6); }
.on-dark .ont-crumb [aria-current="page"] { color: var(--gg-on-dark); }
.on-dark .ont-crumb a:hover { color: var(--gg-on-dark); }
@media (max-width: 599.98px) { .on-dark .gg-breadcrumb--collapse li:nth-last-child(2)::before { color: var(--gg-on-dark); } }

/* ---------- 1. Hero: podium met uitgelichte vondst ---------- */
.ont-hero { padding-block: var(--gg-s-4) calc(var(--gg-section-y) + var(--gg-s-12)); }
.ont-hero__head { display: grid; gap: var(--gg-s-4); }
.ont-kicker {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-on-dark-muted);
}
.ont-kicker__dot { width: 6px; height: 6px; border-radius: 1px; background: var(--gg-pink-on-dark); }
.ont-kicker__sep { color: var(--gg-podium-line); }
.ont-kicker [lang="en"] { text-transform: none; letter-spacing: var(--gg-ls-mono); color: var(--gg-on-dark); }
.ont-hero__title { font-size: var(--gg-fs-3xl); font-weight: var(--gg-fw-heavy); letter-spacing: var(--gg-ls-display); line-height: var(--gg-lh-tight); max-width: 17ch; text-wrap: balance; }
.ont-hero__lead { color: var(--gg-on-dark-muted); font-size: var(--gg-fs-md); line-height: var(--gg-lh-body); max-width: 54ch; }
@media (min-width: 900px) {
  .ont-hero { padding-top: var(--gg-s-6); }
  .ont-hero__head { grid-template-columns: 7fr 5fr; align-items: end; column-gap: var(--gg-s-12); }
  .ont-kicker { grid-column: 1 / -1; }
  .ont-hero__lead { padding-bottom: 6px; }
}

.ont-feature { margin-top: var(--gg-s-10); }
.ont-feature__item { display: grid; gap: var(--gg-s-6); }
.ont-feature .gg-player { --gg-ratio: 4 / 3; border-radius: var(--gg-r-xl); box-shadow: 0 0 0 1px var(--gg-podium-line); }
.ont-feature__body { display: grid; gap: var(--gg-s-4); align-content: start; }
.ont-feature__flag { display: flex; gap: 8px; font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-violet); }
.ont-feature__flag span[aria-hidden] { color: var(--gg-podium-line); }
.ont-feature__title { font-size: var(--gg-fs-2xl); font-weight: var(--gg-fw-bold); letter-spacing: var(--gg-ls-heading); line-height: var(--gg-lh-snug); text-wrap: balance; }
.ont-feature__title a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--gg-dur-3) var(--gg-ease); }
.ont-feature__title a:hover { background-size: 100% 1px; }
.ont-feature__excerpt { color: var(--gg-on-dark-muted); max-width: 46ch; }
.ont-feature__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--gg-s-1); }
@media (min-width: 900px) {
  .ont-feature { margin-top: var(--gg-s-14); }
  .ont-feature__item { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gg-s-12); align-items: center; }
  .ont-feature .gg-player { --gg-ratio: 16 / 11; }
}

/* mini-productregel (podium) */
.ont-mini { display: flex; gap: 14px; align-items: center; margin-top: var(--gg-s-2); padding-top: var(--gg-s-5); border-top: 1px solid var(--gg-podium-line); }
.ont-mini__img { flex: 0 0 56px; width: 56px; aspect-ratio: 4 / 5; border-radius: var(--gg-r-sm); overflow: hidden; background: var(--gg-podium-raised); }
.ont-mini__img img { width: 100%; height: 100%; object-fit: cover; }
.ont-mini__body { display: grid; gap: 2px; min-width: 0; }
.ont-mini__label { font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-on-dark-muted); }
.ont-mini__name { color: var(--gg-on-dark); font-weight: 600; font-size: var(--gg-fs-sm); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.ont-mini__name:hover { text-decoration: underline; }
.ont-mini__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.ont-mini__foot .gg-price__now { font-size: var(--gg-fs-sm); }

/* ---------- 2. Overgang: labelsleutel half over het podium ---------- */
.ont-legend { position: relative; margin-top: calc(var(--gg-s-12) * -1); z-index: 2; }
.ont-legend__card { background: var(--gg-paper); border-radius: var(--gg-r-xl); box-shadow: var(--gg-shadow-3); padding: var(--gg-s-5); display: grid; gap: var(--gg-s-4); }
.ont-legend__title { font-size: var(--gg-fs-2xs); font-weight: 600; letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); }
.ont-legend__list { display: grid; gap: var(--gg-s-4); margin: 0; }
.ont-legend__list > div { display: grid; gap: 6px; align-content: start; }
.ont-legend__list dt { margin: 0; }
.ont-legend__list dd { margin: 0; font-size: var(--gg-fs-sm); color: var(--gg-muted); line-height: 1.45; }
.ont-legend .gg-media-label { background: var(--gg-ink); }
@media (max-width: 599.98px) {
  .ont-legend__list > div { grid-template-columns: 128px 1fr; gap: 12px; align-items: start; }
  .ont-legend__list > div + div { padding-top: var(--gg-s-4); border-top: 1px solid var(--gg-line); }
}
@media (min-width: 600px) { .ont-legend__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gg-s-8); } }
@media (min-width: 1200px) {
  .ont-legend__card { grid-template-columns: 150px 1fr; align-items: start; padding: var(--gg-s-6) var(--gg-s-8); }
  .ont-legend__title { padding-top: 5px; }
  .ont-legend__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ont-legend__list > div + div { border-left: 1px solid var(--gg-line); padding-left: var(--gg-s-6); }
}

/* ---------- 3. Filters + raster ---------- */
.ont-browse { padding-block: var(--gg-section-y); }
.ont-browse__head { margin-bottom: var(--gg-s-5) !important; }
.ont-count { font-size: var(--gg-fs-xs); color: var(--gg-muted); letter-spacing: var(--gg-ls-mono); }
.ont-filters { display: grid; gap: var(--gg-s-3); padding-block: var(--gg-s-4); border-block: 1px solid var(--gg-line); }
.ont-filters__row { display: grid; gap: 8px; min-width: 0; }
.ont-filters__label { font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); }
.ont-chiprow { display: flex; gap: 8px; }
.ont-chip { gap: 8px; }
.ont-chip__n { font-family: var(--gg-mono); font-size: var(--gg-fs-2xs); color: var(--gg-muted); font-weight: 500; }
.ont-chip[aria-pressed="true"] .ont-chip__n { color: inherit; opacity: .8; }
@media (min-width: 900px) {
  .ont-filters__row { grid-template-columns: 72px 1fr; align-items: center; gap: var(--gg-s-4); }
  .ont-filters__chips.gg-scroller { margin-inline: 0; padding-inline: 0; overflow: visible; }
  .ont-chiprow { flex-wrap: wrap; }
}
.ont-typehelp { margin-top: var(--gg-s-3); min-height: 1.5em; }
.ont-typehelp b { color: var(--gg-ink); font-weight: 600; }

.ont-grid { margin-top: var(--gg-s-6); display: grid; }
.ont-grid[aria-busy="true"] { pointer-events: none; }

/* verhaalkaart */
.ont-card { position: relative; display: grid; gap: var(--gg-s-3); min-width: 0; color: var(--gg-ink); }
.ont-card__media { position: relative; aspect-ratio: 4 / 3; border-radius: var(--gg-r-card); overflow: hidden; background: var(--gg-surface); }
.ont-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--gg-dur-4) var(--gg-ease); }
.ont-card__ml { position: absolute; left: 10px; bottom: 10px; z-index: 2; pointer-events: none; }
.ont-card__body { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ont-card__title { font-size: var(--gg-fs-lg); font-weight: var(--gg-fw-semibold); letter-spacing: -0.015em; line-height: 1.25; text-wrap: balance; }
.ont-card__title a { color: inherit; text-decoration: none; }
.ont-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--gg-r-card); }
.ont-card__title a:focus-visible { outline: none; }
.ont-card__title a:focus-visible::after { outline: var(--gg-focus-width) solid var(--gg-focus); outline-offset: 4px; }
.ont-card__excerpt { font-size: var(--gg-fs-sm); color: var(--gg-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ont-card__products { font-size: var(--gg-fs-xs); font-weight: 500; color: var(--gg-ink-2); display: flex; align-items: center; gap: 6px; }
.ont-card__products::before { content: ""; width: 10px; height: 1px; background: currentColor; opacity: .5; }
@media (hover: hover) {
  .ont-card:hover .ont-card__media img { transform: scale(1.03); }
  .ont-card:hover .ont-card__title a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
.on-dark .ont-card { color: var(--gg-on-dark); }
.on-dark .ont-card__media { background: var(--gg-podium-raised); }
.on-dark .ont-card__products { color: var(--gg-on-dark); }
.ont-card.is-skeleton .ont-card__media { border-radius: var(--gg-r-card); }

/* "in de maak"-tegel: publicatieritme zonder datum te beloven */
.ont-upcoming { border: 1px dashed var(--gg-line-input); border-radius: var(--gg-r-card); padding: var(--gg-s-5); display: grid; gap: var(--gg-s-3); align-content: start; background: var(--gg-paper); }
.ont-upcoming__k { display: inline-flex; align-items: center; gap: 8px; font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); }
.ont-upcoming__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--gg-success); box-shadow: 0 0 0 0 var(--gg-success-line); animation: ont-pulse 2.4s var(--gg-ease) infinite; }
@keyframes ont-pulse { 0% { box-shadow: 0 0 0 0 var(--gg-success-line); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .ont-upcoming__pulse { animation: none; } }
.ont-upcoming__h { font-size: var(--gg-fs-lg); font-weight: var(--gg-fw-semibold); letter-spacing: -0.015em; }
.ont-upcoming ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gg-s-3); }
.ont-upcoming li { display: grid; gap: 2px; padding-top: var(--gg-s-3); border-top: 1px solid var(--gg-line); }
.ont-upcoming__t { font-size: var(--gg-fs-sm); font-weight: 500; line-height: 1.4; }
.ont-upcoming__note { color: var(--gg-muted); }

.ont-more { grid-column: 1 / -1; padding-top: var(--gg-s-8); }
.ont-empty { grid-column: 1 / -1; }

/* mobiel: eerste verhaal groot, de rest als rij (scant sneller) */
@media (max-width: 599.98px) {
  .ont-card--lead { padding-bottom: var(--gg-s-6); }
  .ont-card--lead .ont-card__title { font-size: var(--gg-fs-xl); }
  .ont-card--std { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; padding-block: var(--gg-s-4); border-top: 1px solid var(--gg-line); }
  .ont-card--std .ont-card__media { aspect-ratio: 1; border-radius: var(--gg-r-md); }
  .ont-card--std .ont-card__ml { display: none; }
  .ont-card--std .ont-card__body { gap: 6px; }
  .ont-card--std .ont-card__labels .gg-tag { height: 22px; }
  .ont-card--std .ont-card__title { font-size: var(--gg-fs-base); }
  .ont-card--std .ont-card__excerpt { display: none; }
  .ont-card--std .ont-card__title a::after { border-radius: var(--gg-r-md); }
  .ont-card--std.is-skeleton .ont-card__media { border-radius: var(--gg-r-md); }
  .ont-upcoming { margin-block: var(--gg-s-4); }
}
@media (min-width: 600px) {
  .ont-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gg-s-10) var(--gg-s-6); }
  .ont-card--lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gg-s-8); align-items: center; }
  .ont-card--lead .ont-card__media { aspect-ratio: 16 / 10; }
  .ont-card--lead .ont-card__title { font-size: var(--gg-fs-2xl); font-weight: var(--gg-fw-bold); letter-spacing: var(--gg-ls-heading); }
  .ont-card--lead .ont-card__excerpt { font-size: var(--gg-fs-base); -webkit-line-clamp: 3; }
  .ont-card--lead .ont-card__body { gap: var(--gg-s-3); }
}
@media (min-width: 900px) {
  .ont-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gg-s-12) var(--gg-s-8); }
  .ont-card--lead { gap: var(--gg-s-12); }
}

/* ---------- 4. Demo-reel (podium) ---------- */
.ont-reel { padding-block: var(--gg-section-y); }
.ont-reel__nav { display: flex; gap: 8px; }
.ont-reel__nav[hidden] { display: none; }
.ont-reel__nav .gg-btn:disabled { opacity: .35; }
.ont-reel__list { list-style: none; margin-block: 0; padding-block: 0 4px; gap: var(--gg-s-4); }
.ont-reel__item { width: min(68vw, 248px); display: grid; gap: var(--gg-s-3); align-content: start; }
.ont-reel__item .gg-player { box-shadow: 0 0 0 1px var(--gg-podium-line); }
.ont-reel__info { display: grid; gap: 6px; }
.ont-reel__name { color: var(--gg-on-dark); font-weight: 600; text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.ont-reel__name:hover { text-decoration: underline; }
.ont-reel__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ont-reel__row .gg-price__now { font-size: var(--gg-fs-base); }
.ont-reel__story { justify-self: start; min-height: 32px; display: inline-flex; align-items: center; }
@media (min-width: 1200px) {
  .ont-reel__list.gg-scroller { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-inline: 0; padding-inline: 0; overflow: visible; gap: var(--gg-s-6); }
  .ont-reel__item { width: auto; }
}

/* ---------- 5. AI-campagneconcept: sfeer naast bewijs ---------- */
.ont-campaign { background: var(--gg-podium); padding-block: var(--gg-section-y) calc(var(--gg-section-y) + var(--gg-s-8)); border-top: 1px solid var(--gg-podium-line); }
.ont-campaign__grid { display: grid; gap: var(--gg-s-8); }
.ont-campaign__text { display: grid; gap: var(--gg-s-4); align-content: start; }
.ont-campaign__title { font-size: var(--gg-fs-2xl); font-weight: var(--gg-fw-bold); letter-spacing: var(--gg-ls-heading); line-height: var(--gg-lh-snug); text-wrap: balance; max-width: 20ch; }
.ont-campaign__lead { color: var(--gg-on-dark-muted); max-width: 48ch; }
.ont-rules { list-style: none; margin: var(--gg-s-2) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--gg-podium-line); }
.ont-rules li { display: flex; gap: 12px; align-items: flex-start; padding-block: 11px; border-bottom: 1px solid var(--gg-podium-line); font-size: var(--gg-fs-sm); }
.ont-rules .gg-icon { width: 18px; height: 18px; color: var(--gg-violet); flex: 0 0 auto; margin-top: 1px; stroke-width: 2; }
.ont-rules b { font-weight: 600; }
.ont-campaign__product { display: grid; gap: 10px; justify-items: start; margin-top: var(--gg-s-3); }
.ont-campaign__pname { color: var(--gg-on-dark); font-weight: 600; font-size: var(--gg-fs-sm); text-decoration: none; }
.ont-campaign__pname:hover { text-decoration: underline; }
.ont-campaign__media { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--gg-s-3); align-items: end; }
.ont-campaign__fig { margin: 0; display: grid; gap: 10px; }
.ont-campaign__fig .gg-player { border-radius: var(--gg-r-lg); }
.ont-campaign__fig--ai .gg-player { box-shadow: 0 0 0 1px var(--gg-violet-deep); }
.ont-campaign__fig figcaption { font-size: var(--gg-fs-xs); line-height: 1.45; color: var(--gg-on-dark-muted); }
.ont-campaign__fig figcaption .gg-mono { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 4px; border-radius: 4px; background: var(--gg-podium-raised-2); color: var(--gg-on-dark); font-size: 10px; font-weight: 600; }
@media (max-width: 599.98px) {
  .ont-campaign__fig .gg-player__play-btn { width: 52px; height: 52px; }
  .ont-campaign__fig--demo .gg-player__meta { display: none; }
}
@media (min-width: 900px) {
  .ont-campaign__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gg-s-16); align-items: center; }
  .ont-campaign__media { gap: var(--gg-s-5); }
}

/* ---------- 6. Archief: licht vel dat over het podium schuift ---------- */
.ont-archive { position: relative; z-index: 1; background: var(--gg-paper); border-radius: var(--gg-r-2xl) var(--gg-r-2xl) 0 0; margin-top: calc(var(--gg-s-8) * -1); padding-block: var(--gg-section-y) var(--gg-s-8); }
.ont-archive__layout { display: grid; gap: var(--gg-s-8); }
.ont-archive__intro { display: grid; gap: var(--gg-s-3); align-content: start; }
.ont-archive__intro .gg-muted { max-width: 40ch; }
.ont-arch__month + .ont-arch__month { margin-top: var(--gg-s-8); }
.ont-arch__mh { display: flex; align-items: baseline; gap: 8px; font-size: var(--gg-fs-sm); font-weight: 600; text-transform: capitalize; padding-bottom: var(--gg-s-2); border-bottom: 1px solid var(--gg-ink); }
.ont-arch__mh .gg-mono { font-size: var(--gg-fs-2xs); color: var(--gg-muted); font-weight: 500; }
.ont-arch__list { list-style: none; margin: 0; padding: 0; }
.ont-arch__row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 20px; gap: 4px 12px; align-items: start; padding: 14px 4px; border-bottom: 1px solid var(--gg-line); color: var(--gg-ink); text-decoration: none; min-height: 64px; transition: background var(--gg-dur-1); }
.ont-arch__row:hover { background: var(--gg-surface); }
.ont-arch__row:hover .ont-arch__t { text-decoration: underline; text-underline-offset: 3px; }
.ont-arch__d { grid-row: 1 / span 2; font-size: var(--gg-fs-sm); color: var(--gg-muted); padding-top: 1px; }
.ont-arch__t { font-weight: 600; line-height: 1.35; }
.ont-arch__m { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ont-arch__m .gg-tag { height: 22px; }
.ont-arch__th { font-size: var(--gg-fs-2xs); letter-spacing: var(--gg-ls-caps); text-transform: uppercase; color: var(--gg-muted); }
.ont-arch__go { grid-column: 3; grid-row: 1; color: var(--gg-muted); margin-top: 2px; transition: transform var(--gg-dur-2) var(--gg-ease); }
.ont-arch__row:hover .ont-arch__go { transform: translateX(3px); color: var(--gg-ink); }
@media (min-width: 900px) {
  .ont-archive__layout { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gg-s-16); }
  .ont-archive__intro { position: sticky; top: calc(var(--gg-header-h) + var(--gg-s-6)); }
  .ont-arch__row { grid-template-columns: 40px minmax(0, 1fr) auto 20px; align-items: center; padding-inline: 8px; }
  .ont-arch__d { grid-row: auto; padding-top: 0; }
  .ont-arch__m { grid-column: 3; justify-content: flex-end; }
  .ont-arch__go { grid-column: 4; margin-top: 0; }
}

/* ---------- 7. Methode ---------- */
.ont-method { padding-block: var(--gg-s-8) var(--gg-section-y); }
.ont-method__card { background: var(--gg-surface); border-radius: var(--gg-r-xl); padding: var(--gg-s-6) var(--gg-s-5); display: grid; gap: var(--gg-s-8); }
.ont-method__text { display: grid; gap: var(--gg-s-4); align-content: start; }
.ont-method__title { font-size: var(--gg-fs-xl); font-weight: var(--gg-fw-bold); letter-spacing: var(--gg-ls-heading); line-height: var(--gg-lh-snug); text-wrap: balance; max-width: 24ch; }
.ont-method__actions { margin-top: var(--gg-s-2); }
.ont-method__criteria { list-style: none; margin: 0; padding: 0; display: grid; }
.ont-method__criteria li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding-block: 12px; border-top: 1px solid var(--gg-line-strong); }
.ont-method__criteria li > span:last-child { display: grid; gap: 2px; }
.ont-crit__code { font-size: var(--gg-fs-xs); font-weight: 600; color: var(--gg-pink-strong); padding-top: 2px; }
@media (min-width: 900px) {
  .ont-method__card { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gg-s-16); padding: var(--gg-s-12); }
}

/* ---------- ronde 2: verfijning na screenshotreview ---------- */
/* legenda: label nooit afbreken, kolom groeit mee */
.ont-legend .gg-tag, .ont-legend .gg-media-label { white-space: nowrap; }
@media (max-width: 599.98px) { .ont-legend__list > div { grid-template-columns: 150px 1fr; } }
/* "in de maak" niet uitrekken tot rijhoogte */
.ont-upcoming { align-self: start; }
/* demo-reel: smalle spelers tonen alleen duur (GG.renderPlayer caption:false); onderschrift staat in de kaart */
.ont-reel__caption { font-size: var(--gg-fs-xs); color: var(--gg-on-dark-muted); line-height: 1.4; }
.ont-reel__row { flex-wrap: wrap; }
.ont-reel__row .gg-price { white-space: nowrap; }
/* campagne: overlaytekst alleen op brede schermen, figcaption draagt de uitleg */
@media (max-width: 899.98px) { .ont-campaign__fig .gg-player__meta { display: none; } }