/*
 * aboutus.css
 * Standalone recreation of Figma node 106:14807 ("About Us").
 * Reuses the homepage's .ft-* design system (tokens, .ft-shell, .ft-section,
 * .ft-heading/.ft-eyebrow/.ft-title/.ft-accent/.ft-lead, .ft-btn) — homepage.css
 * is linked alongside this file — and adds only About-page-specific components
 * via .ab-* classes. The shared header.php / footer.php chrome is unchanged.
 *
 * Figma tokens (from get_variable_defs):
 *   Blue_Main #2DA7FA · Blue_Subtle #EDF7FF · Blue_Shape #C7E5FA
 *   Text_Primary #333536 · Text_Secondary #737A82 · BG #F7F7F9 / #F6F6F6
 *   Title/Title 24/30 · Title/H2 16 · Body/Lead 16/22 · Body/Body 14/18
 */

/* ---- Section backgrounds (alternating, mirrors the Figma rhythm) ---- */
.ab-section--about {
	background: #fdfdfd;
}

.ab-section--solutions {
	background: #f7f7f9;
}

.ab-section--impact {
	background: #fdfdfd;
}

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

.ab-section--trusted {
	background: #fdfdfd;
}

/* About content sits in a 1120px block (Figma node 106:14807: content frames at
 * x=400, width 1120 → 20.83% side gutter) — narrower than the homepage's default
 * .ft-shell (1480 / 11.46%). Scoped to the About sections only, via the
 * .ab-section--* modifiers, so the shared .ft-shell and the homepage (which
 * shares body.ft-page) are unaffected. The hero band stays full-bleed. */
.ab-section--about .ft-shell,
.ab-section--solutions .ft-shell,
.ab-section--impact .ft-shell,
.ab-section--journey .ft-shell,
.ab-section--trusted .ft-shell {
	width: min(1120px, 100% - 80px);
	max-width: none;
}

/* ============================================================
 * Hero — full-bleed montage band of dental-context photos.
 * No copy overlays it (the About heading begins in the next
 * section); a soft dark gradient unifies the four frames.
 * ============================================================ */
.ab-hero {
	padding: 0;
}

.ab-hero__montage {
	position: relative;
	/* Lock to the 1080p (1920×480) montage proportions at every width: the band
	   and VR overlay always scale together and keep their exact 1080p positions
	   (band full-width, VR over the rightmost 27.66%), with no responsive crop or
	   reflow. A fixed aspect-ratio replaces the old clamp(220px, 25vw, 480px)
	   whose 220px floor broke the 4:1 ratio below 880px and let the band crop —
	   which had desynced the band's photos from the overlay. */
	aspect-ratio: 1920 / 480;
	overflow: hidden;
	background: #1b2733;
}

/* Full-bleed montage image (Figma "f 1", 1920×480). The montage box holds the
   1920:480 ratio so the band fills it with no crop — its internal photos stay
   aligned to the 1080p layout (the 4th photo sits exactly under the VR overlay). */
.ab-hero__band {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* VR-training photo (Figma "unnamed 1") overlaying the right 531/1920 ≈ 27.66% */
.ab-hero__overlay {
	position: absolute;
	top: 0;
	right: 0;
	width: 27.66%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Subtle unifying overlay so the four photos read as one band */
.ab-hero__montage::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 33, 50, 0) 55%, rgba(20, 33, 50, 0.28) 100%);
	pointer-events: none;
}

/* ============================================================
 * About intro — eyebrow + title + lead, then 3 photo cards.
 * Left-aligned (per Figma), full content width.
 * ============================================================ */
.ab-about__lead {
	margin-top: 16px;
	max-width: 1120px;
}

.ab-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
}

/* The card export PNGs (Figma 106:15740) carry their own rounded corners, so
 * the container neither clips nor rounds — the photo's transparent corners read
 * against the section background. */
.ab-card {
	aspect-ratio: 358 / 200;
}

.ab-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
 * Mission / Solutions — two text blocks split by a rule, then
 * a row of five small product cards.
 * ============================================================ */
.ab-block {
	display: grid;
	gap: 8px;
	max-width: 1120px;
}

.ab-block__title {
	margin: 0;
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
}

.ab-block__title--mission {
	color: var(--ft-blue);
}

.ab-block strong {
	color: var(--ft-text);
	font-weight: 600;
}

.ab-divider {
	height: 1px;
	margin: 32px 0;
	border: 0;
	background: var(--ft-border);
}

.ab-products {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 8px;
}

.ab-product {
	flex: 0 1 208px;
	display: grid;
	gap: 0;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--ft-border);
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(20, 33, 50, 0.05);
	text-align: center;
}

.ab-product__img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100px;
	margin-bottom: 16px;
}

.ab-product__img img {
	max-width: 100%;
	max-height: 100px;
	object-fit: contain;
}

.ab-product h3 {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ft-text);
}

.ab-product p {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--ft-muted);
}

/* ============================================================
 * Impact — heading + lead, then four stat cards (blue-subtle).
 * ============================================================ */
.ab-impact__lead {
	margin-top: 16px;
	max-width: 1120px;
}

.ab-stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-top: 40px;
}

.ab-stat {
	display: grid;
	gap: 6px;
	padding: 28px 20px;
	background: var(--ft-blue-subtle);
	border-radius: 16px;
	text-align: center;
}

.ab-stat__num {
	font-size: 36px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--ft-text);
}

.ab-stat__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ft-text);
}

.ab-stat__desc {
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--ft-muted);
}

/* ============================================================
 * Journey — horizontal timeline, labels alternating above/below
 * a centred rule with evenly-spaced dots.
 * ============================================================ */
.ab-journey__lead {
	margin-top: 16px;
	max-width: 1120px;
}

.ab-timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	margin-top: 56px;
	/* Inset the 9-column grid ~51.5px each side so the dots land where the
	 * design puts them (108px from each end of the 1120 content, 113px apart).
	 * The rule itself stays full-bleed — it's absolute left:0/right:0, which is
	 * relative to the padding box, so padding doesn't shrink it. */
	padding-inline: 51.5px;
}

/* The rule sits at the vertical centre of each item (row split 90/20/90) */
.ab-timeline__line {
	position: absolute;
	left: 0;
	right: 0;
	top: 100px;
	height: 2px;
	background: var(--ft-blue-shape, #c7e5fa);
}

/* Soft end caps on the rule */
.ab-timeline__line::before,
.ab-timeline__line::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ft-blue-shape, #c7e5fa);
	transform: translateY(-50%);
}

.ab-timeline__line::before {
	left: -4px;
}

.ab-timeline__line::after {
	right: -4px;
}

.ab-tl {
	position: relative;
	display: grid;
	grid-template-rows: 90px 20px 90px;
	justify-items: center;
	/* Keep the 9 columns equal (1fr) even though the centred label box is wider
	 * than its column — without this the box's min-content width stretches the
	 * track and the whole timeline overflows the shell. */
	min-width: 0;
}

.ab-tl__dot {
	grid-row: 2;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--ft-blue);
	box-shadow: 0 0 0 4px rgba(45, 167, 250, 0.18);
}

/* Fixed, per-milestone box width (set inline as --tl-w in the PHP) centred on
 * the dot, so each label wraps to the design's line count instead of being
 * squeezed into its ~113px grid column. Overflows into neighbour columns, which
 * is fine — neighbours alternate above/below the rule. */
.ab-tl__content {
	display: grid;
	gap: 2px;
	text-align: center;
	width: var(--tl-w, 140px);
}

.ab-tl--above .ab-tl__content {
	grid-row: 1;
	align-self: end;
	padding-bottom: 10px;
}

.ab-tl--below .ab-tl__content {
	grid-row: 3;
	align-self: start;
	padding-top: 10px;
}

.ab-tl__year {
	font-size: 16px;
	font-weight: 700;
	color: var(--ft-blue);
}

.ab-tl__label {
	font-size: 14px;
	line-height: 18px;
	font-weight: 600;
	color: var(--ft-text);
}

/* ============================================================
 * Trusted — heading + two leads, then 3 columns of distributor
 * bullet lists, a rule, and the patent / contact footnote.
 * ============================================================ */
.ab-trusted__lead {
	margin-top: 16px;
	max-width: 1120px;
}

.ab-trusted__lead + .ab-trusted__lead {
	margin-top: 14px;
}

.ab-distributors {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 24px;
	max-width: 1120px;
	margin-top: 24px;
}

.ab-distributors ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.ab-distributors li {
	position: relative;
	padding-left: 18px;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--ft-muted);
}

.ab-distributors li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--ft-muted);
}

.ab-patent {
	max-width: 1120px;
	margin: 24px 0 0;
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
	color: var(--ft-muted);
}

.ab-patent a {
	color: var(--ft-muted);
	text-decoration: underline;
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 990px) {
	/* Solutions → one uniform 2-col grid (Figma mobile frame 461:9319). The 5th
	   card (Teo VR) sits alone in the left column via normal grid auto-placement,
	   matching the mobile design. The desktop centred flex row is untouched. */
	.ab-products {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.ab-product {
		flex: initial; /* neutralise the desktop flex-basis (ignored in grid anyway) */
	}

	.ab-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Let the 2-col stat cards shrink with the track (the desktop 36px num +
	   20px side padding can't fit two single-word cells like "Worldwide" at
	   ~480px). min-width:0 frees the 1fr track; trimmed padding + a slightly
	   smaller num match the tighter Figma mobile stat cards (frame 461:9462). */
	.ab-stat {
		min-width: 0;
		padding: 24px 14px;
	}

	.ab-stat__num {
		font-size: 30px;
	}
}

/* Timeline → vertical left rail (Figma mobile frame 463:6677). Reflowed at
 * ≤1100 rather than ≤990 because the horizontal 9-dot timeline gets cramped
 * below ~1100 and its widest end label ("Mobile Learning Expansion", centred on
 * the rightmost dot) pokes past the viewport in the 991–1100 band. Desktop
 * (≥1101) keeps the pixel-identical horizontal timeline. */
@media (max-width: 1100px) {
	.ab-timeline {
		grid-template-columns: 1fr;
		gap: 0;
		margin-top: 32px;
		padding-inline: 8px 0;
	}

	.ab-timeline__line {
		left: 8px;
		right: auto;
		top: 0;
		bottom: 0;
		width: 2px;
		height: auto;
	}

	.ab-timeline__line::before {
		top: -4px;
		left: 50%;
		transform: translateX(-50%);
	}

	.ab-timeline__line::after {
		top: auto;
		bottom: -4px;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
	}

	.ab-tl {
		grid-template-rows: none;
		grid-template-columns: 18px 1fr;
		justify-items: start;
		align-items: start;
		column-gap: 20px;
		padding: 14px 0;
	}

	.ab-tl__dot {
		grid-row: auto;
		grid-column: 1;
		margin-top: 2px;
	}

	.ab-tl--above .ab-tl__content,
	.ab-tl--below .ab-tl__content {
		grid-row: auto;
		grid-column: 2;
		align-self: start;
		text-align: left;
		padding: 0;
		/* full-width label in the vertical rail, not the desktop fixed box */
		width: auto;
	}
}

@media (max-width: 680px) {
	/* Distributor lists stack to a single column (Figma mobile frame 463:6754). */
	.ab-distributors {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Tighten the 3-col photo strip's gutter as the shell narrows. The strip
	   stays 3-across down to 600px (the desktop + mobile Figma frames keep the
	   three context photos in one row); below 600 it stacks (see next block). */
	.ab-cards {
		gap: 12px;
	}
}

/* Below 600 the three context photos stack one-per-row (per-request deviation
   from the Figma 3-up strip): at this width a 3-across row makes each photo too
   small to read, so full-width stacked cards are clearer. */
@media (max-width: 600px) {
	.ab-cards {
		grid-template-columns: 1fr;
	}
}

/* Below 450 → single column (convention shared with modupro/charlie/licensure/
 * accessories/onescreen): the solution + stat grids drop from the 2-col band to
 * 1-col, and the content shell narrows to a 16px-per-side gutter. The decorative
 * photo strip is already stacked 1-up here (the ≤600 block above), so this block
 * only tightens its row gap. Min target 325px → ZERO horizontal overflow. */
@media (max-width: 449px) {
	.ab-section--about .ft-shell,
	.ab-section--solutions .ft-shell,
	.ab-section--impact .ft-shell,
	.ab-section--journey .ft-shell,
	.ab-section--trusted .ft-shell {
		width: min(1120px, 100% - 32px);
	}

	.ab-products {
		grid-template-columns: 1fr;
	}

	.ab-stats {
		grid-template-columns: 1fr;
	}

	.ab-cards {
		gap: 8px;
	}
}

/* ---- 4K / ultra-wide ----
 * The .ft-* design system scales up at this same breakpoint inside homepage.css
 * (shell 1480->3320, type/spacing ~x2). These rules scale the About-specific
 * .ab-* add-ons by a faithful x2 of their 1920 BASE values so they stay
 * consistent with the .ft-* sections and line up on the same shell. */
@media (min-width: 3000px) {
	/* About content block doubles to 2240px → 800px (20.83%) gutter at 3840,
	 * faithful x2 of the 1920 design (1120 → 2240). Overrides the doubled .ft
	 * shell for the About sections only. */
	.ab-section--about .ft-shell,
	.ab-section--solutions .ft-shell,
	.ab-section--impact .ft-shell,
	.ab-section--journey .ft-shell,
	.ab-section--trusted .ft-shell {
		width: min(2240px, 100% - 180px);
	}

	/* Hero montage needs no 4K override: the base aspect-ratio: 1920/480 keeps
	 * the 1080p proportions at every width (height tracks width ÷ 4). */

	/* Text columns double (base 1120 -> 2240) to ride the doubled .ft shell */
	.ab-about__lead,
	.ab-impact__lead,
	.ab-journey__lead,
	.ab-trusted__lead,
	.ab-block,
	.ab-distributors,
	.ab-patent {
		max-width: 2240px;
	}

	.ab-block__title {
		font-size: 48px;
		line-height: 60px;
	}

	.ab-stat__num {
		font-size: 72px;
	}

	.ab-stat__title,
	.ab-product h3,
	.ab-tl__year {
		font-size: 32px;
	}

	.ab-stat__desc,
	.ab-product p,
	.ab-tl__label,
	.ab-distributors li {
		font-size: 28px;
		line-height: 36px;
	}

	.ab-patent {
		font-size: 28px;
		line-height: 44px;
	}

	.ab-stat {
		border-radius: 32px;
		padding: 56px 40px;
	}

	/* The five product cards fill the doubled content width like at 1080p:
	 * base flex-basis 208 -> 416 (5×416 + 4×32 gap ≈ 2208, inside the 2240
	 * shell). Without this they stay 208px and bunch in the middle of 4K. */
	.ab-product {
		flex-basis: 416px;
		border-radius: 32px;
		padding: 32px;
	}

	.ab-timeline {
		grid-template-rows: none;
		margin-top: 112px;
		padding-inline: 103px;
	}

	.ab-tl {
		grid-template-rows: 180px 40px 180px;
	}

	.ab-tl__dot {
		width: 36px;
		height: 36px;
		box-shadow: 0 0 0 8px rgba(45, 167, 250, 0.18);
	}

	.ab-timeline__line {
		top: 200px;
		height: 4px;
	}

	/* Rule end caps double too (base 10px / 4px offset) */
	.ab-timeline__line::before,
	.ab-timeline__line::after {
		width: 20px;
		height: 20px;
	}

	.ab-timeline__line::before {
		left: -8px;
	}

	.ab-timeline__line::after {
		right: -8px;
	}

	.ab-product__img {
		height: 200px;
	}

	.ab-product__img img {
		max-height: 200px;
	}

	/* ---- Spacing: faithful x2 of the 1920 base ----
	 * These were left at base in the original 4K block, so the content read
	 * half-tight against the doubled shell/type. Doubling them restores the
	 * design's rhythm at 4K. */
	.ab-about__lead,
	.ab-impact__lead,
	.ab-journey__lead,
	.ab-trusted__lead {
		margin-top: 32px;
	}

	.ab-trusted__lead + .ab-trusted__lead {
		margin-top: 28px;
	}

	.ab-cards {
		gap: 48px;
		margin-top: 80px;
	}

	.ab-block {
		gap: 16px;
	}

	.ab-divider {
		height: 2px;
		margin: 64px 0;
	}

	.ab-products {
		gap: 32px;
		margin-top: 16px;
	}

	.ab-stats {
		gap: 32px;
		margin-top: 80px;
	}

	.ab-stat {
		gap: 12px;
	}

	.ab-tl__content {
		gap: 4px;
		width: calc(var(--tl-w, 140px) * 2);
	}

	.ab-tl--above .ab-tl__content {
		padding-bottom: 20px;
	}

	.ab-tl--below .ab-tl__content {
		padding-top: 20px;
	}

	.ab-distributors {
		gap: 24px 48px;
		margin-top: 48px;
	}

	.ab-distributors ul {
		gap: 24px;
	}

	.ab-distributors li {
		padding-left: 36px;
	}

	.ab-distributors li::before {
		left: 4px;
		top: 14px;
		width: 8px;
		height: 8px;
	}

	.ab-patent {
		margin-top: 48px;
	}
}