/* ============================================================
   SM Stapelpaneel  (uit SM-P01)

   Eén paneel uit de stapelpagina. Zet je er meerdere onder elkaar,
   dan schuift elk volgend paneel met een negatieve marge over zijn
   voorganger heen en zie je door de ronde bovenkant net de laag
   eronder uitkomen.

   De foto blijft achter bij de pagina, wat diepte geeft. Dat loopt
   op de scroll-tijdlijn van de browser zelf. De optionele vaste stand
   gebruikt een geclipte vaste laag. Daardoor werkt die ook op tablet en
   mobiel, waar background-attachment meestal wordt genegeerd.

   Maten uit het bouwbestek, niet gegokt:
   ronding 60/30/25, hoogte 650/450/450, zijmarge 7/5/10 procent,
   kop 40px serif, tekst 19px op regelhoogte 1.7.

   Gemaakt door John Schreve | Schrevemarketing
   ============================================================ */

.sm-paneel {
  --sm-paneel-radius: 60px;
  --sm-paneel-hoogte: 650px;
  --sm-paneel-zij: 7%;
  --sm-paneel-diepte: 55px;

  --sm-paneel-ink: #FFFFFF;
  /* Nagemeten op de live sectie: een verloop van doorzichtig naar zwart,
     met de hele laag op opacity .65. Dat is hetzelfde als doorzichtig naar
     zwart-op-65-procent, dus dat schrijven we hier in één keer. */
  --sm-paneel-waas-boven: rgba(0, 0, 0, 0);
  --sm-paneel-waas-onder: rgba(0, 0, 0, .65);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* De homepage centreert het hele inhoudsblok in de beschikbare hoogte. */
  justify-content: center;
  min-height: var(--sm-paneel-hoogte);
  padding: 80px 0;
  border-radius: var(--sm-paneel-radius) var(--sm-paneel-radius) 0 0;
  overflow: hidden;
  /* Deze clip houdt ook een vaste achtergrond binnen het paneel. Dat maakt
     de vaste stand bruikbaar op tablet en mobiel, waar background-attachment
     door browsers vaak wordt genegeerd. */
  -webkit-clip-path: inset(0 round var(--sm-paneel-radius) var(--sm-paneel-radius) 0 0);
  clip-path: inset(0 round var(--sm-paneel-radius) var(--sm-paneel-radius) 0 0);
  color: var(--sm-paneel-ink);
  /* Elk volgend paneel hoort bovenop. Zonder dit wint het paneel dat
     hoger in de boom staat, en dat is de verkeerde kant op. */
  isolation: isolate;
}

/* ---------- de foto ---------- */

.sm-paneel__foto {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  /* De foto is decoratief. Door aanrakingen door te laten naar het paneel
     kan mobiel de laag niet selecteren of opnieuw tekenen bij lang indrukken. */
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  /* Standaard het midden, maar per paneel te richten. Een paneel is breed en
     laag; een staande foto wordt dus een dunne strook en dan bepaalt dit punt
     of je het onderwerp ziet of de lucht erboven. */
  background-position: var(--sm-paneel-bijsnede-x, 50%) var(--sm-paneel-bijsnede-y, 50%);
  z-index: 0;
}

/* Het verloop houdt de tekst leesbaar, ook op een lichte foto.
   Onderaan zwaarder, want daar staat de knop. */
.sm-paneel__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    var(--sm-paneel-waas-boven) 0%,
    var(--sm-paneel-waas-onder) 100%);
}

/* De laag is ruimer dan het paneel, anders zie je de rand eronderuit
   komen zodra hij schuift. De ruimte is 1,2 keer de verschuiving, dus
   die twee blijven bij elkaar als je de diepte wijzigt. */
.sm-paneel { view-timeline-name: --sm-paneel-tijdlijn; view-timeline-axis: block; }

@supports (animation-timeline: view()) {
  .sm-paneel > .sm-paneel__foto {
    inset: calc(var(--sm-paneel-diepte) * -1.2) 0;
    animation-name: sm-paneel-diepte;
    animation-timeline: --sm-paneel-tijdlijn;
    animation-range: cover;
    animation-fill-mode: both;
    animation-timing-function: linear;
  }
}

@keyframes sm-paneel-diepte {
  from { transform: translate3d(0, calc(var(--sm-paneel-diepte) * -1), 0); }
  to   { transform: translate3d(0, var(--sm-paneel-diepte), 0); }
}

/* De foto ligt onderop, alles daarboven. Zonder deze regel tekent een
   absoluut geplaatst element OVER tekst die gewoon in de stroom staat,
   ook al staat die tekst er later in. */
.sm-paneel > *:not(.sm-paneel__foto) {
  position: relative;
  z-index: 1;
}

/* ---------- de inhoud ---------- */

.sm-paneel__rij {
  width: 100%;
  padding-left: var(--sm-paneel-zij);
  padding-right: var(--sm-paneel-zij);
}

/* Het blok zelf wordt NIET afgeknepen. Op de bron loopt de kop over de volle
   breedte (1308 van 1536) en breekt hij alleen waar de <br> staat; alleen de
   lopende tekst is smal gehouden op 654px. Kneep je het hele blok af, dan
   breekt de kop op de verkeerde plek. */
.sm-paneel__blok {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-right: auto;
}
.sm-paneel--midden .sm-paneel__blok { align-items: center; text-align: center; margin-left: auto; }
.sm-paneel--rechts .sm-paneel__blok { align-items: flex-end; text-align: right; margin-left: auto; margin-right: 0; }

/* Het streepje voor de eyebrow komt uit de bron en houdt het label
   vast aan de rand in plaats van het te laten zweven. */
/* Twee klassen in elke selector, geen tagnaam ervoor. Een thema stuurt
   h2 en p met eigen regels, en één klasse verliest daarvan. Dat kostte
   eerder de hele kop van de verhaal-sectie: die viel terug op 48px in
   bijna-zwart op een donkere grond. Font-family zetten we bewust NIET,
   zodat de kop het lettertype van het thema pakt (hier Playfair Display,
   live gemeten). */
.sm-paneel .sm-paneel__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--sm-paneel-ink);
}
.sm-paneel .sm-paneel__eyebrow::before {
  content: "";
  flex: 0 0 26px;
  height: 1px;
  background: currentColor;
}

.sm-paneel .sm-paneel__kop {
  width: 100%;
  margin: 0 0 30px;
  font-size: 40px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--sm-paneel-ink);
  text-wrap: balance;
}

/* 654px is de gemeten breedte op de bron. Niet in ch, want dat schuift mee
   met het lettertype en dan klopt de regelval niet meer. */
.sm-paneel .sm-paneel__tekst {
  margin: 0;
  max-width: min(100%, var(--sm-paneel-tekstbreedte, 654px));
  /* Geen font-family: erft van het thema. Zie de toelichting hierboven. */
  font-size: 19px;
  line-height: 1.7;
  color: var(--sm-paneel-ink);
  text-wrap: pretty;
}
.sm-paneel .sm-paneel__tekst + .sm-paneel__tekst { margin-top: 20px; }

/* ---------- de knoppen ----------
   Vorm nagemeten op de live knoppen: hoek 6px, ruimte 17px boven/onder en
   40px opzij, letter 15px. De basisknop is een pil, dus die vorm zetten we
   hier binnen het paneel om. Alleen binnen .sm-paneel, zodat knoppen elders
   op de site hun eigen vorm houden. */
.sm-paneel .sm-btn {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 17px 40px;
  /* Geen font-family: erft van het thema. Zie de toelichting hierboven. */
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: normal;
}
.sm-paneel .sm-btn-ic svg {
  width: 18px;
  height: 15px;
}
.sm-paneel .sm-btn-accent {
  border-color: rgb(55, 198, 200);
}
.sm-paneel .sm-btn-glas-rand {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}
.sm-paneel .sm-btn-accent:hover {
  background: transparent;
  color: rgb(91, 217, 186);
  border-color: rgb(91, 217, 186);
}
.sm-paneel .sm-btn-glas-rand:hover {
  color: rgb(87, 216, 160);
  border-color: rgb(87, 216, 160);
}

.sm-paneel__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
}

/* ---------- smaller ----------
   Bron: ronding 60/30/25, hoogte 650/450/450, zijmarge 7/5/10. */

@media (max-width: 1024px) {
  .sm-paneel {
    --sm-paneel-radius: 30px;
    --sm-paneel-hoogte: 450px;
    --sm-paneel-zij: 5%;
    padding: 60px 0 70px;
  }
  .sm-paneel .sm-paneel__kop { font-size: 40px; }
  .sm-paneel .sm-paneel__tekst { font-size: 18px; }
}

@media (max-width: 767px) {
  .sm-paneel {
    --sm-paneel-radius: 25px;
    --sm-paneel-zij: 10%;
  }
  .sm-paneel .sm-paneel__kop { font-size: 24px; }
  .sm-paneel .sm-paneel__tekst { font-size: 17px; }
  /* Rechts of midden uitlijnen leest niet op een smal scherm. */
  .sm-paneel--rechts .sm-paneel__blok,
  .sm-paneel--midden .sm-paneel__blok { align-items: flex-start; text-align: left; }
}

/* Zet de bewegende foto stil voor wie daar last van heeft. */
@media (prefers-reduced-motion: reduce) {
  .sm-paneel.sm-paneel > .sm-paneel__foto {
    position: absolute !important;
    animation: none !important;
    transform: none !important;
    inset: 0 !important;
  }
}