/*
 * Art and Soul: componentbibliotheek
 * Herbruikbare bouwstenen (prefix .as-) uit Figma. Templates combineren deze;
 * pagina-specifieke compositie staat in templates.css.
 *
 * Inhoud: icoon, link, knop, tag, kaart, grid, tentoonstellingsrij, lijstrij,
 * paginakop, hero, tweekoloms body + zijkolom, locatie + kaart, partners,
 * formulier, breadcrumb, sectiekop, sliderpijl, media.
 */

/* =====================================================================
   Merkdriehoek als icoon (icon-arrow.svg, via mask zodat kleur = currentColor)
   Figma-link/knop: glyph 11.78×10.17 gedraaid -117.36° in een 14.44×15.13 box.
   ===================================================================== */

.as-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 14.44px;
	height: 15.13px;
}

.as-arrow::before,
.as-link::before,
.as-button::before {
	content: "";
	display: block;
	flex: none;
	width: 11.78px;
	height: 10.17px;
	background: currentColor;
	-webkit-mask: url("../img/icon-arrow.svg") center / contain no-repeat;
	mask: url("../img/icon-arrow.svg") center / contain no-repeat;
	transform: rotate(-117.36deg);
}

/* =====================================================================
   Link (Figma 6:1400): driehoek + tekst 18, gap 8
   ===================================================================== */

.as-link {
	display: inline-flex;
	align-items: flex-start; /* glyph uitgelijnd op de eerste regel, ook bij omloop */
	gap: var(--as-space-2);
	color: var(--as-fg);
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
	font-weight: var(--as-weight-regular);
	text-decoration: none;
	transition: color var(--as-transition);
}

.as-link::before {
	/* centreert de gedraaide glyph (10.17 hoog) op de eerste tekstregel */
	margin: calc((1lh - 10.17px) / 2) 1.3px 0;
}

@supports not (margin: 1lh) {
	.as-link {
		align-items: center;
	}

	.as-link::before {
		margin: 2.5px 1.3px;
	}
}

.as-link:hover,
.as-link:focus {
	color: var(--as-fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.as-link--bold {
	font-weight: var(--as-weight-bold);
	line-height: var(--as-text-body-bold-line);
}

.as-link--accent {
	color: var(--as-accent);
}

.as-link--accent:hover,
.as-link--accent:focus {
	color: var(--as-fg);
}

.as-link--on-dark {
	color: var(--as-on-dark);
}

.as-link--on-dark:hover,
.as-link--on-dark:focus {
	color: var(--as-on-dark-accent);
}

/* =====================================================================
   Knop (Figma 69:2183): paars, radius 20, padding 10, breedte 146,
   driehoek + "Lees meer" 18 in crème (op roze vlak: roze tekst)
   ===================================================================== */

.as-button,
a.as-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: var(--as-button-w);
	padding: 10px;
	background: var(--as-fg);
	color: var(--as-on-dark);
	border: 0;
	border-radius: var(--as-radius);
	font-family: var(--as-font);
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
	font-weight: var(--as-weight-regular);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--as-transition), color var(--as-transition);
}

.as-button::before {
	margin: 2.5px 1.3px;
}

.as-button:hover,
.as-button:focus,
a.as-button:hover,
a.as-button:focus {
	background: var(--as-accent);
	color: var(--as-fg);
	text-decoration: none;
}

.as-button--on-accent,
a.as-button--on-accent {
	color: var(--as-on-dark-accent);
}

.as-button--on-accent:hover,
.as-button--on-accent:focus,
a.as-button--on-accent:hover,
a.as-button--on-accent:focus {
	background: var(--as-highlight);
	color: var(--as-fg);
}

.as-button--accent,
a.as-button--accent {
	background: var(--as-accent);
	color: var(--as-fg);
}

.as-button--accent:hover,
.as-button--accent:focus,
a.as-button--accent:hover,
a.as-button--accent:focus {
	background: var(--as-fg);
	color: var(--as-on-dark);
}

.as-button--plain::before {
	display: none;
}

/* =====================================================================
   Tag / chip (Figma 69:2360): lime of roze, radius 20, padding 8/16, 18 bold
   ===================================================================== */

.as-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--as-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-tags > li {
	margin: 0;
}

.as-tag,
a.as-tag {
	display: inline-flex;
	align-items: center;
	padding: var(--as-space-2) var(--as-space-4);
	background: var(--as-highlight);
	color: var(--as-fg);
	border-radius: var(--as-radius);
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-bold-line);
	font-weight: var(--as-weight-bold);
	text-decoration: none;
	white-space: nowrap;
}

.as-tag--accent,
a.as-tag--accent,
.as-tags > li:nth-child(even) .as-tag {
	background: var(--as-accent);
}

a.as-tag:hover,
a.as-tag:focus {
	background: var(--as-fg);
	color: var(--as-on-dark);
}

/* Gestapelde tags (Figma 69:2359, archiefkaart): volle breedte, geen gap,
   links uitgelijnd, afwisselend lime/roze */
.as-tags--stacked {
	flex-direction: column;
	gap: 0;
}

.as-tags--stacked .as-tag {
	display: flex;
	width: 100%;
	white-space: normal;
}

/* =====================================================================
   Media: afbeelding met radius 20 en placeholdergrijs
   ===================================================================== */

.as-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--as-color-image-placeholder);
	border-radius: var(--as-radius);
}

.as-media > img,
.as-media > picture > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.as-media--bg {
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* =====================================================================
   Kaart (Figma 69:1177): afbeelding 442×240, titel 32/36, metaregel 18 of tags
   Home-variant (69:711): eyebrow 24 + subtitel 18 bold, afbeelding 338×169,
   link eronder met padding 10.
   ===================================================================== */

.as-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--as-space-3);
	color: var(--as-fg);
}

.as-card__media {
	aspect-ratio: 442 / 240;
	width: 100%;
}

.as-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-2);
}

.as-card__title {
	margin: 0;
	color: var(--as-fg);
	font-size: var(--as-text-h3-size);
	line-height: var(--as-text-h3-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0;
	text-transform: none;
}

.as-card__title a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.as-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.as-card:hover .as-card__title a,
.as-card:focus-within .as-card__title a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.as-card__meta {
	margin: 0;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
	font-weight: var(--as-weight-regular);
}

/* Figma 69:2357: 16px tussen titel en tags (body-gap 8 + 8) */
.as-card__body > .as-tags {
	margin-top: var(--as-space-2);
}

/* Home-variant */
.as-card--home {
	gap: var(--as-space-4);
}

.as-card--home .as-card__head {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-1);
}

.as-card__eyebrow {
	margin: 0;
	color: var(--as-accent);
	font-size: var(--as-text-label-size);
	line-height: var(--as-text-label-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-label-tracking);
	text-transform: uppercase;
}

.as-card__subtitle {
	margin: 0;
	color: var(--as-fg);
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-bold-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0;
	text-transform: none;
}

.as-card--home .as-card__media {
	aspect-ratio: 2 / 1;
}

.as-card__action {
	padding: 10px;
}

.as-card--home .as-card__media + .as-card__action {
	margin-top: calc(-1 * var(--as-space-4));
}

/* =====================================================================
   Grid: 3 kolommen (442px), gap 29/40
   ===================================================================== */

.as-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--as-grid-gap-y) var(--as-grid-gap-x);
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-grid > li {
	margin: 0;
}

.as-grid--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.as-grid--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--as-grid-gap-y) var(--as-space-6);
}

/* =====================================================================
   Tentoonstellingsrij (Figma 69:2173 / 69:2185)
   afbeelding 441×266 links; rechts (915px): meta (16 bold uppercase roze +
   locatie 18), titel 56/61.2, datum 24 uppercase, uitsnede 18, knop rechtsonder.
   Hover/focus: roze vlak over de hele rij, label in paars, knop met roze tekst.
   De afbeelding vult de rijhoogte (cover) zodat het roze vlak altijd strak om
   de afbeelding zit, ook als de tekstkolom hoger is dan 266.
   ===================================================================== */

.as-rows {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-9); /* Figma 69:2171: 80px tussen rijen */
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-rows > li {
	margin: 0;
}

.as-row {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--as-gutter);
	color: var(--as-fg);
	border-radius: var(--as-radius);
	transition: background var(--as-transition);
}

.as-row__media {
	flex: none;
	width: var(--as-row-image-w);
	aspect-ratio: 441 / 266; /* minimale hoogte 266; rekt mee met de tekstkolom */
	align-self: stretch;
}

.as-row__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--as-space-4);
	min-width: 0;
	padding-top: var(--as-space-4);
}

.as-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--as-space-2) var(--as-space-6);
	margin: 0;
}

/* Figma: alle tekst paars, label roze. Op verzoek van de klant (feedback 16-10)
   meer kleur in de rij: label als lime tag, periode in roze. */
.as-row__kicker {
	margin: 0;
	padding: 0 var(--as-space-2);
	background: var(--as-highlight);
	color: var(--as-fg);
	border-radius: var(--as-radius-small);
	font-size: var(--as-text-nav-size);
	line-height: var(--as-text-body-bold-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0;
	text-transform: uppercase;
}

.as-row__location {
	margin: 0;
	overflow: hidden;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
	font-weight: var(--as-weight-regular);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.as-row__heading {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-2);
}

.as-row__title {
	margin: 0;
	color: var(--as-fg);
	font-size: var(--as-text-h2-size);
	line-height: calc(var(--as-text-h2-size) * 1.093); /* 61.2px bij 56px */
	font-weight: var(--as-weight-bold);
	letter-spacing: 0;
	text-transform: none;
}

.as-row__title a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.as-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--as-radius);
}

.as-row__date {
	margin: 0;
	color: var(--as-accent);
	font-size: var(--as-text-label-size);
	line-height: var(--as-text-label-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-label-tracking);
	text-transform: uppercase;
}

.as-row__excerpt {
	margin: 0;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
}

.as-row__excerpt p {
	margin: 0;
}

.as-row__action {
	display: flex;
	justify-content: flex-end;
	margin-top: auto;
	padding-top: var(--as-space-4);
	position: relative;
	z-index: 1; /* boven de uitgerekte titel-link */
}

/* Hover/focus-state (Figma 69:2185): roze vlak, label paars, knop roze tekst */
.as-row:hover,
.as-row:focus-within,
.as-list-row:hover,
.as-list-row:focus-within {
	background: var(--as-accent);
}

.as-row:hover .as-row__date,
.as-row:focus-within .as-row__date,
.as-list-row:hover .as-list-row__kicker,
.as-list-row:focus-within .as-list-row__kicker {
	color: var(--as-fg);
}

.as-row:hover .as-button,
.as-row:focus-within .as-button,
.as-list-row:hover .as-button,
.as-list-row:focus-within .as-button {
	color: var(--as-on-dark-accent);
}

.as-row .as-button:hover,
.as-row .as-button:focus,
.as-list-row .as-button:hover,
.as-list-row .as-button:focus {
	background: var(--as-highlight);
	color: var(--as-fg);
}

/* =====================================================================
   Lijstrij Online bij (Figma 69:921): afbeelding 441×221, label 24 regular
   uppercase roze, titel 56/56, optionele regel 18, knop rechts.
   Hover/focus: roze vlak (zie hierboven); afbeelding vult de rijhoogte.
   ===================================================================== */

.as-list-rows {
	display: flex;
	flex-direction: column;
	gap: 102px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-list-rows > li {
	margin: 0;
}

.as-list-row {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--as-gutter);
	color: var(--as-fg);
	border-radius: var(--as-radius);
	transition: background var(--as-transition);
}

.as-list-row__media {
	flex: none;
	width: var(--as-row-image-w);
	aspect-ratio: 2 / 1; /* minimale hoogte 221; rekt mee met de tekstkolom */
	align-self: stretch;
}

.as-list-row__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--as-space-2);
	align-self: stretch;
	min-width: 0;
	padding-top: var(--as-space-4);
}

.as-list-row__kicker {
	margin: 0;
	color: var(--as-accent);
	font-size: var(--as-text-label-size);
	line-height: var(--as-text-label-line);
	font-weight: var(--as-weight-regular);
	letter-spacing: var(--as-text-label-tracking);
	text-transform: uppercase;
}

.as-list-row__title {
	margin: 0;
	color: var(--as-fg);
	font-size: var(--as-text-h2-size);
	line-height: var(--as-text-h2-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0;
	text-transform: none;
}

.as-list-row__title a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

.as-list-row__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--as-radius);
}

.as-list-row__excerpt {
	margin: 0;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
}

.as-list-row__excerpt p {
	margin: 0;
}

.as-list-row__action {
	display: flex;
	justify-content: flex-end;
	margin-top: auto;
	padding-top: var(--as-space-4);
	position: relative;
	z-index: 1;
}

/* =====================================================================
   Paginakop: H1 88/64 roze + intro 18, padding 80/28 (listingpagina's)
   Single-variant (Figma 69:1409): eyebrow 24 bold uppercase, titel 88/88 paars,
   datum 32/36; padding 80/28.
   ===================================================================== */

.as-page-head {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-4);
	width: 100%;
	max-width: var(--as-container);
	margin: 0 auto;
	padding: var(--as-section-y) var(--as-gutter);
	color: var(--as-fg);
}

.as-page-head__eyebrow {
	margin: 0;
	color: var(--as-fg);
	font-size: var(--as-text-label-size);
	line-height: var(--as-text-label-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-label-tracking);
	text-transform: uppercase;
}

.as-page-head__title {
	margin: 0;
	color: var(--as-accent);
	font-size: var(--as-text-display-size);
	line-height: var(--as-text-display-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-display-tracking);
	text-transform: none;
	overflow-wrap: anywhere;
}

.as-page-head__intro {
	margin-top: calc(36px - var(--as-space-4)); /* Figma 69:2198: 36px tussen titel en intro */
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
}

.as-page-head__intro p {
	margin: 0 0 var(--as-space-4);
	font-size: inherit;
	line-height: inherit;
}

.as-page-head__intro > :last-child {
	margin-bottom: 0;
}

.as-page-head__date {
	margin: 0;
	color: var(--as-fg);
	font-size: var(--as-text-h3-size);
	line-height: var(--as-text-h3-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: 0;
	text-transform: none;
}

.as-page-head--single .as-page-head__title {
	color: var(--as-fg);
	line-height: 1;
}

.as-page-head--dark .as-page-head__title {
	color: var(--as-fg);
}

/* =====================================================================
   Hero single (Figma 69:1413): afbeelding volle breedte 634px radius 20,
   bijschrift 18 rechts, gap 4. Figma: lime; op verzoek van de klant en
   designer (feedback 16-10) roze, net als de bijschriften in de tekst.
   ===================================================================== */

.as-hero {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-1);
	width: 100%;
	max-width: var(--as-container);
	margin: 0 auto;
	padding: 0 var(--as-gutter);
}

.as-hero__media {
	width: 100%;
	aspect-ratio: 1384 / 634;
}

.as-hero__caption {
	margin: 0;
	color: var(--as-accent);
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
	text-align: right;
}

.as-hero__caption p {
	margin: 0;
}

/* =====================================================================
   Body tweekoloms (Figma 69:1378): content 1061px + zijkolom, gap 80
   Sectiekoppen 56 roze, gap 24 naar tekst; blokken 64 uit elkaar.
   ===================================================================== */

.as-body {
	display: grid;
	grid-template-columns: minmax(0, 1061px) minmax(0, 1fr);
	gap: var(--as-space-9);
	align-items: start;
	width: 100%;
	max-width: var(--as-container);
	margin: 0 auto;
	padding: 0 var(--as-gutter);
}

.as-body--single {
	grid-template-columns: minmax(0, 1fr);
}

.as-body__main {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-8);
	min-width: 0;
}

.as-body__main > * {
	margin: 0;
}

.as-body__main h2,
.as-prose h2 {
	margin: 0 0 var(--as-space-5);
	color: var(--as-accent);
	font-size: var(--as-text-h2-size);
	line-height: var(--as-text-h2-line);
	letter-spacing: var(--as-text-display-tracking);
}

.as-body__main h3,
.as-prose h3 {
	margin: 0 0 var(--as-space-3);
}

.as-body__main h4,
.as-prose h4 {
	margin: 0;
}

.as-body__main h4 + p,
.as-prose h4 + p {
	margin-top: 0;
}

.as-prose > :last-child {
	margin-bottom: 0;
}

.as-body__main figure,
.as-prose figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--as-space-3);
	margin: 0;
}

.as-body__main figcaption,
.as-prose figcaption {
	width: 100%;
	max-width: 621px;
	margin: 0;
	color: var(--as-accent);
	text-align: left;
}

.as-body__aside {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-6);
	min-width: 0;
}

.as-aside-block {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-2);
}

.as-aside-block__label {
	margin: 0;
	color: var(--as-accent);
	font-size: var(--as-text-label-size);
	line-height: var(--as-text-label-line);
	font-weight: var(--as-weight-regular);
	letter-spacing: var(--as-text-label-tracking);
	text-transform: uppercase;
}

.as-aside-block .as-link {
	font-weight: var(--as-weight-bold);
	line-height: var(--as-text-body-bold-line);
	color: var(--as-accent);
}

.as-aside-block .as-link:hover,
.as-aside-block .as-link:focus {
	color: var(--as-fg);
}

/* =====================================================================
   Locatieblok + kaart (Figma 69:1416): tekst 460px 18 bold, gap 45,
   kaart 400px hoog met crème rand
   ===================================================================== */

.as-location {
	display: flex;
	align-items: center;
	gap: 45px;
	width: 100%;
	max-width: var(--as-container);
	margin: 0 auto;
	padding: 0 var(--as-gutter);
	color: var(--as-fg);
}

.as-location__text {
	flex: none;
	width: 460px;
	max-width: 100%;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-bold-line);
	font-weight: var(--as-weight-bold);
}

.as-location__text p {
	margin: 0 0 var(--as-space-4);
	line-height: var(--as-text-body-bold-line);
}

.as-location__text p:last-child {
	margin-bottom: 0;
}

.as-location__text a {
	color: var(--as-fg);
	text-decoration: underline;
}

.as-location__text a:hover,
.as-location__text a:focus {
	color: var(--as-accent);
}

.as-location__map {
	flex: 1 1 0;
	min-width: 0;
	height: 400px;
	overflow: hidden;
	border: 1px solid var(--as-bg);
	border-radius: var(--as-radius);
	background: var(--as-bg);
}

.as-location__map .acf-map,
.as-location__map iframe,
.as-location__map > div {
	width: 100%;
	height: 100%;
	border: 0;
}

/* =====================================================================
   Partners (Figma 69:1426): H2 88/64 paars, intro 18, logo's in 190px vakken,
   bijschrift 18 bold gecentreerd; padding 80/28/24, gap 36
   ===================================================================== */

.as-partners {
	display: flex;
	flex-direction: column;
	gap: 36px;
	width: 100%;
	max-width: var(--as-container);
	margin: 0 auto;
	padding: var(--as-section-y) var(--as-gutter) var(--as-space-5);
	color: var(--as-fg);
}

.as-partners__title {
	margin: 0;
	color: var(--as-fg);
	font-size: var(--as-text-display-size);
	line-height: var(--as-text-display-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-display-tracking);
	text-transform: none;
}

.as-partners__intro {
	margin: 0;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
}

.as-partners__intro p:last-child {
	margin-bottom: 0;
}

.as-partners__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--as-space-7) var(--as-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.as-partners__grid > li {
	margin: 0;
}

.as-partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 190px;
	color: var(--as-fg);
	text-decoration: none;
}

.as-partner__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 190px;
	height: 190px;
	background: transparent;
}

.as-partner__logo img {
	display: block;
	max-width: 160px;
	max-height: 160px;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0;
}

.as-partner__name {
	margin: 0;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-bold-line);
	font-weight: var(--as-weight-bold);
	text-align: center;
}

a.as-partner:hover .as-partner__name,
a.as-partner:focus .as-partner__name {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* =====================================================================
   Formulier (Figma 69:1681): velden onder elkaar, gap 40; label 24 regular
   uppercase + 12 naar veld; velden lime radius 15 padding 16/28; textarea 170;
   radio's 16px; submit paars radius 15 volle breedte.
   Generieke element-stijlen staan in base.css; dit is de compositie.
   ===================================================================== */

.as-form,
.as-form form {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-7);
}

.as-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-3);
}

.as-form label,
.as-form .as-form__label {
	margin: 0;
}

.as-form input[type="text"],
.as-form input[type="email"],
.as-form input[type="url"],
.as-form input[type="tel"],
.as-form input[type="number"],
.as-form input[type="date"],
.as-form input[type="password"],
.as-form input[type="search"],
.as-form select,
.as-form textarea {
	padding: 10px var(--as-gutter);
	min-height: var(--as-field-h);
}

.as-form textarea {
	min-height: 170px;
}

.as-form__choices {
	display: flex;
	flex-direction: column;
	gap: var(--as-space-2);
}

.as-form__choice,
.as-form__choices label {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
	font-weight: var(--as-weight-regular);
	letter-spacing: 0;
	text-transform: none;
}

.as-form input[type="radio"],
.as-form input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	flex: none;
}

.as-form input[type="submit"],
.as-form button[type="submit"] {
	width: 100%;
	max-width: 672px;
	align-self: center;
	padding: var(--as-space-4) var(--as-gutter);
	border-radius: var(--as-radius-field);
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
	text-align: center;
}

.as-form__help {
	margin: 0;
	font-size: var(--as-text-small-size);
	line-height: var(--as-text-small-line);
	color: var(--as-fg);
}

/* =====================================================================
   Kruimelpad (Figma 69:1456): 16/19.2 regular paars, gap 24,
   merkdriehoek (11.78×10.17, -117.23°) als scheiding
   ===================================================================== */

.as-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--as-space-2) var(--as-space-5);
	width: 100%;
	max-width: var(--as-container);
	margin: 0 auto;
	padding: var(--as-space-5) var(--as-gutter) 0;
	font-size: var(--as-text-nav-size);
	line-height: var(--as-text-nav-line);
	font-weight: var(--as-weight-regular);
	color: var(--as-fg);
}

.as-breadcrumb a {
	color: var(--as-fg);
	font-weight: var(--as-weight-regular);
	text-decoration: none;
}

.as-breadcrumb a:hover,
.as-breadcrumb a:focus {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.as-breadcrumb__sep {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 14.44px;
	height: 15.13px;
	color: var(--as-fg);
}

.as-breadcrumb__sep::before {
	content: "";
	display: block;
	width: 11.78px;
	height: 10.17px;
	background: currentColor;
	-webkit-mask: url("../img/icon-arrow.svg") center / contain no-repeat;
	mask: url("../img/icon-arrow.svg") center / contain no-repeat;
	transform: rotate(-117.23deg);
}

.as-breadcrumb [aria-current="page"] {
	color: var(--as-fg);
}

/* =====================================================================
   Sectiekop: H2 56 roze met optionele link rechts
   ===================================================================== */

.as-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--as-space-3) var(--as-space-6);
	margin: 0 0 var(--as-space-7);
}

.as-section-head__title {
	margin: 0;
	color: var(--as-accent);
	font-size: var(--as-text-h2-size);
	line-height: var(--as-text-h2-line);
	font-weight: var(--as-weight-bold);
	letter-spacing: var(--as-text-display-tracking);
	text-transform: none;
}

.as-section-head--dark .as-section-head__title {
	color: var(--as-fg);
}

/* =====================================================================
   Sliderpijl (Figma 69:699/69:701): roze cirkel 40px, paarse chevron
   ===================================================================== */

.as-slider-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--as-slider-arrow);
	height: var(--as-slider-arrow);
	min-width: 0;
	padding: 0;
	background: var(--as-accent);
	color: var(--as-fg);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--as-transition), color var(--as-transition);
}

.as-slider-arrow::before {
	content: "";
	display: block;
	width: var(--as-slider-arrow);
	height: var(--as-slider-arrow);
	background: currentColor;
	-webkit-mask: url("../img/icon-chevron.svg") center / contain no-repeat;
	mask: url("../img/icon-chevron.svg") center / contain no-repeat;
}

.as-slider-arrow--next::before {
	transform: rotate(180deg);
}

.as-slider-arrow:hover,
.as-slider-arrow:focus {
	background: var(--as-fg);
	color: var(--as-on-dark-accent);
}

/* =====================================================================
   Lege staat / melding
   ===================================================================== */

.as-empty {
	padding: var(--as-space-6) var(--as-gutter);
	background: var(--as-highlight);
	border-radius: var(--as-radius);
	font-size: var(--as-text-body-size);
	line-height: var(--as-text-body-line);
}

/* =====================================================================
   Responsive. Koppen, gutter en sectieruimte schalen fluïde via tokens.css;
   hier alleen de structuurwissels. Breekpunten (zie README.md):
   1099 = twee kolommen / zijkolom onder elkaar, 699 = één kolom.
   ===================================================================== */

@media (max-width: 1099px) {
	.as-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.as-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Zijkolom (locatie, tickets, nieuwsbrief) vóór de lange tekst, als rij
	   van blokken; op desktop staat hij rechts naast de tekst. */
	.as-body {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--as-space-7);
	}

	.as-body__aside {
		order: -1;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
		gap: var(--as-space-5) var(--as-space-7);
		padding-bottom: var(--as-space-7);
		border-bottom: 1px solid var(--as-accent);
	}

	.as-body__aside:empty {
		display: none;
	}

	.as-row__media,
	.as-list-row__media {
		width: 40%;
	}

	.as-list-rows {
		gap: var(--as-space-8);
	}

	.as-location {
		flex-direction: column;
		align-items: stretch;
		gap: var(--as-space-6);
	}

	.as-location__text {
		width: auto;
	}

	.as-location__map {
		flex: none; /* in kolomrichting zou flex-basis 0 de hoogte wegnemen */
	}

	.as-partners__grid {
		justify-content: flex-start;
	}
}

@media (max-width: 699px) {
	.as-grid,
	.as-grid--2,
	.as-grid--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.as-row,
	.as-list-row {
		flex-direction: column;
		gap: 0;
	}

	.as-row__media,
	.as-list-row__media {
		width: 100%;
		align-self: stretch;
	}

	.as-row__body,
	.as-list-row__body {
		padding: var(--as-space-4);
	}

	.as-row__date {
		font-size: var(--as-text-body-size);
		line-height: var(--as-text-body-bold-line);
	}

	.as-hero__media {
		aspect-ratio: 4 / 3;
	}

	.as-location__map {
		height: 300px;
	}

	.as-partners__grid {
		gap: var(--as-space-5) var(--as-space-4);
	}

	.as-partner,
	.as-partner__logo {
		width: 140px;
	}

	.as-partner__logo {
		height: 140px;
	}

	.as-partner__logo img {
		max-width: 120px;
		max-height: 120px;
	}
}