/* 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 {
	/* Breedte, centrering en kantlijn komen van de template's eigen
	   .grid-container-class op hetzelfde element (zie view.php: class=
	   "wb-cover-inner grid-container") - dat garandeert exacte uitlijning
	   met de rest van de pagina op elk breakpoint, ook als de template die
	   waarden ooit aanpast. Hier alleen nog de eigen layout van dit blok. */
	display: flex;
	align-items: center;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.wb-cover-text {
	flex: 1 1 52%;
	min-width: 0;
}
@media (min-width: 1024px) {
	/* .wb-cover-inner levert al de gewone rand-tot-tekst-kantlijn - maar
	   overal elders in de template krijgt tekst in een sectie daarbovenop
	   nog de "ademruimte" van .section-content (35px vanaf 1024px, 15px
	   daaronder tot aan de stack/centreer-breakpoint hieronder - dezelfde
	   twee waarden die .section-content zelf ook gebruikt). Onder die
	   stack/centreer-breakpoint is de titel gecentreerd, dus heeft geen
	   linkerkantlijn om op uit te lijnen. */
	.wb-cover-text {
		padding-left: 35px;
	}
}
@media (min-width: 901px) and (max-width: 1023px) {
	.wb-cover-text {
		padding-left: 15px;
	}
}

.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 ------------------------------------------------------ */
/* Geen eigen titelopmaak meer (v1.0.7). De titel is een kale <h1> en wordt
 * volledig door het template opgemaakt (css/basics.css voor grootte en
 * gewicht, css/wbce.css voor de tweekleurige kop). Zo ziet een kop uit dit
 * blok er exact hetzelfde uit als een kop uit elke andere module of uit de
 * editor - de eerdere .wb-cover-title/-line1/-line2 gaven dit blok een eigen
 * lettergrootte en kleurenpaar, en dat is precies het verschil dat we niet
 * meer willen. De hero-kop wordt daardoor iets kleiner dan voorheen: hij
 * volgt nu de standaard h1-grootte van het template in plaats van zijn eigen,
 * iets grotere clamp. Wil je de kopopmaak wijzigen, doe dat in het template. */

.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;
	}
}

/* v1.1.0: prefers-reduced-motion wordt BEWUST niet meer gehonoreerd.
 * Tot v1.0.9 stond hier een blok dat bij die media query opacity/transform/
 * transition op !important zette. Windows meldt reduced-motion zodra
 * "Animatie-effecten" (Instellingen > Toegankelijkheid > Visuele effecten)
 * uitstaat, en op zulke pc's stond de afbeelding dan recht (de -4 graden
 * kanteling is een transform en ging mee) en schoof hij niet in beeld.
 * Expliciet gekozen: de hero altijd hetzelfde, op elke pc. Wil je de
 * instelling toch respecteren, zet dan een blok als dit terug:
 *   @media (prefers-reduced-motion: reduce) {
 *     .wb-cover-image { opacity:1 !important; transition:none !important;
 *                       transform: rotate(-4deg) !important; }
 *   }
 * (met rotate(-4deg) in plaats van none, zodat alleen de beweging vervalt en
 * niet de kanteling). */

/* ---- 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); }
}

/* Breedte/centrering/kantlijn komen nu van de template's eigen .grid-
 * container-class op hetzelfde element (view.php: class="wb-cover-inner
 * grid-container") - zie de toelichting daar. Wordt dit blok ooit buiten dit
 * template gebruikt, dan ontbreekt .grid-container's CSS en valt de breedte
 * terug op 100%; voeg dan zelf een .grid-container-regel toe in de omgeving
 * waar dit blok draait, in plaats van hier weer een eigen kopie bij te
 * houden. */

/* v1.0.8: de hero-afbeelding zit in een <picture> (WebP-srcset, zie
 * view.php/functions.php). display:contents laat die wrapper geen eigen box
 * maken, zodat .wb-cover-image precies dezelfde plek in de flex-kolom heeft
 * als toen hij nog een losse <img> was en alle regels hierboven ongewijzigd
 * blijven werken. */
.wb-cover-visual > picture { display: contents; }