/* ═══════════════════════════════════════════════════════════
   SMEULDERS DIGITAL — dienstpagina's

   Gedeeld door /reclamefilmpjes/ en /social-media/, de twee pagina's
   die er op 6 oktober 2026 bij kwamen. Laadt na style.css en
   tekstpagina.css, en gebruikt dezelfde tokens.

   Waarom deze twee pagina's niet in het menu staan: het menu telt
   vijf items en dat was een bewuste keuze toen de site te druk werd.
   Deze twee hangen aan de deuren op de startpagina, aan de
   prijzenpagina en aan de advertenties. Verkopen ze, dan mogen ze
   promoveren naar het menu.
   ═══════════════════════════════════════════════════════════ */

/* ── Prijzen, drie regels onder elkaar ─────────────────── */
/* Geen drie kaarten naast elkaar zoals op /prijzen/: dat is daar al
   de vorm voor de pakketten, en twee keer hetzelfde beeld op één site
   maakt het verschil tussen de twee pagina's onzichtbaar. */
.dn-prijzen{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
}
.dn-prijs{
  display:grid; grid-template-columns:1fr auto; gap:.4rem 1.5rem;
  align-items:baseline;
  background:var(--ink-2); padding:clamp(1.2rem,3vw,1.7rem) clamp(1.2rem,3vw,1.9rem);
}
.dn-prijs__wat{ font-family:var(--f-display); font-weight:600; font-size:1.08rem; letter-spacing:-.01em; }
.dn-prijs__bedrag{
  font-family:var(--f-display); font-weight:800; font-size:1.5rem;
  letter-spacing:-.02em; color:var(--ember); white-space:nowrap;
}
.dn-prijs__uitleg{ grid-column:1 / -1; color:var(--ash-3); font-size:.9rem; max-width:60ch; }

/* ── Plaatsen vrij ─────────────────────────────────────── */
/* Het aantal staat in één variabele in de pagina zelf. Als er eentje
   bijkomt, is dat één cijfer. */
.dn-plaatsen{
  display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--glass); padding:1rem 1.2rem; margin-top:1.6rem;
}
.dn-plaatsen__stippen{ display:flex; gap:.4rem; }
.dn-plaatsen__stip{
  width:11px; height:11px; border-radius:50%;
  border:1px solid var(--line-2); background:transparent;
}
.dn-plaatsen__stip--bezet{ background:var(--ember); border-color:var(--ember); }
.dn-plaatsen__tekst{ color:var(--ash-2); font-size:.92rem; }
.dn-plaatsen__tekst b{ color:var(--ash); font-weight:600; }

/* ── Stappen ───────────────────────────────────────────── */
.dn-stappen{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; margin-top:1.6rem; }
.dn-stap{
  display:grid; grid-template-columns:auto 1fr; gap:.2rem clamp(1rem,3vw,2rem);
  background:var(--ink-2); padding:clamp(1.1rem,3vw,1.5rem) clamp(1.2rem,3vw,1.9rem);
}
.dn-stap__nr{
  font-family:var(--f-display); font-size:.82rem; font-weight:600;
  color:var(--ember); letter-spacing:.06em; padding-top:.15rem;
}
.dn-stap__titel{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; }
.dn-stap__tekst{ grid-column:2; color:var(--ash-3); font-size:.92rem; margin-top:.15rem; }

/* ── De filmpjes ───────────────────────────────────────── */
/* Staande beelden, want een reel is staand. Op een telefoon passen er
   drie niet naast elkaar, dan schuiven ze. */
.dn-films{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,2vw,1.3rem); margin-top:1.6rem; }
.dn-films--4{ grid-template-columns:repeat(4,1fr); }
.dn-films--2{ grid-template-columns:repeat(2,1fr); max-width:760px; }
.dn-films--1{ grid-template-columns:1fr; max-width:380px; }
.dn-film{
  display:block; text-decoration:none; color:inherit;
  transition:border-color .4s var(--ease), transform .4s var(--ease); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:var(--ink-2);
}
.dn-film__beeld{ display:block; position:relative; aspect-ratio:9/16; overflow:hidden; }
.dn-film__beeld img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Rechtsboven en niet in het midden: de omslagen hebben hun titel in het
   midden of onderaan, en een knop daar bovenop leest als een fout. */
.dn-film__speel{
  position:absolute; right:.6rem; top:.6rem;
  width:44px; height:44px; border-radius:50%;
  background:rgba(10,9,8,.55); border:1px solid rgba(246,241,234,.35);
  backdrop-filter:blur(6px);
  display:grid; place-items:center; color:var(--ash);
}
.dn-film__wat{ display:block; padding:.85rem 1rem 1rem; font-size:.88rem; color:var(--ash-2); }
/* De kaart is een link naar Instagram, want daar kan je hem afspelen. Een
   afspeelknop op iets dat niet klikt, is hetzelfde soort leugen als een
   pijltje op een kaart zonder adres. */
.dn-film:hover{ border-color:var(--line-2); transform:translateY(-3px); }
.dn-film:hover .dn-film__speel{ background:var(--ember); border-color:var(--ember); color:#fff; }
.dn-film:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }
.dn-film__heen{
  display:block; margin-top:.45rem; font-size:.74rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ash-3);
  transition:color .35s var(--ease);
}
.dn-film:hover .dn-film__heen{ color:var(--ember); }

/* ── Eerlijk blok ──────────────────────────────────────── */
/* Wat deze dienst niet is. Staat er met opzet in: wie dit leest en
   afhaakt, was toch een slechte klant geworden. */
.dn-eerlijk{
  border:1px solid var(--line-2); border-radius:var(--r);
  background:var(--glass); padding:clamp(1.2rem,3vw,1.7rem) clamp(1.2rem,3vw,1.9rem);
  margin-top:1.6rem;
}
.dn-eerlijk h3{ font-family:var(--f-display); font-weight:600; font-size:1.05rem; margin-bottom:.5rem; }
.dn-eerlijk p{ color:var(--ash-2); font-size:.94rem; }
.dn-eerlijk p + p{ margin-top:.7rem; }

/* ── Slot ──────────────────────────────────────────────── */
.dn-slot__acties{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }

@media (max-width:760px){
  /* Twee kolommen, wat het aantal filmpjes ook is. De modifiers hierboven
     zijn specifieker, dus die moeten hier mee genoemd worden. */
  .dn-films, .dn-films--2, .dn-films--3, .dn-films--4{ grid-template-columns:1fr 1fr; max-width:none; }
  .dn-prijs{ grid-template-columns:1fr; }
  .dn-prijs__bedrag{ font-size:1.35rem; }
}
@media (max-width:520px){
  .dn-slot__acties .btn{ width:100%; }
}