/* =========================================================
   SK Subpagina Hero — "Het Programmablad"
   Standaardwaarden komen uit de sitebrede designtokens
   (--sint-deep, --messing, ...). Wijzig je die tokens, dan
   veranderen alle hero's mee. Het Stijl-tabblad overschrijft
   per pagina.
   ========================================================= */

.sk-hero {
	--sk-theme: var(--sint-deep, #1E060B);
	--sk-line-c: var(--sk-line, var(--messing, #B8925A));
	--sk-orn-c: var(--sk-ornament, var(--messing-licht, #D4B47F));
	--sk-bg-c: var(--sk-bg, var(--sk-theme));
	--sk-creme: var(--creme, #ECE4D3);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--sk-bg-c);
	color: var(--sk-creme);
	font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sk-hero--piet  { --sk-theme: var(--accent-piet, #0C1724); }
.sk-hero--kerst { --sk-theme: var(--accent-kerst, #142610); }

.sk-hero--glow {
	background:
		radial-gradient(ellipse 60% 70% at 74% 45%, rgba(184,146,90,.13), transparent 70%),
		var(--sk-bg-c);
}
.sk-hero--glow.sk-hero--flip {
	background:
		radial-gradient(ellipse 60% 70% at 26% 45%, rgba(184,146,90,.13), transparent 70%),
		var(--sk-bg-c);
}

.sk-hero__wrap {
	padding: clamp(28px, 4vw, 48px) clamp(20px, 5vw, 72px) 0;
}

.sk-hero__inner {
	max-width: 1280px;
	min-height: min(78vh, 720px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: end;
}
.sk-hero--flip .sk-hero__text { order: 2; }

/* ---------- Tekstkolom ---------- */
.sk-hero__text {
	align-self: center;
	padding-bottom: clamp(40px, 6vw, 88px);
}

.sk-hero__crumbs {
	font-size: .78rem;
	font-weight: 500;
	letter-spacing: .08em;
	color: rgba(236,228,211,.6);
	margin: 0 0 clamp(28px, 4vw, 52px);
}
.sk-hero__crumbs a {
	color: rgba(236,228,211,.78);
	text-decoration: none;
	border-bottom: 1px solid rgba(184,146,90,.4);
}
.sk-hero__crumbs a:hover { color: var(--sk-orn-c); }
.sk-hero__crumbs .sk-hero__sep,
.sk-hero__crumbs .separator { margin: 0 .6em; color: var(--sk-line-c); }

.sk-hero__act {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 22px;
	color: var(--sk-orn-c);
}
.sk-hero__nr {
	position: relative;
	flex: none;
	display: grid;
	place-items: center;
	width: 58px;
	height: 58px;
	font-family: "Cinzel", Georgia, serif;
	font-weight: 500;
	font-size: 1.05rem;
	letter-spacing: .06em;
}
.sk-hero__nr::before,
.sk-hero__nr::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--sk-line-c);
	transform: rotate(45deg);
}
.sk-hero__nr::after { inset: 6px; opacity: .45; }
.sk-hero__label {
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
}
.sk-hero__rule {
	flex: 1;
	max-width: 140px;
	height: 5px;
	border-top: 1px solid var(--sk-line-c);
	border-bottom: 1px solid var(--sk-line-c);
	opacity: .8;
}

.sk-hero .sk-hero__title {
	margin: 0 0 26px;
	padding: 0;
	font-family: "Cinzel", Georgia, serif;
	font-weight: 500;
	font-size: clamp(2.5rem, 5.4vw, 4.9rem);
	line-height: 1.06;
	letter-spacing: .03em;
	color: var(--sk-creme);
	text-wrap: balance;
}
.sk-hero__title em {
	font-style: normal;
	color: var(--sk-orn-c);
}

.sk-hero__intro {
	max-width: 46ch;
	margin: 0 0 34px;
	font-size: clamp(1rem, 1.25vw, 1.13rem);
	line-height: 1.7;
	color: rgba(236,228,211,.84);
}

.sk-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 30px;
}
.sk-hero__btn {
	--sk-chamfer: 10px;
	display: inline-block;
	padding: 17px 30px;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: .86rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--sk-bg-c);
	background-color: var(--sk-line-c);
	clip-path: polygon(
		var(--sk-chamfer) 0, calc(100% - var(--sk-chamfer)) 0, 100% var(--sk-chamfer),
		100% calc(100% - var(--sk-chamfer)), calc(100% - var(--sk-chamfer)) 100%,
		var(--sk-chamfer) 100%, 0 calc(100% - var(--sk-chamfer)), 0 var(--sk-chamfer)
	);
	transition: background-color .2s, color .2s;
}
.sk-hero__btn:hover,
.sk-hero__btn:focus-visible {
	color: var(--sk-bg-c);
	background-color: var(--sk-orn-c);
}
.sk-hero__btn:focus-visible { outline: 2px solid var(--sk-orn-c); outline-offset: 4px; }

.sk-hero__link {
	font-weight: 600;
	font-size: .94rem;
	color: var(--sk-creme);
	text-decoration: none;
	border-bottom: 1px solid var(--sk-line-c);
	padding-bottom: 3px;
	transition: color .2s;
}
.sk-hero__link:hover { color: var(--sk-orn-c); }

/* ---------- Beeldkolom ---------- */
.sk-hero__visual {
	position: relative;
	z-index: 0;
	justify-self: center;
	width: min(100%, 440px);
	padding-top: 28px;
}

.sk-hero__steps {
	position: absolute;
	z-index: -1;
	left: 50%;
	bottom: 0;
	width: 250%;
	max-width: none;
	height: auto;
	transform: translateX(-50%);
	color: var(--sk-line-c);
	opacity: .3;
	pointer-events: none;
}
.sk-hero__steps path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

.sk-hero__key {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 50%;
	width: 44px;
	height: 40px;
	transform: translateX(-50%);
	color: var(--sk-orn-c);
}

.sk-hero__arch {
	position: relative;
	z-index: 1;
	aspect-ratio: 640 / 880;
	padding: 12px 12px 0;
	background: var(--sk-bg-c);
	border: 1px solid var(--sk-line-c);
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
}
.sk-hero__arch::before {
	content: "";
	position: absolute;
	inset: 5px 5px 0;
	border: 1px solid var(--sk-line-c);
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
	opacity: .42;
	pointer-events: none;
}
.sk-hero__figure {
	position: relative;
	height: 100%;
	margin: 0;
	overflow: hidden;
	border-radius: 999px 999px 0 0;
}
.sk-hero__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(30,6,11,.35), transparent 35%);
	pointer-events: none;
}
.sk-hero .sk-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center center;
}

.sk-hero__plaque {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	margin: 0;
	white-space: nowrap;
	padding: 9px 20px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--sk-orn-c);
	background-color: var(--sk-bg-c);
	border: 3px double var(--sk-line-c);
}

/* ---------- Fries ---------- */
.sk-hero__fries {
	position: relative;
	height: 26px;
	border-top: 1px solid var(--sk-line-c);
	background: var(--sk-bg-c);
}
.sk-hero__fries::before {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 5px;
	border-top: 1px solid var(--sk-line-c);
	opacity: .45;
}
.sk-hero__fries::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 8px;
	background: repeating-linear-gradient(90deg, var(--sk-line-c) 0 1px, transparent 1px 14px);
	opacity: .5;
}

/* ---------- Animatie ---------- */
.sk-hero--anim .sk-hero__steps path {
	stroke-dasharray: 3000;
	stroke-dashoffset: 3000;
	animation: sk-draw 2.4s cubic-bezier(.6,0,.2,1) forwards;
}
.sk-hero--anim .sk-hero__steps path:nth-child(2) { animation-delay: .12s; }
.sk-hero--anim .sk-hero__steps path:nth-child(3) { animation-delay: .24s; }
.sk-hero--anim .sk-hero__steps path:nth-child(4) { animation-delay: .36s; }
.sk-hero--anim .sk-hero__steps path:nth-child(5) { animation-delay: .48s; }
.sk-hero--anim .sk-hero__arch { animation: sk-rise 1.2s .2s cubic-bezier(.2,.7,.2,1) both; }
.sk-hero--anim .sk-hero__img  { animation: sk-settle 2.2s .2s cubic-bezier(.2,.7,.2,1) both; }
.sk-hero--anim .sk-hero__text > * { animation: sk-fade 0.9s cubic-bezier(.2,.7,.2,1) both; }
.sk-hero--anim .sk-hero__text > *:nth-child(2) { animation-delay: .08s; }
.sk-hero--anim .sk-hero__text > *:nth-child(3) { animation-delay: .16s; }
.sk-hero--anim .sk-hero__text > *:nth-child(4) { animation-delay: .24s; }
.sk-hero--anim .sk-hero__text > *:nth-child(5) { animation-delay: .32s; }

@keyframes sk-draw   { to { stroke-dashoffset: 0; } }
@keyframes sk-rise   { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes sk-settle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes sk-fade   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.sk-hero--anim *,
	.sk-hero--anim *::before { animation: none !important; }
	.sk-hero--anim .sk-hero__steps path { stroke-dashoffset: 0; }
}

/* ---------- Tablet & mobiel ---------- */
@media (max-width: 1024px) {
	.sk-hero__inner {
		grid-template-columns: 1fr;
		min-height: 0;
		gap: 8px;
	}
	.sk-hero--flip .sk-hero__text { order: 0; }
	.sk-hero__text { padding-bottom: 20px; }
	.sk-hero__crumbs { margin-bottom: 28px; }
	.sk-hero__visual { width: min(78%, 340px); margin-top: 24px; }
	.sk-hero__steps { width: 200%; }
	.sk-hero__steps path:nth-child(n+4) { display: none; }
}
@media (max-width: 480px) {
	.sk-hero__nr { width: 48px; height: 48px; font-size: .9rem; }
	.sk-hero__visual { width: 86%; }
	.sk-hero__plaque { font-size: .64rem; letter-spacing: .14em; padding: 8px 14px; }
}

/* =========================================================
   SK Subpagina Hero compact — lage hero zonder foto
   voor formulier- en taakpagina's. Hergebruikt de
   onderdelen van de Subpagina Hero (kruimelpad, label,
   titel, fries) zodat beide hero's één familie zijn.
   ========================================================= */

.sk-hc__wrap {
	position: relative;
	z-index: 1;
	padding: clamp(24px, 3vw, 40px) clamp(20px, 5vw, 72px) clamp(28px, 3.4vw, 48px);
}
.sk-hc__inner {
	max-width: 1280px;
	min-height: 0;
	margin: 0 auto;
	display: flex;
	align-items: center;
}
.sk-hc .sk-hc__text {
	align-self: auto;
	max-width: 64ch;
	padding-bottom: 0;
}
.sk-hc .sk-hero__crumbs { margin: 0 0 clamp(16px, 2vw, 26px); }
.sk-hc .sk-hero__act { margin: 0 0 14px; }
.sk-hc .sk-hero__nr { width: 46px; height: 46px; font-size: .9rem; }

.sk-hc .sk-hero__title {
	margin: 0 0 14px;
	font-size: clamp(2rem, 4vw, 3.2rem);
	line-height: 1.1;
}

.sk-hc__instructie {
	max-width: 60ch;
	margin: 0;
	font-size: clamp(1rem, 1.2vw, 1.1rem);
	line-height: 1.65;
	color: rgba(236,228,211,.88);
}

.sk-hc__notitie {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
	font-size: .86rem;
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--sk-orn-c);
}
.sk-hc__ruit {
	flex: none;
	width: 7px;
	height: 7px;
	border: 1px solid currentColor;
	transform: rotate(45deg);
}

.sk-hc__linkrij { margin: 18px 0 0; }

/* Midden uitgelijnd */
.sk-hc--center .sk-hc__inner { justify-content: center; text-align: center; }
.sk-hc--center .sk-hc__text { margin: 0 auto; }
.sk-hc--center .sk-hc__instructie { margin-left: auto; margin-right: auto; }
.sk-hc--center .sk-hero__act,
.sk-hc--center .sk-hc__notitie { justify-content: center; }
.sk-hc--center .sk-hero__act::before {
	content: "";
	flex: 1;
	max-width: 140px;
	height: 5px;
	border-top: 1px solid var(--sk-line-c);
	border-bottom: 1px solid var(--sk-line-c);
	opacity: .8;
}

/* Getrapte lijnen rechts, laag en ingetogen */
.sk-hc__decor {
	position: absolute;
	z-index: 0;
	right: clamp(-60px, -2vw, 0px);
	bottom: 0;
	width: min(46%, 620px);
	height: 100%;
	pointer-events: none;
}
.sk-hc .sk-hc__steps {
	position: absolute;
	left: auto;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	transform: none;
	opacity: .22;
}

/* Hoekornamenten binnen een dun kader-inset */
.sk-hc__hoeken {
	position: absolute;
	z-index: 2;
	inset: clamp(10px, 1.4vw, 18px);
	pointer-events: none;
	color: var(--sk-orn-c);
}
.sk-hc__hoek { position: absolute; width: 34px; height: 34px; }
.sk-hc__hoek--tl { top: 0; left: 0; }
.sk-hc__hoek--tr { top: 0; right: 0; transform: scaleX(-1); }
.sk-hc__hoek--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.sk-hc__hoek--br { bottom: 0; right: 0; transform: scale(-1,-1); }

.sk-hc:has(.sk-hero__fries) .sk-hc__hoeken { bottom: calc(26px + clamp(10px, 1.4vw, 18px)); }

@media (max-width: 1024px) {
	.sk-hc__decor { width: 60%; opacity: .7; }
	.sk-hc .sk-hc__steps path:nth-child(n+4) { display: none; }
}
@media (max-width: 640px) {
	.sk-hc__decor { display: none; }
	.sk-hc__wrap { padding: 40px 30px 36px; }
	.sk-hc__hoek { width: 22px; height: 22px; }
	.sk-hc .sk-hero__nr { width: 40px; height: 40px; font-size: .8rem; }
}