/* ==========================================================================
   Exposities: overzicht "Op pad met Anja" en de pagina per expositie
   (de uitgelichte kaart en de ansichtkaarten komen uit expo.css)
   ========================================================================== */

.as-expo-page { padding: clamp(40px, 6vw, 88px) 0 var(--section); background: var(--linnen); }
.as-expo-page .as-expo-feature { background: var(--wit); }
.as-expo-page__head { margin-bottom: clamp(28px, 4vw, 56px); }
.as-expo-page__title { margin: 0 0 .3em; font: 700 clamp(3.4rem, 6.4vw, 6.4rem)/.95 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-expo-page__head p { max-width: 52ch; margin: 0; font-size: 1.12rem; }

/* Kaart */
.as-expomap-wrap { margin-bottom: clamp(56px, 7vw, 104px); }
.as-expomap-wrap__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; margin-bottom: 1.2rem; }
.as-expomap-wrap__head p { max-width: 46ch; margin: 0; }
.as-expomap__legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; font-size: .95rem; }
.as-expomap__legend li { display: inline-flex; align-items: center; gap: .5rem; }
.as-expomap__legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.as-expomap__legend i.is-komend { background: var(--mint); box-shadow: 0 0 0 3px rgba(159, 199, 170, .35); }
.as-expomap__legend i.is-geweest { background: var(--taupe); }
.as-expomap__legend i.is-route { width: 22px; height: 0; border-radius: 0; background: none; box-shadow: inset 0 0 0 1px var(--roze); height: 2px; }
.as-expomap { position: relative; z-index: 0; height: clamp(380px, 46vw, 560px); border-radius: 6px; overflow: hidden; background: #E9E4DE; box-shadow: 0 40px 80px -60px rgba(59, 52, 45, .6); }
.as-expomap .as-tiles { filter: grayscale(1) sepia(.28) brightness(1.06) contrast(.88); }
.as-expomap .leaflet-control-zoom { border: 0; box-shadow: 0 8px 20px -10px rgba(59, 52, 45, .5); }
.as-expomap .leaflet-control-zoom a { width: 36px; height: 36px; line-height: 36px; color: var(--kop); }
.as-expomap .leaflet-control-attribution { margin: 0 6px 6px 0; padding: 1px 6px; border-radius: 3px; background: rgba(255, 255, 255, .6); font: 400 10px/1.5 var(--f-body); color: var(--taupe-diep); }
.as-expomap .leaflet-control-attribution a { color: inherit; text-decoration: none; }

.as-pin { display: grid; place-items: center; }
.as-pin__dot { width: 16px; height: 16px; border-radius: 50%; background: var(--taupe); box-shadow: 0 0 0 3px var(--wit), 0 6px 12px -4px rgba(59, 52, 45, .6); transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.as-pin.is-in .as-pin__dot { transform: scale(1); }
.as-pin.is-komend .as-pin__dot, .as-pin.is-nu .as-pin__dot { width: 20px; height: 20px; background: var(--mint); }
.as-pin.is-nu .as-pin__dot { background: var(--roze); animation: as-glow 2.4s var(--ease) infinite; }
.as-pin:hover .as-pin__dot, .as-pin:focus .as-pin__dot { transform: scale(1.2); }
.as-route-line { fill: none; stroke: var(--roze); stroke-linecap: round; opacity: .85; }

.as-pop .leaflet-popup-content-wrapper { border-radius: 6px; box-shadow: 0 20px 40px -20px rgba(59, 52, 45, .6); }
.as-pop .leaflet-popup-content { margin: 1rem 1.1rem; font: 300 1rem/1.45 var(--f-body); color: var(--tekst); }
.as-pop p { margin: 0; }
.as-pop__label { font: 400 .95rem/1 var(--f-h1); letter-spacing: .1em; color: var(--taupe-diep); }
.as-pop__label.is-komend, .as-pop__label.is-nu { color: #4E7D5C; }
.as-pop__title { margin: .3rem 0 .2rem !important; font: 700 1.5rem/1.05 var(--f-h2); color: var(--kop); }
.as-pop__meta { font-size: .92rem; }
.as-pop__link { display: inline-block; margin-top: .5rem; font-weight: 500; color: var(--kop) !important; }

/* Binnenkort en eerder */
.as-expo-soon { margin-bottom: clamp(56px, 7vw, 104px); }
.as-expo-year { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.2rem; margin-bottom: 1.6rem; }
.as-expo-year__label { margin: .7rem 0 0; font: 400 2.6rem/1 var(--f-h1); letter-spacing: .04em; color: var(--taupe); }
.as-expo-year__list { display: grid; gap: .5rem; }
.as-pastrow {
	position: relative;
	display: grid;
	grid-template-columns: 56px 12rem minmax(0, 1fr) auto auto;
	gap: 1.2rem;
	align-items: center;
	padding: .6rem 1.2rem .6rem .6rem;
	border-radius: 6px;
	background: var(--wit);
	color: var(--kop);
	text-decoration: none;
	transition: transform .4s var(--ease), box-shadow .4s;
}
.as-pastrow:hover { transform: translateX(4px); box-shadow: 0 16px 30px -24px rgba(59, 52, 45, .8); }
.as-pastrow__thumb { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; }
.as-pastrow__thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4); }
.as-pastrow__when { font-size: .95rem; color: var(--taupe-diep); }
.as-pastrow__title { font-weight: 500; }
.as-pastrow__place { color: var(--taupe-diep); }
.as-pastrow__stamp { padding: .15rem .6rem .05rem; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--roze-diep); font: 700 1.1rem/1 var(--f-h2); letter-spacing: .1em; color: var(--roze-diep); opacity: .6; transform: rotate(-6deg); }

/* Pagina per expositie */
.as-expo-single { background: var(--linnen); padding-bottom: var(--section); }
.as-expo-single__hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: min(78vh, 720px); }
.as-expo-single__media { position: relative; background: var(--kiezel); }
.as-expo-single__media img, .as-expo-single__media .as-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-expo-single.is-geweest .as-expo-single__media img { filter: grayscale(.35); }
.as-expo-single__info { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 80px) var(--edge) clamp(32px, 5vw, 80px) clamp(32px, 5vw, 80px); background: var(--wit); }
.as-crumb-back { display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem; margin-bottom: 1.6rem; font-size: .95rem; color: var(--taupe-diep); text-decoration: none; }
.as-crumb-back .as-icon { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.as-crumb-back:hover .as-icon { transform: translateX(-3px); }
.as-expo-single__title { margin: 0 0 .8rem; font: 700 clamp(2.8rem, 4.4vw, 4.6rem)/.98 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-expo-single__info .as-expo-feature__actions { align-items: center; }
.as-expo-single__body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); padding-top: clamp(48px, 6vw, 88px); margin-bottom: clamp(56px, 7vw, 104px); }
.as-expo-single__story .as-prose { margin-bottom: 2rem; font-size: 1.1rem; }
.as-expomap--mini { height: 320px; }
.as-expo-single__map { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }

.as-expo-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.as-expo-gallery__item { padding: 0; border: 0; border-radius: 4px; overflow: hidden; aspect-ratio: 1; cursor: zoom-in; background: var(--kiezel); }
.as-expo-gallery__item:first-child { grid-column: span 2; grid-row: span 2; }
.as-expo-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.as-expo-gallery__item:hover img { transform: scale(calc(var(--fz, 1) * 1.04)); }

/* Schermvullende foto's */
.as-lightbox { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; margin: 0; padding: 0; border: 0; background: rgba(28, 24, 20, .96); color: var(--wit); }
.as-lightbox::backdrop { background: transparent; }
.as-lightbox__track { display: flex; width: 100%; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.as-lightbox__track::-webkit-scrollbar { display: none; }
.as-lightbox__slide { flex: none; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; padding: clamp(16px, 4vw, 56px); scroll-snap-align: center; }
.as-lightbox__slide img { max-width: 100%; max-height: 100%; object-fit: contain; }
.as-lightbox .as-qv__close { position: fixed; top: 18px; right: 18px; background: rgba(255, 255, 255, .12); color: var(--wit); }
.as-lightbox__count { position: fixed; left: 50%; bottom: 20px; margin: 0; font: 400 1.2rem/1 var(--f-h1); letter-spacing: .1em; transform: translateX(-50%); }

@media (max-width: 899px) {
	.as-expo-year { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
	.as-expo-year__label { margin: 0; }
	.as-pastrow { grid-template-columns: 48px minmax(0, 1fr) auto; gap: .2rem .9rem; }
	.as-pastrow__thumb { grid-row: span 3; width: 48px; height: 48px; }
	.as-pastrow__when, .as-pastrow__title, .as-pastrow__place { grid-column: 2; }
	.as-pastrow__stamp { grid-column: 3; grid-row: 1 / span 3; }
	.as-expo-single__hero { grid-template-columns: minmax(0, 1fr); }
	.as-expo-single__media { aspect-ratio: 4 / 3; }
	.as-expo-single__info { padding: 28px var(--gutter) 40px; }
	.as-expo-single__body { grid-template-columns: minmax(0, 1fr); }
	.as-expo-single__map { position: static; }
	.as-expo-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}