/* Emerald Magic Drops — blokken uit de websitebouwer (bron/blokken.mjs) en de site-onderdelen die je in de bouwer
   instelt (aankondigingsbalk, sociale links, effecten). Bouwt op site.css: dezelfde kleuren, letters en animaties. */

/* ------------------------------------------------------------------ het blok zelf: ruimte, breedte, achtergrond */
.blok { position: relative; isolation: isolate; padding: clamp(56px, 8vw, 104px) 0; }
.blok.rb-geen { padding-top: 0; } .blok.rb-klein { padding-top: clamp(26px, 4vw, 48px); } .blok.rb-normaal { padding-top: clamp(56px, 8vw, 104px); }
.blok.rb-groot { padding-top: clamp(84px, 12vw, 168px); } .blok.rb-extra { padding-top: clamp(120px, 17vw, 230px); }
.blok.ro-geen { padding-bottom: 0; } .blok.ro-klein { padding-bottom: clamp(26px, 4vw, 48px); } .blok.ro-normaal { padding-bottom: clamp(56px, 8vw, 104px); }
.blok.ro-groot { padding-bottom: clamp(84px, 12vw, 168px); } .blok.ro-extra { padding-bottom: clamp(120px, 17vw, 230px); }
/* het eerste blok van een pagina schuift onder de vaste kopbalk vandaan */
main > .blok:first-child { padding-top: calc(var(--header-h) + clamp(40px, 7vw, 96px)); }
main > .blok.rb-geen:first-child { padding-top: var(--header-h); }

.blok-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.br-smal .blok-wrap { max-width: 860px; }
.br-breed .blok-wrap { max-width: 1440px; }
.br-vol .blok-wrap { max-width: none; }
.ul-midden .blok-wrap { text-align: center; }
.ul-midden .kicker { justify-content: center; }
.ul-midden .blok-knoppen, .ul-midden .btn-row { justify-content: center; }
.ul-midden .blok-inleiding, .ul-midden .lead { margin-left: auto; margin-right: auto; }

.bg-zacht { background: linear-gradient(180deg, rgba(9, 44, 32, 0), rgba(9, 44, 32, .62) 18%, rgba(9, 44, 32, .62) 82%, rgba(9, 44, 32, 0)); }
.bg-donker { background: rgba(1, 9, 6, .74); }
.bg-smaragd { background: radial-gradient(120% 90% at 50% 0%, var(--bg-3), var(--bg-1) 70%); }
.bg-goud { background: var(--gold-grad); }
.bg-ivoor { background: var(--ivory); }
.bg-kleur { background: var(--blok-kleur, var(--bg-1)); }
.bg-foto::before, .bg-foto::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.bg-foto::before { z-index: -2; background: var(--blok-foto) center / cover no-repeat; }
.bg-foto::after { z-index: -1; background: rgba(3, 19, 14, var(--blok-overlay, .6)); }
/* donkere tekst op een lichte achtergrond (automatisch bij goud en ivoor, of zelf gekozen) */
.tk-donker, .bg-goud:not(.tk-licht), .bg-ivoor:not(.tk-licht) {
  --ivory: #20160b; --muted: rgba(32, 22, 11, .8); --faint: rgba(32, 22, 11, .62); --gold-light: #6d4813; --gold: #8a5d1c; --line: rgba(80, 52, 14, .28);
  color: var(--ivory);
}
.tk-donker .card, .bg-goud:not(.tk-licht) .card, .bg-ivoor:not(.tk-licht) .card { background: rgba(255, 252, 244, .45); }
.tk-licht { --ivory: #f6efdd; --muted: rgba(246, 239, 221, .78); color: var(--ivory); }

/* zichtbaar op welk scherm */
@media (max-width: 760px) { .tn-desktop { display: none !important; } }
@media (min-width: 761px) { .tn-mobiel { display: none !important; } }

/* animatie bij binnenkomen (site.js zet .is-in) */
.js .an-vervagen [data-reveal]:not(.is-in), .js .an-vervagen[data-reveal]:not(.is-in) { transform: none; }
.js .an-zoom [data-reveal]:not(.is-in) { transform: scale(.92); }
.js .an-links [data-reveal]:not(.is-in) { transform: translateX(-46px); }
.js .an-rechts [data-reveal]:not(.is-in) { transform: translateX(46px); }
.an-geen [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
.blok [data-reveal][style*="--i"] { transition-delay: calc(var(--i, 0) * 90ms); }

/* lege velden niet tonen (in de bouwer wel, met een hint) */
.blok [data-bv]:empty:not(img) { display: none; }
.blok .prose > :last-child, .blok .blok-inleiding > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ koppen en tekst */
.blok-titel { margin-bottom: .32em; }
.blok-titel.t-groot { font-size: clamp(46px, 7vw, 92px); }
.blok-titel.t-normaal { font-size: clamp(38px, 5.2vw, 66px); }
.blok-titel.t-klein { font-size: clamp(30px, 3.6vw, 46px); }
.blok .blok-kop { margin-bottom: .5em; }
.blok-inleiding { max-width: 720px; }
.blok-inleiding p { margin: 0 0 .8em; }
.blok-kopblok { margin-bottom: clamp(30px, 5vw, 56px); }
.blok-kopblok:has(> [data-bv]:empty:only-child) { margin: 0; }
.blok-tekst.k-2 { columns: 2 320px; column-gap: clamp(30px, 5vw, 64px); }
.blok-tekst.k-2 > * { break-inside: avoid; }
.blok-ft .blok-foto { max-width: 480px; width: 100%; justify-self: center; }
.blok-rechts .blok-foto, .blok-rechts > :first-child { order: 2; }
@media (max-width: 900px) { .blok-rechts .blok-foto, .blok-rechts > :first-child { order: 0; } }

/* citaat */
.blok-citaat { margin: 0; text-align: center; }
.blok-citaat figcaption { margin-top: 18px; }
.citaat-open .quote { font-size: clamp(30px, 3.8vw, 48px); }

/* opsomming */
.blok-lijst { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; text-align: left; }
.blok-lijst.k-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); column-gap: 40px; }
.ul-midden .blok-lijst { max-width: 720px; margin-left: auto; margin-right: auto; }
.blok-lijst li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; font-size: 21px; line-height: 1.5; }
.blok-lijst li .icon, .blok-lijst li .i { width: 22px; height: 22px; margin-top: 5px; color: var(--gold-light); }

/* stappen */
.blok-stappen { list-style: none; padding: 0; margin: 0; display: grid; gap: clamp(22px, 3vw, 36px); }
.stappen-rij { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.stappen-tijdlijn { max-width: 760px; margin: 0 auto; text-align: left; }
.stappen-tijdlijn li { position: relative; padding-left: 78px; }
.stappen-tijdlijn li::before { content: ""; position: absolute; left: 26px; top: 56px; bottom: -36px; width: 1px; background: linear-gradient(var(--gold), transparent); }
.stappen-tijdlijn li:last-child::before { display: none; }
.stappen-tijdlijn .blok-stap-nr { position: absolute; left: 0; top: 0; }
.blok-stap-nr { display: inline-grid; place-items: center; width: 54px; height: 54px; margin-bottom: 16px; border-radius: 50%; border: 1px solid var(--line-strong);
  font: 500 22px var(--caps); color: var(--gold-light); background: radial-gradient(circle at 50% 35%, rgba(216, 178, 92, .18), rgba(216, 178, 92, 0) 70%); }
.blok-stappen h3 { margin-bottom: .35em; }

/* veelgestelde vragen */
.blok-faq { display: grid; gap: 12px; text-align: left; }
.blok-faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.blok-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; cursor: pointer; list-style: none;
  font: 500 clamp(21px, 2vw, 25px)/1.3 var(--serif); color: var(--ivory); }
.blok-faq-item summary::-webkit-details-marker { display: none; }
.blok-faq-item summary i { flex: 0 0 auto; position: relative; width: 18px; height: 18px; }
.blok-faq-item summary i::before, .blok-faq-item summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: var(--gold-light); transition: transform .4s var(--soft); }
.blok-faq-item summary i::after { transform: rotate(90deg); }
.blok-faq-item[open] summary i::after { transform: rotate(0deg); }
.blok-faq-item .prose { padding: 0 24px 22px; font-size: 20px; color: var(--muted); }

/* ------------------------------------------------------------------ foto's */
.blok-media { position: relative; width: 100%; }
.blok-media-in { position: relative; overflow: hidden; }
.blok-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vorm-boog .blok-media-in { aspect-ratio: 3 / 4; border-radius: 999px 999px var(--radius) var(--radius); border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 8px rgba(216, 178, 92, .06), 0 40px 100px -40px rgba(0, 0, 0, .8); }
.vorm-rond .blok-media-in { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-strong); box-shadow: 0 0 0 8px rgba(216, 178, 92, .06); }
.vorm-rechthoek .blok-media-in { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .8); }
.vorm-vrij .blok-media-in { border-radius: 0; }
.blok-grotefoto { margin-top: 0; margin-bottom: 0; }
.blok-grotefoto figcaption { margin-top: 14px; text-align: center; }
.blok-grotefoto.h-laag .blok-media-in { aspect-ratio: 21 / 9; }
.blok-grotefoto.h-hoog .blok-media-in { aspect-ratio: 4 / 5; max-height: 86vh; }
.blok-grotefoto.h-natuurlijk .blok-media img { height: auto; max-height: 82vh; }
.blok-fotolink { display: block; }

/* galerij */
.blok-galerij { display: grid; gap: clamp(14px, 2vw, 24px); grid-template-columns: repeat(var(--k, 3), 1fr); }
.blok-galerij.k-2 { --k: 2; } .blok-galerij.k-3 { --k: 3; } .blok-galerij.k-4 { --k: 4; }
@media (max-width: 900px) { .blok-galerij.k-3, .blok-galerij.k-4 { --k: 2; } }
@media (max-width: 520px) { .blok-galerij { --k: 1 !important; } }
.blok-galerij figure { margin: 0; }
.blok-galerij-foto { overflow: hidden; border-radius: var(--radius-sm); border: 1px solid var(--line); aspect-ratio: 3 / 4; }
.g-vierkant .blok-galerij-foto { aspect-ratio: 1; }
.g-liggend .blok-galerij-foto { aspect-ratio: 4 / 3; }
.g-boog .blok-galerij-foto { border-radius: 999px 999px var(--radius-sm) var(--radius-sm); }
.g-rond .blok-galerij-foto { aspect-ratio: 1; border-radius: 50%; }
.blok-galerij img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--soft); }
.blok-galerij figure:hover img { transform: scale(1.04); }
.blok-galerij figcaption { margin-top: 10px; text-align: center; }

/* video */
.blok-video { position: relative; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(1, 9, 6, .6); aspect-ratio: 16 / 9; }
.blok-video.v-43 { aspect-ratio: 4 / 3; } .blok-video.v-11 { aspect-ratio: 1; max-width: 640px; margin: 0 auto; } .blok-video.v-916 { aspect-ratio: 9 / 16; max-width: 420px; margin: 0 auto; }
.blok-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.blok-video-leeg { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; color: var(--faint); font: 400 16px var(--sans); }
.blok-bijschrift { margin-top: 14px; text-align: center; }

/* ------------------------------------------------------------------ opbouw */
.blok-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.hero-rechts .blok-hero-tekst { order: 2; }
.hero-midden { grid-template-columns: 1fr; text-align: center; max-width: 980px; }
.hero-midden .kicker { justify-content: center; } .hero-midden .blok-knoppen { justify-content: center; } .hero-midden .blok-inleiding { margin: 0 auto; }
.blok-hero-beeld { max-width: 500px; width: 100%; justify-self: center; }
.blok-hero .blok-knoppen { margin-top: 30px; }
@media (max-width: 900px) {
  .blok-hero { grid-template-columns: 1fr; text-align: center; }
  .blok-hero .kicker, .blok-hero .blok-knoppen { justify-content: center; }
  .blok-hero .blok-inleiding { margin: 0 auto; }
  .blok-hero-beeld { order: -1 !important; max-width: 340px; }
  .hero-rechts .blok-hero-tekst { order: 0; }
}
.blok-knoppen:empty { display: none; }
.blok .blok-knoppen { margin-top: 26px; flex-wrap: wrap; }

/* kolommen en kaarten */
.blok-kolommen, .blok-kaarten, .blok-ervaringen { display: grid; gap: clamp(18px, 2.4vw, 30px); grid-template-columns: repeat(var(--k, 3), 1fr); text-align: left; }
.k-2 { --k: 2; } .k-3 { --k: 3; } .k-4 { --k: 4; }
@media (max-width: 1000px) { .blok-kolommen.k-4, .blok-kaarten.k-4 { --k: 2; } .blok-kolommen.k-3, .blok-kaarten.k-3 { --k: 2; } }
@media (max-width: 640px) { .blok-kolommen, .blok-kaarten, .blok-ervaringen { --k: 1 !important; } }
.ul-midden .blok-kolom { text-align: center; }
.blok-kolom { padding: clamp(24px, 3vw, 36px); }
.vorm-open .blok-kolom { padding: 8px 4px; }
.blok-icoon { display: inline-grid; place-items: center; width: 60px; height: 60px; margin-bottom: 16px; border-radius: 50%; border: 1px solid var(--line-strong);
  color: var(--gold-light); background: radial-gradient(circle at 50% 35%, rgba(216, 178, 92, .2), rgba(216, 178, 92, 0) 72%); }
.blok-icoon svg { width: 26px; height: 26px; }
.blok-kolom h3, .blok-kaart h3 { margin-bottom: .35em; }
.blok-kolom .prose, .blok-kaart .prose { font-size: 19px; color: var(--muted); }
.blok-meer { display: inline-block; margin-top: 10px; font: 500 14px var(--sans); letter-spacing: .04em; }
.blok-kaart { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.blok-kaart-foto { aspect-ratio: 4 / 3; overflow: hidden; }
.blok-kaart-foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--soft); }
.blok-kaart:hover .blok-kaart-foto img { transform: scale(1.05); }
.blok-kaart-tekst { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: clamp(20px, 2.6vw, 30px); }
.blok-kaart-tekst .btn { align-self: flex-start; margin-top: auto; }
.ul-midden .blok-kaart-tekst { text-align: center; } .ul-midden .blok-kaart-tekst .btn { align-self: center; }

/* banner */
.blok-banner { position: relative; overflow: hidden; display: grid; place-items: center; min-height: clamp(340px, 42vw, 520px); padding: clamp(40px, 7vw, 90px) clamp(22px, 5vw, 70px); }
.blok-banner-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.blok-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 90% at 50% 50%, rgba(3, 19, 14, calc(var(--banner-donker, 55%) * .9)), rgba(3, 19, 14, var(--banner-donker, 55%))); }
.blok-banner-tekst { position: relative; max-width: 760px; }
.ul-links .blok-banner { place-items: center start; }

/* ervaringen */
.blok-ervaring { margin: 0; padding: clamp(26px, 3vw, 40px); text-align: center; }
.blok-ervaring .quote { font-size: clamp(22px, 2.3vw, 28px); }
.blok-ervaring figcaption { margin-top: 16px; font: 400 15px var(--sans); color: var(--muted); }
.blok-ervaring figcaption b { color: var(--gold-light); font-weight: 500; }

/* ruimte */
.blok-ruimte { display: grid; place-items: center; }
.blok-ruimte.r-klein { height: 40px; } .blok-ruimte.r-normaal { height: 90px; } .blok-ruimte.r-groot { height: 160px; }
.blok-ruimte.l-lijn::before, .blok-ruimte.l-sier::before { content: ""; grid-area: 1 / 1; width: min(520px, 70%); height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.blok-sier { grid-area: 1 / 1; position: relative; display: grid; place-items: center; width: 44px; height: 44px; background: var(--bg); border-radius: 50%; color: var(--gold-light); }
.blok-sier svg { width: 22px; height: 22px; }

/* winkel */
.bt-formules .remedies { margin-top: 0; }
.blok-formule-kaart { max-width: 440px; width: 100%; justify-self: center; }
.blok-formule-kaart .remedy { grid-column: auto; }
.blok-maps-rij { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.blok-maps-rij > .prose:empty + .blok-maps { grid-column: 1 / -1; }
@media (max-width: 800px) { .blok-maps-rij { grid-template-columns: 1fr; } }
.blok-maps { overflow: hidden; padding: 0; aspect-ratio: 4 / 3; }
.blok-maps iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.75) contrast(1.05); }
.bt-contact .form { text-align: left; }

/* ------------------------------------------------------------------ site-instellingen uit de bouwer */
/* aankondigingsbalk boven in de kopbalk */
.met-balk { --balk-h: 36px; --header-h: calc(74px + var(--balk-h)); }
.met-balk .site-header .wrap { height: calc(100% - var(--balk-h)); }
.aankondiging { height: var(--balk-h, 36px); display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); background: var(--gold-grad);
  color: #241805; font: 500 13.5px/1.2 var(--sans); letter-spacing: .04em; text-align: center; overflow: hidden; }
.aankondiging a { color: inherit; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.aankondiging a:hover span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.aankondiging span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* sociale media in de footer */
.footer-sociaal { display: flex; gap: 10px; margin-top: 18px; }
.footer-sociaal a { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--gold-light); transition: border-color .3s, background-color .3s; }
.footer-sociaal a:hover { border-color: var(--gold-light); background: rgba(216, 178, 92, .1); }
.footer-sociaal svg { width: 19px; height: 19px; }

/* effecten die je in de huisstijl uit kunt zetten */
.geen-korrel .grain, .geen-cursorlicht .cursor-light, .geen-vuurvliegjes #vuurvliegjes { display: none !important; }