/* ==========================================================================
   Exposities en markten "Kom kijken"
   ========================================================================== */

.as-expo { background: var(--wit); overflow: hidden; }
.as-expo__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gutter); align-items: end; margin-bottom: clamp(36px, 4vw, 64px); }
.as-expo__head .as-h2 { margin: 0; }
.as-expo__head p { max-width: 42ch; margin: 0; }
.as-expo__none { max-width: 52ch; font-size: 1.15rem; color: var(--taupe-diep); }

/* De eerstvolgende expositie */
.as-expo-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	margin-bottom: clamp(56px, 7vw, 104px);
	border-radius: 6px;
	overflow: hidden;
	background: var(--linnen);
	box-shadow: 0 40px 80px -60px rgba(59, 52, 45, .6);
}
.as-expo-feature__media { position: relative; min-height: 440px; background: var(--kiezel); }
.as-expo-feature__media img, .as-expo-feature__media .as-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.as-expo-feature__body { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 5vw, 72px); }
.as-expo-feature__count {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: .7rem;
	margin: 0 0 1.4rem;
	padding: .55rem 1.1rem .5rem;
	border-radius: 40px;
	background: var(--wit);
	font: 400 clamp(1.4rem, 2vw, 1.9rem)/1 var(--f-h1);
	letter-spacing: .08em;
	color: var(--kop);
}
.as-expo-feature__count::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--mint); flex-shrink: 0; }
.is-nu .as-expo-feature__count::before { background: var(--roze); animation: as-glow 2.4s var(--ease) infinite; }
.as-expo-feature__title { margin-bottom: .8rem; font: 700 clamp(2.6rem, 4vw, 4.2rem)/.98 var(--f-h2); letter-spacing: .02em; color: var(--kop); }
.as-expo-feature__title a { text-decoration: none; }
.as-expo-feature__title a:hover { color: var(--roze-diep); }
.as-expo-feature__when { margin: 0 0 .3rem; font-size: 1.2rem; font-weight: 500; color: var(--kop); }
.as-expo-feature__where { display: flex; align-items: center; gap: .5rem; margin: 0 0 1.8rem; color: var(--taupe-diep); }
.as-expo-feature__where .as-icon { width: 20px; height: 20px; flex-shrink: 0; }
.as-expo-feature__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Ansichtkaarten */
.as-postcards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(28px, 3vw, 48px);
	padding: 12px 6px 28px;
}
.as-postcard {
	transform: rotate(var(--r));
	transition: transform .6s var(--ease);
	animation: as-card-drop .9s var(--ease) both;
	animation-delay: calc(var(--i) * .08s);
}
@keyframes as-card-drop { from { opacity: 0; transform: translateY(30px) rotate(calc(var(--r) * 3)); } }
.as-postcard:hover, .as-postcard:focus-within { transform: rotate(0deg) translateY(-8px) scale(1.02); }
.as-postcard__link {
	position: relative;
	display: block;
	padding: 12px 12px 18px;
	border-radius: 3px;
	background: #FCFAF7;
	color: var(--kop);
	text-decoration: none;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 34px -22px rgba(59, 52, 45, .55), 0 2px 6px -2px rgba(59, 52, 45, .2);
	transition: box-shadow .6s var(--ease);
}
.as-postcard:hover .as-postcard__link { box-shadow: 0 30px 50px -26px rgba(59, 52, 45, .6), 0 2px 6px -2px rgba(59, 52, 45, .2); }
.as-postcard__photo { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--linnen); }
.as-postcard__photo img, .as-postcard__photo .as-ph { width: 100%; height: 100%; object-fit: cover; }
.as-postcard__text { display: block; padding: 1rem .5rem 0; }
.as-postcard__status { display: block; margin-bottom: .2rem; font: 700 1.3rem/1 var(--f-h2); color: var(--taupe-diep); }
.is-komend .as-postcard__status { color: #4E7D5C; }
.as-postcard__title { display: block; margin-bottom: .3rem; font-weight: 500; font-size: 1.12rem; line-height: 1.3; }
.as-postcard__meta { display: block; font-size: .95rem; color: var(--taupe-diep); }

/* Poststempel over de hoek van de foto */
.as-postmark {
	position: absolute;
	top: 22px;
	right: -10px;
	width: 132px;
	height: auto;
	overflow: visible;
	transform: rotate(-12deg);
	pointer-events: none;
	color: var(--kop);
	opacity: .78;
	mix-blend-mode: multiply;
}
.as-postmark circle, .as-postmark__waves { fill: none; stroke: currentColor; stroke-width: 1.6; }
.as-postmark text { font: 700 11px/1 var(--f-h2); letter-spacing: .14em; fill: currentColor; }
.as-postmark text.as-postmark__date { font: 400 12px/1 var(--f-h1); letter-spacing: .06em; }

.as-postcard.is-geweest .as-postmark { opacity: .45; }
.as-postcard.is-geweest .as-postcard__photo img { filter: grayscale(.6) brightness(1.05); }
.as-postcard__past {
	position: absolute;
	left: 50%;
	top: 34%;
	padding: .2rem .9rem .1rem;
	border: 2px solid var(--roze-diep);
	border-radius: 4px;
	font: 700 1.9rem/1 var(--f-h2);
	letter-spacing: .12em;
	color: var(--roze-diep);
	transform: translate(-50%, -50%) rotate(-14deg);
	opacity: .7;
	mix-blend-mode: multiply;
}

.as-expo__all { margin-top: clamp(24px, 3vw, 40px); }

@media (max-width: 899px) {
	.as-expo__head { grid-template-columns: minmax(0, 1fr); }
	.as-expo-feature { grid-template-columns: minmax(0, 1fr); }
	.as-expo-feature__media { min-height: 0; aspect-ratio: 4 / 3; }
	.as-postcards { grid-auto-flow: column; grid-auto-columns: 78vw; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; padding: 16px var(--gutter) 32px; margin-inline: calc(var(--gutter) * -1); scrollbar-width: none; }
	.as-postcards::-webkit-scrollbar { display: none; }
	.as-postcard { scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
	.as-postcard { animation: none; }
}