/* =========================================================
   Eventpagina in Apple-stijl (template page-apple)
   ========================================================= */

body.mm-apple {
	--ae-bg: #fbfbfd;
	--ae-ink: #1d1d1f;
	--ae-grey: #6e6e73;
	--ae-line: #d2d2d7;
	--ae-blue: #0071e3;
	--ae-link: #0066cc;
	--ae-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Archivo, Arial, sans-serif;
	background: var(--ae-bg);
	background-image: none;
	color: var(--ae-ink);
	font-family: var(--ae-font);
}

body.mm-apple .mm-masthead,
body.mm-apple .mm-nav { background: var(--ae-bg) !important; }
body.mm-apple .mm-masthead { border-bottom-color: var(--ae-ink); }
body.mm-apple .mm-nav { border-bottom-color: var(--ae-line); }

body.mm-apple .ae-main { padding: 0; }
body.mm-apple .mm-progress { display: none; }

body.mm-apple .wp-block-post-content h2,
body.mm-apple .wp-block-post-content h3 {
	text-transform: none;
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
	letter-spacing: -.02em;
}
body.mm-apple .wp-block-post-content {
	font-family: var(--ae-font);
	font-size: 1.0625rem;
	line-height: 1.5;
}

.ae { font-family: var(--ae-font); }
.ae * { box-sizing: border-box; }

.ae h1, .ae h2, .ae h3 {
	font-family: var(--ae-font);
	letter-spacing: -.02em;
	color: inherit;
	margin: 0;
}

:where(.ae) p { margin: 0; }
.ae a { color: var(--ae-link); text-decoration: none; }
.ae a:hover { text-decoration: underline; }

.ae-wrap {
	max-width: 61.25rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 2.5rem);
}

.ae-wrap--narrow { max-width: 45rem; }

.ae-section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.ae-section--tight { padding-top: clamp(2rem, 4vw, 3rem); }

.ae-eyebrow {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ae-grey);
	margin-bottom: 1rem;
}

.ae h2 {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 600;
	line-height: 1.07;
	max-width: 20ch;
}

.ae-intro {
	font-size: clamp(1.125rem, 2vw, 1.375rem);
	line-height: 1.45;
	color: var(--ae-grey);
	max-width: 44ch;
	margin-top: 1.25rem;
}

/* --- Hero ---------------------------------------------------------- */

.ae-hero {
	text-align: center;
	padding: clamp(4rem, 10vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem);
	position: relative;
	overflow: hidden;
}

.ae-hero::before {
	content: "";
	position: absolute;
	inset: auto 0 -40% 0;
	height: 80%;
	background: radial-gradient(60% 60% at 50% 100%, rgba(191, 90, 242, .12), rgba(10, 132, 255, .06) 45%, transparent 75%);
	pointer-events: none;
}

.ae-hero > * { position: relative; }

.ae-hero .ae-eyebrow { margin-bottom: 1.4rem; }

.ae-hero h1 {
	font-size: clamp(3rem, 9vw, 5.75rem);
	font-weight: 700;
	line-height: .98;
	letter-spacing: -.035em;
	background: linear-gradient(100deg, #0a84ff 0%, #bf5af2 45%, #ff375f 80%, #ff9f0a 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	display: inline-block;
	padding: 0 .1em .08em;
}

.ae-hero__sub {
	font-size: clamp(1.25rem, 2.6vw, 1.75rem);
	font-weight: 500;
	line-height: 1.3;
	max-width: 32ch;
	margin: 1.25rem auto 0;
}

.ae-hero__meta {
	font-size: 1rem;
	color: var(--ae-grey);
	margin-top: .75rem;
}

/* --- Klok ---------------------------------------------------------- */

.mm-countdown { margin: clamp(2.5rem, 6vw, 4rem) auto 0; }

.mm-countdown__grid {
	display: flex;
	justify-content: center;
	gap: clamp(.75rem, 4vw, 2.75rem);
}

.mm-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
}

.mm-countdown__num {
	font-size: clamp(3.25rem, 12vw, 8.5rem);
	font-weight: 200;
	line-height: 1;
	letter-spacing: -.04em;
	font-variant-numeric: tabular-nums;
	color: var(--ae-ink);
	min-width: 2ch;
	text-align: center;
}

.mm-countdown__label {
	margin-top: .6rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ae-grey);
}

.mm-countdown__state {
	margin-top: 1.5rem;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
	font-weight: 600;
	letter-spacing: -.02em;
}

.mm-countdown.is-live .mm-countdown__grid,
.mm-countdown.is-over .mm-countdown__grid { display: none; }

.mm-countdown.is-live .mm-countdown__state { color: #ff3b30; }

/* --- Knoppen --------------------------------------------------------- */

.ae-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1rem 1.75rem;
	margin-top: clamp(2rem, 5vw, 3rem);
}

.ae-btn {
	display: inline-block;
	background: var(--ae-blue);
	color: #fff !important;
	font-size: 1rem;
	font-weight: 500;
	padding: .8rem 1.5rem;
	border-radius: 980px;
	text-decoration: none !important;
	transition: background .2s ease;
}

.ae-btn:hover { background: #0077ed; }

.ae-link { font-size: 1rem; font-weight: 500; }
.ae-link::after { content: " \203A"; }

/* --- Donker productblok ----------------------------------------------- */

.ae-dark {
	background: #000;
	color: #f5f5f7;
}

.ae-dark .ae-eyebrow { color: #86868b; }
.ae-dark .ae-intro { color: #a1a1a6; }
.ae-dark a { color: #2997ff; }

.ae-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: clamp(2rem, 5vw, 3.5rem);
}

.ae-card {
	background: #1d1d1f;
	border-radius: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2.25rem);
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.ae-card--wide { grid-column: span 2; }

.ae-card__tag {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #2997ff;
}

.ae-card__tag--maybe { color: #ff9f0a; }

.ae-card h3 {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	font-weight: 600;
	line-height: 1.15;
}

.ae-card p {
	color: #a1a1a6;
	font-size: .975rem;
	line-height: 1.5;
}

.ae-card__spec {
	margin-top: auto;
	padding-top: .75rem;
	font-size: .8125rem;
	color: #86868b;
	border-top: 1px solid #333336;
}

/* --- Tijdlijn -------------------------------------------------------- */

.ae-timeline {
	list-style: none;
	padding: 0;
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	border-top: 1px solid var(--ae-line);
}

.ae-timeline li {
	display: grid;
	grid-template-columns: 11rem 1fr;
	gap: 1.5rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--ae-line);
	align-items: baseline;
}

.ae-timeline time,
.ae-timeline .ae-when {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-size: 1.0625rem;
}

.ae-timeline strong { display: block; font-weight: 600; margin-bottom: .15rem; }
.ae-timeline p { color: var(--ae-grey); font-size: .975rem; }

.ae-timeline li.is-mm .ae-when { color: #d8391a; }

/* --- Lichte kaarten ---------------------------------------------------- */

.ae-tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: clamp(2rem, 5vw, 3rem);
}

.ae-tile {
	background: #f5f5f7;
	border-radius: 1.25rem;
	padding: clamp(1.5rem, 3vw, 2rem);
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.ae-tile h3 { font-size: 1.25rem; font-weight: 600; }
.ae-tile p { color: var(--ae-grey); font-size: .95rem; line-height: 1.5; }
.ae-tile .ae-link { margin-top: auto; padding-top: .5rem; }

/* --- Leeslijst -------------------------------------------------------- */

.ae-reads {
	list-style: none;
	padding: 0;
	margin: clamp(2rem, 5vw, 3rem) 0 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

.ae-reads a {
	display: block;
	background: #fff;
	border: 1px solid var(--ae-line);
	border-radius: 1.25rem;
	padding: 1.5rem;
	color: var(--ae-ink);
	transition: transform .2s ease, box-shadow .2s ease;
}

.ae-reads a:hover {
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .07);
}

.ae-reads span { display: block; }
.ae-reads .ae-reads__tag { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ae-grey); margin-bottom: .5rem; }
.ae-reads .ae-reads__title { font-size: 1.125rem; font-weight: 600; line-height: 1.25; }
.ae-reads .ae-reads__more { color: var(--ae-link); font-weight: 500; margin-top: .75rem; }
.ae-reads .ae-reads__more::after { content: " \203A"; }

/* --- Veelgestelde vragen ---------------------------------------------- */

.ae-faq { margin-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid var(--ae-line); }

.ae-faq details { border-bottom: 1px solid var(--ae-line); }

.ae-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.2rem 0;
	font-size: 1.125rem;
	font-weight: 600;
}

.ae-faq summary::-webkit-details-marker { display: none; }

.ae-faq summary::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--ae-grey);
	flex: 0 0 auto;
	transition: transform .2s ease;
}

.ae-faq details[open] summary::after { transform: rotate(45deg); }

.ae-faq details p {
	padding: 0 0 1.4rem;
	color: #424245;
	max-width: 60ch;
}

/* --- Verantwoording ---------------------------------------------------- */

.ae-note {
	font-size: .8125rem;
	color: var(--ae-grey);
	line-height: 1.5;
	border-top: 1px solid var(--ae-line);
	padding-top: 1.5rem;
	max-width: 70ch;
}

.ae-note p + p { margin-top: .6rem; }

/* --- Responsief -------------------------------------------------------- */

@media (max-width: 899px) {
	.ae-grid, .ae-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 599px) {
	.ae-grid, .ae-tiles, .ae-reads { grid-template-columns: 1fr; }
	.ae-card--wide { grid-column: auto; }
	.ae-timeline li { grid-template-columns: 1fr; gap: .25rem; }
	.mm-countdown__grid { gap: .5rem; }
	.mm-countdown__unit { min-width: 0; flex: 1 1 0; }
}

@media (prefers-reduced-motion: reduce) {
	.ae-reads a, .ae-btn, .ae-faq summary::after { transition: none; }
}