/* ============================================================
   Instroi — homepage zone (front-page.php).
   Figma frame 86:439. Mobile-first; tokens live in main.css.
   Sections: .home-hero, .home-once (+ .home-tiktok, .home-benefits),
   .home-cost, .home-why, .home-consult, .home-pf, .home-faq,
   .home-srv, .home-seo. Shared: .u-slashline.
   ============================================================ */

/* Shared: text line with the blue slash marker (Figma 106:987)
   ------------------------------------------------------------ */
.u-slashline {
	position: relative;
	margin: 0;
	padding-left: 25px;
	font-size: var(--fs-p3);
	line-height: 1.4;
}
.u-slashline::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.2em;
	width: 9px;
	height: 1.1em;
	background: var(--c-primary);
	transform: skewX(-15deg);
}

/* 1. Hero — Figma 86:540
   ------------------------------------------------------------ */
.home-hero {
	position: relative;
	display: flex;
	align-items: stretch;
	min-height: 560px;
	color: var(--c-white);
	background: var(--c-dark);
	overflow: hidden;
}

.home-hero__media { position: absolute; inset: 0; }
.home-hero__bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
.home-hero__tint {
	position: absolute;
	inset: 0;
	/* Light overall darkening only — the left scrim (below) carries text
	   contrast so the worker photo on the right stays visible (Figma). */
	background: rgba(20, 25, 35, 0.28);
}

.home-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	min-height: inherit;
	padding-block: clamp(40px, 7vw, 96px);
}

/* Figma 106:938 — content is a left column: badge (top) / H1 + CTA (bottom). */
.home-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(28px, 5vw, 64px);
	width: 100%;
	max-width: 640px;
}

.home-hero__badge { color: var(--c-white); }

/* H1 + CTA stay grouped (Figma 106:1005, gap 40). */
.home-hero__lead {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(28px, 4vw, 40px);
	width: 100%;
}

.home-hero__title {
	margin: 0;
	/* Slightly steeper fluid curve than --fs-h1 so the longest word
	   («пінополіуретаном») fits without mid-word breaks at 360-390px. */
	font-size: clamp(2.125rem, 1.2rem + 4vw, 4rem);
	line-height: 1.05;
	color: var(--c-white);
	overflow-wrap: anywhere;
}

/* Mobile/tablet readability scrim: the desktop left-scrim (below) only runs
   ≥960, so give phones a bottom-heavy gradient under the H1 + CTA. */
@media (max-width: 959px) {
	.home-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(10, 15, 25, 0.55) 0%, rgba(10, 15, 25, 0.22) 55%, rgba(10, 15, 25, 0.04) 100%);
	}
	/* Badge stays at the top; the H1 + CTA drop to the lower third of the
	   hero (over the worker), so the button sits low on mobile too. */
	.home-hero__content { flex: 1; justify-content: space-between; }
}

@media (min-width: 960px) {
	.home-hero { min-height: 748px; }
	.home-hero__inner { gap: 48px; }
	/* Push badge to the top and the H1+CTA block toward the lower third,
	   matching the Figma composition over the worker photo. */
	.home-hero__content {
		flex: 1;
		justify-content: space-between;
		max-width: 720px;
	}
	/* Left readability scrim on wide screens (Figma 106:938): dark under the
	   text column, fading to clear over the worker photo on the right. */
	.home-hero__media::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to right, rgba(10, 15, 25, 0.8) 0%, rgba(10, 15, 25, 0.45) 30%, rgba(10, 15, 25, 0) 58%);
	}
}

/* 2. «Один раз зробив і забув назавжди» — Figma 86:677
   ------------------------------------------------------------ */
.home-once__head {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: var(--gap-lg);
}
.home-once__title { margin: 0; max-width: 14em; }
.home-once__subtitle { color: var(--c-text); }

@media (min-width: 768px) {
	.home-once__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--gap-lg);
	}
	.home-once__subtitle { flex: 0 1 50%; }
}

/* No-JS / pre-mount fallback for both Splide sliders:
   keep slides reachable with native horizontal scroll. */
.splide:not(.is-active) .splide__track { overflow-x: auto; }
.splide:not(.is-active) .splide__list { display: flex; gap: 10px; }

/* TikTok strip (Figma 332:415 / 239:333) — Splide, drag-free, autoWidth.
   Clean poster cards (410×600 in Figma, square corners): cover photo +
   one blue tag bottom-left (Figma 222:374) with ▶ + duration. No TikTok
   chrome inline — the official embed opens in the lightbox on click. */
.home-tiktok { margin-bottom: var(--gap-lg); }

.home-tiktok__item { width: min(325px, 82vw); }

.home-tiktok__card {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 410 / 600;
	padding: 0;
	border: 0;
	background: var(--c-dark); /* neutral dark placeholder when no poster */
	overflow: hidden;
	cursor: pointer;
}
.home-tiktok__card:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
.home-tiktok__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition);
}
/* Hover: subtle zoom + darken so the card reads as clickable. */
.home-tiktok__card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(31, 51, 70, 0);
	transition: background var(--transition);
}
.home-tiktok__card:hover .home-tiktok__poster,
.home-tiktok__card:focus-visible .home-tiktok__poster { transform: scale(1.04); }
.home-tiktok__card:hover::after,
.home-tiktok__card:focus-visible::after { background: rgba(31, 51, 70, 0.18); }
@media (prefers-reduced-motion: reduce) {
	.home-tiktok__card:hover .home-tiktok__poster,
	.home-tiktok__card:focus-visible .home-tiktok__poster { transform: none; }
}

/* Blue tag flush with the bottom-left corner — Figma 222:374
   (410-card: 83px tall, pad 20/30, gap 20, ▶ 36×43, text 24 bold;
   scaled ~0.79 to our 325px card). */
.home-tiktok__tag {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	color: var(--c-white);
	background: rgba(19, 135, 229, 0.7);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	transition: background var(--transition);
}
.home-tiktok__card:hover .home-tiktok__tag,
.home-tiktok__card:focus-visible .home-tiktok__tag { background: var(--c-primary); }
.home-tiktok__play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.home-tiktok__play svg {
	width: 28px;
	height: 34px;
	display: block;
}
.home-tiktok__dur {
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	white-space: nowrap;
}

/* Lightbox — official TikTok embed plays ONLY here (chrome allowed). */
.home-tiktok__modal {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 16px;
}
.home-tiktok__modal.is-open { display: flex; }
.home-tiktok__modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(31, 51, 70, 0.7); /* same veil as the lead-form modal */
}
/* Matches the lead-form modal (.c-modal__dialog): rounded, lifted, and
   clipped — `overflow: hidden` is what keeps the player edge-to-edge with
   no scrollbar of its own. Height follows the 9:16 vertical-video ratio
   so the frame never exceeds what the clip actually needs. */
/* 340×750 is the natural size of TikTok's embed at this width: the 9:16
   player plus the caption bar underneath. Sizing the dialog to the whole
   thing (rather than to the video alone) is what removes both the inner
   scrollbar and the half-cut strip along the bottom edge. */
.home-tiktok__modal-dialog {
	position: relative;
	z-index: 1;
	width: min(340px, 92vw);
	max-width: 100%;
	height: min(750px, calc(100dvh - 64px));
	overflow: hidden;
	background: var(--c-dark);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-modal);
}
.home-tiktok__modal-dialog iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	background: var(--c-dark);
}
/* Inside the dialog, over the player: outside it the button slid under the
   sticky header on short viewports and became unclickable. */
.home-tiktok__modal-close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	color: var(--c-white);
	background: rgba(31, 51, 70, 0.65);
	cursor: pointer;
}
.home-tiktok__modal-close:hover { background: rgba(31, 51, 70, 0.85); }
.home-tiktok__modal-close:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
@media (max-width: 480px), (max-height: 660px) {
	/* Phones / short screens: player takes the full height, so the ratio and
	   the rounded corners are dropped — a full-bleed sheet reads better than
	   a card floating on a 4px margin. */
	.home-tiktok__modal { padding: 0; }
	.home-tiktok__modal-dialog {
		width: min(400px, 100vw);
		height: 100dvh;
		border-radius: 0;
	}
	.home-tiktok__modal-close {
		top: 8px;
		right: 8px;
		z-index: 1;
		background: rgba(31, 51, 70, 0.6);
	}
}

.home-tiktok__bottom {
	display: flex;
	align-items: center;
	gap: clamp(24px, 8vw, 120px);
	margin-top: 24px;
}
.home-tiktok__progress {
	position: relative;
	flex: 1 1 auto;
	height: 10px;
	/* Bigger invisible hit-area so it is easy to grab (tap target ≥ track). */
	padding-block: 17px;
	background-clip: content-box;
	background-color: var(--c-off-white);
	cursor: pointer;
	touch-action: none;
}
.home-tiktok__progress:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: 3px;
}
.home-tiktok__progress.is-grabbing { cursor: grabbing; }
.home-tiktok__progress-fill {
	display: block;
	width: 15%;
	height: 10px;
	background: var(--c-primary-light);
	transition: width 0.12s linear;
}
/* No smoothing while the user drags the bar or during reduced-motion. */
.home-tiktok__progress.is-grabbing .home-tiktok__progress-fill { transition: none; }
@media (prefers-reduced-motion: reduce) {
	.home-tiktok__progress-fill { transition: none; }
}
.home-tiktok__more { flex: 0 0 auto; }

@media (max-width: 640px) {
	.home-tiktok__progress { display: none; } /* Figma note: no progress strip on mobile */
	.home-tiktok__bottom { justify-content: center; }
	.home-tiktok--hide-mobile { display: none; }
}

/* Benefits 2×2 with dividers (Figma 86:748) */
.home-benefits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
}
.home-benefits__item {
	padding: clamp(28px, 5vw, 60px);
	border-top: 1px solid var(--c-gray-100);
}
.home-benefits__item:first-child { border-top: 0; }
.home-benefits__icon { display: block; margin-bottom: clamp(20px, 3vw, 40px); }
.home-benefits__icon img { width: clamp(64px, 8vw, 96px); height: auto; }
.home-benefits__title { margin: 0 0 16px; color: var(--c-black); }
.home-benefits__text { margin: 0; font-size: var(--fs-p2); line-height: 1.4; }

@media (min-width: 768px) {
	.home-benefits { grid-template-columns: 1fr 1fr; }
	.home-benefits__item:nth-child(2) { border-top: 0; }
	.home-benefits__item:nth-child(2n) { border-left: 1px solid var(--c-gray-100); }
}

/* 3. «Вартість утеплення ППУ під ключ» — Figma 87:688 (dark)
   ------------------------------------------------------------ */
.home-cost__title { margin-bottom: var(--gap-lg); }

.home-cost__carousel { margin-bottom: var(--gap-lg); }

/* Autoplay pagination dots — dark section, so light dots / primary active. */
.home-cost__carousel .splide__pagination {
	position: static;
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
	padding: 0;
}
.home-cost__carousel .splide__pagination__page {
	width: 9px;
	height: 9px;
	margin: 0;
	background: rgba(255, 255, 255, 0.35);
	border: 0;
	border-radius: 50%;
	opacity: 1;
	transition: background var(--transition), transform var(--transition);
}
.home-cost__carousel .splide__pagination__page:hover { background: rgba(255, 255, 255, 0.6); }
.home-cost__carousel .splide__pagination__page.is-active {
	background: var(--c-primary);
	transform: scale(1.25);
}

/* Desktop/tablet has prev/next arrows — dots only help on 1-per-view mobile. */
@media (min-width: 700px) {
	.home-cost__carousel .splide__pagination { display: none; }
}

.home-cost__card {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 3vw, 40px);
}
/* Pre-mount fallback width (Splide overrides it once mounted). */
.splide:not(.is-active) .home-cost__card { flex: 0 0 min(510px, 88vw); }
.home-cost__card-title { margin: 0; color: var(--c-gray-100); }

.home-cost__figure {
	position: relative;
	margin: 0;
	border: clamp(12px, 2vw, 20px) solid var(--c-dark-muted);
	overflow: hidden;
}
.home-cost__img {
	display: block;
	width: 100%;
	height: clamp(240px, 34vw, 400px);
	object-fit: cover;
}
.home-cost__price {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 12px 20px;
	background: var(--c-dark-muted);
	color: var(--c-gray-100);
	font-size: var(--fs-h4);
	font-weight: 700;
	line-height: 1.2;
}
.home-cost__desc { margin: 0; font-size: var(--fs-p2); line-height: 1.4; }

/* Figma arrows 92:293 / 92:290 — restyle Splide's arrow buttons. */
.home-cost__arrow.splide__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 120px;
	padding: 0;
	color: var(--c-primary);
	background: rgba(255, 255, 255, 0.06);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: color var(--transition), background var(--transition), opacity var(--transition);
}
.home-cost__arrow.splide__arrow:hover { color: var(--c-primary-light); background: rgba(255, 255, 255, 0.12); }
.home-cost__arrow.splide__arrow:disabled { opacity: 0.3; cursor: default; }
.home-cost__arrow.splide__arrow--prev { left: -12px; }
.home-cost__arrow.splide__arrow--next { right: -12px; }

@media (min-width: 1100px) {
	.home-cost__arrow.splide__arrow { display: inline-flex; }
}
/* Push the arrows outside the track once the viewport allows it. */
@media (min-width: 1380px) {
	.home-cost__arrow.splide__arrow--prev { left: -78px; }
	.home-cost__arrow.splide__arrow--next { right: -78px; }
	.home-cost__arrow.splide__arrow { background: rgba(255, 255, 255, 0.06); }
}

/* Cube CTA band (Figma 87:784) */
.home-cost__cta {
	display: flex;
	flex-direction: column;
	background: var(--c-dark-muted);
}
.home-cost__cta-media {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 3vw, 24px);
}
.home-cost__cta-media img {
	width: clamp(180px, 30vw, 320px);
	height: auto;
}
.home-cost__cta-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding: clamp(28px, 5vw, 60px);
}
/* overflow-wrap:anywhere lowers min-content width so «пінополіуретаном?»
   cannot push the CTA wider than the viewport on narrow phones (<380px). */
.home-cost__cta-title { margin: 0; color: var(--c-gray-100); overflow-wrap: anywhere; }

@media (min-width: 768px) {
	.home-cost__cta { flex-direction: row; align-items: center; }
	.home-cost__cta-media { flex: 1 1 42%; }
	.home-cost__cta-body { flex: 1 1 58%; padding-left: 0; }
}

/* 4. «Чому варто обрати Інстрой?» — Figma 87:528
   ------------------------------------------------------------ */
.home-why__title { margin-bottom: var(--gap-lg); }

.home-why__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-bottom: var(--gap-lg);
}

.home-why__card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 220px;
	background: var(--c-gray-50);
	border-radius: 20px;
	overflow: hidden;
}
.home-why__card-head { padding: clamp(24px, 3.5vw, 40px); }
.home-why__big {
	margin: 0 0 5px;
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1;
	color: var(--c-dark-muted);
}
.home-why__small {
	margin: 0;
	font-size: var(--fs-p2);
	line-height: 1.4;
	color: var(--c-text);
}
.home-why__card-media {
	flex: 1 1 auto;
	min-height: 160px;
	overflow: hidden;
}
.home-why__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center bottom;
}

/* Card 2 — brigade photo hugs the bottom-left (Figma 87:661) */
.home-why__card--2 .home-why__card-media { margin: 0 auto 0 0; max-width: 320px; }
.home-why__card--2 .home-why__img { object-position: left bottom; }
.home-why__card--2 .home-why__card-head { display: flex; gap: 20px; align-items: center; }
.home-why__card--2 .home-why__small { max-width: 10em; }

/* Card 3 — dark accent with the yellow year badge (Figma 87:599) */
.home-why__card--3 { background: var(--c-dark-muted); }
.home-why__card--3 .home-why__big { color: var(--c-gray-50); }
.home-why__card--3 .home-why__small { color: var(--c-gray-50); }
.home-why__year-badge {
	position: absolute;
	left: clamp(24px, 3.5vw, 40px);
	bottom: clamp(24px, 3.5vw, 40px);
	padding: 2px 10px;
	background: var(--c-accent);
	color: var(--c-dark-muted);
	font-size: var(--fs-p2);
	line-height: 1.4;
	border-radius: var(--radius-btn);
}
.home-why__card--3 { padding-bottom: 72px; }

@media (min-width: 768px) {
	.home-why__grid {
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(2, minmax(280px, auto));
	}
	.home-why__card--1 { grid-column: 1 / 3; grid-row: 1; }
	.home-why__card--2 { grid-column: 1 / 2; grid-row: 2; }
	.home-why__card--3 { grid-column: 2 / 3; grid-row: 2; }
	.home-why__card--4 { grid-column: 3 / 5; grid-row: 1 / 3; }
	.home-why__card--2 .home-why__card-head { flex-direction: column; align-items: flex-start; gap: 5px; }
}

.home-why__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
}
.home-why__note { color: var(--c-text); }

@media (min-width: 768px) {
	.home-why__foot {
		width: 50%;
		margin-left: auto;
	}
}

/* 5. Консультація — Figma 87:448 (dark)
   ------------------------------------------------------------ */
.home-consult__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(32px, 5vw, 60px);
}
.home-consult__media { flex: 0 1 50%; }
.home-consult__img {
	display: block;
	width: 100%;
	height: clamp(240px, 32vw, 400px);
	object-fit: cover;
	clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 100%);
}
.home-consult__body {
	flex: 1 1 50%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.home-consult__title { margin: 0; }
.home-consult__text { margin: 0; font-size: var(--fs-p2); line-height: 1.4; max-width: 34em; }
.home-consult__note { margin-top: 12px; color: var(--c-on-dark); }

@media (min-width: 960px) {
	.home-consult__inner { flex-direction: row; align-items: center; }
}

/* 6. Портфоліо — Figma 95:625
   ------------------------------------------------------------ */
.home-pf__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 25px;
	margin-bottom: var(--gap-lg);
}
.home-pf__title { margin: 0; }

/* .home-pf__grid / .home-pf__card / __overlay / __arrow … moved to
   cards.css (shared with /gallery/ listings). Loaded as a dependency. */

/* 7. FAQ — Figma 106:388
   ------------------------------------------------------------ */
.home-faq__title { margin-bottom: var(--gap-lg); }

/* .home-faq__item / __trigger / __icon / __panel / __answer moved to
   cards.css (shared with /faq/ listings). Loaded as a dependency. */

/* 8. Популярні послуги — Figma 95:380 (dark)
   ------------------------------------------------------------ */
.home-srv__title { margin-bottom: clamp(32px, 5vw, 60px); }

.home-srv__grid {
	list-style: none;
	margin: 0 0 clamp(32px, 5vw, 60px);
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(24px, 4vw, 40px);
}

.home-srv__link {
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-decoration: none;
}
.home-srv__media {
	display: block;
	border: 10px solid var(--c-dark-muted);
	overflow: hidden;
}
.home-srv__img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.home-srv__link:hover .home-srv__img { transform: scale(1.05); }
.home-srv__name {
	font-size: var(--fs-p2);
	font-weight: 700;
	line-height: 1.4;
	color: var(--c-gray-100);
	transition: color var(--transition);
}
.home-srv__link:hover .home-srv__name { color: var(--c-white); }

@media (min-width: 640px) {
	.home-srv__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.home-srv__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Specificity note: must beat `.section--dark a:not(.c-btn)` from main.css. */
.section--dark .home-srv__all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	width: 100%;
	padding: 16px 24px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-btn);
	color: var(--c-white);
	font-size: var(--fs-p2);
	text-decoration: none;
	transition: background var(--transition);
}
.section--dark .home-srv__all:hover { background: rgba(255, 255, 255, 0.18); color: var(--c-white); }
.home-srv__all-label { font-weight: 700; }

/* 9. SEO-текст — Figma 106:563
   ------------------------------------------------------------ */
.home-seo { padding-bottom: clamp(96px, 12vw, 192px); }
.home-seo__title { margin-bottom: 40px; }
.home-seo__content {
	display: flex;
	flex-direction: column;
	gap: 0;
	font-size: var(--fs-p3);
	line-height: 1.4;
	color: var(--c-text);
}
.home-seo__content h3 { margin-top: 1.5em; }
.home-seo__content p { margin-bottom: 1.65em; }
.home-seo__content p:last-child { margin-bottom: 0; }