/**
 * Weltechniek — homepage stylesheet.
 *
 * Geladen via `wt_homepage_enqueue_assets()` alleen op de nieuwe homepage
 * (admin OF `?wt-homepage-preview=1`).
 *
 * Conventies:
 *  - Alle classes geprefixt met `wt-home-*`, los van Shoptimizer-classes.
 *  - Sectie-wrapper = `.wt-home-section`, content-wrapper = `.wt-home-section__inner`
 *    (constraint tot 1301px = de echte content-breedte van de site).
 *  - Modifier per sectie via `--<naam>` voor sectie-specifieke styling.
 *  - Mobile-first; desktop-overrides via @media (min-width: 1024px).
 *  - Brand-kleuren: navy #1e3a6d, navy-hover #14284f, groen #00bb00,
 *    groen-hover #008d00, lichtgrijs #f7f8fa.
 *  - Geen Shoptimizer-class-dependencies — straks 1-op-1 portable.
 */

/* ============================================================ */
/* === Basis sectie-wrapper                                 === */
/* ============================================================ */
.wt-home {
	background: #fff;
}

/* Shoptimizer's `.col-full` heeft een eigen responsive padding (15px /
   30px / 41.89px afhankelijk van breakpoint) en eigen max-width. De
   header gebruikt een eigen `.wrapper`-formule die NIET overeenkomt met
   col-full op tussen-breakpoints. Daardoor zou de homepage uit lijn
   raken met de header. Fix: bypass col-full's padding wanneer de
   nieuwe homepage actief is. Footer heeft eigen `.wt-footer__inner`
   en blijft werken. */
body.wt-home-active .col-full {
	padding-left: 0 !important;
	padding-right: 0 !important;
	max-width: 100% !important;
}

.wt-home-section {
	width: 100%;
}

/* Exacte kopie van de header's `.wrapper`-formule (zie css/header.css):
     --wrapper-max:     1301px
     --wrapper-padding: 1rem default, 1.5rem ≥640px, 2rem ≥1024px
   Resultaat: homepage en header zijn op ÉLK breakpoint pixel-aligned. */
.wt-home-section__inner {
	width: 100%;
	max-width: calc(1301px + 2rem);
	margin-inline: auto;
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 36px;
	padding-bottom: 36px;
	box-sizing: border-box;
}
@media (min-width: 640px) {
	.wt-home-section__inner {
		max-width: calc(1301px + 3rem);
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}
@media (min-width: 1024px) {
	.wt-home-section__inner {
		max-width: calc(1301px + 4rem);
		padding-left: 2rem;
		padding-right: 2rem;
	}
}
.wt-home-section__title {
	margin: 0 0 22px;
	font-size: 26px;
	font-weight: 700;
	color: #1e3a6d;
	line-height: 1.25;
}

/* TODO-placeholders */
.wt-home-section--todo {
	background: #fff7e6;
	border-top: 1px dashed #d8a900;
	border-bottom: 1px dashed #d8a900;
	color: #6b4f00;
}
.wt-home-section--todo .wt-home-section__inner { padding: 18px 22px; }
.wt-home-section--todo code {
	background: #fff;
	padding: 2px 6px;
	border-radius: 3px;
	font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* ============================================================ */
/* === 1. Hero + USP                                        === */
/* ============================================================ */
.wt-home-section--hero .wt-home-section__inner { padding-top: 22px; padding-bottom: 22px; }
.wt-home-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}
.wt-home-hero__promo {
	display: block;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
/* `object-fit: cover` zorgt dat de JPG de hele container vult zonder
   vervorming. Eventuele crop zit aan boven/onderkant waar enkel navy
   staat — geen contentverlies. TODO later: vervang deze JPG door een
   HTML-banner (titel/subtitel/CTA als losse elementen) zodat 'ie
   responsively meeschaalt en geen object-fit-trucs meer nodig heeft. */
.wt-home-hero__promo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.wt-home-hero__usp {
	/* Subtiele gradient + box-shadow matchen de "card-feel" van de hoofdbanner
	   links (die heeft een navy-naar-cyaan gradient in het JPG + shadow).
	   Doel: linker- en rechterkolom voelen als één matchend paar cards. */
	background: linear-gradient(135deg, #1e3a6d 0%, #14284f 100%);
	border-radius: 8px;
	padding: 28px;
	color: #fff;
	box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
/* `!important` op de tekst-kleuren omdat Shoptimizer's globale heading-
   regel (h1-h6 in navy #1e3a6d) anders wint qua specificity en de
   titel onleesbaar wordt tegen de navy bg. */
.wt-home-hero__usp-title {
	margin: 0 0 16px;
	font-size: 24px;
	font-weight: 700;
	color: #fff !important;
}
.wt-home-hero__usp-list {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.wt-home-hero__usp-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 6px 0;
	font-size: 15px;
	line-height: 1.4;
	color: #fff;
}
.wt-home-hero__usp-list strong {
	font-weight: 700;
	color: #fff;
}
/* Lucide `circle-check` outline-icoon — modern en subtiel. Geen cirkel-bg
   meer (was te schreeuwerig); het icoon ZELF is de cirkel + check. */
.wt-home-hero__usp-icon,
.wt-home-wwk__usp-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #00bb00;
	flex-shrink: 0;
	margin-top: 2px;
}
.wt-home-hero__usp-icon svg,
.wt-home-wwk__usp-icon svg {
	width: 18px;
	height: 18px;
}
.wt-home-hero__reviews-title {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	color: #fff !important;
}
/* Sterren in de hero (groen) en in de WWK-testimonials (amber) — Lucide
   star is van origine outline; `fill: currentColor` maakt er een
   gevulde ster van. */
.wt-home-hero__stars {
	color: #00bb00;
	margin-bottom: 6px;
	display: flex;
	gap: 2px;
}
.wt-home-hero__stars svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	stroke-width: 0;
}
.wt-home-hero__testimonial { margin-bottom: 18px; }
.wt-home-hero__testimonial-name {
	margin: 0;
	font-weight: 600;
	color: #fff;
}
.wt-home-hero__testimonial-text {
	margin: 4px 0 0;
	font-style: italic;
	color: #ffffffcc;
	font-size: 14px;
	line-height: 1.45;
}
.wt-home-hero__wwk-link {
	display: inline-block;
	margin-top: 4px;
	/* GEEN achtergrond: de WWK-trustmark-SVG is een WIT logo
	   (fill="#FFFFFF") bedoeld voor donkere achtergronden — past
	   perfect op de navy hero-aside. */
}
.wt-home-hero__wwk-link img {
	display: block;
	max-width: 90px;
	height: auto;
}
@media (min-width: 1024px) {
	.wt-home-hero {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 22px;
	}
}

/* ============================================================ */
/* === 2. Categorie-USP-carousel                            === */
/* ============================================================ */
.wt-home-section--cards .wt-home-section__inner { padding-top: 14px; padding-bottom: 14px; }

/* Generieke carousel-basis met CSS scroll-snap (geen JS-library).
   Auto-rotate via js/homepage-carousel.js (loopt over élke
   `.wt-home-carousel` op de pagina, met hover/focus/user-scroll
   pause en a11y reduced-motion-respect). */
.wt-home-carousel {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;     /* default: 1 per view (mobile-first) */
	gap: 18px;
	overflow-x: auto;
	/* Geen scroll-snap: Chrome blokkeert programmatische scrolls (auto-
	   rotate) bij zowel `mandatory` als `proximity` snap in deze grid-
	   layout. De auto-rotate scrollt zelf al in exacte item-breedtes,
	   dus snap voegt niets toe. Touch-swipe is op mobiel ook natuurlijk
	   zonder snap. */
	scrollbar-width: thin;
	padding-bottom: 8px;
	-webkit-overflow-scrolling: touch;
}

/* Variant: categorie-cards = 1 / 2 / 3 per view per breakpoint */
@media (min-width: 640px) {
	.wt-home-cards { grid-auto-columns: calc((100% - 18px) / 2); }
}
@media (min-width: 1024px) {
	.wt-home-cards { grid-auto-columns: calc((100% - 36px) / 3); }
}
.wt-home-cards__item {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 6px rgba(0,0,0,.06);
	transition: transform .15s ease, box-shadow .15s ease;
}
.wt-home-cards__item:hover,
.wt-home-cards__item:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 4px 10px rgba(0,0,0,.12);
}
.wt-home-cards__item img {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================================ */
/* === 3. Ons assortiment (Shoptimizer renderer)            === */
/* ============================================================ */
.wt-home-section--assortiment .wt-home-section__inner { padding-bottom: 24px; }

/* ============================================================ */
/* === 4 + 5. Producten-rows                                === */
/* ============================================================ */
.wt-home-section--products .wt-home-section__inner { padding-top: 28px; padding-bottom: 28px; }

/* ============================================================ */
/* === 6. Advies & klustips                                 === */
/* ============================================================ */
/* Gebruikt nu de KANONIEKE blog-card (.wt-blog-card / .wt-blog-grid uit css/blog.css),
   identiek aan het blog-archief. De oude .wt-home-advies__* component is verwijderd. */

/* ============================================================ */
/* === 7. Info-blok                                         === */
/* ============================================================ */
.wt-home-section--info { background: #fff; }
.wt-home-section--info .wt-home-section__inner { padding-top: 40px; padding-bottom: 40px; }
.wt-home-section--info p {
	margin: 0 0 18px;
	color: #2c3e50;
	font-size: 16px;
	line-height: 1.55;
}
.wt-home-section--info h3 {
	margin: 28px 0 12px;
	font-size: 22px;
	font-weight: 700;
	color: #1e3a6d;
	line-height: 1.3;
}
.wt-home-section--info a {
	color: #00bb00;
	text-decoration: none;
}
.wt-home-section--info a:hover,
.wt-home-section--info a:focus-visible { text-decoration: underline; }

/* ============================================================ */
/* === Keuzehulpen-banner (sectie tussen 3 en 4)            === */
/* ============================================================ */
.wt-home-section--keuzehulp-banner .wt-home-section__inner {
	padding-top: 14px;
	padding-bottom: 28px;
}
.wel-keuzehulp-banner--home { margin: 0 auto; }

/* ============================================================ */
/* === 8. WebwinkelKeur + testimonials                      === */
/* ============================================================ */
.wt-home-section--wwk { background: #fff; }
.wt-home-wwk {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}
.wt-home-wwk__cert img {
	display: block;
	max-width: 220px;
	height: auto;
	margin-bottom: 14px;
}
.wt-home-wwk__usp-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wt-home-wwk__usp-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 5px 0;
	font-size: 14px;
	color: #2c3e50;
}
/* Icon-badge gedeeld met hero — zie .wt-home-hero__usp-icon hierboven */
.wt-home-wwk__reviews { min-width: 0; display: flex; flex-direction: column; }
/* WWK-reviews = carousel, identiek aan banner-carousel: 1 per view
   mobiel, 2 vanaf 640px, 3 vanaf 1024px. Auto-rotate elke 5 sec via
   gedeelde `.wt-home-carousel` class + `js/homepage-carousel.js`. */
.wt-home-wwk__cards {
	gap: 14px;
}
@media (min-width: 640px) {
	.wt-home-wwk__cards { grid-auto-columns: calc((100% - 14px) / 2); }
}
@media (min-width: 1024px) {
	.wt-home-wwk__cards { grid-auto-columns: calc((100% - 28px) / 3); }
}
.wt-home-wwk__card {
	background: #f7f8fa;
	border-radius: 6px;
	padding: 14px 16px;
}
.wt-home-wwk__card-name {
	margin: 0;
	font-weight: 700;
	color: #1e3a6d;
	font-size: 14px;
}
.wt-home-wwk__stars {
	margin: 4px 0 8px;
	color: #ffb800;
	display: flex;
	gap: 2px;
}
.wt-home-wwk__stars svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	stroke-width: 0;
}
.wt-home-wwk__card-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.45;
	color: #4a5868;
}
/* "Bekijk alles op Webwinkelkeur" link — rechts uitgelijnd onder
   de reviews-grid, Lucide arrow-up-right icoon naast de tekst (geen
   HTML-entity meer). `margin-left: auto` werkt omdat de parent
   (.wt-home-wwk__reviews) flex-column is. */
.wt-home-wwk__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	align-self: flex-start;
	color: #1e3a6d;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
}
@media (min-width: 640px) {
	.wt-home-wwk__more { align-self: flex-end; }
}
.wt-home-wwk__more-icon {
	display: inline-flex;
	align-items: center;
}
.wt-home-wwk__more-icon svg {
	width: 16px;
	height: 16px;
	stroke-width: 2;
	transition: transform .15s ease;
}
.wt-home-wwk__more:hover,
.wt-home-wwk__more:focus-visible { text-decoration: underline; }
.wt-home-wwk__more:hover .wt-home-wwk__more-icon svg,
.wt-home-wwk__more:focus-visible .wt-home-wwk__more-icon svg {
	transform: translate(2px, -2px);
}
@media (min-width: 1024px) {
	.wt-home-wwk { grid-template-columns: 280px 1fr; gap: 32px; align-items: start; }
}

/* ============================================================ */
/* === Responsive helpers                                   === */
/* ============================================================ */
@media (max-width: 768px) {
	.wt-home-section__title { font-size: 22px; }
	.wt-home-section--info h3 { font-size: 18px; }
	.wt-home-hero__usp { padding: 22px; }
	.wt-home-hero__usp-title { font-size: 20px; }
}


/* ============================================================ */
/* === Hero actiebanner (gecodeerd, vervangt platte promo-JPG) */
/*     Herbruikbaar maandelijks format; config staat in         */
/*     inc/homepage/sections/hero.php. Tokens via global.css.    */
/*     Responsive via container-query units (cqw).               */
/* ============================================================ */
.wt-banner,
.wt-banner * { box-sizing: border-box; }

.wt-banner {
	position: relative;
	width: 100%;
	display: block;
	aspect-ratio: 1600 / 800;          /* intrinsieke hoogte bij 1-koloms/mobiel */
	container-type: inline-size;
	overflow: hidden;
	border-radius: 8px;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	background: radial-gradient(115% 130% at 70% 50%,
		#3a5fa6 0%, #294e8f 28%, var(--wt-blue, #1e3a6d) 55%, #16294e 80%, #0f1d38 100%);
	box-shadow: 0 4px 14px rgba(8, 28, 72, .18);
}
/* In de 2-koloms hero (>=1024) vult de banner de promo-cel = hoogte USP-sidebar. */
@media (min-width: 1024px) {
	.wt-banner { aspect-ratio: auto; height: 100%; }
}

.wt-banner__glow {
	position: absolute; top: 50%; right: 18%;
	width: 55cqw; height: 55cqw; transform: translateY(-50%);
	background: radial-gradient(circle, rgba(120, 180, 255, .45) 0%, rgba(120, 180, 255, 0) 62%);
	pointer-events: none;
}

.wt-banner__product {
	position: absolute; top: 50%; right: 3cqw; transform: translateY(-50%);
	width: 46cqw; height: auto; max-height: 84%; object-fit: contain;
	filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .30));
}

.wt-banner__badge {
	position: absolute; top: 5.5cqw; right: 5.5cqw;
	width: 12cqw; height: 12cqw; border-radius: 50%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; color: #fff;
	background: radial-gradient(circle at 34% 26%, #15c722 0%, var(--wt-green, #00bb00) 42%, #008c00 76%, #006400 100%);
	box-shadow: 0 10px 26px rgba(0, 150, 0, .40);
}
.wt-banner__badge b    { font-size: 3.4cqw; font-weight: 800; line-height: .95; letter-spacing: -.02em; }
.wt-banner__badge span { font-size: 1.5cqw; font-weight: 600; line-height: 1; margin-top: .25cqw; }

.wt-banner__content {
	position: absolute; top: 50%; left: 5.6cqw; transform: translateY(-50%);
	width: 53cqw; z-index: 2;
	display: flex; flex-direction: column; align-items: flex-start;
}

.wt-banner__kicker { display: flex; align-items: center; gap: 1cqw; margin-bottom: 1.9cqw; }
.wt-banner__kicker-name {
	font-size: 1.3cqw; font-weight: 700; letter-spacing: .18em;
	text-transform: uppercase; color: #bdd3f2; white-space: nowrap;
}
.wt-banner__tag {
	font-size: 1.15cqw; font-weight: 800; letter-spacing: .16em;
	text-transform: uppercase; color: #fff; background: #d12e37;
	padding: .4cqw .9cqw; border-radius: 4px;
}

.wt-banner__title {
	margin: 0; color: #fff; font-weight: 800;
	font-size: 4.6cqw; line-height: 1.06; letter-spacing: -.02em; text-wrap: balance;
}
.wt-banner__body {
	margin: 2.4cqw 0 0; color: #eaf1fb; font-weight: 400;
	font-size: 1.85cqw; line-height: 1.5; max-width: 42cqw; text-wrap: pretty;
}
.wt-banner__price {
	margin: 2.2cqw 0 0; color: #eaf1fb; font-weight: 500;
	font-size: 1.95cqw; line-height: 1.3;
}
.wt-banner__price s      { opacity: .6; }
.wt-banner__price strong { font-weight: 800; color: #fff; }

.wt-banner__cta {
	display: inline-flex; align-items: center; gap: 1.1cqw; margin-top: 3.2cqw;
	background: #fff; color: var(--wt-blue, #1e3a6d); font-weight: 700; font-size: 1.95cqw;
	text-decoration: none; padding: 1.5cqw 2.9cqw; border-radius: 5px;
	box-shadow: 0 10px 24px rgba(6, 24, 70, .28);
}
.wt-banner__cta svg { width: 1.7cqw; height: 1.7cqw; flex: none; }

/* Mobiel (<600px): 2:1 wordt te laag → gestapeld (tekst boven, product onder). */
@media (max-width: 599px) {
	.wt-banner { aspect-ratio: auto; display: flex; flex-direction: column; }
	.wt-banner__glow { display: none; }

	.wt-banner__content {
		position: static; transform: none; width: 100%; order: 2;
		padding: 4px 22px 24px;
	}
	.wt-banner__kicker      { gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
	.wt-banner__kicker-name { font-size: 11px; }
	.wt-banner__tag         { font-size: 10px; padding: 3px 7px; }
	.wt-banner__title       { font-size: 24px; }
	.wt-banner__body        { font-size: 14px; margin-top: 12px; max-width: none; }
	.wt-banner__price       { font-size: 15px; margin-top: 12px; }
	.wt-banner__cta         { font-size: 15px; padding: 11px 20px; margin-top: 18px; gap: 8px; }
	.wt-banner__cta svg     { width: 14px; height: 14px; }

	.wt-banner__product {
		position: static; transform: none; order: 1;
		width: 78%; max-width: 300px; max-height: none;
		margin: 20px auto 2px; display: block;
	}
	.wt-banner__badge       { width: 64px; height: 64px; top: 42px; right: 14%; }
	.wt-banner__badge b     { font-size: 19px; }
	.wt-banner__badge span  { font-size: 9px; }
}

/* Hele banner is nu één link → reset link-styling + subtiele hover/focus. */
a.wt-banner { text-decoration: none; color: inherit; cursor: pointer; }
.wt-banner__cta { transition: box-shadow .15s ease, transform .15s ease; }
a.wt-banner:hover .wt-banner__cta { box-shadow: 0 14px 32px rgba(6, 24, 70, .34); transform: translateY(-1px); }
a.wt-banner:focus-visible { outline: 3px solid var(--wt-green, #00bb00); outline-offset: 3px; }