/* Back To Work — acties.meidenvanholland.nl
   Ontwerp: MvH Back To Work Desktop 1920 (Figma).
   Display-font en script-wordmark zijn nog placeholders; zie --font-display
   en .hero__wordmark onderaan dit bestand. */

:root {
  --bg:            #000;
  --fg:            #fff;
  --muted:         #b3b3b3;
  --line:          #fff;
  --rule:          #d9d9d9;
  --brand:         #f08700;          /* MvH-oranje: accenten, radio-buttons, poll-balken */
  --cta:           #4caf27;          /* groene stemknop */
  --cta-hover:     #439c21;
  --badge-bg:      rgba(0,0,0,.75);
  --card-bg:       #111;

  --container:     1920px;
  --gap:           5px;

  --font-display:  'Anton', 'Franklin Gothic Heavy', 'Arial Narrow',
                   Impact, system-ui, sans-serif;
  --font-body:     'Chivo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(14px, 1.6vw, 30px);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Header ----------------------------------------------------------- */

.site-header {
  background: linear-gradient(180deg, #2e2e2e 0%, #131313 55%, #000 100%);
  border-bottom: 1px solid #1c1c1c;
  position: sticky; top: 0; z-index: 50;
}

.site-header__inner {
  display: flex; align-items: center;
  gap: clamp(10px, 1.6vw, 30px);
  min-height: clamp(62px, 5.2vw, 100px);
  /* De hoofdsite laat de balk van rand tot rand lopen; geen container-marge. */
  width: 100%; max-width: none;
  padding-inline: clamp(14px, 1.85vw, 35px);
}

.logo { display: inline-flex; flex: 0 0 auto; }
.logo img { width: clamp(64px, 4.53vw, 87px); height: auto; }

.nav {
  display: flex; align-items: center;
  justify-content: flex-start;
  gap: clamp(10px, 2.19vw, 42px);
  padding-inline: clamp(8px, 2.3vw, 44px);
}

.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: clamp(12px, .89vw, 17px);
  font-weight: 400; text-transform: none; white-space: nowrap;
  color: var(--fg); padding: 6px 0;
  transition: color .15s;
}
.nav__link:hover, .nav__link:focus-visible { color: var(--brand); }

.nav__cta {
  display: inline-flex; flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.85);
  padding: 3px;
  transition: border-color .15s, transform .15s;
}
.nav__cta img { display: block; width: auto; height: clamp(30px, 3.23vw, 62px); }
.nav__cta:hover, .nav__cta:focus-visible { border-color: #fff; transform: translateY(-1px); }

.site-header__icons {
  display: flex; align-items: center; gap: clamp(12px, 1.25vw, 24px);
  flex: 0 0 auto; margin-left: auto;
}
.site-header__icons .site-header__login { display: none; font-size: 15px; padding-inline: 4px; }
.site-header__icons a { display: inline-flex; align-items: center; padding: 4px; opacity: .9; }
.site-header__icons a:hover { opacity: 1; }
.site-header__icons svg { width: clamp(17px, 1.25vw, 24px); height: auto; fill: currentColor; }

.nav-toggle {
  display: none; background: none; border: 0; color: var(--fg);
  padding: 8px; cursor: pointer;
}
.nav-toggle svg { width: 22px; height: 22px; fill: currentColor; }

/* --- Hero ------------------------------------------------------------- */

.hero { padding-block: 0; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  gap: clamp(22px, 4.3vw, 82px);
  align-items: start;
  /* Het beeld loopt in het ontwerp door tot de rechterrand van de pagina. */
  padding-right: 0;
}

.hero__wordmark { margin: clamp(6px, .97vw, 19px) 0 clamp(4px, .44vw, 9px); }
.hero__wordmark img { width: min(100%, 22.3vw); min-width: 190px; max-width: 428px; height: auto; }

.hero__copy { font-size: clamp(14px, 1.083vw, 20.8px); line-height: 2.115; max-width: 748px; color: #e6e6e6; }
.hero__copy p { margin: 0 0 1em; }

.hero__media { position: relative; }

.hero__figure {
  position: relative; margin: 0;
  aspect-ratio: 1.5 / 1; overflow: hidden;
  background: #000;
  /* Zachte vignettering zodat de uitsnede naar links in het zwart oplost. */
  background-image: radial-gradient(115% 100% at 78% 45%, #2a2a2a 0%, #0b0b0b 55%, #000 100%);
}
.hero__still {
  position: absolute; right: -2%; bottom: 0;
  height: 96%; width: auto; max-width: none;
  object-fit: contain; object-position: right bottom;
}
/* In 'artwork'-modus vult Dirks compositie het hele kader. */
/* Het artwork is 16:9, het kader 3:2. Het ontwerp snijdt links af en lijnt
   rechts uit; daarmee staat de ruit precies op de plek uit de PDF. */
.hero__still--artwork {
  inset: 0; right: 0; height: 100%; width: 100%;
  object-fit: cover; object-position: 100% 50%;
}

.hero__video {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; object-fit: cover;
  background: #000; opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
/* Video komt pas in beeld zodra hij speelt; daarvoor zien we de uitsnede. */
.hero__figure.is-playing .hero__video { opacity: 1; pointer-events: auto; }

/* Het stilstaande artwork heeft links een zachte overgang naar zwart ingebakken;
   de video niet, waardoor je bij afspelen een harde rand kreeg. Deze overlay
   legt dezelfde fade over de video. pointer-events:none, dus de bediening van
   de speler blijft gewoon aanklikbaar. */
.hero__figure::after {
  content: '';
  position: absolute; inset: 0 auto 0 0;
  width: 17%; z-index: 3;
  /* Smaller en sneller uitdovend dan eerst: net genoeg om de harde
     videorand weg te nemen, zonder het beeld donker te maken. */
  background: linear-gradient(to right,
              #000 0%, rgba(0,0,0,.55) 30%, rgba(0,0,0,.18) 62%, transparent 100%);
  pointer-events: none;
  opacity: 0; transition: opacity .3s;
}
.hero__figure.is-playing::after { opacity: 1; }
.hero__figure.is-playing .hero__still,
.hero__figure.is-playing .hero__caption { opacity: 0; transition: opacity .25s; }

.hero__caption {
  position: absolute; left: 0; right: 0; bottom: 19%; z-index: 3;
  padding-inline: 10.6%;
  font-family: var(--font-display);
  font-size: clamp(16px, 2.2vw, 42px);
  text-transform: uppercase; line-height: 1.05; letter-spacing: .005em;
  margin: 0; pointer-events: none;
  text-shadow: 0 2px 18px rgba(0,0,0,.85);
}

/* Starburst-badge "korting tot -50%".
   De ruit krijgt een eigen font-size; alle tekst erin rekent in em, zodat de
   verhouding tekst/ruit gelijk blijft op elk schermformaat. */
.badge-burst {
  position: absolute; z-index: 5;
  top: 5.7%; left: 6.4%;
  width: clamp(120px, 13.54vw, 260px); aspect-ratio: 1.15 / 1;
  display: grid; place-items: center;
  background: #fff; color: #000;
  font-family: var(--font-display);
  font-size: clamp(16px, 1.82vw, 35px);
  text-align: center; line-height: 1;
  transition: opacity .25s;
  clip-path: polygon(
    50% 0%, 60% 9%, 71% 3%, 76% 15%, 88% 13%, 88% 25%, 99% 28%, 93% 38%,
    100% 50%, 93% 62%, 99% 72%, 88% 75%, 88% 87%, 76% 85%, 71% 97%, 60% 91%,
    50% 100%, 40% 91%, 29% 97%, 24% 85%, 12% 87%, 12% 75%, 1% 72%, 7% 62%,
    0% 50%, 7% 38%, 1% 28%, 12% 25%, 12% 13%, 24% 15%, 29% 3%, 40% 9%
  );
}
.badge-burst__inner {
  display: flex; flex-direction: column; align-items: center; gap: .04em;
  max-width: 76%;                      /* blijft binnen de punten van de ster */
}
.badge-burst__label {
  font-size: 1em; text-transform: uppercase; letter-spacing: .01em;
  white-space: nowrap;
}
.badge-burst__value {
  font-size: 1.77em; letter-spacing: -.01em; white-space: nowrap;
}
/* Tijdens het afspelen is de ruit alleen maar in de weg. */
.hero__media.is-playing .badge-burst { opacity: 0; pointer-events: none; }

/* Play-knop over de promo */
.play-btn {
  position: absolute; left: 37%; top: 50%; z-index: 4;
  transform: translate(-50%, -50%);
  width: max-content; height: max-content;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0; background: none; border: 0; color: #fff;
  cursor: pointer; transition: transform .15s, opacity .2s;
}
.play-btn__icon {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(0,0,0,.35); border: 1.5px solid #fff;
}
.play-btn__icon svg { width: 13px; height: 13px; fill: currentColor; margin-left: 2px; }
.play-btn__label { font-size: 12px; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.play-btn:hover, .play-btn:focus-visible { transform: translate(-50%, -50%) scale(1.07); }
.play-btn[hidden] { display: none; }

/* --- Sierlijke scheidingslijn ---------------------------------------- */

.ornament { padding-block: clamp(20px, 3vw, 40px); }
/* Het bestand is 1720px breed; het ontwerp rekt het niet op maar centreert. */
.ornament img { width: min(1720px, 100%); height: auto; margin-inline: auto; }

/* --- Sectiekop -------------------------------------------------------- */

.section-title {
  font-family: var(--font-display);
  font-weight: 400; text-transform: uppercase;
  font-size: clamp(18px, 2.15vw, 41px);
  letter-spacing: .02em; text-align: center;
  margin: 0 0 clamp(16px, 1.9vw, 36px);
}

/* --- Carrousel -------------------------------------------------------- */

.carousel { position: relative; }
/* De kaartenrij loopt in het ontwerp door tot de rechterrand van de pagina. */
.carousel-section { padding-right: 0; }
/* De kop blijft wel op de pagina gecentreerd, niet op het uitlopende spoor. */
.carousel-section .section-title { padding-right: clamp(14px, 1.6vw, 30px); }

.carousel__track {
  display: grid;
  grid-auto-flow: column;
  /* 384px op een spoor van 1890px = 20.32%; daardoor is de vijfde kaart
     half zichtbaar en zie je dat er meer is, precies als in het ontwerp. */
  grid-auto-columns: 20.32%;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Geen zichtbare scrollbar: op desktop zijn er pijltjes, op mobiel veeg je.
     Het scrollen zelf blijft gewoon werken. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.card { scroll-snap-align: start; }

.card__link { display: block; color: inherit; }

.card__media {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--card-bg);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.card__link:hover .card__media img,
.card__link:focus-visible .card__media img { transform: scale(1.05); }

/* Duur + taalvlag linksboven */
.card__meta {
  position: absolute; top: 7px; left: 7px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
}
.card__duration {
  background: var(--badge-bg); color: #fff;
  font-size: clamp(9px, .63vw, 12px); line-height: 1.7; padding: 1px 6px; border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
.card__flag { width: clamp(14px, .99vw, 19px); height: auto; border-radius: 1px; display: block; }

/* Titel ligt over de onderrand van het beeld */
.card__title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: clamp(5px, .42vw, 8px) clamp(6px, .55vw, 11px);
  min-height: clamp(22px, 1.78vw, 34px);
  display: flex; align-items: center;
  font-size: clamp(10px, .73vw, 14px); font-weight: 400; line-height: 1.25; color: #fff;
  background: rgba(0, 0, 0, .62);
  overflow: hidden;
}

.carousel__nav {
  position: absolute; top: calc(50% - 20px); transform: translateY(-50%);
  width: clamp(28px, 1.98vw, 38px); aspect-ratio: 1; z-index: 4;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55); color: #fff;
  border: 1px solid rgba(255,255,255,.9);
  cursor: pointer; transition: background .15s;
}
.carousel__nav:hover { background: rgba(0,0,0,.85); }
.carousel__nav[hidden] { display: none; }
.carousel__nav--prev { left: 6px; }
.carousel__nav--next { right: 6px; }
.carousel__nav svg { width: 16px; height: 16px; fill: currentColor; }

.carousel__empty { text-align: center; color: var(--muted); padding: 32px 0; }

/* --- Poll ------------------------------------------------------------- */

.poll { padding-bottom: clamp(32px, 5vw, 72px); }

.poll__options {
  display: grid;
  grid-auto-flow: column;                     /* vult kolomsgewijs, als het ontwerp */
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(3, clamp(180px, 13.7vw, 263px));
  column-gap: clamp(20px, 4.32vw, 83px);
  row-gap: clamp(16px, 1.98vw, 38px);
  justify-content: center;
  margin: 0 auto clamp(20px, 3vw, 36px);
}
.poll__fieldset { border: 0; padding: 0; margin: 0; }

.poll__option {
  display: flex; align-items: center; gap: clamp(10px, 1.51vw, 29px);
  cursor: pointer; font-size: clamp(13px, .94vw, 18px);
}
/* Zonder min-width:0 houdt een flex-item zijn langste woord als minimumbreedte.
   "Vrachtwagenchauffeur" duwde de pagina daardoor breder dan het scherm. */
.poll__option > span {
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
/* Het ontwerp toont effen witte cirkels; gekozen optie krijgt een oranje kern. */
.poll__option input {
  appearance: none; -webkit-appearance: none;
  width: clamp(16px, 1.25vw, 24px); height: clamp(16px, 1.25vw, 24px);
  flex: 0 0 auto; cursor: pointer; margin: 0;
  border-radius: 50%; background: transparent;
  border: clamp(2px, .16vw, 3px) solid #fff;
  display: grid; place-items: center;
  transition: box-shadow .15s;
}
.poll__option input::after {
  content: ''; width: 46%; height: 46%; border-radius: 50%;
  background: var(--brand); transform: scale(0); transition: transform .12s;
}
.poll__option input:checked::after { transform: scale(1); }
.poll__option input:focus-visible { box-shadow: 0 0 0 3px rgba(240,135,0,.65); outline: none; }
.poll__option:hover { color: var(--brand); }

.poll__other {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1vw, 18px); flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.2vw, 34px);
  font-size: clamp(13px, .99vw, 19px);
}
.poll__other input[type="text"] {
  background: #fff; color: #000; border: 0; border-radius: 2px;
  padding: clamp(8px, .73vw, 14px) clamp(10px, .94vw, 18px);
  font: inherit; min-width: clamp(240px, 16vw, 310px);
}
.poll__other input[type="text"]:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.poll__submit {
  display: block; margin: 0 auto;
  width: clamp(220px, 15.6vw, 299px);
  height: clamp(42px, 2.97vw, 57px);
  background: linear-gradient(180deg, #6cbf2a 0%, #47a012 100%);
  color: #fff; border: 0; border-radius: 3px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(15px, 1.04vw, 20px); letter-spacing: .04em;
  cursor: pointer; transition: filter .15s;
}
.poll__submit:hover, .poll__submit:focus-visible { filter: brightness(1.1); }

.poll__msg { text-align: center; margin: 16px auto 0; max-width: 620px; font-size: 14px; }
.poll__msg--ok  { color: #7ed957; }
.poll__msg--err { color: #ff8a8a; }

/* Uitslag na stemmen */
.poll__thanks {
  text-align: center; margin: clamp(18px, 2.5vw, 34px) auto 0;
  font-size: clamp(14px, 1.05vw, 20px); color: #fff; max-width: 40ch;
}

.poll__results { max-width: 720px; margin: clamp(20px, 3vw, 32px) auto 0; }
.poll__result { margin-bottom: 10px; font-size: 14px; }
.poll__result-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.poll__bar { background: #1e1e1e; height: 8px; border-radius: 4px; overflow: hidden; }
.poll__bar span { display: block; height: 100%; background: var(--brand); }
.poll__total { text-align: center; color: var(--muted); font-size: 13px; margin-top: 16px; }

/* --- Footer ----------------------------------------------------------- */

.site-footer {
  border-top: 1px solid #1c1c1c; padding-block: 28px;
  color: var(--muted); font-size: 13px; text-align: center;
}
.site-footer a:hover { color: var(--fg); }

/* --- Vaste tabbalk (mobiel) ------------------------------------------- */

.tabbar { display: none; }

/* --- Responsief ------------------------------------------------------- */

@media (max-width: 1200px) {
  .carousel__track { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); }
}

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 0; }
  .carousel__track { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }
  .poll__options { grid-template-rows: repeat(8, auto); grid-template-columns: repeat(2, minmax(0,1fr)); }
  .nav { display: none; }
  .nav__cta { display: none; }
}

/* Mobiel: opbouw volgens het 360px-ontwerp. */
@media (max-width: 700px) {
  :root { --gap: 12px; }

  .container { padding-inline: 12px; }

  /* Header: logo links, Login + iconen rechts. Geen menu. */
  .site-header__inner { min-height: 46px; padding-inline: 12px; gap: 10px; }
  .logo img { width: 46px; }
  .site-header__icons .site-header__login { display: inline-flex; }
  .nav-toggle { display: none; }
  .site-header__icons { gap: 10px; }
  .site-header__icons svg { width: 18px; }
  .site-header__icons .site-header__login { font-size: 13px; }
  /* Mobiel zet de zoekknop achteraan, conform het 360-ontwerp. */
  .site-header__icons a[aria-label="Zoeken"] { order: 3; }

  /* Hero: beeld bovenaan, tekst eronder. Het wordmark ligt over het beeld,
     dus het beeld moet als eerste in het raster staan en het raster is het
     ankerpunt voor de absolute positionering (niet de tekstkolom). */
  .hero { padding-block: 0; }
  .hero__grid { padding-inline: 0; position: relative; }
  .hero__media { order: -1; }
  .hero__intro { order: 1; }
  .hero__figure { aspect-ratio: 1.78 / 1; }

  .hero__wordmark {
    position: absolute; z-index: 3;
    top: 10px; left: 14px; margin: 0;
  }
  .hero__wordmark img { width: 110px; min-width: 0; }

  .hero__caption { font-size: 15px; }

  /* Kortingsruit staat niet in het mobiele ontwerp. Op mobiel wordt daarom
     de uitsnede getoond in plaats van het desktop-artwork (waar de ruit in
     zit ingebakken), en komt de kop weer als HTML-tekst terug. */
  .badge-burst { display: none; }

  /* Het mobiele hero-beeld bevat wordmark en kop al; die dus niet nog eens
     als losse elementen eroverheen leggen. */
  .hero__still--artwork {
    inset: 0; right: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center;
  }
  .hero__wordmark { display: none; }
  .hero__caption { display: none; }

  /* Play-knop als donkere pil, rechts naast het wordmark in het beeld. */
  .play-btn {
    left: 51%; top: 56%;
    background: rgba(0,0,0,.55); border-radius: 999px;
    padding: 5px 12px 5px 6px; gap: 6px;
  }
  .play-btn__icon { width: 22px; height: 22px; border-width: 1px; }
  .play-btn__icon svg { width: 9px; height: 9px; }
  .play-btn__label { font-size: 12px; }

  .hero__copy { font-size: 12.5px; line-height: 1.74; padding: 14px 12px 0; max-width: none; }

  .section-title { font-size: 22px; }

  /* Kaarten: ruim 70% breed, met een glimp van de volgende. */
  .carousel__track { grid-auto-columns: 70%; }
  .card__title { font-size: 12px; min-height: 28px; padding: 6px 10px; }
  .card__duration { font-size: 11px; padding: 2px 7px; }
  .card__flag { width: 18px; }
  .carousel__nav { display: none; }

  /* Poll: twee kolommen, ruimere raakvlakken. */
  .poll__options {
    grid-template-rows: repeat(8, auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 14px; row-gap: 22px;
  }
  .poll__option { font-size: 15px; gap: 10px; }
  .poll__option input { width: 22px; height: 22px; }

  .poll__other { justify-content: flex-start; gap: 10px; flex-wrap: nowrap; }
  .poll__other input[type="text"] { flex: 1 1 auto; min-width: 0; padding: 12px 14px; border-radius: 6px; }
  .poll__submit {
    width: 100%; padding: 15px 0; font-size: 19px; border-radius: 6px;
    background: linear-gradient(180deg, #6cbf2a 0%, #47a012 100%);
  }
  .poll__submit:hover { background: linear-gradient(180deg, #62b024 0%, #3d8f0e 100%); }

  /* Ruimte vrijhouden voor de vaste tabbalk. */
  .poll { padding-bottom: 24px; }
  .site-footer { padding-bottom: 84px; }

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #141414; border-top: 1px solid #262626;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 9px; color: #fff; text-align: center;
  }
  .tabbar__icon svg { width: 24px; height: 24px; fill: currentColor; display: block; }
  .tabbar__label { font-size: 11px; line-height: 1.1; }
  .tabbar__item.is-current {
    background: #2b2b2b; border: 1px solid #8a8a8a;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}