/**
 * home.css — de homepage.
 *
 * Hoort bij templates/front-page.php en inc/home.php. Gescoped op
 * `body.taw-home`, zodat er niets van weglekt zolang de oude Elementor-versie
 * nog naast de nieuwe bestaat.
 *
 * De wrapper volgt de gedeelde norm uit layout.css (--taw-wrap/--taw-gutter),
 * zodat de homepage op dezelfde rooilijn staat als de header, de footer en de
 * rest van de site.
 *
 * @package voltvast
 */

/*
 * GEEN eigen breedte of zijmarge hier: `get_header()` opent al een `.col-full`
 * met de gedeelde wrapper-norm (max-width + gutter uit layout.css). Zette deze
 * wrap daar nog eens 24px bovenop, dan stond de hele homepage 24px naar rechts
 * ten opzichte van de header en de footer.
 */
.taw-home .taw-home__wrap {
	width: 100%;
}

.taw-home .taw-home__sectie {
	margin: 0 0 3rem;
}

.taw-home .taw-home__kop {
	margin: 0 0 1.25rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--taw-ink-strong);
}

.taw-home .taw-home__kop--licht {
	color: #fff;
}

/* ------------------------------------------------------------------
 * 1. Hero
 * ------------------------------------------------------------------ */

.taw-home .taw-home__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin: 1.5rem 0 3rem;
}

@media (min-width: 1024px) {
	.taw-home .taw-home__hero {
		/* Verhouding uit de Elementor-versie: 846 / 455 binnen 1301. */
		grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
		/* 1rem, gelijk aan de tussenruimte van het bannerraster eronder. */
		gap: 1rem;
		/*
		 * `stretch`, niet `center`: het perzikvlak moet even hoog worden als de
		 * banner ernaast, zoals in de Elementor-versie. De inhoud in dat vlak
		 * wordt daarbinnen verticaal gecentreerd (zie hieronder).
		 */
		align-items: stretch;
	}

	/*
	 * De hoogte van de hele hero komt van deze banner; het perzikvlak ernaast
	 * rekt mee. De banner is 1440x822 (ongeveer 1,75:1) en heeft lucht boven en
	 * onder de tekst. Met 2:1 plus `cover` gaat die lucht eraf -- scheelt zo'n
	 * 60px hoogte terwijl de tekst links en het product rechts blijven staan.
	 *
	 * Alleen hier, niet op mobiel: daar staan de kolommen onder elkaar en is er
	 * niets om mee uit te lijnen. Bijsnijden zou de bannertekst daar alleen maar
	 * kleiner en onleesbaar maken (343x172 in plaats van 343x196).
	 */
	.taw-home .taw-home__hero-beeld img {
		height: 100%;
		aspect-ratio: 2 / 1;
		object-fit: cover;
		object-position: center;
	}
}

.taw-home .taw-home__hero-beeld img {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * Zelfde ronding als de productkaarten en de artikelkaarten (--taw-radius,
	 * 16px). In de Elementor-versie hadden de hero-blokken scherpe hoeken,
	 * terwijl alles eronder wel afgerond was.
	 */
	border-radius: var(--taw-radius);
}

/*
 * Het perzikkleurige vlak naast de banner. Kleur, padding en scherpe hoeken
 * komen 1-op-1 uit de Elementor-versie (#ffeae0, 40px, geen radius), zodat de
 * hero er na de omzetting hetzelfde uitziet.
 */
.taw-home .taw-home__hero-tekst {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2.5rem;
	background: #ffeae0;
	border-radius: var(--taw-radius);
}

/* In de hero is de kop 22px/800; de andere sectiekoppen zijn 24px/700. */
.taw-home .taw-home__hero-tekst .taw-home__kop {
	font-size: 1.375rem;
	font-weight: 800;
	color: #000;
}

.taw-home .taw-home__usps {
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.taw-home .taw-home__usps li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: 1rem;
	line-height: 1.45;
	color: #000;
}

/*
 * Gevulde cirkel met vinkje in de merkkleur. Dit is hetzelfde icoon als in de
 * Elementor-versie; het pad komt uit de SVG die daar stond. Als achtergrond
 * ingebed, dus geen extra request en geen icoonlettertype.
 */
.taw-home .taw-home__usps li::before {
	content: "";
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	margin-top: .16rem;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' fill-rule='evenodd'%3E%3Cpath fill='%23ff6610' d='M10.504 1.318a9.189 9.189 0 0 1 0 18.375 9.189 9.189 0 0 1 0-18.375zM8.596 13.49l-2.25-2.252a.986.986 0 0 1 0-1.392.988.988 0 0 1 1.393 0l1.585 1.587 3.945-3.945a.986.986 0 0 1 1.392 0 .987.987 0 0 1 0 1.392l-4.642 4.642a.987.987 0 0 1-1.423-.032z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

.taw-home .taw-home__beoordeling {
	display: block;
	max-width: 150px;
	height: auto;
}

/*
 * Mobiel: minder lucht in het perzikvlak, zodat "Daarom Thuisaccu Webshop" op
 * een regel past.
 *
 * De kop vraagt 313px op een regel. Bij 40px padding blijft er op een scherm van
 * 393px maar 281px over, dus brak hij. Met 24px padding is er 313px -- precies
 * genoeg op deze telefoon, maar op een smallere van 375px nog steeds 18px te
 * weinig. Daarom gaat de kop hier ook een maatje terug (22 -> 20px); dan past
 * het op beide met ruimte over.
 */
@media (max-width: 767px) {
	.taw-home .taw-home__hero-tekst {
		padding: 1.5rem;
	}

	.taw-home .taw-home__hero-tekst .taw-home__kop {
		font-size: 1.25rem;
	}
}

/* ------------------------------------------------------------------
 * 2. Categoriebanners
 * ------------------------------------------------------------------ */

.taw-home .taw-home__banners {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

.taw-home .taw-home__banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--taw-radius);
	transition: opacity .15s ease;
}

.taw-home .taw-home__banner:hover img {
	opacity: .9;
}

@media (max-width: 767px) {
	/*
	 * Op mobiel schuiven in plaats van stapelen: drie banners onder elkaar
	 * duwt de productrijen ver naar beneden.
	 */
	.taw-home .taw-home__banners {
		display: flex;
		gap: .75rem;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.taw-home .taw-home__banners::-webkit-scrollbar {
		display: none;
	}

	.taw-home .taw-home__banner {
		/*
		 * 78%, gelijk aan de productkaarten en de artikelkaarten. Stond op 82%
		 * en liep daardoor 13px verder door dan de rijen erboven en eronder,
		 * waardoor de schuifrijen niet op een lijn eindigden.
		 */
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}

/* ------------------------------------------------------------------
 * 5 + 6. Banden over de volle breedte
 * ------------------------------------------------------------------ */

/*
 * Banden lopen met hun achtergrond door tot de schermrand, terwijl de inhoud
 * op de rooilijn blijft staan.
 *
 * Dit gebeurt met een enorme box-shadow in plaats van negatieve marges met
 * `100vw`: die laatste telt de scrollbalk mee en levert op desktop een
 * horizontale scrollbalk op. De `clip-path` zorgt dat de schaduw alleen links
 * en rechts uitloopt en niet boven en onder.
 */
.taw-home .taw-home__band {
	padding: 3.5rem 0;
	margin: 0 0 3rem;
	clip-path: inset(0 -100vmax);
}

/*
 * Twee banden achter elkaar (nieuwsbrief -> reviews) hebben geen tussenruimte
 * nodig: de kleurwissel is de scheiding. De ondermarge van de eerste liet daar
 * een witte strook zien.
 */
.taw-home .taw-home__band:has(+ .taw-home__band) {
	margin-bottom: 0;
}

.taw-home .taw-home__band--donker,
.taw-home .taw-home__band--licht {
	box-shadow: 0 0 0 100vmax var(--taw-band-kleur);
}

.taw-home .taw-home__band--donker {
	--taw-band-kleur: #1d1d1d;
	background: var(--taw-band-kleur);
	color: #c3c7cc;
}

.taw-home .taw-home__band--licht {
	--taw-band-kleur: var(--taw-surface);
	background: var(--taw-band-kleur);
}

.taw-home .taw-home__band-inhoud {
	text-align: center;
}

.taw-home .taw-home__band-tekst {
	max-width: 46rem;
	margin: 0 auto 1.5rem;
	font-size: .9375rem;
	line-height: 1.6;
}

/* Het nieuwsbriefformulier staat gecentreerd in de donkere band. */
.taw-home .taw-home__band--donker .ta-nieuwsbrief {
	margin-left: auto;
	margin-right: auto;
}

/* ------------------------------------------------------------------
 * 7. Blogartikelen
 *
 * Zelfde opbouw als de kaarten op /nieuws/: beeld, tekstblok, en onderaan de
 * datum achter een scheidingslijn. Die pagina draait nog op Elementor; de maten
 * hieronder komen daarvandaan (titel 25/700, "Lees verder" 16/600 in de
 * merkkleur, datum 12px grijs, scheidingslijn #eaeaea).
 * ------------------------------------------------------------------ */

.taw-home .taw-home__artikelen {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.taw-home .taw-home__artikelen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.taw-home .taw-home__artikel {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--taw-line);
	border-radius: var(--taw-radius);
}

.taw-home .taw-home__artikel-beeld img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* Het tekstblok groeit mee, zodat de datum bij alle drie op dezelfde hoogte staat. */
.taw-home .taw-home__artikel-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 1.5rem;
}

.taw-home .taw-home__artikel-titel {
	margin: 0 0 1rem;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
}

.taw-home .taw-home__artikel-titel a {
	color: var(--taw-ink-strong);
	text-decoration: none;
}

.taw-home .taw-home__artikel-titel a:hover {
	text-decoration: underline;
}

.taw-home .taw-home__artikel-tekst {
	margin: 0 0 1.25rem;
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--taw-ink);
}

/* `margin-top: auto` duwt dit naar de onderkant van het tekstblok. */
.taw-home .taw-home__artikel-meer {
	margin-top: auto;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--taw-brand);
	text-decoration: none;
}

.taw-home .taw-home__artikel-meer:hover {
	text-decoration: underline;
}

.taw-home .taw-home__artikel-datum {
	margin: 0;
	padding: .9rem 1.5rem;
	font-size: .75rem;
	line-height: 1.4;
	color: var(--taw-muted);
	border-top: 1px solid var(--taw-line);
}

@media (max-width: 767px) {
	/*
	 * Mobiel schuiven, net als de productrijen en de rijen op de PDP: je ziet
	 * een stukje van de volgende kaart, in plaats van drie kaarten onder elkaar.
	 */
	.taw-home .taw-home__artikelen {
		display: flex;
		flex-wrap: nowrap;
		gap: .75rem;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		-webkit-overflow-scrolling: touch;
		padding-bottom: .5rem;
	}

	.taw-home .taw-home__artikel {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}

.taw-home .taw-home__meer {
	margin: 1.25rem 0 0;
}

.taw-home .taw-home__meer a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--taw-brand);
	text-decoration: none;
}

.taw-home .taw-home__meer a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
 * 8. Over ons
 * ------------------------------------------------------------------ */

/*
 * Volle breedte, op verzoek (Valentijn 23-08). Dat geeft ongeveer 168 tekens
 * per regel, ruim boven de 50-75 die prettig leest; de regelafstand hieronder
 * is daarom iets ruimer, zodat je oog bij het terugspringen naar links de juiste
 * regel makkelijker terugvindt.
 */
.taw-home .taw-home__over {
	max-width: none;
}

.taw-home .taw-home__over p {
	margin: 0 0 1.1rem;
	font-size: .9375rem;
	line-height: 1.8;
	color: var(--taw-ink);
}

.taw-home .taw-home__over h2 {
	margin: 2rem 0 .75rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--taw-ink-strong);
}

.taw-home .taw-home__over a {
	color: var(--taw-brand);
	text-decoration: underline;
}