/*
 * Homepage (Figma node 76:10557) — page-specific rules only.
 * Shared .ft-* primitives (tokens, shell/section, headings, buttons, splits,
 * cards, features, timeline, stores) live in /css/new/foundation.css, loaded
 * globally BEFORE this sheet. This file keeps the hero carousel, the featured
 * products row, the section background modifiers, and their responsive rules.
 */

.ft-section--hero {
	background: #f7f7f9;
	padding: 56px 0 36px;
}

/* Hero content block holds the 1200px design width (copy 480 + gap 48 + media
 * 672, Figma node 76:10571) at every desktop size — fluid below it (full width
 * minus a small gutter when the viewport can't afford 1200px), capped above it.
 * Growing the hero with the viewport (the old 62.5% inset) breaks past ~1920:
 * the %-sized media/blob scale up like a zoom while the copy column and type
 * stay fixed, so a giant image sits next to tiny text. Freezing the whole block
 * at its design size keeps copy and media in their designed ratio and matches
 * how every other section behaves at large widths (cards 1480, splits 1320 —
 * fixed blocks centered in a full-bleed section background). */
@media (min-width: 991px) {
	.ft-section--hero .ft-shell {
		width: min(100% - 48px, 1200px);
	}
}

.ft-section--products {
	background: #fdfdfd;
}

.ft-section--teo {
	background: var(--ft-blue-subtle);
}

.ft-section--onescreen,
.ft-section--about {
	background: #fdfdfd;
}

.ft-section--toothview {
	background: #f7f7f9;
}

/* ---- Hero ---- */
/* Copy keeps its full 480px so the headline holds its design line count; the
 * media takes the rest. The shell width override (see .ft-section--hero .ft-shell)
 * keeps the shell from collapsing on smaller desktops, so the media column — and
 * with it the image+blob — stays a consistent size instead of shrinking to a
 * sliver as it did when the shell tracked a flat 62.5%. */
.ft-hero {
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	gap: 48px;
	align-items: center;
}

.ft-hero__copy {
	display: grid;
	gap: 24px;
	max-width: 480px; /* Figma node 76:10571 copy column = 480px */
}

.ft-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	padding: 8px 14px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 8px 24px rgba(39, 55, 75, 0.08);
	font-size: 14px;
	font-weight: 600;
}

.ft-hero__badge img {
	width: 19px;
	height: 19px;
}

.ft-hero__title {
	margin: 0;
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
	color: var(--ft-text);
}

.ft-hero__desc {
	margin: 0;
	max-width: 448px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ft-muted);
}

.ft-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	/* Slide 1 only (slides 2/3 set their own min-height via the --circle/--devices
	 * rules below). A touch taller than the others so the trays sit low enough that
	 * the blob's upward peek clears the carousel's top overflow:hidden instead of
	 * being sliced off on wide screens. */
	min-height: 380px;
}

/* Slide 1 trays + blob wrapper. The blob is anchored to THIS box (which is
 * sized to the trays), not to the media cell — so the blob↔trays relationship is
 * locked at every resolution (Figma node 76:10558). Only the wrapper's size
 * changes across breakpoints; the blob keeps its position relative to the trays.
 * The media cell still left-aligns (desktop) / centers (mobile) the whole unit. */
.ft-hero__media-stack {
	position: relative;
	width: 94%;
	/* Cap the trays (and with them the blob, which is sized as a % of this box) so
	 * the blob doesn't grow oversized — and overflow the carousel's top — on wide
	 * desktops. Held at the design size (the shell caps, so it doesn't grow). */
	max-width: 600px;
}

/* Slide 1 blob (hero_modupro_bg.svg) — tilt baked into the path; sits behind the
 * trays, peeking out above-left and below-right. Offsets are % of the wrapper
 * (= the trays box), measured from the Figma desktop layout, so they hold at any
 * width. */
.ft-hero__shape {
	position: absolute;
	z-index: 0;
	left: 15.96%;
	top: -27.35%;
	width: 69.15%;
}

/* Trays fill the wrapper; the wrapper carries the width cap. */
.ft-hero__product {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	object-fit: contain;
}

.ft-hero__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

.ft-hero__dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #c7d0d8;
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}

.ft-hero__dots button.is-active {
	width: 80px;
	background: var(--ft-blue);
}

/* ---- Hero carousel ---- */
/* The hero gutter is governed by the .ft-section--hero .ft-shell override
 * (18.75% per side, Figma node 76:10571) — intentionally wider than the split
 * sections (15.625%), matching Figma. The carousel just fills that shell, so no
 * extra max-width cap here (an old 1252px cap forced hero to align with the
 * splits and would now fight the %-based gutter at wide/4K widths). */
.ft-carousel {
	overflow: hidden;
}

.ft-carousel__track {
	display: flex;
	/* Slides stretch to the track's height. The track height is set per active
	 * slide in JS (setupHeroCarousel → setHeight), so the active slide is exactly
	 * tall enough to contain its content AND its overflowing decorative blob —
	 * without inheriting the tallest slide's height (which left a gap on mobile). */
	align-items: stretch;
	width: 100%;
	transition: transform 0.45s ease, height 0.45s ease;
	will-change: transform;
	touch-action: pan-y;
}

.ft-slide {
	flex: 0 0 100%;
	min-width: 100%;
	width: 100%;
	/* Clip each slide's decorative blobs to its own bounds so they don't bleed
	 * into the neighbouring slides (the track lays all slides side by side). */
	overflow: hidden;
}

/* Slide subtitle (e.g. "Practice + Visualize + Repeat") */
.ft-hero__text {
	display: grid;
	gap: 8px;
}

.ft-hero__subtitle {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: #4f545a;
}

/* "Watch Demo" text link with play icon (slide 3) */
.ft-hero__watch {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-self: start;
	margin-top: 4px;
	color: var(--ft-blue);
	font-size: 16px;
	font-weight: 600;
}

.ft-hero__watch i {
	font-size: 13px;
}

/* Laptop + phone composite media (slide 3) */
.ft-hero__media--devices {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}

/* Slide 3 wrapper. Like .ft-hero__media-stack (slide 1), the blob is anchored to
 * THIS box (sized to the devices image), not the media cell — so the blob↔devices
 * relationship is locked at every resolution. Only the wrapper's size changes
 * across breakpoints. */
.ft-hero__devices-wrap {
	position: relative;
	width: 88%;
	max-width: 700px;
}

/* Devices fill the wrapper; the wrapper carries the width cap. */
.ft-hero__devices {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	object-fit: contain;
}

/* Slide 3 blob (hero_onescreen_bg.svg) — tilt baked into the path; large soft
 * blob behind the lower half of the laptop. Offsets are % of the wrapper (= the
 * devices box), from the Figma desktop layout, so they hold at any width. */
.ft-hero__devices-blob {
	position: absolute;
	z-index: 0;
	left: 1.14%;
	top: 24.86%;
	width: 79.54%;
}

/* Circular photo media (slide 2) */
.ft-hero__media--circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 360px;
}

/* Circle pushed off the left edge so the blob has room to its lower-right.
 * % width keeps it scaling at 4K. */
.ft-hero__circle-wrap {
	position: relative;
	width: 56%;
	margin-left: 4%;
}

/* Round photo "frame cutout": a rectangular photo clipped by the organic round
 * mask shape from Figma (Design 13). Replicates the Figma mask group rather
 * than relying on a pre-cropped circular PNG. */
.ft-hero__circle {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 488.094 / 494.771;
	overflow: hidden;
	-webkit-mask: url(/images/new/homepage/hero_vr_mask.svg) center / contain no-repeat;
	mask: url(/images/new/homepage/hero_vr_mask.svg) center / contain no-repeat;
}

/* Photo sized/offset inside the frame exactly as in Figma so the subject is
 * framed correctly by the cutout. */
.ft-hero__circle img {
	position: absolute;
	left: -13.26%;
	top: -6.72%;
	width: 144.33%;
	height: 106.71%;
	max-width: none;
	display: block;
}

/* Slide 2 blob (hero_vr_bg.svg) — tilt baked into the path; solid blue
 * shape sitting just off the circle's lower-right, fully visible. */
.ft-hero__blob {
	position: absolute;
	z-index: 0;
	left: 90%;
	bottom: 3%;
	width: 58%;
}

/* ---- Physical Products ---- */
.ft-products__head {
	max-width: 640px;
	margin: 0 auto 56px;
	text-align: center;
	justify-items: center;
}

/* Products carousel dots — mobile only (see responsive block) */
.ft-products__dots {
	display: none;
	justify-content: center;
	gap: 8px;
	margin-top: 28px;
}

.ft-products__dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #c7d0d8;
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}

.ft-products__dots button.is-active {
	width: 80px;
	background: var(--ft-blue);
}

/* OneScreen media is a transparent device mockup — no frame/shadow */
.ft-split--onescreen .ft-split__media img {
	border-radius: 0;
	box-shadow: none;
}

/* Teo content is top-anchored (matching Figma, where the image is centered
   but the copy sits at a fixed top). This keeps the heading fixed while the
   active step's description animates open/closed — otherwise the vertically
   centered column re-centers each frame and the title jitters. */
.ft-split--teo .ft-split__content {
	align-self: flex-start;
}

/* ---- Responsive (hero + products only — shared responsive rules live in
 * foundation.css) ---- */
@media (max-width: 990px) {
	.ft-hero {
		grid-template-columns: 1fr;
		/* Roomier copy↔media gap than the splits: slide 1's blob is anchored to the
		 * trays (see .ft-hero__media-stack) and peeks above them, so this gap gives
		 * that peek clear space below the Buy Now button instead of crowding it. */
		gap: 64px;
	}

	/* ---- Hero: centered column (Figma mobile) ---- */
	.ft-hero__copy {
		max-width: none;
		justify-items: center;
		text-align: center;
	}

	.ft-hero__title {
		text-align: center;
	}

	.ft-hero__desc {
		max-width: 448px;
		margin-inline: auto;
	}

	.ft-hero__text {
		justify-items: center;
	}

	.ft-hero__subtitle {
		text-align: center;
	}

	.ft-hero__watch {
		justify-self: center;
	}

	.ft-hero__media,
	.ft-hero__media--circle,
	.ft-hero__media--devices {
		justify-content: center;
		min-height: 240px;
	}

	/* Slide 1 trays + blob keep a locked relationship via .ft-hero__media-stack
	 * (blob anchored to the trays box; size capped by the base rule). On mobile the
	 * media gets a little top padding so the blob's upward peek clears the Buy Now
	 * button instead of crowding it. Targeting the bare .ft-hero__media (slide 1
	 * only — slides 2/3 carry a --circle/--devices modifier) keeps this nudge off
	 * the other slides, whose blobs sit lower. */
	.ft-hero__media:not(.ft-hero__media--circle):not(.ft-hero__media--devices) {
		padding-top: 28px;
	}

	/* Slide 2 circle: blob stays anchored to the circle via .ft-hero__circle-wrap,
	 * so its offsets (base rule) hold at every width — no per-breakpoint override.
	 * The single-column layout centres the wrap, so the circle is sized small
	 * enough that the locked lower-right blob still fits without the slide's
	 * overflow:hidden clipping it. */
	.ft-hero__circle-wrap {
		width: 48%;
		margin-left: 0;
	}

	.ft-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 32px;
	}
}

@media (max-width: 680px) {
	.ft-section--hero {
		padding: 40px 0 28px;
	}

	.ft-hero__title {
		font-size: 36px;
		line-height: 44px;
	}

	/* ---- Products: single-card carousel (Figma mobile) ---- */
	.ft-cards {
		position: relative; /* anchor children offsetLeft to the track for dot sync */
		display: flex;
		grid-template-columns: none;
		justify-content: flex-start; /* override desktop centering — keeps card 1 at scroll origin */
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.ft-cards::-webkit-scrollbar {
		display: none;
	}

	.ft-card {
		flex: 0 0 100%;
		scroll-snap-align: start;
	}

	.ft-products__dots {
		display: flex;
	}

	/* ---- Hero media per slide (centered, image below) ---- */
	/* Slide 1 — trays + blob. The blob↔trays relationship is locked via
	 * .ft-hero__media-stack, so phones only shrink the wrapper; the blob keeps
	 * its position relative to the trays. */
	.ft-hero__media-stack {
		max-width: 430px;
	}

	/* Slide 2 circle (circle-wrap + blob) is handled in the <=990 block — its
	 * locked offsets and centered sizing apply across the whole single-column range. */

	/* Slide 3 — devices + blob. Locked via .ft-hero__devices-wrap, so phones only
	 * shrink the wrapper; the blob keeps its position relative to the devices. */
	.ft-hero__devices-wrap {
		width: 92%;
		max-width: 380px;
	}
}