/* ==========================================================================
   Gaivota — herbruikbare onderdelen
   ========================================================================== */

/* --- Knop ---------------------------------------------------------------- */

.gv-knop {
	display: inline-flex;
	align-items: center;
	flex-direction: row;
	gap: 12px;
	padding: 12px 24px;
	border: 1px solid var(--gv-accent);
	border-radius: 50px;
	background: transparent;
	color: var(--gv-navy);
	font-family: var(--gv-font-kop);
	font-size: var(--gv-knop);
	font-weight: 200;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .3s ease-in-out, color .3s ease-in-out, border-color .3s ease-in-out;
}

.gv-knop svg {
	width: 12px;
	height: auto;
	flex: none;
	transition: transform .3s ease-in-out;
}

.gv-knop svg g,
.gv-knop svg path { transition: stroke .3s ease-in-out; }

.gv-knop:hover svg { transform: translateX(3px); }

/* Gevulde variant: vult zich met navy en de tekst wordt wit. */
.gv-knop--vul:hover,
.gv-knop--vul:focus-visible {
	background-color: var(--gv-navy);
	border-color: var(--gv-tekst);
	color: var(--gv-wit);
}

.gv-knop--vul:hover svg g { stroke: #fff; }

/* Lijnvariant (header): alleen de rand verkleurt. */
.gv-knop--lijn:hover,
.gv-knop--lijn:focus-visible {
	border-color: var(--gv-tekst);
	color: var(--gv-navy);
}

/* Donker gevuld, zoals de downloadknop bij de voorwaarden. */
.gv-knop--donker {
	background-color: var(--gv-accent);
	border-color: var(--gv-accent);
	color: var(--gv-wit);
}

.gv-knop--donker svg g { stroke: #fff; }

.gv-knop--donker:hover,
.gv-knop--donker:focus-visible {
	background-color: var(--gv-navy);
	border-color: var(--gv-navy);
}

/* Wit gevuld op een foto of navy vlak (nieuwe opzet). */
.gv-knop--wit {
	background-color: var(--gv-wit);
	border-color: var(--gv-wit);
	color: var(--gv-navy);
}

.gv-knop--wit:hover,
.gv-knop--wit:focus-visible {
	background-color: transparent;
	color: var(--gv-wit);
}

.gv-knop--wit:hover svg g { stroke: #fff; }

/* Op donkere ondergrond. */
.gv-knop--licht {
	border-color: var(--gv-wit);
	color: var(--gv-wit);
}

.gv-knop--licht svg g { stroke: #fff; }

.gv-knop--licht:hover,
.gv-knop--licht:focus-visible {
	background-color: var(--gv-wit);
	color: var(--gv-navy);
}

.gv-knop--licht:hover svg g { stroke: #001C55; }

.gv-knoppen {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding-top: 2rem;
}

/* --- Koppen -------------------------------------------------------------- */

.gv-subtitel {
	display: block;
	font-family: var(--gv-font-kop);
	font-size: var(--gv-subtitel);
	font-weight: 400;
	letter-spacing: .16em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--gv-taupe);
}

.gv-kleine-titel {
	display: block;
	font-family: var(--gv-font-tekst);
	font-size: var(--gv-kleine-titel);
	line-height: 2;
	letter-spacing: .1rem;
	text-transform: uppercase;
	color: var(--gv-navy);
}

.gv-koppen {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.gv-tekst {
	font-family: var(--gv-font-tekst);
	font-size: var(--gv-body);
	line-height: 2;
	color: var(--gv-tekst);
}

.gv-tekst--groot { font-size: var(--gv-body-groot); }

/* Accent in een kop: Marcellus in taupe (alleen letters uit het brandbook). */
/* Accent in een titel: zelfde letter en gewicht als de titel (zoals gaivota.nl), alleen in taupe. */
.gv-accent {
	font-family: inherit;
	font-style: normal;
	font-weight: inherit;
	text-transform: inherit;
	letter-spacing: inherit;
	color: var(--gv-taupe);
}

:focus-visible { outline: 2px solid var(--gv-taupe); outline-offset: 3px; }

.gv-tekst a { text-decoration: underline; }
.gv-tekst a:hover { color: var(--gv-taupe); }

/* --- Beeld met wegschuivende overlay ------------------------------------- */

.gv-beeld {
	position: relative;
	overflow: hidden;
	overflow: clip;
	align-self: flex-start;
	width: 100%;
}

.gv-beeld img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top left;
}

.gv-beeld__overlay {
	position: absolute;
	inset: 0;
	background: var(--gv-wit);
	transform: translate(0, 0);
	transition: transform 1.2s cubic-bezier(.65, 0, .35, 1);
	will-change: transform;
	pointer-events: none;
}

.gv-beeld.is-zichtbaar .gv-beeld__overlay { transform: translate(100%, 0); }
.gv-beeld--rechts .gv-beeld__overlay { transform: translate(0, 0); }
.gv-beeld--rechts.is-zichtbaar .gv-beeld__overlay { transform: translate(-100%, 0); }
.gv-beeld--vol.is-zichtbaar .gv-beeld__overlay { transform: translate(0, -100%); }

/* Overlay in de kleur van de band, anders verschijnt er een wit vlak op papier of navy. */
.gv-band--papier .gv-beeld__overlay { background: var(--gv-papier); }
.gv-band--navy .gv-beeld__overlay { background: var(--gv-navy); }

/* GSAP neemt de overlay over (gaivota.js, animaties). */
.gv-gsap .gv-beeld__overlay { transition: none; }

/* --- Verschijnen bij scrollen -------------------------------------------- */

.gv-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s cubic-bezier(.22, 1, .36, 1), transform .9s cubic-bezier(.22, 1, .36, 1);
	will-change: opacity, transform;
}

.gv-reveal.is-zichtbaar {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.gv-reveal,
	.gv-beeld__overlay {
		transition: none;
	}
	.gv-reveal { opacity: 1; transform: none; }
	.gv-beeld__overlay { display: none; }
}