/*
 * Release 1.7.0 (V3): de bouwstenen van de studiopagina's (/hiz-studio/, /teamkleding-bedrukken/,
 * /jaarclub-truien/, /bedrijfskleding-bedrukken/). Gewone blokken uit patterns/studiopagina-*.php
 * met de klassen hieronder; geladen samen met studio.css (inc/studio.php), ook in de editor.
 *
 * Brandbook: achtergrond Licht zand, Bright Slate voor knoppen en koppen, Link Water als vlak,
 * geen schaduwen of verlopen. Witte vlakken op zand, zoals de FAQ en het formulierpaneel.
 */

/* ----------------------------------------------------------------- kruimelpad */

.hiz-pagina .hiz-kruimelpad {
	margin-block: var(--hiz-space-5, 24px) 0;
}

/* Kruimelpad bovenaan: de hero eronder krijgt geen volle sectie-afstand. */
.hiz-pagina .hiz-kruimelpad + .hiz-studio-pagina-hero {
	padding-block-start: var(--hiz-space-4, 16px);
}

/* ----------------------------------------------------------------------- hero */

.hiz-pagina .hiz-studio-pagina-hero .hiz-intro__beeld {
	margin: 0;
}

.hiz-pagina .hiz-studio-pagina-hero .hiz-intro__beeld img {
	aspect-ratio: 4 / 3;
	object-position: 50% 45%;
}

@media (max-width: 1023px) {
	/* Op mobiel staat de foto onder de knoppen: lager vak, zodat de tekst het scherm houdt. */
	.hiz-pagina .hiz-studio-pagina-hero .hiz-intro__beeld img {
		aspect-ratio: 3 / 2;
	}
}

.hiz-pagina .hiz-studio-pagina-hero .hiz-studio-zeker {
	padding: 0;
}

/* -------------------------------------------------------------------- knoppen */

.hiz-pagina .hiz-studio-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-3, 12px);
}

.hiz-pagina .hiz-studio-knoppen .wp-block-button__link {
	min-height: var(--hiz-touch, 44px);
	display: inline-flex;
	align-items: center;
}

/* WhatsApp: een klein belletje vóór de tekst, in de tekstkleur (geen extra merkkleur). */
.hiz-pagina .hiz-knop-whatsapp .wp-block-button__link::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	margin-inline-end: 0.5em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.4.8 3.2.7.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2c-1.5 0-3-.4-4.3-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8-.2-.1-.4-.1-.6.1l-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.2-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.4.8 3.2.7.5-.1 1.5-.6 1.7-1.2.2-.6.2-1.1.2-1.2-.1-.1-.3-.2-.5-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

.hiz-pagina .hiz-studio-kaarten {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hiz-space-3, 12px);
}

@media (min-width: 640px) {
	.hiz-pagina .hiz-studio-kaarten {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.hiz-pagina .hiz-studio-kaarten {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hiz-pagina .hiz-studio-kaarten:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.hiz-pagina .hiz-studio-kaarten:has(> :nth-child(5):last-child) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.hiz-pagina .hiz-studio-kaart {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--hiz-space-2, 8px);
	min-width: 0;
	margin: 0;
	padding: var(--hiz-space-5, 24px);
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-white, #fff);
}

.hiz-pagina .hiz-studio-kaart > * {
	margin: 0;
}

.hiz-pagina .hiz-studio-kaart__titel {
	font-size: var(--hiz-h3, clamp(19px, 1.8vw, 22px));
	line-height: 1.25;
	letter-spacing: -0.015em;
}

.hiz-pagina .hiz-studio-kaart__nr {
	font-family: var(--hiz-font-code);
	font-weight: 700;
	font-size: var(--hiz-text-sm, 14px);
	letter-spacing: 0.12em;
	color: var(--hiz-color-muted, #545A7E);
}

.hiz-pagina .hiz-studio-kaart__voorbeeld {
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-pagina .hiz-studio-kaart__prijs {
	margin-top: auto;
	padding-top: var(--hiz-space-3, 12px);
	border-top: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
	color: var(--hiz-color-forest, #3B4497);
	font-weight: 700;
}

/* Kaart met link: de hele kaart is klikbaar (één link, de kop), met een pijl erachter. */
.hiz-pagina .hiz-studio-kaart--link .hiz-studio-kaart__titel a {
	color: var(--hiz-color-forest, #3B4497);
	text-decoration: none;
}

.hiz-pagina .hiz-studio-kaart--link .hiz-studio-kaart__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.hiz-pagina .hiz-studio-kaart--link .hiz-studio-kaart__titel::after {
	content: " →";
	color: var(--hiz-color-forest, #3B4497);
}

.hiz-pagina .hiz-studio-kaart--link {
	transition: background-color var(--hiz-motion-fast, 160ms) var(--hiz-ease, ease);
}

.hiz-pagina .hiz-studio-kaart--link:hover {
	background: var(--hiz-color-mint, #D3D9EB);
}

.hiz-pagina .hiz-studio-kaart--link:has(a:focus-visible) {
	outline: 2px solid var(--hiz-color-forest, #3B4497);
	outline-offset: 2px;
}

.hiz-pagina .hiz-studio-kaart--link a:focus-visible {
	outline: none;
}

.hiz-pagina .hiz-studio-na {
	max-width: var(--hiz-measure, 64ch);
	margin-inline: 0 auto !important;
}

/* ------------------------------------------------------------------- voordelen */

.hiz-pagina .hiz-studio-voordelen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hiz-space-3, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.hiz-pagina .hiz-studio-voordelen {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.hiz-pagina .hiz-studio-voordelen:not(:has(> :nth-child(4):last-child)) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hiz-pagina .hiz-studio-voordelen > li {
	position: relative;
	margin: 0;
	padding: var(--hiz-space-4, 16px) var(--hiz-space-5, 24px) var(--hiz-space-4, 16px) calc(var(--hiz-space-5, 24px) + 1.25rem);
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-white, #fff);
	line-height: 1.5;
}

.hiz-pagina .hiz-studio-voordelen > li::before {
	content: "";
	position: absolute;
	top: calc(var(--hiz-space-4, 16px) + 0.45em);
	left: var(--hiz-space-5, 24px);
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--hiz-color-fern, #4C56AE);
}

.hiz-pagina .hiz-studio-voordelen > li strong {
	display: block;
	margin-bottom: var(--hiz-space-1, 4px);
	color: var(--hiz-color-ink, #1E2352);
}

/* ----------------------------------------------------------- tekst en tip */

.hiz-pagina .hiz-studio-tekst > p,
.hiz-pagina .hiz-studio-tip {
	max-width: var(--hiz-measure, 64ch);
	margin-inline: 0 auto !important;
}

.hiz-pagina .hiz-studio-tip {
	padding: var(--hiz-space-4, 16px) var(--hiz-space-5, 24px);
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-mint, #D3D9EB);
	color: var(--hiz-color-ink, #1E2352);
}

/* ------------------------------------------------------------------ prijstabel */

.hiz-pagina .hiz-prijstabel {
	max-width: 46rem;
	margin-inline: 0 auto !important;
	padding: var(--hiz-space-2, 8px) var(--hiz-space-5, 24px) var(--hiz-space-4, 16px);
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-white, #fff);
	overflow-x: auto;
}

@media (max-width: 559px) {
	.hiz-pagina .hiz-prijstabel {
		padding-inline: var(--hiz-space-4, 16px);
	}
}

/* Twee kolommen: de omschrijving neemt de ruimte, de prijs staat rechts en breekt niet. */
.hiz-pagina .hiz-prijstabel table,
.hiz-pagina .hiz-prijstabel table.has-fixed-layout {
	width: 100%;
	table-layout: auto;
}

.hiz-pagina .hiz-prijstabel :is(th, td) {
	padding-block: var(--hiz-space-3, 12px);
	line-height: 1.45;
}

.hiz-pagina .hiz-prijstabel :is(th, td):last-child {
	padding-right: 0;
	padding-left: var(--hiz-space-4, 16px);
	text-align: right;
	white-space: nowrap;
}

.hiz-pagina .hiz-prijstabel td:last-child {
	color: var(--hiz-color-forest, #3B4497);
	font-weight: 700;
}

.hiz-pagina .hiz-prijstabel thead th {
	border-bottom: 1px solid var(--hiz-color-forest, #3B4497);
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-xs, 13px);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Smal scherm: de prijs mag over twee regels, zodat niets uit beeld schuift. */
@media (max-width: 479px) {
	.hiz-pagina .hiz-prijstabel td:last-child {
		width: 38%;
		white-space: normal;
	}
}

.hiz-pagina .hiz-prijstabel figcaption {
	margin-top: var(--hiz-space-3, 12px);
}

/* ------------------------------------------------------------------------ balk */

.hiz-pagina .hiz-studio-balk {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--hiz-space-4, 16px);
	padding: var(--hiz-space-7, 48px) var(--hiz-space-5, 24px);
	border-radius: var(--hiz-radius-lg, 24px);
	background: var(--hiz-color-mint, #D3D9EB);
	text-align: center;
}

.hiz-pagina .hiz-studio-balk > * {
	margin: 0;
	max-width: var(--hiz-measure-lead, 54ch);
}

.hiz-pagina .hiz-studio-balk__groot {
	font-family: var(--hiz-font-code);
	font-size: clamp(40px, 7vw, 72px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--hiz-color-forest, #3B4497);
}

.hiz-pagina .hiz-studio-balk__tekst {
	font-size: var(--hiz-text-lg, 18px);
	line-height: 1.55;
}

.hiz-pagina .hiz-studio-balk .hiz-studio-knoppen {
	justify-content: center;
}

/* --------------------------------------------------------------------- stappen */

.hiz-pagina .hiz-studio-stappenlijst {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--hiz-space-3, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: hiz-stap;
}

@media (min-width: 640px) {
	.hiz-pagina .hiz-studio-stappenlijst {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.hiz-pagina .hiz-studio-stappenlijst:has(> :nth-child(4):last-child) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.hiz-pagina .hiz-studio-stappenlijst > li {
	position: relative;
	margin: 0;
	padding: calc(var(--hiz-space-5, 24px) + 2rem) var(--hiz-space-5, 24px) var(--hiz-space-5, 24px);
	border-radius: var(--hiz-radius-md, 16px);
	background: var(--hiz-color-white, #fff);
	line-height: 1.5;
	counter-increment: hiz-stap;
}

.hiz-pagina .hiz-studio-stappenlijst > li::before {
	content: counter(hiz-stap, decimal-leading-zero);
	position: absolute;
	top: var(--hiz-space-5, 24px);
	left: var(--hiz-space-5, 24px);
	font-family: var(--hiz-font-code);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--hiz-color-forest, #3B4497);
}

.hiz-pagina .hiz-studio-stappenlijst > li strong {
	display: block;
	margin-bottom: var(--hiz-space-1, 4px);
	color: var(--hiz-color-ink, #1E2352);
}

/* ----------------------------------------------------------------- voorbeelden */

.hiz-pagina .hiz-studio-kaarten--voorbeelden .hiz-studio-voorbeeld {
	padding: var(--hiz-space-3, 12px) var(--hiz-space-3, 12px) var(--hiz-space-5, 24px);
}

.hiz-pagina .hiz-studio-voorbeeld > :not(figure) {
	padding-inline: var(--hiz-space-3, 12px);
}

.hiz-pagina .hiz-studio-voorbeeld__foto {
	margin: 0 0 var(--hiz-space-2, 8px);
}

.hiz-pagina .hiz-studio-voorbeeld__foto img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--hiz-radius-sm, 10px);
}

.hiz-pagina .hiz-studio-voorbeeld__feiten {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-1, 4px) var(--hiz-space-4, 16px);
	margin: 0;
	list-style: none;
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 14px);
}

.hiz-pagina .hiz-studio-voorbeeld__feiten li {
	margin: 0;
}

.hiz-pagina .hiz-studio-voorbeeld__quote {
	margin-inline: var(--hiz-space-3, 12px) 0 !important;
	padding-inline: var(--hiz-space-3, 12px) 0 !important;
	border-left: 2px solid var(--hiz-color-mint, #D3D9EB);
	font-size: var(--hiz-text-sm, 14px);
	font-style: italic;
}

/* ------------------------------------------------------------------------- FAQ */

.hiz-pagina .hiz-studio-vragen > .hiz-faq {
	max-width: 52rem;
	margin-inline: 0 auto !important;
}

/* ------------------------------------------------------------ aanvraag (afsluiter) */

.hiz-pagina .hiz-studio-afsluiter .hiz-studio-klein {
	color: var(--hiz-color-muted, #545A7E);
	font-size: var(--hiz-text-sm, 14px);
	max-width: var(--hiz-measure-lead, 54ch);
}

.hiz-pagina .hiz-studio-afsluiter .hiz-paneel--formulier {
	scroll-margin-top: calc(var(--hiz-kop-sticky, 56px) + var(--hiz-space-4, 16px));
}

/* ---------------------------------------------------------------- ook interessant */

.hiz-pagina .hiz-studio-gerelateerd {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hiz-space-3, 12px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hiz-pagina .hiz-studio-gerelateerd > li {
	margin: 0;
}

.hiz-pagina .hiz-studio-gerelateerd a {
	display: inline-flex;
	align-items: center;
	gap: var(--hiz-space-2, 8px);
	min-height: var(--hiz-touch, 44px);
	padding: var(--hiz-space-2, 8px) var(--hiz-space-5, 24px);
	border: 1px solid var(--hiz-color-line, rgba(59, 68, 151, 0.18));
	border-radius: var(--hiz-radius-pill, 999px);
	background: var(--hiz-color-white, #fff);
	color: var(--hiz-color-forest, #3B4497);
	font-weight: 600;
	text-decoration: none;
}

.hiz-pagina .hiz-studio-gerelateerd a::after {
	content: "→";
}

.hiz-pagina .hiz-studio-gerelateerd a:hover {
	background: var(--hiz-color-mint, #D3D9EB);
}

/* Ankers onder de vaste kop laten uitkomen. */
.hiz-pagina .hiz-studio-sectie[id] {
	scroll-margin-top: var(--hiz-kop-sticky, 56px);
}

@media (prefers-reduced-motion: reduce) {
	.hiz-pagina .hiz-studio-kaart--link {
		transition: none;
	}
}