/* ==========================================================================
   style-uitgelicht.css — build 20260903-a

   Opmaak voor één ding: het blok UITGELICHT bovenaan videos.html.
   Bewust een apart bestand, zodat je het kunt weghalen zonder dat er iets
   aan de rest van de site verandert. Het laadt ná style-fix.css, dus deze
   regels winnen altijd.

   Alle kleuren, maten en afstanden komen uit de bestaande tokens
   (--ink, --ivory, --red, --s-*, --fs-*). Zet je later de lichte variant
   aan, dan verkleurt dit blok automatisch mee.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. De sectie
   -------------------------------------------------------------------------- */
.feat{
  position:relative;
  padding:clamp(48px,6vw,84px) 0 clamp(40px,5vw,64px);
  background:
    radial-gradient(90% 70% at 12% 0%,rgba(191,23,40,.07),transparent 60%),
    var(--paper);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}

/* kopregel: label links, stempel rechts */
.feat-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}

.feat-stamp{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;
  background:var(--red);color:#fff;
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--track-label,.16em);text-transform:uppercase;
}
.feat-stamp::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:#fff;
}

.feat-title{
  margin:clamp(14px,2vw,22px) 0 0;
  font:clamp(38px,6.4vw,86px)/.92 "Rubik Mono One",sans-serif;
  letter-spacing:-.055em;
}
.feat-title em{
  font-style:normal;
  color:var(--red-deep);
}

.feat-lead{
  max-width:var(--measure,66ch);
  margin:clamp(16px,2vw,24px) 0 0;
  color:var(--text);
  font-size:var(--fs-lead);
  line-height:var(--lh-lead,1.62);
}


/* --------------------------------------------------------------------------
   2. De kaart — links de voorproefjes, rechts de tekst
   -------------------------------------------------------------------------- */
.feat-card{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  margin-top:clamp(26px,3.4vw,42px);
  background:var(--ivory);
  border:1px solid rgba(191,23,40,.3);
  box-shadow:0 34px 80px rgba(13,12,14,.14),0 8px 22px rgba(13,12,14,.08);
}

/* Zonder min-width:0 rekt een gridkind zich op tot zijn langste woord en
   duwt het de kolom uit. Zelfde fix als in style-fix.css. */
.feat-card,.feat-card > *,
.feat-media,.feat-body,
.feat-mediatop,.feat-mediatop > *,
.feat-chips,.feat-top,.feat-top > *{
  min-width:0;
}

.feat-media{
  background:var(--ink);
  padding:clamp(16px,2vw,26px);
}

.feat-mediatop{
  display:flex;justify-content:space-between;gap:12px;
  margin-bottom:12px;
  color:rgba(255,255,255,.62);
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;
}
.feat-mediatop b{color:var(--red-soft)}

.feat-body{
  display:flex;flex-direction:column;gap:var(--s-3,1rem);
  padding:clamp(26px,3.4vw,48px);
}

.feat-copy{
  margin:0;
  color:var(--text);
  font-size:var(--fs-sm);
  line-height:var(--lh-body,1.7);
}


/* --------------------------------------------------------------------------
   3. De kenmerken — wat in de post de emoji-regels waren
   -------------------------------------------------------------------------- */
.feat-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0;padding:0;list-style:none;
}
.feat-chips li{
  padding:7px 12px;
  border:1px solid rgba(191,23,40,.26);
  background:var(--white,#fffdfa);
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);
}


/* --------------------------------------------------------------------------
   4. Kleine tekst onderaan
   -------------------------------------------------------------------------- */
.feat-fine{
  margin:0;
  color:var(--text);
  font-size:var(--fs-cap);
  line-height:1.7;
}
.feat-fine a{
  font-weight:800;
  color:var(--red-deep);
  border-bottom:1px solid rgba(191,23,40,.3);
}

/* de prijsregel en het infoblok staan al opgemaakt in de hoofdstylesheet,
   alleen de marges kloppen hier niet helemaal */
.feat-body .pricerow{margin:6px 0 0}
.feat-body .info{margin:4px 0 0}


/* --------------------------------------------------------------------------
   5. Smalle schermen
   -------------------------------------------------------------------------- */
@media (max-width:900px){
  .feat-card{grid-template-columns:1fr}
  .feat-title{font-size:clamp(32px,10vw,52px)}
}

@media (max-width:560px){
  .feat-top{align-items:flex-start}
  .feat-chips li{padding:6px 10px}
}


/* --------------------------------------------------------------------------
   6. Rustige beweging voor wie daarom vraagt
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .feat-stamp::before{animation:none}
}


/* --------------------------------------------------------------------------
   7. Homepage: de vierde kaart in de reeks
   Op de homepage staan nu vier uitgelichte video's in plaats van drie. Het
   "anti-grid" in style-v15-desktop.css laat alleen kaart 2 en 3 uit de lijn
   stappen; kaart 4 viel daardoor terug in het gelid. Deze regel maakt het
   ritme weer af.
   -------------------------------------------------------------------------- */
@media (min-width:901px){
  .reel .prod-slot:nth-child(4){ margin-inline-start:clamp(1rem,3vw,3.25rem) }
}


/* --------------------------------------------------------------------------
   8. De aankondigingsbalk op videos.html
   Het volledige uitgelichte blok staat op nieuwe-video.html. Op de
   videotheekpagina blijft alleen deze balk over: één regel, met datum, en
   een knop ernaartoe. Zo staat de nieuwe video nergens dubbel.
   -------------------------------------------------------------------------- */
.newbar{
  background:var(--ivory);
  border-bottom:1px solid var(--line);
  padding:clamp(18px,2.2vw,28px) 0;
}
.newbar-in{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,2vw,28px);flex-wrap:wrap;
  padding:clamp(16px,2vw,22px) clamp(18px,2.4vw,26px);
  background:var(--white,#fff);
  border:1px solid rgba(191,23,40,.28);
  border-left:4px solid var(--red);
}
.newbar-in > *{min-width:0}

.newbar-lbl{
  display:block;
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--track-label,.16em);text-transform:uppercase;
  color:var(--red-deep);
}
.newbar-in b{
  display:block;margin:6px 0 4px;
  font:clamp(17px,2vw,24px)/1.1 "Rubik Mono One",sans-serif;
  letter-spacing:-.04em;
}
.newbar-meta{
  display:block;
  font-size:var(--fs-cap);
  color:var(--text);
}

@media (max-width:620px){
  .newbar-in{flex-direction:column;align-items:flex-start}
  .newbar-in .btn{width:100%}
}


/* ==========================================================================
   9. DE SCHIJNWERPER — nieuwe video op een eigen rij
   Geen kaart tussen andere kaarten, maar een band over de volle breedte met
   de drie voorproefjes naast elkaar. Staat op de homepage en op de
   videotheekpagina; de volledige pagina blijft nieuwe-video.html.
   ========================================================================== */
.spot{
  position:relative;
  overflow:hidden;
  padding:clamp(40px,5.5vw,76px) 0;
  background:
    radial-gradient(80% 120% at 8% 0%,rgba(191,23,40,.10),transparent 58%),
    radial-gradient(70% 110% at 96% 100%,rgba(191,23,40,.08),transparent 60%),
    var(--ivory);
  border-block:1px solid rgba(191,23,40,.28);
}
.spot > .wrap > *{min-width:0}

/* --- het vlaggetje bovenaan --------------------------------------------- */
.spot-flag{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 16px;
  background:var(--red);color:#fff;
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--track-label,.16em);text-transform:uppercase;
}
.spot-flag b{font-weight:800;opacity:.82}
.spot-dot{
  width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation:spotPulse 2.2s infinite;
}
@keyframes spotPulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.65)}
  70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* --- kop en tekst -------------------------------------------------------- */
.spot-title{
  margin:clamp(14px,2vw,22px) 0 0;
  font:clamp(34px,5.6vw,74px)/.94 "Rubik Mono One",sans-serif;
  letter-spacing:-.055em;
}
.spot-title em{font-style:normal;color:var(--red-deep)}

.spot-lead{
  max-width:var(--measure,66ch);
  margin:clamp(14px,1.8vw,20px) 0 0;
  color:var(--text);
  font-size:var(--fs-lead);
  line-height:var(--lh-lead,1.62);
}

/* --- de drie voorproefjes naast elkaar ----------------------------------- */
.spot-films{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(24px,3vw,38px);
}
.spot-film{
  position:relative;
  padding:10px;
  background:var(--ink);
  border:1px solid rgba(191,23,40,.3);
  min-width:0;
}
.spot-film > span{
  display:block;
  margin-bottom:8px;
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}

/* --- prijs, kenmerken en knoppen ---------------------------------------- */
.spot-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.4vw,34px);flex-wrap:wrap;
  margin-top:clamp(20px,2.6vw,32px);
  padding-top:clamp(18px,2.2vw,26px);
  border-top:1px solid var(--line);
}
.spot-meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.spot-meta b{
  font:clamp(30px,3.4vw,44px)/1 "Rubik Mono One",sans-serif;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}
.spot-meta span{
  padding:6px 11px;
  border:1px solid rgba(191,23,40,.26);
  background:var(--white,#fff);
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
.spot-cta{display:flex;gap:10px;flex-wrap:wrap}

@media (max-width:820px){
  .spot-films{grid-template-columns:1fr}
  .spot-film:nth-child(n+2){display:none}   /* op mobiel één voorproefje, de rest staat op de eigen pagina */
  .spot-foot{align-items:flex-start}
  .spot-cta{width:100%}
  .spot-cta .btn{flex:1 1 100%}
}


/* ==========================================================================
   10. DE OPROEP — SAMEN FILMEN
   Twee lange kaarten naast elkaar op een breed scherm, onder elkaar op een
   smal scherm. De tekst staat links, de voorwaarden staan er als apart
   blok naast zodat ze niet wegvallen in de lopende tekst.
   ========================================================================== */
.cast-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:clamp(20px,2.4vw,34px);
  margin-top:clamp(28px,3.4vw,44px);
}
.cast-grid > *,.cast-card > *,.cast-body,.cast-body > *{min-width:0}

.cast-card{
  display:flex;flex-direction:column;
  padding:clamp(24px,3vw,40px);
  background:var(--ivory);
  border:1px solid rgba(191,23,40,.28);
}

.cast-card-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.cast-num{
  font:clamp(20px,2.4vw,30px)/1 "Rubik Mono One",sans-serif;
  letter-spacing:-.04em;color:var(--red-deep);
}
.cast-status{
  padding:6px 11px;background:var(--red);color:#fff;
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--track-label,.16em);text-transform:uppercase;
}

.cast-name{
  margin:18px 0 0;
  font:clamp(21px,2.6vw,34px)/1.02 "Rubik Mono One",sans-serif;
  letter-spacing:-.045em;
}
.cast-name em{font-style:normal;color:var(--red-deep)}

.cast-tags{
  display:flex;flex-wrap:wrap;gap:7px;
  margin:16px 0 0;padding:0;list-style:none;
}
.cast-tags li{
  padding:6px 10px;
  border:1px solid rgba(191,23,40,.24);
  background:var(--white,#fff);
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}

.cast-body{margin-top:clamp(18px,2.2vw,26px)}
.cast-copy p{
  margin:0 0 14px;
  color:var(--text);
  font-size:var(--fs-sm);
  line-height:var(--lh-body,1.7);
}
.cast-intro{
  color:var(--ink)!important;
  font-size:var(--fs-body)!important;
}

/* De zin waar het om gaat. Die mag niet wegvallen tussen de rest — daarom
   een eigen vlak met een dikke roze streep ervoor. */
.cast-alert{
  padding:14px 16px;
  margin:0 0 16px!important;
  background:var(--white,#fff);
  border-left:4px solid var(--red);
  color:var(--ink)!important;
}
.cast-alert strong{color:var(--red-deep)}

/* --- de voorwaarden ------------------------------------------------------ */
.cast-rules{
  margin-top:6px;padding:clamp(18px,2.2vw,26px);
  background:var(--white,#fff);
  border:1px solid var(--line);
}
.cast-rules-label{
  display:block;
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:var(--track-label,.16em);text-transform:uppercase;
  color:var(--red-deep);
}
.cast-rules-intro{
  margin:10px 0 16px;color:var(--text);
  font-size:var(--fs-sm);line-height:var(--lh-body,1.7);
}
.cast-rule{
  display:grid;grid-template-columns:auto 1fr;gap:12px;
  padding:14px 0;border-top:1px solid var(--line);
}
.cast-rule > *{min-width:0}
.cast-rule-num{
  font:14px/1 "Rubik Mono One",sans-serif;
  color:var(--red-deep);padding-top:3px;
}
.cast-rule strong{display:block;margin-bottom:5px}
.cast-rule p{
  margin:0;color:var(--text);
  font-size:var(--fs-cap);line-height:1.7;
}
.cast-rules-rest{
  margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);
  color:var(--text);font-size:var(--fs-cap);line-height:1.7;
}

/* --- knoppen en kleine letter ------------------------------------------- */
.cast-actions{
  display:flex;flex-wrap:wrap;gap:9px;
  margin-top:auto;padding-top:clamp(18px,2.2vw,26px);
}
.cast-actions .btn{flex:1 1 auto}
.cast-note{
  margin:12px 0 0;
  font-size:var(--fs-label);font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);
}

@media (max-width:900px){
  .cast-grid{grid-template-columns:1fr}
  .cast-actions .btn{flex:1 1 100%}
}