/* Haags.nl — intro-pagina's (Over ons, Privacy statement): de tekst in de stijl
 * van de biografie op sjaakbralide (Funnel Display, vette intro-alinea, smalle
 * leeskolom), gele tussenkoppen en foto-rijen tussen de alinea's. Laadt alleen
 * op pagina's met een intro-shortcode (IntroPage::enqueue). */


/* Leeskolom zo breed als op sjaakbralide (~720px tekst). */
.hero-message[data-hero-message-intro] .hero-message__body {
	max-width: 50rem;
}

/* De blokken vullen de volle kolombreedte. */
.hero-message[data-hero-message-intro] .hero-message__body > div {
	width: 100%;
}

.hero-message[data-hero-message-intro] .hero-message__text {
	font-family: "Funnel Display", system-ui, sans-serif;
	font-size: clamp(1.15rem, 1.6vw, 1.6rem);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
}

/* Eerste alinea: vette intro, iets groter. */
.hero-message[data-hero-message-intro] .hero-message__text:first-child {
	font-size: clamp(1.3rem, 1.7vw, 1.75rem);
	font-weight: 700;
}

/* Woorden en links die de scroll-reveal (MessageSection.js) laat inschuiven.
 * Lange adressen (bijv. de link naar de Autoriteit Persoonsgegevens) mogen
 * afbreken, anders steken ze op mobiel buiten de kolom. */
.hero-message[data-hero-message-intro] .hero-message__word,
.hero-message[data-hero-message-intro] .hero-message__text a {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* ---- Tussenkop (bijv. de onderwerpen van het Privacy statement) ---- */
.hero-message[data-hero-message-intro] .hero-message__subheading {
	margin: clamp(2.25rem, 4vw, 3.25rem) 0 clamp(0.6rem, 1.2vw, 0.9rem);
	font-family: "Antonio", system-ui, sans-serif;
	font-size: clamp(1.6rem, 2.6vw, 2.4rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-align: center;
	color: #f7e87d;
}

/* ---- Foto-rij (1 of 2 foto's naast elkaar) ---- */
.hg-intro-page__media {
	display: flex;
	gap: clamp(1rem, 2.5vw, 2rem);
	width: 100%;
	margin: clamp(1.75rem, 3.5vw, 3rem) 0;
}

.hg-intro-page__media-item {
	position: relative;
	flex: 1;
	margin: 0;
}

/* Vierkant: de productfoto's zijn vierkant; in 4:3 viel het hoofd of de
 * sokkel eraf. */
.hg-intro-page__media-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: clamp(6px, 0.7vw, 10px);
}

.hg-intro-page__media-label {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	padding: 0.35rem 0.85rem;
	font-family: "Funnel Display", system-ui, sans-serif;
	font-size: clamp(0.8rem, 1vw, 0.95rem);
	font-weight: 500;
	color: #1e7a54;
	background-color: #ffffff;
	border-radius: 999px;
	/* Ligt boven de lightbox-link; een klik erop opent gewoon de foto. */
	pointer-events: none;
}

@media (max-width: 640px) {
	.hg-intro-page__media {
		flex-direction: column;
	}
}

/* ---- Foto groot bekijken (lightbox, IntroLightbox.js) ----
 * De foto is een link naar de grote versie (IntroPage::zoom_attrs()). Het
 * vergrootglas verschijnt bij hover/focus, op een touchscherm altijd. */
.hg-intro-page__media-link {
	position: relative;
	display: block;
	border-radius: clamp(6px, 0.7vw, 10px);
	cursor: zoom-in;
}

.hg-intro-page__media-link:focus-visible {
	outline: 3px solid #f7e87d;
	outline-offset: 4px;
}

.hg-intro-page__media-link::after {
	content: "";
	position: absolute;
	right: 0.85rem;
	bottom: 0.85rem;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: #f7e87d url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e7a54' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5l5 5M10.5 7.75v5.5M7.75 10.5h5.5'/%3E%3C/svg%3E") center / 58% no-repeat;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

.hg-intro-page__media-link:hover::after,
.hg-intro-page__media-link:focus-visible::after {
	opacity: 1;
	transform: none;
}

@media (hover: none) {
	.hg-intro-page__media-link::after {
		opacity: 1;
		transform: none;
	}
}

/* De lightbox: een <dialog> aan de body (IntroLightbox.js). Status in
 * data-lightbox-status: not-active → loading → active → closing. */
.hg-lightbox {
	--hg-lightbox-duration: 0.45s;
	--hg-lightbox-ease: cubic-bezier(0.625, 0.05, 0, 1);
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.hg-lightbox[open] {
	display: grid;
	place-items: center;
}

.hg-lightbox::backdrop {
	background-color: rgba(12, 48, 33, 0.92);
	opacity: 0;
	transition: opacity 0.45s cubic-bezier(0.625, 0.05, 0, 1);
}

.hg-lightbox[data-lightbox-status="loading"]::backdrop,
.hg-lightbox[data-lightbox-status="active"]::backdrop {
	opacity: 1;
}

/* Hele foto, niet bijgesneden: zo groot als past (een brede foto dus breed). */
.hg-lightbox__img {
	display: block;
	width: auto;
	height: auto;
	max-width: 92vw;
	max-height: 86vh;
	max-height: 86dvh;
	object-fit: contain;
	border-radius: clamp(6px, 0.7vw, 10px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transform: scale(0.96);
	transition: opacity var(--hg-lightbox-duration) ease, transform var(--hg-lightbox-duration) var(--hg-lightbox-ease);
}

.hg-lightbox[data-lightbox-status="active"] .hg-lightbox__img {
	opacity: 1;
	transform: none;
}

/* Laden (trage verbinding): een draaiend rondje. */
.hg-lightbox[data-lightbox-status="loading"]::after {
	content: "";
	position: fixed;
	top: 50%;
	left: 50%;
	width: 2.75rem;
	height: 2.75rem;
	margin: -1.375rem 0 0 -1.375rem;
	border: 3px solid rgba(247, 232, 125, 0.3);
	border-top-color: #f7e87d;
	border-radius: 50%;
	animation: hg-lightbox-spin 0.8s linear infinite;
}

@keyframes hg-lightbox-spin {
	to {
		transform: rotate(360deg);
	}
}

.hg-lightbox__close {
	position: fixed;
	top: clamp(0.75rem, 2vw, 1.5rem);
	right: clamp(0.75rem, 2vw, 1.5rem);
	z-index: 1;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: #1e7a54;
	background-color: #f7e87d;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.3s cubic-bezier(0.625, 0.05, 0, 1);
}

.hg-lightbox__close:hover {
	background-color: #ffffff;
	transform: rotate(90deg);
}

.hg-lightbox__close:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* Pagina erachter vast; de breedte van de verdwenen scrollbalk opvullen. */
html[data-lightbox-open] {
	overflow: hidden;
	padding-right: var(--hg-lightbox-scrollbar, 0px);
}

@media (prefers-reduced-motion: reduce) {
	.hg-intro-page__media-link::after,
	.hg-lightbox::backdrop,
	.hg-lightbox__img,
	.hg-lightbox__close {
		transition: none;
	}

	.hg-lightbox[data-lightbox-status="loading"]::after {
		animation: none;
	}
}