/* Cover Block - frontend styling
 * Scoped under .wb-cover so nothing leaks into the rest of the site.
 * Self-contained: no framework or icon font required.
 *
 * De kleuren volgen de CSS-variabelen van het template (huisstijl), met de
 * oorspronkelijke waarden als terugval wanneer de module buiten dat template
 * wordt gebruikt. --wb-accent wordt door de huisstijl gezet (bij Stip-t oranje)
 * en stuurt de accentonderdelen aan, zoals de badges.
 */

.wb-cover {
	--wb-cover-blue: var(--color-primary-600, #2f86eb);
	--wb-cover-accent: var(--wb-accent, var(--color-primary-600, #2f86eb));
	--wb-cover-blue-dark: var(--color-primary-700, #1f6fd0);
	--wb-cover-navy: var(--color-primary-950, #0f2a4a);
	--wb-cover-ink: #46586f;
	--wb-cover-star: var(--color-warning, #f5a524);
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #eaf3ff 0%, #f4f9ff 45%, #ffffff 100%);
	/* Weinig ruimte bovenaan zodat de hero direct onder de navigatie begint. */
	padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(2.5rem, 6vw, 5rem);
}

/* Background variants - use "Transparant" when placing the block inside a
   template that already provides its own background (so it blends in). */
.wb-cover.wb-cover--bg-transparent { background: transparent; }
.wb-cover.wb-cover--bg-white { background: #fff; }

/* Als de module als hero in een .cover-wrapper staat (blok 10 "Cover/hero" van
   de TimeWriter-template), schuift die wrapper 160px omhoog achter de zwevende
   navigatie. Geef de hero dan bovenaan die 160px terug, zodat de tekst netjes
   onder de nav blijft (net als de automatische cover-placeholder). Buiten een
   cover-wrapper (standalone / gewoon contentblok) geldt dit niet. */
.cover-wrapper .wb-cover {
	padding-top: 160px;
}
/* zelfde breekpunten/waarden als .cover-placeholder van de template */
@media (max-width: 1023px) {
	.cover-wrapper .wb-cover { padding-top: 180px; }
}
@media (max-width: 640px) {
	.cover-wrapper .wb-cover { padding-top: 110px; }
}

.wb-cover-inner {
	/* Zelfde breedte + gutter als Foundation's .grid-container (75rem / .9375rem),
	   zodat de tekst exact uitlijnt met het logo/de navigatie van de template
	   (onder het klokje, niet onder de "W"). */
	max-width: 75rem;
	margin: 0 auto;
	padding: 0 0.9375rem;
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.wb-cover-text {
	flex: 1 1 52%;
	min-width: 0;
}

.wb-cover-visual {
	flex: 1 1 48%;
	min-width: 0;
	position: relative;
}

/* ---- Badges ------------------------------------------------------------ */
.wb-cover-badges {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	background: color-mix(in srgb, var(--wb-cover-accent) 10%, transparent);
	border-radius: 999px;
	margin-bottom: 1.4rem;
}

.wb-cover-badge {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1;
}

.wb-cover-badge--solid {
	background: var(--wb-cover-accent);
	color: #fff;
	padding: 6px 12px;
	border-radius: 999px;
	box-shadow: 0 2px 6px color-mix(in srgb, var(--wb-cover-accent) 30%, transparent);
}

.wb-cover-badge--text {
	color: var(--wb-cover-accent);
}

/* ---- Title / lead ------------------------------------------------------ */
.wb-cover-title {
	color: var(--wb-cover-navy);
	font-weight: 800;
	font-size: clamp(2rem, 4.6vw, 3.6rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 1.2rem;
}

.wb-cover-accent {
	color: var(--wb-cover-blue);
}

.wb-cover-lead {
	color: var(--wb-cover-ink);
	font-size: clamp(1rem, 1.4vw, 1.18rem);
	line-height: 1.7;
	max-width: 34em;
	margin-bottom: 2rem;
}

.wb-cover-lead p { margin: 0 0 0.6em; }
.wb-cover-lead p:last-child { margin-bottom: 0; }

/* ---- Buttons ----------------------------------------------------------- */
.wb-cover-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 1.8rem;
}

.wb-cover-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
	line-height: 1;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
	cursor: pointer;
}

.wb-cover-btn .wb-cover-arrow { transition: transform 0.2s ease; }
.wb-cover-btn:hover .wb-cover-arrow { transform: translateX(3px); }

.wb-cover-btn--primary {
	background: var(--wb-cover-blue);
	color: #fff;
	box-shadow: 0 8px 20px rgba(47, 134, 235, 0.32);
}
.wb-cover-btn--primary:hover {
	background: var(--wb-cover-blue-dark);
	transform: translateY(-1px);
	color: #fff;
}

.wb-cover-btn--hollow {
	background: transparent;
	color: var(--wb-cover-navy);
	border: 1.5px solid rgba(15, 42, 74, 0.22);
}
.wb-cover-btn--hollow:hover {
	border-color: var(--wb-cover-blue);
	color: var(--wb-cover-blue);
	transform: translateY(-1px);
}

/* ---- Rating ------------------------------------------------------------ */
.wb-cover-rating {
	display: flex;
	align-items: center;
	gap: 10px;
}

.wb-cover-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--wb-cover-star);
}

.wb-cover-rating-text {
	color: var(--wb-cover-ink);
	font-size: 0.95rem;
	font-weight: 600;
}

/* ---- Image + slide-in animation --------------------------------------- */
.wb-cover-image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 14px;
	filter: drop-shadow(0 24px 45px rgba(15, 42, 74, 0.20));
	will-change: transform, opacity;
	opacity: 0;
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease;
	transition-delay: 120ms;
}

/* Start states (before reveal) */
.wb-cover--from-bottom .wb-cover-image { transform: translateY(60px) rotate(0deg); }
.wb-cover--from-right  .wb-cover-image { transform: translateX(80px) rotate(0deg); }

/* End state (block is in view -> .is-visible added by the inline script) */
.wb-cover.is-visible .wb-cover-image {
	opacity: 1;
	transform: translateY(0) rotate(-4deg);
}
.wb-cover--from-right.is-visible .wb-cover-image {
	transform: translateX(0) rotate(-4deg);
}

/* ---- Desktop: grote, ver doorlopende afbeelding ------------------------
   LET OP: dit blok moet NA de basisregels van .wb-cover-image staan, anders
   wint de basisregel (max-width:100%) op gelijke specificiteit en blijft de
   afbeelding op de kolombreedte hangen.
   De beeldkolom breekt uit de gecentreerde container naar de rechter-
   viewportrand; .wb-cover heeft overflow:hidden en klipt netjes af, dus er
   ontstaat geen horizontale scrollbalk. */
@media (min-width: 1024px) {
	.wb-cover-text {
		flex: 0 0 46%;
		max-width: 620px;
	}
	.wb-cover-visual {
		flex: 0 0 54%;
		overflow: visible;
		margin-right: calc(50% - 50vw);
	}
	.wb-cover-image {
		width: min(1120px, 70vw);
		max-width: none;
	}
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
	.wb-cover-image {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
	.wb-cover-inner { flex-direction: column; text-align: center; }
	.wb-cover-text { flex-basis: auto; }
	.wb-cover-visual { flex-basis: auto; width: 100%; margin-top: 1.5rem; }
	.wb-cover-lead { margin-left: auto; margin-right: auto; }
	.wb-cover-actions,
	.wb-cover-rating { justify-content: center; }
	.wb-cover.is-visible .wb-cover-image,
	.wb-cover--from-right.is-visible .wb-cover-image { transform: translateY(0) rotate(0deg); }
}

/* ---------------------------------------------------------------------------
 * Containerbreedte gelijk aan .grid-container van de TimeWriter-template
 * (css/basics.css + css/variables.css). Zo lijnen de blokken exact uit met de
 * navigatie en met de secties die de template-opmaak gebruiken. De fallbacks
 * gelden als de module buiten dit template wordt gebruikt.
 * ------------------------------------------------------------------------ */
.wb-cover-inner {
	max-width: var(--max-width-desktop, 75rem);
	padding-left: 0.9375rem;
	padding-right: 0.9375rem;
}
@media (max-width: 1500px) {
	.wb-cover-inner { max-width: var(--max-width-medium, 75rem); }
}
@media (max-width: 1100px) {
	.wb-cover-inner { max-width: var(--max-width-tablet, 100%); }
}
@media (max-width: 1023px) {
	.wb-cover-inner { max-width: calc(var(--max-width-tablet, 1023px) - 40px); }
}