/*
 * toothview.css
 * Page-specific rules for the ToothView page (Figma node 236:6052) on top of
 * the shared .ft-* foundation (css/new/foundation.css). Tokens, box-sizing,
 * shell/section rhythm, .ft-lead, .ft-accent and the .ft-stores badge row all
 * come from the foundation; this sheet keeps ONLY the genuine ToothView
 * deltas — the 1320px shell cap, the hero section background/padding, and the
 * hero composition (badge pill + organic photo cutout + blob).
 *
 * Figma tokens (via --ft-*):
 *   Blue_Main #2DA7FA · Text #333536 · Muted #737A82 · BG/Default #F6F6F6
 *   Title/Display 36/44 · Body/Lead 16/22 · Body/Body-B 14 (badge)
 */

/* Foundation caps the shell at 1480px; ToothView's Figma frame caps content
 * at 1320px (1920 − 2×300 gutters). body.tv-page is unique to this page, and
 * the extra specificity keeps this cap winning inside foundation's own media
 * queries (e.g. its ≤380px --ft-shell re-declaration). */
body.tv-page .ft-main {
	--ft-shell: min(1320px, 100% - 80px);
}

/* Hero copy pins to a 15.625% gutter per side (Figma node 236:6308 copy x=299
 * on the 1920 design). Frozen at its 1920 size (68.75% @1920 = 1320px) past
 * 1920 — same fluid → cap treatment as every other hero — so the copy/media
 * pair doesn't drift apart across a huge 4K gap. Applied from 991px up; below
 * that the hero stacks and uses the base shell. */
@media (min-width: 991px) {
	.tv-section--hero .ft-shell {
		width: min(68.75%, 1320px); /* 100% − 2 × 15.625%, capped at 1920's value */
		max-width: none;
	}
}

/* ---- Hero section (the page's only section) ---- */
.tv-section--hero {
	background: #f6f6f6;
	padding: 64px 0 80px;
}

/* ---- Hero ---- */
/* Two-column grid (copy 580px / media fills the rest) — grid keeps the columns
 * side-by-side and shrinks them instead of wrapping the media below the copy at
 * narrower desktop widths. Mirrors the homepage / accessory hero. */
.tv-hero {
	display: grid;
	/* Figma columns: copy 580px / media 696px. Both tracks shrink together at
	 * narrower desktop widths (rather than the copy hogging 580 and starving the
	 * media), and reach the exact Figma sizes around the 1920 design width. */
	grid-template-columns: minmax(0, 580px) minmax(0, 696px);
	justify-content: space-between;
	gap: 48px;
	align-items: center;
}

.tv-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px; /* Figma frame 236:6309 */
	max-width: 580px; /* Figma copy column = 580px */
}

/* Badge + title sit closer together (Figma frame 236:6310 gap = 24px) */
.tv-hero__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.tv-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	height: 32px;
	padding: 10px 12px;
	background: #ffffff;
	border-radius: 40px;
	box-shadow: 0 8px 24px rgba(39, 55, 75, 0.08);
	font-size: 14px;
	font-weight: 600;
	color: var(--ft-text);
}

.tv-hero__badge img {
	width: 14px;
	height: 15px;
	flex: none;
}

/* Display-size heading (Figma Title/Display 36/44) — larger than the shared
 * .ft-title (24/30), so it stays a page rule. */
.tv-hero__title {
	margin: 0;
	font-size: 36px;
	line-height: 44px;
	font-weight: 700;
	color: var(--ft-text);
}

/* Typography comes from .ft-lead; the hero caps the paragraph at the Figma
 * copy-column width. */
.tv-hero__desc {
	max-width: 580px;
}

/* Store badges: .ft-stores provides flex / wrap / gap 24 / 40px-high imgs.
 * ToothView additionally centres the row's items and normalises the
 * anchor/img boxes so the badges sit flush (Figma frame 236:6328). */
body.tv-page .ft-stores {
	align-items: center;
}

body.tv-page .ft-stores a {
	display: inline-flex;
	line-height: 0;
}

body.tv-page .ft-stores img {
	display: block;
	width: auto;
}

/* ---- Hero media: organic photo cutout + blue blob (Figma mask group
 * 236:6224 + blob vector 236:6227). The cutout is built live in the page: an
 * inline SVG clips the raw photo to the Figma organic shape (no pre-baked
 * PNG). The SVG viewBox is the mask group's 684.405×688.76 box, so all blob
 * offsets below are simple percentages of that same box. ---- */
.tv-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	min-height: 480px;
}

.tv-hero__circle-wrap {
	position: relative;
	width: 100%;
	max-width: 684px; /* Figma mask group = 684px wide */
}

.tv-hero__cutout {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: auto;
}

/* Blob sits at the lower-right of the photo cutout. Horizontal position keeps
 * the Figma node 236:6227 x (551/684.405 = 80.51%) and width
 * (176.448/684.405 = 25.78%); the vertical position is dropped so the blob
 * reads as bottom-right of the visible photo. The cutout box keeps its aspect
 * at every width, so the same percentages hold across breakpoints. */
.tv-hero__blob {
	position: absolute;
	z-index: 2;
	left: 80.51%;
	top: 62%;
	width: 25.78%;
	height: auto;
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 990px) {
	/* Pre-migration cascade: the generic 64px section rhythm out-cascaded the
	 * hero's 80px bottom padding here (same specificity, later in source), so
	 * the hero rendered 64px top AND bottom. Foundation's ≤990 .ft-section rule
	 * loads before this sheet and would lose to the hero base rule above, so
	 * restate it to keep the exact computed value. */
	.tv-section--hero {
		padding: 64px 0;
	}

	.tv-hero {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* Figma mobile centres the copy column */
	.tv-hero__copy {
		width: 100%;
		max-width: none;
		align-items: center;
		text-align: center;
	}

	.tv-hero__head {
		align-items: center;
	}

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

	.tv-hero__desc {
		margin-inline: auto;
	}

	body.tv-page .ft-stores {
		justify-content: center;
	}

	.tv-hero__media {
		width: 100%;
		justify-content: center;
		min-height: 0;
	}

	.tv-hero__circle-wrap {
		width: 72%;
		max-width: 440px;
	}
}

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

	.tv-hero__circle-wrap {
		width: 84%;
		max-width: 380px;
	}
}

/* Below 450 → narrow the shell to a 16px-per-side gutter (convention, same as
 * modupro/onescreen/accessories). This page has no product grids to collapse —
 * it's a single stacked hero — so only the gutter needs the phone treatment.
 * Min target width 325px (verified: 0 horizontal overflow). Also outranks
 * foundation's ≤380px 40px-gutter re-declaration. */
@media (max-width: 449px) {
	body.tv-page .ft-main {
		--ft-shell: min(1320px, 100% - 32px);
	}
}