/*
 * licensure.css
 * Page-specific rules for the Licensure Series page (Figma node 97:2961) on
 * top of the shared .ft-* foundation (css/new/foundation.css). Tokens,
 * box-sizing, the heading trio (.ft-eyebrow/.ft-title/.ft-accent), .ft-lead
 * and the button primitives (.ft-btn/--primary/--outline) come from the
 * foundation; this sheet keeps ONLY the genuine Licensure deltas — the 1320px
 * shell cap, its own ≤900 section rhythm, the hero composition, the exam tab
 * system, product cards and resource cards.
 *
 * Figma tokens (via --ft-*):
 *   Blue_Main #2DA7FA · Blue_Subtle #EDF7FF
 *   Text #333536 · Muted #737A82 · Line #E7E7E7
 *   BG/Default #F6F6F6 · BG/Background #F7F7F9
 *   Title/Display 36/44 · Title/Title 24/30 · Body/Lead 16/22 · Body-sm 12
 */

/* Foundation caps the shell at 1480px; the Licensure Figma frame caps content
 * at 1320px (content x=300, matching the homepage's .ft-split band).
 * body.lic-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). Also declares the page-only surface tokens
 * (--ft-border is #e4e4e4; this page's line colour is #e7e7e7). */
body.lic-page .ft-main {
	--ft-shell: min(1320px, 100% - 80px);
	--lic-line: #e7e7e7;
	--lic-card: #f6f6f6;
}

/* This page keeps its 80px section rhythm all the way down to its own ≤900
 * step (56px, at the bottom of this sheet) — it never used foundation's
 * ≤990 (64px) / ≤680 (48px) steps, which load earlier and would otherwise
 * kick in. Placed BEFORE the hero modifier below so the hero's 72px still
 * wins by source order, exactly as pre-migration. */
@media (max-width: 990px) {
	.ft-section {
		padding: 80px 0;
	}
}

/* Deep links from the header mega-menu (#adex, #crdts, tab ids) land below
 * the sticky header. */
body.lic-page .ft-section {
	scroll-margin-top: calc(var(--shop-header-height, 96px) + 12px);
}

/* Hero sits on a wider 18.75% gutter than the sections (Figma: hero copy x=360,
 * sections x=300), like the homepage hero. Applied from 991px up; below that it
 * stacks.
 *
 * A flat 62.5% collapses the media column on smaller desktops: at ~1000px it is
 * 625px (copy 480 + gap 48 + media ≈ 97px), shrinking the dental models to a
 * sliver. Instead hold a 1200px content block (the 1920 design: copy 480 + gap
 * 48 + media 672) down to where the viewport can't afford it (then full width
 * minus a small gutter), and only keep the 18.75% inset once 62.5% is wider than
 * that block (>=1920). Mirrors the homepage hero (.ft-section--hero .ft-shell)
 * so the image stays a consistent size across desktop widths and at 4K. */
@media (min-width: 991px) {
	.lic-section--hero .ft-shell {
		width: min(100% - 48px, 1200px);
		max-width: none;
	}
}

/* ---- Sections ---- */
.lic-section--hero {
	background: #f6f6f6;
	padding: 72px 0;
	/* Clip the blob's overhang flush to the hero edges (it peeks below/left of the
	 * models), mirroring the charlie/homepage hero. */
	overflow: hidden;
}

.lic-section--adex {
	background: #fdfdfd;
}

.lic-section--crdts {
	background: #f7f7f9;
}

/* ---- Buttons ---- */
/* Foundation buttons carry no underline reset; every button here is an <a>. */
body.lic-page .ft-btn {
	text-decoration: none;
}

/* Small resource-card button. Page-only modifier on top of
 * .ft-btn/.ft-btn--outline (base declarations match the foundation's; only
 * this compact sizing is Licensure-specific). */
.lic-btn--sm {
	padding: 8px 16px;
	font-size: 14px;
	gap: 8px;
}

.lic-btn--sm i {
	font-size: 14px;
}

/* ---- Hero ---- */
.lic-hero {
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	/* Roomier copy↔media gap so the models (and the blob's left overhang) keep
	 * clear of the copy on smaller desktops where the media column is squeezed. */
	gap: 72px;
	align-items: center;
}

.lic-hero__copy {
	display: grid;
	gap: 24px;
	max-width: 480px;
}

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

.lic-hero__badge i {
	font-size: 15px;
	color: var(--ft-blue);
}

/* Display-size heading (Figma Title/Display 36/44) — larger than the shared
 * .ft-title (24/30), so it stays a page rule. */
.lic-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 (480px → description wraps to 3 lines). */
.lic-hero__desc {
	max-width: 480px;
}

.lic-hero__media {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 360px;
}

/* Models + blob locked together via .lic-hero__figure (sized to the models), so
 * the blob keeps its position/size relative to the models at every width — the
 * same approach as the homepage hero (.ft-hero__media-stack) and charlie
 * (.ch-hero__figure). The figure fills the media column and caps its width so the
 * models stay a consistent size at every width.
 * (Replaces the old .lic-hero__media::before blob, which was a % of the media
 * CELL — wider than the capped image — so it drifted/squished on resize.) */
.lic-hero__figure {
	position: relative;
	width: 100%;
	max-width: 560px; /* Figma models box ≈ 500px; matches the prior image cap */
}

.lic-hero__models {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	object-fit: contain;
}

/* Soft blue blob (hero_blob.svg, 578×310) behind the lower-left of the models,
 * peeking out below. Offsets/size are % of the figure (= the models box), from
 * the Figma 1080p layout, so the blob↔models relationship holds at any width. */
.lic-hero__blob {
	position: absolute;
	z-index: 0;
	left: -12%;
	top: 42%;
	width: 104%;
	height: auto;
	pointer-events: none;
}

/* ---- Exam series (tabbed) ---- */
.lic-exam__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.lic-tabs {
	display: flex;
	align-items: flex-end;
	gap: 32px;
}

.lic-tab {
	margin: 0;
	padding: 0 2px 8px;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: inherit;
	font-size: 18px; /* Figma Title/H4 (SemiBold 18) */
	font-weight: 600;
	line-height: 1.2;
	color: var(--ft-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.lic-tab:hover {
	color: var(--ft-text);
}

.lic-tab.is-active {
	color: var(--ft-text);
	border-bottom-color: var(--ft-blue);
}

/* ---- Panels ---- */
.lic-panel {
	display: block;
}

.lic-panel[hidden] {
	display: none;
}

/* ---- Product cards ---- */
.lic-cards {
	display: grid;
	gap: 16px;
	margin-top: 32px;
}

.lic-cards--wide {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lic-cards--wide.lic-cards--count-1 {
	grid-template-columns: minmax(0, 652px);
	justify-content: center;
}

.lic-cards--tall.lic-cards--count-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Keep tall cards at the same width as the 3-up Dental tab (Figma 429px each)
 * when a tab only has 2 products — don't stretch them across the full row. */
.lic-cards--tall.lic-cards--count-2 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lic-pcard {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
}

.lic-pcard h3 {
	margin: 0;
	font-size: 14px; /* Figma Title/H3 (SemiBold 14) */
	font-weight: 600;
	line-height: normal; /* Figma text uses Auto line height (leading-normal) */
	color: var(--ft-text);
	/* Break long unbroken titles (e.g. "Endodontics/Prosthodontics") so they wrap
	 * inside narrow cards. `anywhere` (not `break-word`) is required so the long
	 * token also stops inflating the grid column's min-content, which otherwise
	 * forces the card content wider than the card and clips it (overflow:hidden). */
	overflow-wrap: anywhere;
}

.lic-pcard p {
	margin: 0;
	font-size: 12px; /* Figma Body/Body-sm (Medium 12) */
	line-height: normal; /* Figma text uses Auto line height (leading-normal) */
	font-weight: 500;
	color: var(--ft-muted);
}

/* Let the info column shrink below its content's intrinsic width so the card
 * text wraps inside narrow (2-column / 1-column) cards on mobile. */
.lic-pcard__info {
	min-width: 0;
}

.lic-cart {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	color: var(--ft-blue);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.lic-cart i {
	font-size: 14px;
}

/* Wide card (ADEX): text left, image right, blue background.
 * Figma biases the copy toward the bottom (text block sits below centre), so
 * the card bottom-aligns the info column instead of centring it. */
.lic-pcard--wide {
	display: flex;
	align-items: flex-end;
	min-height: 240px;
	background: var(--ft-blue-subtle);
}

/* Text column sized so the copy wraps to Figma's line counts (text frame is
 * ~248–257px wide; e.g. "Restorative and Periodontal" desc = 4 lines). Left
 * inset 32px matches Figma; small right inset keeps a gap before the image. */
.lic-pcard--wide .lic-pcard__info {
	display: grid;
	gap: 8px;
	flex: 0 0 45%;
	max-width: 45%;
	padding: 32px 8px 40px 32px;
}

/* Figma spaces the Add-to-Cart link 16px below the description (8px elsewhere). */
.lic-pcard--wide .lic-cart {
	margin-top: 8px;
}

.lic-pcard--wide .lic-pcard__media {
	position: relative;
	flex: 1 1 auto;
	align-self: stretch;
	min-height: 240px;
	overflow: hidden;
}

/* No side padding: the model artwork is a wide image, so padding would
 * letterbox it small. Let it span the media width and anchor right (Figma:
 * models sit large against the right edge, vertically centred). */
.lic-pcard--wide .lic-pcard__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0 16px 0 0;
	object-fit: contain;
	object-position: center right;
}

/* Dental Hygiene model: the source asset faces the opposite way to the Figma, so
 * it's mirrored. Otherwise it uses the SAME contained, right-anchored placement as
 * every other wide-card image (inherited above) — contained so the full model
 * stays visible at every width. (The previous version bled the model off the right
 * edge, which clipped it even at 1080p.) */
.lic-pcard--wide .lic-pcard__media--flip img {
	transform: scaleX(-1);
}

/* Restorative & Periodontal — Figma places two clipped views of ONE combined
 * photo (articulator model + occlusal arch) tight together, the arch slightly
 * overlapping the model. Each piece is a background-image crop with UNIFORM
 * background-size (keeps aspect), so it never distorts at any card width — unlike
 * the old object-fit:fill crops, which only held their aspect at the exact design
 * card ratio and squished everywhere else.
 *
 * Crop math derived from the Figma node against the 1115×550 combined source:
 *   bg-size width % = source_w / region_w;  box aspect-ratio = region_w / region_h;
 *   bg-position-x %  = region_x / (source_w − region_w);  (same for y)
 * Pieces are sized by media WIDTH (Figma model 197/359 = 55%, arch 155/359 = 43.3%)
 * with the height following each piece's aspect-ratio, so the pair always fits the
 * media width (no clipping) and never depends on the card height — then it's
 * vertically centred. */
.lic-pcard--wide .lic-pcard__media--composite {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.lic-pcard--wide .lic-pcard__media--composite .lic-comp {
	flex: 0 0 auto;
	background-image: url(/images/new/licensure/adex_restorative_combined.png);
	background-repeat: no-repeat;
}

/* Articulator model — Figma "Licensure-Restorative 3" (region 41,87 · 513×346) */
.lic-pcard--wide .lic-pcard__media--composite .lic-comp--model {
	width: 55%;
	aspect-ratio: 513 / 346;
	background-size: 217.3% auto;
	background-position: 6.8% 42.6%;
}

/* Occlusal arch — Figma "Licensure-Restorative 2" (region 657,107 · 394×317),
 * drawn in front, overlapping the model's right edge a touch. */
.lic-pcard--wide .lic-pcard__media--composite .lic-comp--arch {
	width: 43.3%;
	aspect-ratio: 394 / 317;
	background-size: 283.3% auto;
	background-position: 91% 45.9%;
	margin-left: -7%;
	z-index: 1;
}

/* The Restorative and Periodontal cards each draw ONE of the two pieces, so it is
 * scaled up to carry the media box alone — the widths above are sized for the pair
 * sharing it. Heights still follow each piece's aspect-ratio (model 80% → 0.67 of
 * its width, arch 70% → 0.80), both well inside the media box, and the arch drops
 * the overlap margin it only needs when it trails the model. */
.lic-pcard--wide .lic-pcard__media--composite-solo .lic-comp--model {
	width: 80%;
}

.lic-pcard--wide .lic-pcard__media--composite-solo .lic-comp--arch {
	width: 70%;
	margin-left: 0;
}

/* Tall card (CRDTS): text top, image bottom, grey background */
.lic-pcard--tall {
	display: flex;
	flex-direction: column;
	min-height: 340px;
	background: var(--lic-card);
}

.lic-pcard--tall .lic-pcard__info {
	display: grid;
	gap: 8px;
	padding: 32px 32px 16px;
}

.lic-pcard--tall .lic-pcard__media {
	flex: 1 1 auto;
	min-height: 170px;
	margin-top: auto;
	padding: 8px 16px 16px;
}

.lic-pcard--tall .lic-pcard__media img {
	display: block;
	width: 100%;
	height: 100%;
	max-height: 210px;
	object-fit: contain;
	object-position: center bottom;
}

/* ---- Divider ---- */
.lic-divider {
	margin: 32px 0;
	border: 0;
	border-top: 1px solid var(--lic-line);
}

/* ---- Resources ---- */
.lic-resources__title {
	margin: 0 0 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--ft-text);
}

.lic-resources__list {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.lic-rcard {
	display: flex;
	flex-direction: column;
	background: var(--lic-card);
	border-radius: 16px;
	text-decoration: none;
}

.lic-rcard--video {
	width: 286px;
	padding: 12px;
	gap: 12px;
}

.lic-rcard__thumb {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}

.lic-rcard__thumb img {
	display: block;
	width: 100%;
	height: 140px;
	object-fit: cover;
}

.lic-rcard__play {
	position: absolute;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(45, 167, 250, .92);
	color: #fff;
	border-radius: 50%;
	font-size: 18px;
	box-shadow: 0 6px 16px rgba(45, 167, 250, .4);
}

.lic-rcard__caption {
	margin: 0 4px 4px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ft-text);
}

.lic-rcard--info {
	width: 216px;
	align-items: center;
	gap: 8px;
	padding: 16px;
	text-align: center;
}

.lic-rcard__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 48px;
}

.lic-rcard__logo img {
	max-width: 160px;
	max-height: 44px;
	object-fit: contain;
}

.lic-rcard--info h4 {
	margin: 4px 0 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--ft-text);
}

.lic-rcard--info p {
	margin: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--ft-muted);
}

.lic-rcard--info .ft-btn {
	margin-top: 4px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.ft-section {
		padding: 56px 0;
	}

	.lic-section--hero {
		padding: 48px 0;
	}

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

	.lic-hero__copy {
		max-width: none;
		justify-items: center;
		text-align: center;
	}

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

	/* Copy first, image below — matching the modupro / charlie mobile heroes.
	 * Natural DOM order (copy → media) gives this, so no order override. */
	.lic-hero__media {
		min-height: 0;
	}

	.lic-hero__figure {
		max-width: 420px;
	}

	/* Heading on top, tabs scroll horizontally below it */
	.lic-exam__top {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
	}

	.lic-tabs {
		gap: 24px;
		width: 100%;
		/* min-width:0 lets the nowrap tab row scroll inside the shell instead of
		 * stretching the section wider than the viewport (horizontal page scroll). */
		min-width: 0;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 2px;
	}

	.lic-tabs::-webkit-scrollbar {
		display: none;
	}

	/* ADEX wide cards → one per row (full width). They're text-heavy horizontal
	 * banners, so stacking reads better than a cramped 2-up (same call as the
	 * Charlie Titan cards). */
	.lic-cards--wide,
	.lic-cards--wide.lic-cards--count-1 {
		grid-template-columns: 1fr;
		justify-content: stretch;
	}

	/* CRDTS tall cards → uniform 2-column grid (the modupro / charlie mobile
	 * convention); they collapse to one column below 450px. */
	.lic-cards--tall.lic-cards--count-2,
	.lic-cards--tall.lic-cards--count-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
	}

	.lic-pcard--wide .lic-pcard__info {
		flex-basis: 50%;
		max-width: 50%;
		padding: 24px;
	}
}

@media (max-width: 600px) {
	.lic-hero__title {
		font-size: 30px;
		line-height: 38px;
	}

	/* Stack the wide card into a column (text over image) on phones */
	.lic-pcard--wide {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
	}

	.lic-pcard--wide .lic-pcard__info {
		flex-basis: auto;
		max-width: none;
		padding: 24px 24px 8px;
	}

	.lic-pcard--wide .lic-pcard__media {
		position: relative;
		min-height: 180px;
		height: 200px;
	}

	.lic-pcard--wide .lic-pcard__media img {
		position: relative;
		object-position: center;
	}

	.lic-rcard--video,
	.lic-rcard--info {
		width: 100%;
	}
}

/* ============================================================
   Narrow phones (<=449px) — the CRDTS tall-card grid collapses to a SINGLE
   column (ADEX wide cards are already one per row from <=900). Min target width
   is 325px, so also reclaim side padding here so cards stay roomy. body.lic-page
   outranks foundation's own ≤380px --ft-shell re-declaration (40px gutter).
   ============================================================ */
@media (max-width: 449px) {
	.lic-cards--tall.lic-cards--count-2,
	.lic-cards--tall.lic-cards--count-3 {
		grid-template-columns: 1fr;
	}

	body.lic-page .ft-main {
		--ft-shell: min(1320px, 100% - 32px);
	}
}