/*
Homepage snap scroll — section-by-section vertical presentation.
Desktop only (≥1024px). Mobile & reduced-motion keep native scroll.
Only applies on the static front page (.vp-front-page).
*/

@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {

	:root {
		--vp-header-h: 85px;
	}

	/* The scroll container: html element acts as the snapping container.
	   scroll-padding-top is the ONLY header offset — sections must not also
	   set scroll-margin-top, or the two stack and every section snaps
	   2×header-height below the top (the "too much top space" bug). */
	html.vp-snap-mode {
		scroll-snap-type: y mandatory;
		scroll-behavior: smooth;
		scroll-padding-top: var(--vp-header-h);
	}

	/* Hero sits below topbar (38px) + header (84px).
	   Height matches first-screen viewport perfectly. */
	html.vp-snap-mode .vp-front-page .vp-hero {
		min-height: calc(100vh - 122px);
		height: calc(100vh - 122px);
		scroll-snap-align: start;
		scroll-margin-top: 0;
	}

	/* Each section snaps start aligned, offset by header height.
	   Vertically centers section content in the available viewport.
	   No scroll-margin-top here — the container's scroll-padding-top
	   already accounts for the sticky header (see above). */
	html.vp-snap-mode .vp-front-page .vp-main > section {
		min-height: calc(100vh - var(--vp-header-h));
		display: flex;
		flex-direction: column;
		justify-content: center;
		box-sizing: border-box;
		padding-block: clamp(28px, 4vh, 56px);
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}

	/* Oversize sections (categories 7-card grid, featured products 8-card grid,
	   any section taller than the viewport) get .vp-snap-free from JS after
	   measuring. They KEEP scroll-snap-align: start on purpose: under
	   y mandatory the spec's covering rule allows free scrolling while a snap
	   area larger than the snapport is on screen, and the boundaries still
	   snap. Setting scroll-snap-align: none here would trap scrolling —
	   verified in Chromium (wheel input can never come to rest inside the
	   section and gets pulled back to a neighbouring snap point). */
	html.vp-snap-mode .vp-front-page .vp-main > section.vp-snap-free {
		min-height: auto;
		display: block;
		padding-block: 48px;
	}

	/* Container inside section fills full width for grid/flex layout */
	html.vp-snap-mode .vp-front-page .vp-main > section > .vp-container {
		width: 100%;
	}

	/* Spacing refinement inside snap sections: compact heads to prevent overflow */
	html.vp-snap-mode .vp-section__head {
		margin-bottom: clamp(20px, 3vh, 36px);
	}

	/* Grids gap refinement for snap mode viewport fit */
	html.vp-snap-mode .vp-why__grid {
		gap: clamp(20px, 2.5vw, 44px);
	}
	html.vp-snap-mode .vp-why__icon {
		margin-bottom: clamp(12px, 1.8vh, 20px);
	}
	html.vp-snap-mode .vp-projects__grid,
	html.vp-snap-mode .vp-reviews__grid {
		gap: clamp(16px, 1.8vw, 24px);
	}
	html.vp-snap-mode .vp-cats__grid {
		gap: clamp(16px, 2vw, 28px);
	}
	html.vp-snap-mode .vp-cat-card__media {
		height: clamp(160px, 20vh, 220px);
	}
	html.vp-snap-mode .vp-prod-card__media {
		height: clamp(180px, 22vh, 250px);
	}
	html.vp-snap-mode .vp-news__grid {
		gap: clamp(16px, 2vw, 28px);
	}
	html.vp-snap-mode .vp-news-card__media {
		height: clamp(140px, 18vh, 200px);
	}
	html.vp-snap-mode .vp-intro__figure img,
	html.vp-snap-mode .vp-intro__figure .vp-pattern {
		height: clamp(360px, 50vh, 480px);
	}

	/* Video section frame height */
	html.vp-snap-mode .vp-video__frame {
		height: clamp(380px, 55vh, 520px);
	}

	/* Map section height */
	html.vp-snap-mode .vp-map__frame {
		height: clamp(400px, 60vh, 560px);
	}

	/* Section indicator dots — fixed right edge, vertical carousel nav.
	   Faint at rest so they never fight the content; full opacity on hover. */
	.vp-snap-dots {
		position: fixed;
		right: 22px;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		gap: 10px;
		z-index: 9998;
		list-style: none;
		margin: 0;
		padding: 12px 8px;
		background: rgba(15, 42, 67, 0.55);
		border-radius: 22px;
		backdrop-filter: blur(6px);
		opacity: 0.6;
		transition: opacity 0.25s;
	}

	.vp-snap-dots:hover { opacity: 1; }

	.vp-snap-dots button {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		border: 1px solid rgba(255, 255, 255, 0.6);
		background: transparent;
		cursor: pointer;
		padding: 0;
		transition: background 0.25s, transform 0.25s;
	}

	.vp-snap-dots button:hover {
		background: rgba(255, 255, 255, 0.4);
	}

	.vp-snap-dots button.vp-snap-active {
		background: var(--vp-accent, #E8A33D);
		border-color: var(--vp-accent, #E8A33D);
		transform: scale(1.35);
	}

	/* Progress hairline at the very top */
	.vp-snap-progress {
		position: fixed;
		top: 0;
		left: 0;
		height: 2px;
		background: var(--vp-accent, #E8A33D);
		z-index: 9999;
		transition: width 0.1s linear;
	}
}

/* Hide dots and progress when snap is not active */
@media (prefers-reduced-motion: reduce), (max-width: 1023.98px) {
	.vp-snap-dots,
	.vp-snap-progress {
		display: none !important;
	}
}