/* BannerBazen · formaatkiezer.css (v14, 24 oktober)
   De formaatkiezer op /iab-banners/ (b_formaten.py, formaatkiezer.js): links de formaten, rechts het formaat zelf, zoals in
   het overzicht dat er stond (oranje vlak, logo linksboven, naam en maat rechtsonder), op ware grootte, met de andere
   formaten als lijn vanuit de hoek linksboven. Het blok is donker in licht en donker (thema-donker). */

.fk{display:grid;grid-template-columns:236px minmax(0,1fr);gap:32px;align-items:start;margin-top:clamp(24px,3vw,44px)!important;
  margin-bottom:clamp(8px,1vw,16px);padding:clamp(18px,2.4vw,32px);border-radius:4px}
.art__tekst>.fk{max-width:none}

/* ---------- de lijst ---------- */
.fk__lijst{position:relative;list-style:none;margin:0;padding:0;border-top:1px solid var(--lijn)}
.fk__lijst .fk__rij{position:relative;margin:0;padding:0;border-bottom:1px solid var(--lijn)}
.fk__lijst .fk__rij::before{content:none}
.fk__rij::after{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:3px;background:var(--or);transform:scaleY(0);
  transition:transform .3s var(--ease)}
.fk__rij.is-aan::after{transform:none}
.fk__knop{display:flex;flex-direction:column;gap:1px;width:100%;padding:10px 8px 10px 16px;text-align:left;font-size:14px;line-height:1.3;
  color:var(--fg-2);transition:color .2s,background-color .2s}
.fk__knop b{font-size:15px;font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums;transition:color .2s}
.fk__knop:hover,.fk__rij.is-aan .fk__knop{color:var(--fg);background:rgba(245,245,245,.05)}
.fk__rij.is-aan .fk__knop b{color:var(--or)}
.fk__knop:focus-visible{outline:2px solid var(--or);outline-offset:-2px}
.art__tekst .fk__uitleg{margin:0;padding:0 8px 14px 16px;font-size:14px;line-height:1.5;color:var(--fg-2)}
/* breed staat de uitleg onder het beeld; in de lijst alleen voor schermlezers (zo verspringt de lijst niet onder je muis) */
@media (min-width:1100px){
  .js .fk .fk__uitleg{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- het beeld ---------- */
.fk__beeld{min-width:0}
.fk__podium{position:relative;overflow:hidden;height:calc(var(--vh) * 1px);transition:height .5s var(--ease)}
.fk__vel{position:relative;transform-origin:0 0;transition:width .5s var(--ease),height .5s var(--ease),transform .5s var(--ease)}
.fk__spook{position:absolute;left:0;top:0;box-shadow:inset 0 0 0 1px rgba(245,245,245,.16);pointer-events:none}
.fk.is-smal .fk__spook{display:none}
.fk.is-smal .fk__vel{margin-inline:auto}
.fk__blok{position:absolute;left:0;top:0;background:var(--or);color:var(--inkt-vast);container-type:size;
  transition:width .5s var(--ease),height .5s var(--ease)}
.fk__in{position:absolute;inset:0;--p:14px;padding:var(--p)}
/* het logo: een derde van de hoogte, hooguit 38 px, en het hele logo (4,75 keer de hoogte van het beeldmerk) past in de breedte */
.fk__logo{--mh:clamp(13px,min(34cqh,(100cqw - 2 * var(--p)) / 4.75),38px);display:inline-flex;align-items:center;gap:calc(var(--mh) * .22)}
.fk__m{display:block;width:auto;height:var(--mh)}
.fk__w{display:block;width:auto;height:calc(var(--mh) * .42)}
.art__tekst .fk__l{position:absolute;right:var(--p);bottom:calc(var(--p) - 2px);margin:0;text-align:right;font-size:14px;line-height:1.15;color:inherit}
.fk__l b{display:block;font-size:17.5px;font-weight:500;letter-spacing:-.01em}
.fk__l span{display:block;font-variant-numeric:tabular-nums}
@container (max-height:79px){
  .fk__in{--p:9px}
  .art__tekst .fk__l{bottom:50%;transform:translateY(50%);font-size:12.5px}
  .fk__l b{display:inline;font-size:12.5px}
  .fk__l span{display:inline}
}
.fk__onder{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;margin-top:16px;padding-top:12px;
  border-top:1px solid var(--lijn)}
.art__tekst .fk__onder p{margin:0;font-size:14px;line-height:1.45;color:var(--fg-2)}
.art__tekst .fk__onder .fk__schaal{flex:none;color:var(--fg-3)}
.fk__schaal b{font-weight:500;color:var(--fg)}

/* ---------- smaller: de lijst als rij kaarten boven het beeld, elk met zijn uitleg ---------- */
@media (max-width:1099px){
  .fk{grid-template-columns:minmax(0,1fr);gap:20px}
  .fk__lijst{display:flex;gap:10px;margin:0 calc(-1 * clamp(18px,2.4vw,32px));padding:0 clamp(18px,2.4vw,32px) 6px;border:0;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 clamp(18px,2.4vw,32px);scrollbar-width:none}
  .fk__lijst::-webkit-scrollbar{display:none}
  .fk__lijst .fk__rij{flex:none;width:200px;border:1px solid var(--lijn);border-radius:6px;scroll-snap-align:start;overflow:hidden;
    transition:border-color .2s}
  .fk__lijst .fk__rij.is-aan{border-color:var(--or)}
  .fk__rij::after{content:none}
  .fk__knop{padding:12px 14px 6px;background:none!important}
  .art__tekst .fk__uitleg{padding:0 14px 14px;font-size:13.5px}
  .fk__tekst{display:none}
  .fk__onder{justify-content:flex-end;margin-top:12px}
}

/* een telefoon: het blok tot de rand van het scherm, zodat 320 en 336 breed op ware grootte passen */
@media (max-width:700px){
  .art__tekst>.fk{margin-inline:calc(-1 * var(--rand));padding:18px 16px 16px;border-radius:0}
  .fk__lijst{margin:0 -16px;padding:0 16px 6px;scroll-padding:0 16px}
}

/* minder beweging: meteen op de nieuwe maat */
.rustig .fk__blok,.rustig .fk__vel,.rustig .fk__podium,.rustig .fk__rij::after{transition:none}
@media (prefers-reduced-motion:reduce){.fk__blok,.fk__vel,.fk__podium,.fk__rij::after{transition:none}}