/* ==========================================================================
   Frijns theme — homepage hero
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero: diep blauw vlak met de tekst links, en rechts de foto van Michel &
   Rita. De scheiding is een zachte boog — een knipoog naar de lus in het
   handgeschreven Frijns-logo. De foto houdt zo zijn eigen beeldvlak (geen
   tekst over gezichten) en de compositie blijft heel op elk schermformaat.
   -------------------------------------------------------------------------- */

/* Alle maten hieronder schalen vloeiend mee met de schermbreedte. Er zit
   bewust geen breakpoint in voor grote schermen: die veroorzaakte een sprong
   in de compositie zodra je in- of uitzoomde. */
:root {
	--hero-pad: clamp(1.25rem, 4vw, 3rem);
	/* Hoogte van de headerbalk — gebruikt om het menupaneel eronder te laten
	   beginnen en om de sluitknop op de hamburgerplek te zetten. */
	--header-h: calc(clamp(0.6rem, 1vw, 0.9rem) * 2 + clamp(50px, 5.5vw, 82px));
}

.home-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, var(--color-deep) 0%, var(--color-deep-soft) 100%);
	min-height: clamp(420px, 25vw, 860px);
	display: flex;
	align-items: center;
}

/* Foto rechts, met een bolle linkerrand die het blauw omarmt */
.home-hero__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(54%, 1600px);
	pointer-events: none;
	clip-path: ellipse(102% 128% at 100% 50%);
}

.home-hero__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 46% 28%;
	display: block;
}

/* Het script-F is een watermerk áchter de tekst, niet een logootje onder de
   knop. Het hangt aan de tekstkolom (die relatief gepositioneerd is), dus het
   blijft bij elk zoomniveau op dezelfde plek en schaalt mee met de kolom. */
.home-hero__mark {
	position: absolute;
	left: -2rem;
	bottom: clamp(-6.5rem, -13cqw, -4.25rem);
	width: clamp(200px, 52cqw, 380px);
	height: auto;
	margin: 0;
	opacity: 0.07;
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

/* Tekst en knop blijven boven het watermerk */
.home-hero__text > *:not(.home-hero__mark) {
	position: relative;
	z-index: 1;
}

.home-hero__inner {
	position: relative;
	z-index: 1;
	width: min(max(1520px, 62vw), 100%);
	margin-inline: auto;
	padding: clamp(2.25rem, 4vw, 3.25rem) var(--hero-pad) clamp(5.25rem, 8vw, 7.5rem);
}

/* Ruim genoeg voor het lange woord "administratiekantoor" op één regel.
   De kolom is tevens de maat voor de kopgrootte (zie container query).
   44% houdt genoeg afstand tot de foto, ook bij 250% zoom. */
.home-hero__inner > .home-hero__text {
	position: relative;
	max-width: min(clamp(33rem, 24vw, 48rem), 44%);
	container-type: inline-size;
}

.home-hero .eyebrow {
	color: #A9BAFF;
}

/* De kop schaalt mee met de breedte van zijn eigen kolom (cqw), niet met het
   scherm. Daardoor past "administratiekantoor" altijd op één regel, op elk
   schermformaat — met vw-schaling viel dat woord op 1080p net buiten de boot. */
.home-hero__title {
	font-size: clamp(1.65rem, 8.2cqw, 3.05rem);
	color: var(--color-white);
	margin-bottom: clamp(1rem, 2vw, 1.6rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: pretty;
	text-shadow: 0 2px 26px rgba(4, 8, 36, 0.45);
}

/* Tweede regel in accentkleur — het contrast dat de kop draagt */
.home-hero__title em {
	font-style: normal;
	color: #8FA5FF;
}

/* Ook de tekst onder de kop volgt de kolombreedte, zodat de verhoudingen
   binnen het tekstblok bij elk zoomniveau hetzelfde blijven. */
.home-hero__lead {
	font-size: clamp(1.05rem, 3.3cqw, 1.42rem);
	color: rgba(255, 255, 255, 0.82);
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.65;
}

.home-hero__buttons {
	gap: clamp(0.75rem, 1.5vw, 1rem);
}

.home-hero__buttons .wp-block-button__link {
	font-size: clamp(1rem, 2.7cqw, 1.2rem);
}

/* Knoppen op de foto: wit gevuld en witte outline */
.home-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--color-white);
	color: var(--color-primary);
}

.home-hero .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--color-tint);
}

.home-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--color-white);
}

.home-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: var(--color-white);
}

/* Smaller dan 1200px: foto boven de tekst, met de boog aan de onderkant.
   Daaronder wordt de fotokolom te smal en worden Michel en Rita aangesneden. */
@media (max-width: 1199px) {
	.home-hero {
		display: block;
		min-height: 0;
		padding-top: clamp(250px, 46vw, 400px);
	}

	.home-hero__media {
		top: 0;
		left: 0;
		right: 0;
		bottom: auto;
		width: 100%;
		height: clamp(270px, 48vw, 420px);
		clip-path: ellipse(140% 100% at 50% 0%);
	}

	.home-hero__photo {
		object-position: center 26%;
	}

	.home-hero__inner {
		padding-top: clamp(1.5rem, 4vw, 2.25rem);
		padding-bottom: clamp(4rem, 12vw, 5.5rem);
	}

	.home-hero__inner > .home-hero__text {
		max-width: 100%;
	}

	/* De kolom is hier schermbreed, dus een lagere factor dan bij de
	   smalle desktopkolom — anders wordt de kop op tablets fors. */
	.home-hero__title {
		font-size: clamp(1.8rem, 5.6cqw, 2.9rem);
	}

	.home-hero__lead {
		font-size: clamp(1.02rem, 2.2cqw, 1.2rem);
	}

	.home-hero__buttons .wp-block-button__link {
		font-size: clamp(0.98rem, 1.9cqw, 1.1rem);
	}

	/* Mobiel: de F rechtsonder in het blauwe vlak, volledig in beeld */
	.home-hero__mark {
		left: auto;
		/* Iets verder naar rechts, zodat de F niet tegen de knop aan zit */
		right: clamp(-2.25rem, -4vw, -1rem);
		bottom: -0.5rem;
		width: clamp(110px, 24vw, 165px);
		opacity: 0.09;
	}
}

/* Persoonlijke contactkaart rechts in de hero */
.hero-card {
	background: var(--color-white);
	border: 1px solid var(--color-tint-strong);
	border-top: 4px solid var(--color-primary);
	border-radius: var(--radius-l);
	padding: var(--space-card);
	box-shadow: 0 16px 40px rgba(21, 40, 179, 0.14);
}

.hero-card h3 {
	margin: 0 0 1rem;
	font-size: var(--wp--preset--font-size--large, clamp(1.15rem, 0.6vw + 1rem, 1.35rem));
}

.hero-card__head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.hero-card__avatar {
	flex-shrink: 0;
	width: clamp(3.25rem, 4vw, 3.75rem);
	height: clamp(3.25rem, 4vw, 3.75rem);
	border-radius: 50%;
	background: var(--color-tint);
	color: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero-card__avatar svg {
	width: 58%;
	height: 58%;
}

.hero-card__names {
	font-weight: 700;
	color: var(--color-navy);
	font-size: var(--wp--preset--font-size--large, clamp(1.15rem, 0.6vw + 1rem, 1.35rem));
	margin: 0;
	line-height: 1.3;
}

.hero-card__role {
	color: var(--color-muted);
	margin: 0;
	font-size: var(--wp--preset--font-size--small, 0.95rem);
}

.hero-card__text {
	color: var(--color-muted);
	margin: 0 0 1.1rem;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--color-border);
}

.hero-card__contact {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hero-card__contact li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	margin-bottom: 0.7rem;
	color: var(--color-muted);
}

.hero-card__contact li:last-child {
	margin-bottom: 0;
}

.hero-card__contact svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--color-primary);
	flex-shrink: 0;
}

.hero-card__contact a {
	color: var(--color-navy);
	font-weight: 600;
	text-decoration: none;
}

.hero-card__contact a:hover {
	color: var(--color-primary);
	text-decoration: underline;
}

/* Vertrouwensbalk onder de hero-tekst */
.home-hero__meta {
	color: var(--color-muted);
	font-size: var(--wp--preset--font-size--small, clamp(0.875rem, 0.2vw + 0.8rem, 0.95rem));
	margin-top: clamp(1.25rem, 2.5vw, 2rem);
}