/* ============================================================
   Vloerplus Design 2.0 — Home (Front Page)
   Scope: .jvz-home + .jvz-home-* descendants
   Loaded only on is_front_page() via vloerplus_home_enqueue_assets.
   ============================================================ */

.jvz-home,
.jvz-home * {
	box-sizing: border-box;
}

.jvz-home {
	background: var(--jvz-cream);
}

/* ---------- 1. HERO ---------------------------------------- */
/* Hero moet binnen de zichtbare viewport blijven (niet eronder uitkomen).
   `--jvz-header-h` is de gecombineerde hoogte van utility-bar + header
   (kan per viewport overschreven worden). 100dvh = dynamische viewport
   die rekening houdt met mobiele browser-chrome. */
:root { --jvz-header-h: 130px; }
body.admin-bar { --jvz-header-h: 162px; } /* + 32px WP admin bar */
@media (max-width: 782px) {
	body.admin-bar { --jvz-header-h: 176px; }
}

.jvz-home-hero {
	position: relative;
	height: calc(100dvh - var(--jvz-header-h));
	min-height: 480px;
	max-height: calc(100vh - var(--jvz-header-h));
	padding: 2.5rem 0 !important; /* override legacy `section { padding: 7.5rem 0 }` */
	background-color: var(--jvz-navy);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.jvz-home-hero__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 60px; /* vertical pad lives on the section (2.5rem); inner is horizontal-only */
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.jvz-home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--jvz-r-pill);
	height: 36px;
	padding: 4px 16px 4px 4px;
}

.jvz-home-hero__eyebrow-pill {
	background: var(--jvz-orange);
	color: #fff;
	font: var(--jvz-fw-bold) 11px/1 var(--jvz-font-display);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	height: 28px;
	padding: 0 12px;
	border-radius: var(--jvz-r-pill);
	display: inline-flex;
	align-items: center;
}

.jvz-home-hero__eyebrow-text {
	font-size: 13px;
	color: #fff;
}

.jvz-home-hero__title {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-medium);
	font-size: 62px;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: #fff;
	max-width: 1100px;
	margin: 28px 0 0;
}

.jvz-home-hero__sub {
	margin: 16px 0 0;
	font-size: 20px;
	line-height: 1.5;
	color: rgba(255, 255, 255, .95);
	max-width: 760px;
}

.jvz-home-hero__ctas {
	margin-top: 32px;
	display: inline-flex;
	gap: 12px;
}

.jvz-home-hero__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 56px;
	padding: 0 32px;
	font: var(--jvz-fw-bold) 16px/1 var(--jvz-font-display);
	border-radius: var(--jvz-r-pill);
	text-decoration: none;
	transition: background .15s, color .15s;
}

.jvz-home-hero__cta--primary {
	background: var(--jvz-blue);
	color: #fff;
	box-shadow: var(--jvz-shadow-cta);
}

.jvz-home-hero__cta--primary:hover {
	background: var(--jvz-blue-hover);
	color: #fff;
}

.jvz-home-hero__cta--ghost {
	background: transparent;
	color: #fff;
	border: 1.5px solid #fff;
}

.jvz-home-hero__cta--ghost:hover {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

.jvz-home-hero__trust {
	margin-top: 36px;
	display: inline-flex;
	align-items: stretch;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: var(--jvz-r-pill);
	box-shadow: var(--jvz-shadow-md);
	padding: 12px 24px;
}

.jvz-home-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--jvz-navy);
	font-size: 13px;
	padding: 0 24px;
	border-right: 1px solid var(--jvz-line);
}

.jvz-home-hero__trust-item:last-child {
	border-right: 0;
}

.jvz-home-hero__trust-item:first-child {
	padding-left: 0;
}

.jvz-home-hero__trust-item:last-child {
	padding-right: 0;
}

.jvz-home-hero__stars {
	display: inline-flex;
	color: var(--jvz-orange);
	gap: 2px;
}

.jvz-home-hero__trust-img {
	height: 18px;
	width: auto;
	display: block;
}

a.jvz-home-hero__trust-item {
	color: var(--jvz-navy);
	text-decoration: none;
	transition: opacity .15s;
}

a.jvz-home-hero__trust-item:hover {
	opacity: .85;
}

.jvz-home-hero__trust-num {
	font: var(--jvz-fw-bold) 14px/1 var(--jvz-font-display);
	color: var(--jvz-navy);
}

.jvz-home-hero__trust-meta {
	font-size: 12px;
	color: var(--jvz-fg-3);
}

.jvz-home-hero__trust-meta-em {
	font: var(--jvz-fw-bold) 12px/1 var(--jvz-font-display);
	color: var(--jvz-navy);
}

.jvz-home-hero__trust-icon {
	color: var(--jvz-orange);
	display: inline-flex;
	align-items: center;
}

/* ---------- 1b. USP GRID (below hero) --------------------- */
.jvz-home-usp {
	background: var(--jvz-cream);
	padding: 0 !important; /* override legacy `section { padding: 7.5rem 0 }` */
}

.jvz-home-usp__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 28px 60px; /* mockup `py-7 px-[60px]` */
}
.jvz-home-usp__track {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
/* Duplicate set is only used by the mobile marquee loop. Hidden on desktop. */
.jvz-home-usp__item.is-dupe { display: none; }

.jvz-home-usp__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px;
}

.jvz-home-usp__icon {
	color: var(--jvz-orange);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
}
.jvz-home-usp__icon svg {
	width: 22px;
	height: 22px;
}

.jvz-home-usp__label {
	font-family: var(--jvz-font-display);
	font-weight: var(--jvz-fw-bold);
	font-size: 14px;
	line-height: 1.2;
	color: var(--jvz-navy);
}

/* ---------- 2. CATEGORY CARDS ----------------------------- */
.jvz-home-cats {
	background: var(--jvz-cream);
	padding: 0 !important; /* mockup: section pad = 0; spacing comes from `__inner` py-12 (48px) */
}

.jvz-home-cats__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 48px 60px; /* mockup `py-12 px-[60px]` */
}

.jvz-home-cats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.jvz-home-cat {
	background: #fff;
	border: 1px solid var(--jvz-line);
	border-radius: var(--jvz-r-lg);
	box-shadow: var(--jvz-shadow-sm);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.jvz-home-cat__hero {
	position: relative;
	height: 180px;
	padding: 16px 24px 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-color: var(--jvz-navy-700);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}

/* Placeholder state when no image is set in ACF — shows a subtle dashed
   tile with an icon to make the missing-image affordance obvious. */
.jvz-home-cat__hero--placeholder {
	background:
		repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, rgba(255,255,255,0) 12px 24px),
		var(--jvz-navy);
}
.jvz-home-cat__hero-ph {
	position: absolute;
	inset: 16px;
	bottom: 80px; /* leave room for title + sub at the bottom of the hero */
	border: 1.5px dashed rgba(255,255,255,.25);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	color: rgba(255,255,255,.45);
	pointer-events: none;
}
.jvz-home-cat__hero-ph small {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .02em;
}
.jvz-home-cat__hero-ph svg {
	display: block;
}

.jvz-home-cat__title {
	font: var(--jvz-fw-bold) 28px/1.1 var(--jvz-font-display);
	color: #fff;
	margin: 0;
}

.jvz-home-cat__sub {
	margin: 6px 0 0;
	font-size: 13px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .9);
	max-width: 90%;
}

.jvz-home-cat__list {
	list-style: none;
	margin: 0;
	padding: 0 24px;
}

.jvz-home-cat__item {
	border-bottom: 1px solid color-mix(in srgb, var(--jvz-line) 60%, transparent);
}

.jvz-home-cat__item:last-child {
	border-bottom: 0;
}

.jvz-home-cat__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	font: var(--jvz-fw-bold) 15px/1 var(--jvz-font-display);
	color: var(--jvz-navy);
	text-decoration: none;
	transition: color .15s;
}

.jvz-home-cat__link:hover {
	color: var(--jvz-blue);
}

.jvz-home-cat__link.is-accent {
	color: var(--jvz-orange);
}

.jvz-home-cat__link svg {
	color: var(--jvz-fg-3);
	transition: color .15s;
}

.jvz-home-cat__link:hover svg {
	color: var(--jvz-navy);
}

.jvz-home-cat__foot {
	margin-top: auto;
	padding: 20px 24px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.jvz-home-cat__cta {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 28px;
	background: var(--jvz-blue);
	color: #fff;
	border-radius: var(--jvz-r-pill);
	font: var(--jvz-fw-bold) 14px/1 var(--jvz-font-display);
	text-decoration: none;
	box-shadow: var(--jvz-shadow-cta);
	transition: background .15s, color .15s;
}

.jvz-home-cat__cta:hover {
	background: var(--jvz-blue-hover);
	color: #fff;
}

.jvz-home-cat__info {
	font-size: 13px;
	color: var(--jvz-navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.jvz-home-cat__info:hover {
	color: var(--jvz-blue);
}

/* ---------- 3. SAMPLE CTA BANNER -------------------------- */
.jvz-home-sample {
	background: var(--jvz-cream);
	padding: 0 !important; /* mockup: section pad = 0; inner uses `pb-12` only (touches cards above) */
}

.jvz-home-sample__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 60px 48px; /* mockup `pb-12 px-[60px]` — no top so sample sits flush against cards */
}

.jvz-home-sample__card {
	background: var(--jvz-navy);
	border-radius: var(--jvz-r-lg);
	padding: 20px 24px;
	display: flex;
	align-items: center;
	gap: 24px;
}

.jvz-home-sample__thumb {
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	border-radius: 12px;
	background-color: var(--jvz-cream-2);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	border: 1px solid rgba(255, 255, 255, .1);
}

.jvz-home-sample__thumb--placeholder {
	background: linear-gradient(135deg, var(--jvz-cream) 0%, var(--jvz-cream-2) 100%);
}

.jvz-home-sample__text {
	flex: 1 1 auto;
	min-width: 0;
}

.jvz-home-sample__title {
	font: var(--jvz-fw-bold) 22px/1.2 var(--jvz-font-display);
	color: #fff;
	margin: 0;
}

.jvz-home-sample__sub {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .7);
}

.jvz-home-sample__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 48px;
	padding: 0 28px;
	background: var(--jvz-blue);
	color: #fff;
	border-radius: var(--jvz-r-pill);
	font: var(--jvz-fw-bold) 14px/1 var(--jvz-font-display);
	text-decoration: none;
	box-shadow: var(--jvz-shadow-cta);
	white-space: nowrap;
	transition: background .15s, color .15s;
}

.jvz-home-sample__cta:hover {
	background: var(--jvz-blue-hover);
	color: #fff;
}

/* ---------- Force SVG dimensions in home buttons (theme overrides svg width) --- */
.jvz-home-hero__cta svg,
.jvz-home-cat__link svg,
.jvz-home-sample__cta svg {
	width: 16px !important;
	height: 16px !important;
	display: block;
	flex: 0 0 auto;
}

.jvz-home-hero__cta svg {
	width: 18px !important;
	height: 18px !important;
}

.jvz-home-hero__trust-icon svg {
	width: 18px !important;
	height: 18px !important;
}

.jvz-home-hero__stars svg {
	width: 14px !important;
	height: 14px !important;
}

/* ---------- 4. Legacy below-fold content wrapper ----------- */
.jvz-home__legacy-content {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 60px;
}

/* The legacy template-parts wrap their content in a `<div class="inner">`
   that adds its own 24px horizontal padding on top of the wrapper above —
   pulling legacy text 24px in from the new sections. Zero it out so the
   content edges line up flush with the new Design 2.0 sections. */
.jvz-home__legacy-content section > .inner,
.jvz-home__legacy-content section > .container > .inner {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* "Waarom kies je voor ons?" — keep the OG card styling (white bg, border,
   shadow, icon position) but dial down the typography so it doesn't shout
   on the home page. Other pages where this section appears stay untouched. */
.jvz-home__legacy-content section.icon-columns .column-titles h2 {
	/* Size left to the section's per-ID inline rule (2.5rem desktop / 1.25rem
	   ≤1279px) so it shrinks alongside its sibling section headings. We just
	   align the weight to match "Kies jouw ideale vloer". */
	font-weight: var(--jvz-fw-medium) !important;
	line-height: 1.2;
	margin: 0 0 32px;
	color: var(--jvz-navy);
}
.jvz-home__legacy-content section.icon-columns .column-title {
	font: var(--jvz-fw-bold) 16px/1.3 var(--jvz-font-display) !important;
	color: var(--jvz-navy) !important;
	margin: 0 0 8px !important;
}
.jvz-home__legacy-content section.icon-columns .column-content,
.jvz-home__legacy-content section.icon-columns .column-content p {
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--jvz-fg-2) !important;
	margin: 0 !important;
}
.jvz-home__legacy-content section.icon-columns .more-info-link {
	margin-top: 10px;
}
.jvz-home__legacy-content section.icon-columns .more-info-link a {
	font-size: 13px;
	color: var(--jvz-blue);
}

/* ---------- 5. Responsive --------------------------------- */
@media (max-width: 1100px) {
	.jvz-home-hero__title { font-size: 48px; }
	.jvz-home-cats__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
	/* Drop the desktop "fill viewport" behavior on mobile. Let the hero grow
	   to fit its content (eyebrow, title, sub, CTAs, trust strip) instead of
	   forcing flex centering inside a fixed JS-set height — which clipped the
	   trust strip on tall content and added empty space on short content. */
	.jvz-home-hero {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible;
	}
	.jvz-home-hero__inner {
		height: auto;
		justify-content: flex-start;
		padding: 0 16px; /* vertical pad lives on the section; inner is horizontal-only */
	}
	.jvz-home-hero__title {
		font-size: 32px;
	}
	.jvz-home-hero__sub {
		font-size: 16px;
	}
	.jvz-home-hero__ctas {
		flex-direction: column;
		gap: 10px;
		width: 100%;
	}
	.jvz-home-hero__cta {
		width: 100%;
		justify-content: center;
	}
	/* Eyebrow on mobile: drop the wrapping pill capsule so the orange tag sits
	   above the price-line on its own row. The fixed-height capsule + long
	   wrapping text always read awkwardly otherwise. */
	.jvz-home-hero__eyebrow {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		height: auto;
		padding: 0;
		background: transparent;
		backdrop-filter: none;
		border: 0;
		border-radius: 0;
	}
	.jvz-home-hero__eyebrow-text {
		font-size: 13px;
		line-height: 1.3;
		text-align: center;
	}

	/* Trust strip: stack each item internally too — rating image on its own
	   row above the score + meta line. Stops the SVG fighting with the long
	   "uit 10 op basis van 957 beoordelingen" text in a 358px-wide column. */
	.jvz-home-hero__trust {
		flex-direction: column;
		align-items: stretch;
		border-radius: var(--jvz-r-lg);
		padding: 14px 18px;
		gap: 12px;
		width: 100%;
	}
	.jvz-home-hero__trust-item {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 4px;
		padding: 0 !important;
		border-right: 0 !important;
	}
	.jvz-home-hero__trust-item:not(:last-child) {
		padding-bottom: 12px !important;
		border-bottom: 1px solid var(--jvz-line);
	}
	.jvz-home-hero__trust-img {
		height: 22px;
	}
	.jvz-home-cats__inner {
		padding: 2.5rem 16px; /* 40px top/bottom — minimum breathing for stacked sections */
	}
	/* USP on mobile: same marquee pattern as the top USP-bar. Items + a dupe set
	   are 200% wide; animation translates -50% for a seamless loop. */
	.jvz-home-usp__inner {
		overflow: hidden;
		padding: 20px 0;
	}
	.jvz-home-usp__track {
		display: flex;
		width: max-content;
		gap: 32px;
		grid-template-columns: none;
		animation: jvz-home-usp-marquee 36s linear infinite;
	}
	.jvz-home-usp__item {
		padding: 4px 0;
	}
	.jvz-home-usp__item.is-dupe { display: inline-flex; }
	.jvz-home-usp__label {
		font-size: 13px;
	}
	@keyframes jvz-home-usp-marquee {
		from { transform: translateX(0); }
		to   { transform: translateX(-50%); }
	}
	@media (prefers-reduced-motion: reduce) {
		.jvz-home-usp__track {
			animation: none;
			transform: none;
			flex-direction: column;
			gap: 12px;
		}
		.jvz-home-usp__item.is-dupe { display: none; }
	}
	.jvz-home-sample__inner {
		padding: 0 16px 2.5rem; /* match desktop: flush against cards above, only bottom padding */
	}
	/* Legacy sections each carry `section { padding: 5rem 0 }` (= 80px). On mobile
	   that's too generous between stacked content; halve it without touching the
	   shared rule used elsewhere on the site. */
	.jvz-home__legacy-content section {
		padding-bottom: 40px;
	}
	.jvz-home-cats__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.jvz-home-sample__card {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.jvz-home-sample__thumb {
		align-self: center;
	}
	.jvz-home-sample__cta {
		justify-content: center;
	}
	.jvz-home__legacy-content {
		padding: 0 16px;
	}
}