/* Gestel.nu – basis: reset, typografie, knoppen, pills, kaarten, rasters. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--gn-header-h) + 16px); }
body {
	margin: 0;
	background: var(--gn-bg);
	color: var(--gn-text);
	font-family: var(--gn-font-body);
	font-size: var(--gn-size-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "cv11", "ss01";
}
.gn-noscroll, .gn-noscroll body { overflow: hidden; }
img, svg, video, iframe { max-width: 100%; }
img { height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { font-family: var(--gn-font-head); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .5em; font-weight: 800; }
p { margin: 0 0 1em; }
a { color: var(--gn-link); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
button, input, select, textarea { font: inherit; color: inherit; }
mark { background: var(--gn-mark); color: inherit; padding: 0 .1em; border-radius: 3px; }
hr { border: 0; border-top: 1px solid var(--gn-border); margin: 2rem 0; }
:focus-visible { outline: 3px solid var(--gn-focus); outline-offset: 2px; border-radius: 4px; }
.gn-main { display: block; min-height: 60vh; padding-bottom: var(--gn-space-8); }
.gn-main:focus { outline: none; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.gn-skip {
	position: absolute; left: 12px; top: -100px; z-index: 200;
	background: var(--gn-brand); color: var(--gn-on-brand);
	padding: .75rem 1rem; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.gn-skip:focus { top: 12px; }

.gn-wrap {
	width: 100%;
	max-width: calc(var(--gn-wrap) + 2 * var(--gn-gutter));
	margin-inline: auto;
	padding-inline: var(--gn-gutter);
}
.gn-icon { flex: none; display: inline-block; vertical-align: middle; }

/* Logo licht/donker */
.gn-logo { display: inline-flex; align-items: center; flex: none; color: inherit; text-decoration: none; border-radius: 10px; }
.gn-logo__img { display: block; height: 32px; width: auto; }
.gn-logo__img--donker { display: none; }
:root[data-theme="dark"] .gn-logo__img--licht { display: none; }
:root[data-theme="dark"] .gn-logo__img--donker { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .gn-logo__img--licht { display: none; }
	:root:not([data-theme="light"]) .gn-logo__img--donker { display: block; }
}

/* Knoppen */
.gn-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	min-height: 44px; padding: .625rem 1.125rem;
	border: 2px solid transparent; border-radius: 999px;
	font-size: .9375rem; font-weight: 700; line-height: 1.2;
	text-decoration: none; cursor: pointer; white-space: nowrap;
	transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
.gn-btn:active { transform: translateY(1px); }
.gn-btn--friend { background: var(--gn-cta-bg); color: var(--gn-cta-text); }
.gn-btn--friend:hover { filter: brightness(1.12); }
.gn-btn--friend .gn-icon { color: var(--gn-cta-icon); fill: currentColor; }
.gn-btn--ghost { background: transparent; color: var(--gn-text); border-color: var(--gn-border); }
.gn-btn--ghost:hover { border-color: var(--gn-link); color: var(--gn-link); }
.gn-btn--block { width: 100%; }
.gn-iconbtn {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px; padding: 0;
	border: 0; border-radius: 999px; background: transparent; color: var(--gn-text); cursor: pointer;
	transition: background-color .15s;
}
.gn-iconbtn:hover { background: var(--gn-surface-2); }

/* Thema-schakelaar: maan in licht, zon in donker */
.gn-theme-toggle .gn-icon--sun { display: none; }
:root[data-theme="dark"] .gn-theme-toggle .gn-icon--sun { display: inline-block; }
:root[data-theme="dark"] .gn-theme-toggle .gn-icon--moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .gn-theme-toggle .gn-icon--sun { display: inline-block; }
	:root:not([data-theme="light"]) .gn-theme-toggle .gn-icon--moon { display: none; }
}

/* Pills */
.gn-pill {
	display: inline-block; align-self: flex-start;
	padding: .35rem .6rem .3rem;
	border-radius: 999px;
	background: var(--gn-pill, var(--gn-accent));
	color: var(--gn-pill-text, var(--gn-on-accent));
	font-size: .6875rem; font-weight: 800; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
	text-decoration: none;
}
a.gn-pill:hover { filter: brightness(1.08); }

/* Placeholder zonder afbeelding (zelfde ratio, geen CLS) */
.gn-ph {
	display: block; width: 100%; height: 100%;
	background:
		radial-gradient(circle at 78% 72%, rgba(0, 173, 239, .45) 0 7%, transparent 7.5%),
		linear-gradient(135deg, var(--gn-brand) 0%, #0b6a86 100%);
}

/* Sectiekop */
.gn-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.25rem; }
.gn-section-head__title { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: 1.375rem; }
.gn-section-head__title::before { content: ""; width: 6px; height: 1.1em; border-radius: 3px; background: var(--gn-accent); }
.gn-section-head__more { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 700; color: var(--gn-link); text-decoration: none; }
.gn-section-head__more:hover { text-decoration: underline; }

/* Rasters */
.gn-grid { display: grid; gap: 1.5rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) {
	.gn-grid { gap: 2rem 1.5rem; }
}
@media (min-width: 1024px) {
	.gn-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.gn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Kaarten: één link per kaart, de ::after maakt de hele kaart klikbaar */
.gn-card { position: relative; display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.gn-card__media {
	position: relative; overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--gn-radius);
	background: var(--gn-surface-2);
}
.gn-card__media img, .gn-card__media .gn-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.gn-card:hover .gn-card__media img { transform: scale(1.035); }
.gn-card__media .gn-pill { position: absolute; left: 10px; top: 10px; pointer-events: none; }
.gn-card__body { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.gn-card__title { margin: 0; font-size: 1rem; line-height: 1.3; font-weight: 750; letter-spacing: -.01em; overflow-wrap: break-word; }
.gn-card__link { color: inherit; text-decoration: none; }
.gn-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--gn-radius); }
.gn-card__link:focus-visible { outline: none; }
.gn-card__link:focus-visible::after { outline: 3px solid var(--gn-focus); outline-offset: 4px; }
.gn-card:hover .gn-card__title { color: var(--gn-link); }
.gn-card__meta { margin: 0; font-size: .8125rem; line-height: 1.4; color: var(--gn-muted); }
.gn-card__excerpt { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--gn-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (min-width: 600px) {
	.gn-card__title { font-size: 1.125rem; }
}

/* Grote kaart met verloop-overlay */
.gn-card--hero {
	isolation: isolate; overflow: hidden;
	justify-content: flex-end; gap: .5rem;
	aspect-ratio: 4 / 3;
	padding: 1rem;
	border-radius: var(--gn-radius);
	background: var(--gn-brand-deep);
	color: #fff;
}
.gn-card--hero .gn-card__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; border-radius: 0; }
.gn-card--hero .gn-card__media::after { content: ""; position: absolute; inset: 0; background: var(--gn-grad); }
.gn-card--hero .gn-card__overlay { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
.gn-card--hero .gn-card__title { font-size: 1.125rem; line-height: 1.22; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.gn-card--hero:hover .gn-card__title { color: #fff; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .15em; }
.gn-card--hero .gn-card__meta { color: rgba(255, 255, 255, .82); }
@media (min-width: 600px) {
	.gn-card--hero { padding: 1.25rem; }
	.gn-card--hero .gn-card__title { font-size: 1.375rem; }
}

/* Lijstkaart */
.gn-card--list { flex-direction: row; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--gn-border); }
.gn-card--list .gn-card__media { flex: 0 0 116px; border-radius: var(--gn-radius-sm); }
.gn-card--list .gn-card__link::after { border-radius: 0; }
.gn-card--list .gn-card__excerpt { display: none; }
.gn-card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; margin: 0; font-size: .75rem; line-height: 1.3; color: var(--gn-muted); }
.gn-card__cat { color: var(--gn-link); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: .6875rem; }
@media (min-width: 600px) {
	.gn-card--list { gap: 1.25rem; padding: 1.25rem 0; }
	.gn-card--list .gn-card__media { flex-basis: 240px; }
	.gn-card--list .gn-card__title { font-size: 1.25rem; }
	.gn-card--list .gn-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; }
}

/* Zoekformulier */
.gn-searchform { display: flex; gap: .5rem; width: 100%; }
.gn-searchform__input {
	flex: 1; min-width: 0; min-height: 48px;
	padding: .625rem 1rem;
	border: 2px solid var(--gn-border); border-radius: 999px;
	background: var(--gn-surface); color: var(--gn-text); font-size: 1rem;
}
.gn-searchform__input::placeholder { color: var(--gn-muted); }
.gn-searchform__input:focus { outline: none; border-color: var(--gn-link); }
.gn-searchform__btn {
	display: inline-flex; align-items: center; gap: .4rem;
	min-height: 48px; padding: 0 1.125rem;
	border: 0; border-radius: 999px;
	background: var(--gn-brand); color: var(--gn-on-brand); font-weight: 700; font-size: .9375rem; cursor: pointer;
}
.gn-searchform__btn:hover { filter: brightness(1.12); }
@media (max-width: 420px) {
	.gn-searchform__btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.gn-searchform__btn { padding: 0 .9rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}