/* LOCATIES-CARROUSEL-20261005 — sectie 05: vijf locatietypes + fotocarrousel (Wikimedia Commons, met credits).
   Werkt zonder JS (horizontale scroll-snap-strook); met JS: pijlen, teller, toetsenbord, autoplay (niet bij reduced motion). */

/* vijf kaarten */
@media (min-width:640px) and (max-width:1099px){.locs .loc:last-child{grid-column:1/-1}}
@media (min-width:1100px){.locs{grid-template-columns:repeat(5,minmax(0,1fr))}.locs .loc{padding:26px 20px}.locs .loc h3{font-size:1.42rem}}

/* bannerfoto: credit rechtsboven (CC BY verplicht) */
.banner-loc .banner-media img{object-position:50% 40%}
.banner-credit{position:absolute;z-index:2;right:var(--pad);top:14px;margin:0;max-width:calc(100% - 2*var(--pad));padding:4px 10px;border-radius:999px;background:rgba(10,10,10,.55);color:#e9e2d4;font-size:12px;line-height:1.5;backdrop-filter:blur(4px)}
.banner-credit a{color:inherit;text-decoration:underline;text-decoration-color:rgba(233,226,212,.45);text-underline-offset:2px}
html[data-theme="light"] .banner-credit{background:rgba(255,253,249,.78);color:#3a332a}
html[data-theme="light"] .banner-credit a{text-decoration-color:rgba(58,51,42,.4)}

/* carrousel */
.lc{margin-top:clamp(48px,6vw,84px)}
.lc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 24px;margin-bottom:22px}
.lc-h{font-size:clamp(1.7rem,2.8vw,2.4rem)}
.lc-ctl{display:none;align-items:center;gap:10px}
html.js .lc-ctl{display:flex}
.lc-count{margin:0 6px 0 0;font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.lc-count .lc-i{color:var(--gold-l)}
.lc-btn{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--txt);cursor:pointer;transition:border-color .3s,background .3s,transform .3s var(--ease)}
.lc-btn:hover{border-color:var(--gold);background:var(--card-2)}
.lc-btn:active{transform:scale(.94)}
.lc-btn .ico{width:20px;height:20px}
.lc-btn[hidden]{display:none}
.lc-play .lc-ipl,.lc-play.is-paused .lc-ip{display:none}
.lc-play.is-paused .lc-ipl{display:inline-flex}
.lc-play span{display:inline-flex}

.lc-track{display:flex;gap:clamp(12px,1.6vw,20px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:0;padding:4px 2px 14px;margin:0 -2px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;-webkit-overflow-scrolling:touch}
.lc-track:focus-visible{outline-offset:4px}
.lc-track::-webkit-scrollbar{height:6px}
.lc-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.lc-slide{flex:0 0 84%;scroll-snap-align:start;min-width:0}
@media (min-width:640px){.lc-slide{flex-basis:58%}}
@media (min-width:1024px){.lc-slide{flex-basis:calc((100% - 2*clamp(12px,1.6vw,20px)) / 2.45)}}
.lc-fig{display:flex;flex-direction:column;height:100%}
.lc-img{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:var(--r);background:var(--card);border:1px solid var(--line-soft)}
.lc-img picture,.lc-img img{width:100%;height:100%}
.lc-img img{object-fit:cover;transition:transform .9s var(--ease)}
@media (hover:hover){.lc-slide:hover .lc-img img{transform:scale(1.035)}}
.lc-fig figcaption{display:flex;flex-direction:column;gap:2px;padding:14px 4px 0}
.lc-cat{font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.lc-place{font-family:var(--serif);font-size:1.45rem;font-weight:600;line-height:1.2;color:var(--txt)}
.lc-credit{margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--dim)}
.lc-credit a,.lc-credits a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.lc-credit a:hover,.lc-credits a:hover{color:var(--gold-l)}
.lc-note{margin-top:14px;font-size:14px;color:var(--dim);max-width:80ch}
.lc-credits{margin-top:14px;font-size:13.5px;color:var(--dim)}
.lc-credits summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:700;color:var(--muted);list-style:none}
.lc-credits summary::-webkit-details-marker{display:none}
.lc-credits summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);color:var(--gold);font-weight:700;line-height:1}
.lc-credits[open] summary::before{content:"−"}
.lc-credits p{margin:2px 0 8px;max-width:80ch}
.lc-credits ul{display:grid;gap:4px 28px;line-height:1.55}
@media (min-width:900px){.lc-credits ul{grid-template-columns:1fr 1fr}}
.foot-mood a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (prefers-reduced-motion:reduce){.lc-img img{transition:none}.lc-slide:hover .lc-img img{transform:none}}
@media print{.lc-ctl{display:none!important}.lc-track{flex-wrap:wrap;overflow:visible}.lc-slide{flex-basis:30%}}
/* LOCATIES-ACHTERGROND-20261006 — bewegende fotoachtergrond (crossfade + langzame zoom), credit per foto, bolletjes. */
.banner-loc .ls{overflow:hidden}
.ls-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.ls-slide.is-on{opacity:1}
.ls-slide picture,.ls-slide img{display:block;width:100%;height:100%}
.ls-slide img{object-fit:cover;object-position:50% 45%;transform:scale(1.06);transform-origin:60% 45%}
.ls-on .ls-slide.is-on img{animation:lsKb 9s ease-out both}
.ls-on .ls-slide:nth-child(even).is-on img{animation-name:lsKb2}
@keyframes lsKb{from{transform:scale(1.14) translate3d(1.2%,0,0)}to{transform:scale(1.03) translate3d(-.6%,0,0)}}
@keyframes lsKb2{from{transform:scale(1.03) translate3d(-1%,.4%,0)}to{transform:scale(1.13) translate3d(.8%,-.4%,0)}}
.ls-credits .ls-credit{display:none}
.ls-credits .ls-credit.is-on{display:block;animation:lsIn .6s ease both}
@keyframes lsIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ls-lbl{font-weight:600}
.ls-dots{position:absolute;z-index:2;right:var(--pad);bottom:clamp(14px,2.2vw,26px);display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;max-width:min(60%,420px)}
.ls-dot{width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.ls-dot::before{content:"";width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.45);box-shadow:0 0 0 1px rgba(0,0,0,.25);transition:width .35s ease,background .35s ease}
.ls-dot.is-on::before{width:22px;background:var(--gold-l,#e3c27a)}
.ls-dot:focus-visible{outline:2px solid var(--gold-l,#e3c27a);outline-offset:2px;border-radius:999px}
html[data-theme="light"] .ls-dot::before{background:rgba(58,51,42,.35)}
html[data-theme="light"] .ls-dot.is-on::before{background:#8a6216}
@media (max-width:767px){.ls-dots{left:var(--pad);right:auto;justify-content:flex-start;max-width:calc(100% - 2*var(--pad));bottom:8px}.ls-dot{width:22px;height:28px}}
@media (prefers-reduced-motion:reduce){.ls-slide{transition:none}.ls-on .ls-slide.is-on img{animation:none}}
/* LS-DOTS-1RIJ-20261006: 15 foto's → puntjes altijd op één rij */
.ls-dots{flex-wrap:nowrap;max-width:none;gap:4px}
@media (max-width:767px){.ls-dots{gap:2px}.ls-dot{width:20px}}
/* LS-DOTS-MOBIEL-20261006: op mobiel staat de foto als blok boven de kop → puntjes onderaan de foto, niet over "voorbijkomen" */
@media (max-width:767px){.banner-loc .ls-dots{top:calc(clamp(260px,72vw,380px) - 74px);bottom:auto}}
