/**
 * King-Media: core/group.
 *
 * Secties, kaarten, rijen en hun varianten (km-*). Laadt alleen als er een Groep op de pagina staat,
 * ook in de editor (wp_enqueue_block_style).
 */

/* Tweekoloms split (hero): foto bijsnijden onder het omslagpunt, vullen ernaast */
.wp-block-group.is-style-km-split {
	align-items: center;
}

@container (width < 55rem) {
	.is-style-km-split>.wp-block-image img {
		width: 100%;
		height: auto;
		aspect-ratio: 3/2;
		object-fit: cover;
		object-position: center 30%;
	}
}

@container (width >= 55rem) {
	.is-style-km-split>.wp-block-image {
		align-self: stretch;
	}
	.is-style-km-split>.wp-block-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center 30%;
	}
}

/* Kaarten: één kolom vanaf 640px, knop onderaan */
@media (width <= 640px) {
	.is-layout-grid:has(>.is-style-km-card) {
		grid-template-columns: minmax(0,1fr);
	}
}

:is(.is-style-km-card,.is-style-km-price,.is-style-km-price-featured)>.wp-block-buttons:last-child {
	margin-top: auto;
}

/* Icoontegel */
.wp-block-group.is-style-km-icon-tile {
	display: grid;
	place-items: center;
	flex: none;
	width: 3rem;
	height: 3rem;
}

.wp-block-group.is-style-km-icon-tile .wp-block-icon svg {
	display: block;
	width: 1.5rem;
	height: 1.5rem;
}

/* Prijs-, project- en reviewkaarten: flex-rij, laatste kaart alleen? dan volle breedte of (projecten/reviews) verborgen in de 2-koloms stand */
.wp-block-group.is-style-km-price {
	flex: 1 1 18rem;
}

.wp-block-group.is-style-km-price-featured {
	position: relative;
	flex: 1 1 18rem;
}

.wp-block-group.is-style-km-project {
	overflow: hidden;
	flex: 1 1 18rem;
}

.wp-block-group.is-style-km-review {
	flex: 1 1 18rem;
}

.wp-block-group.is-style-km-review::before {
	content: "";
	display: block;
	width: 6.25rem;
	height: 1.25rem;
	background: var(--wp--preset--color--brand-600);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202l3.1%206.3%206.9%201-5%204.9%201.2%206.8L12%2017.8%205.8%2021l1.2-6.8-5-4.9%206.9-1z'/%3E%3C/svg%3E") left center / 1.25rem 1.25rem repeat-x;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202l3.1%206.3%206.9%201-5%204.9%201.2%206.8L12%2017.8%205.8%2021l1.2-6.8-5-4.9%206.9-1z'/%3E%3C/svg%3E") left center / 1.25rem 1.25rem repeat-x;
}

.is-style-km-review>:last-child {
	margin-top: auto;
}

.is-layout-flex:has(>:is(.is-style-km-project,.is-style-km-review)) {
	container-type: inline-size;
}

@container (37.5rem <= width < 57rem) {
	:is(.is-style-km-project,.is-style-km-review):nth-child(odd):last-child {
		display: none;
	}
}

/* CTA: foto + actierijen */
.wp-block-group.is-style-km-cta {
	overflow: hidden;
}

.wp-block-group.is-style-km-cta > .wp-block-group {
	padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.25rem, 0.5rem + 3vw, 3rem);
}

.is-style-km-cta>.wp-block-cover {
	min-height: 100%;
}

@media (width <= 1023px) {
	.is-style-km-cta>.wp-block-cover {
		order: -1;
		min-height: 0;
		aspect-ratio: 16/9;
	}
}

:is(.is-style-km-action,.is-style-km-action-primary) {
	position: relative;
	transition: background-color .15s ease-out,box-shadow .15s ease-out;
}

:is(.is-style-km-action,.is-style-km-action-primary) a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

:is(.is-style-km-action,.is-style-km-action-primary):focus-within {
	outline: 3px solid var(--wp--preset--color--surface-0);
	outline-offset: 2px;
}

:is(.is-style-km-action,.is-style-km-action-primary) a:focus-visible {
	outline: none;
}

.is-style-km-action:hover {
	background-color: rgb(255 255 255/.18)!important;
}

.is-style-km-action-primary:hover {
	box-shadow: 0 16px 40px rgb(0 0 0/.26)!important;
}

.is-style-km-action .is-style-km-icon-tile {
	background-color: rgb(255 255 255/.16);
	color: var(--wp--preset--color--surface-0);
}

.is-style-km-action-primary>.wp-block-icon {
	color: var(--wp--preset--color--brand-600);
}

/* Icoon-link (rond): de alinea-link ligt over het hele rondje */
.is-style-km-icon-link {
	position: relative;
}

.is-style-km-icon-link>p {
	position: absolute;
	inset: 0;
	margin: 0;
}

.is-style-km-icon-link>p a {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: inherit;
	white-space: nowrap;
	text-indent: 200%;
	color: transparent;
}

/* Hover: kaarten, icoontegels, projectscreenshot */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	/* Klikbare kaarten (met een knop of link) komen iets omhoog. */
	:is(.is-style-km-card, .is-style-km-price, .is-style-km-project):has(.wp-block-button__link) {
		transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
	}
	:is(.is-style-km-card, .is-style-km-price, .is-style-km-project):has(.wp-block-button__link):hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 32px rgb(0 89 255 / 0.12);
		border-color: var(--wp--preset--color--brand-100);
	}

	/* Uitgelichte prijskaart: alleen een iets sterkere schaduw (staat al hoger in de hiërarchie). */
	.is-style-km-price-featured {
		transition: box-shadow 0.2s ease-out;
	}
	.is-style-km-price-featured:hover {
		box-shadow: 0 16px 40px rgb(0 89 255 / 0.2);
	}

	/* Icoontegels worden blauw met een wit icoon. */
	:is(.is-style-km-card, .is-style-km-fact) .is-style-km-icon-tile {
		transition: background-color 0.2s ease-out, color 0.2s ease-out;
	}
	:is(.is-style-km-card, .is-style-km-fact):hover .is-style-km-icon-tile {
		background-color: var(--wp--preset--color--brand-600);
		color: var(--wp--preset--color--surface-0);
	}

	/* Projectscreenshot zoomt licht in. */
	.is-style-km-project .is-style-km-media img {
		transition: transform 0.4s ease-out;
		transform-origin: center bottom; /* groeit omhoog, niet onder het kader uit */
	}
	.is-style-km-project:hover .is-style-km-media img {
		transform: scale(1.03);
	}
}

/* Hover: CTA-acties (rij omhoog, pijl schuift, tegel groeit; hoofdactie met glans) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-group:is(.is-style-km-action, .is-style-km-action-primary) {
		transition: background-color 0.15s ease-out, box-shadow 0.2s ease-out, transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	.wp-block-group:is(.is-style-km-action, .is-style-km-action-primary):hover {
		transform: translateY(-2px);
	}
	:is(.is-style-km-action, .is-style-km-action-primary) > .wp-block-icon:last-child svg,
	:is(.is-style-km-action, .is-style-km-action-primary) .is-style-km-icon-tile {
		transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1);
	}
	:is(.is-style-km-action, .is-style-km-action-primary):hover > .wp-block-icon:last-child svg {
		transform: translateX(0.375rem);
	}
	:is(.is-style-km-action, .is-style-km-action-primary):hover .is-style-km-icon-tile {
		transform: scale(1.08);
	}

	/* Hoofdactie: dezelfde glans als de primaire knoppen. */
	.wp-block-group.is-style-km-action-primary {
		overflow: hidden;
		isolation: isolate;
	}
	.wp-block-group.is-style-km-action-primary::before {
		content: "";
		position: absolute;
		inset: 0 auto 0 -60%;
		z-index: -1;
		width: 50%;
		background: linear-gradient(100deg, transparent, rgb(0 89 255 / 0.12), transparent);
		transform: skewX(-20deg);
		transition: left 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
		pointer-events: none;
	}
	.wp-block-group.is-style-km-action-primary:hover::before {
		left: 120%;
	}
}

/* Hover: icoon-links */
@media (prefers-reduced-motion: no-preference) {
	.is-style-km-icon-link,
	.is-style-km-icon-link svg {
		transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s ease-out;
	}
	@media (hover: hover) {
		.is-style-km-icon-link:hover {
			transform: translateY(-2px);
			box-shadow: 0 8px 20px rgb(0 89 255 / 0.3);
		}
		.is-style-km-icon-link:hover svg {
			transform: scale(1.12);
		}
	}
}

/* Label-link (km-chip): icoon + alinea-link; de link ligt over het hele label */
.wp-block-group.is-style-km-chip {
	position: relative;
}

.is-style-km-chip a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.is-style-km-chip .wp-block-icon svg {
	display: block;
	width: 1rem;
	height: 1rem;
	color: var(--wp--preset--color--brand-600);
}

.is-style-km-chip:has(a:hover) {
	border-color: var(--wp--preset--color--brand-600) !important;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wp-block-group.is-style-km-chip {
		transition: border-color .15s ease-out, transform .2s cubic-bezier(.2,.7,.2,1);
	}
	.wp-block-group.is-style-km-chip:has(a:hover) {
		transform: translateY(-2px);
	}
}

/* Tijdlijnitem (km-milestone): jaartal links, tekst rechts, met lijn en punt ertussen.
   Items staan in een groep zonder blokafstand, zodat de lijn doorloopt. */
.wp-block-group.is-style-km-milestone {
	--km-year: 4.5rem;
	position: relative;
}

.is-style-km-milestone > :first-child {
	flex: 0 0 var(--km-year);
}

.is-style-km-milestone > :last-child {
	padding-left: 1.25rem;
}

.is-style-km-milestone::before,
.is-style-km-milestone::after {
	content: "";
	position: absolute;
	left: calc(var(--km-year) + var(--wp--preset--spacing--60) - 1px);
}

.is-style-km-milestone::before {
	top: .5rem;
	bottom: -.5rem;
	width: 2px;
	background: var(--wp--preset--color--brand-100);
}

.is-style-km-milestone:last-child::before {
	display: none;
}

.is-style-km-milestone::after {
	top: .3rem;
	width: .75rem;
	height: .75rem;
	margin-left: calc(-.375rem + 1px);
	border-radius: 50%;
	background: var(--wp--preset--color--brand-600);
	box-shadow: 0 0 0 4px var(--wp--preset--color--brand-50);
}

/* Projectkaart: inhoud vult de kaart, knop onderaan (ook bij een korte omschrijving) */
.is-style-km-project > .is-style-km-body {
	flex: 1;
}

.is-style-km-body > .wp-block-buttons:last-child {
	margin-top: auto;
}

/* Lopende tekst (km-prose, Groep of Berichtinhoud): juridische pagina's en artikelen. Hier wél marges (flow-lay-out), met extra ruimte boven tussenkoppen. */
.is-style-km-prose > :is(h2, h3) {
	margin-block-start: var(--wp--preset--spacing--80);
}

.is-style-km-prose > :is(h2, h3) + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.is-style-km-prose > h2 {
	font-size: var(--wp--preset--font-size--title-md);
}

.is-style-km-prose :is(ul, ol) {
	padding-left: 1.25rem;
}

.is-style-km-prose li + li {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Artikelkaart (kennisbank): gedraagt zich als een projectkaart (komt omhoog door de knop); de afbeelding zoomt licht in. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.km-post-card .wp-block-post-featured-image img {
		transition: transform 0.4s ease-out;
	}
	.km-post-card:hover .wp-block-post-featured-image img {
		transform: scale(1.03);
	}
}

/* Datum · leestijd */
.km-post-meta > * + *::before {
	content: "·";
	margin-right: var(--wp--preset--spacing--20);
}

/* Artikel: zijbalk (inhoudsopgave + CTA) blijft in beeld tijdens het lezen. */
.km-article-aside {
	position: sticky;
	top: calc(var(--km-header-top, 0px) + 7rem);
	align-self: start;
}

/* Artikelkop: kaart die half over de uitgelichte afbeelding valt (alleen als die er is). */
.km-article-hero + .is-style-km-section .km-article-head {
	position: relative;
	z-index: 1;
	margin-top: calc(-1 * clamp(5rem, 2rem + 8vw, 10rem));
}

@media (width <= 781px) {
	.wp-block-post-featured-image.km-article-hero,
	.wp-block-post-featured-image.km-article-hero img {
		height: 16rem !important; /* lagere afbeelding op mobiel */
	}
}

/* Kolommen gestapeld (mobiel): kolommen en zijbalk opgeheven; volgorde kop, inhoudsopgave, tekst, CTA. */
@media (width <= 781px) {
	.km-article > .wp-block-column,
	.km-article .km-article-aside { /* specifieker dan body .is-layout-flex van core */
		display: contents;
	}
	.km-article > .wp-block-column > *,
	.km-article-aside > * {
		flex-basis: 100%;
	}
	.km-article .km-article-head {
		order: -2;
		flex: 0 0 calc(100% + 2 * var(--wp--custom--gutter)); /* over de volle breedte, als een sheet over de afbeelding */
		padding-right: var(--wp--custom--gutter) !important;
	}
	.km-article-aside > .km-toc {
		order: -1;
	}
	.km-article-aside > :not(.km-toc) {
		order: 1;
	}
}