/* Shared primitives used across sections/pages. */

.onsil-eyebrow {
	display: block;
	font-family: var(--f-display), serif;
	font-size: 24px;
	color: var(--c-ink);
}

.onsil-h2 {
	font-family: var(--f-display), serif;
	font-size: var(--t-h2);
	line-height: normal; /* audit-1/3: Figma Libertinus display headings use leading-[normal], not 1.6 */
	color: var(--c-ink);
}

.onsil-h3 {
	font-family: var(--f-ui), sans-serif;
	font-weight: 500;
	font-size: var(--t-h3);
	line-height: 38px;
	color: var(--c-ink);
}

.onsil-body {
	font-family: var(--f-ui), var(--f-body), sans-serif;
	color: var(--c-body);
}

.onsil-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--c-btn);
	color: var(--c-on-dark);
	padding: 16px 64px;
	border-radius: var(--r-pill);
	font-family: var(--f-body), sans-serif;
	font-size: 14px;
	border: 0;
	transition: opacity 200ms ease;
}

@media (hover: hover) {
	.onsil-pill:hover {
		opacity: .85;
	}
}

/* Shared detail CTA: the approved state uses a square hairline frame and a quiet filled hover. */
.onsil-link-boxed {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 32px;
	background-color: transparent;
	color: var(--c-muted);
	border: 1px solid var(--c-line);
	border-radius: 0;
	font-family: var(--f-ui), sans-serif;
	font-size: 14px;
	transition: background-color 200ms ease;
}

@media (hover: hover) {
	.onsil-link-boxed:hover {
		background-color: #e2e0db;
	}
}

.onsil-scroll-x {
	list-style: none; /* audit-6: unreset UL bullets/padding on equipment-carousel + treatment-lineup */
	margin: 0;
	padding: 0;
	display: flex;
	gap: 30px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.onsil-scroll-x::-webkit-scrollbar {
	display: none;
}

.onsil-scroll-x > * {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

/* One visual owner per entrance. Homepage sections with captured choreography are
   intentionally omitted here and are owned by home-effects.js instead. */
html.js body:not(.onsil-home) [data-fx="reveal"],
html.js body.onsil-home [data-fx="reveal"]:not(.onsil-card-row--feature):not(.onsil-doctor-profile--home):not(.onsil-image-wide) {
	opacity: 0;
	/* Manual Graphics combines top:20px with translateY(22px). Keep the same 42px
	   visual travel without animating the layout-affecting top property. */
	transform: translateY(42px);
	transition: opacity .8s ease, transform .8s ease;
}

html.js body:not(.onsil-home) [data-fx="reveal"].is-in,
html.js body.onsil-home [data-fx="reveal"].is-in:not(.onsil-card-row--feature):not(.onsil-doctor-profile--home):not(.onsil-image-wide) {
	opacity: 1;
	transform: none;
}

html.js [data-fx="reveal-stagger"] > .onsil-board-list__card,
html.js [data-fx="reveal-stagger"] > .onsil-journal-grid__card {
	opacity: 0;
	transform: translateY(42px);
	transition: opacity .8s ease, transform .8s ease;
	transition-delay: min(calc(var(--i, 0) * 35ms), 220ms);
}

html.js [data-fx="reveal-stagger"].is-in > .onsil-board-list__card,
html.js [data-fx="reveal-stagger"].is-in > .onsil-journal-grid__card {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.js body:not(.onsil-home) [data-fx="reveal"],
	html.js body.onsil-home [data-fx="reveal"]:not(.onsil-card-row--feature):not(.onsil-doctor-profile--home):not(.onsil-image-wide),
	html.js [data-fx="reveal-stagger"] > .onsil-board-list__card,
	html.js [data-fx="reveal-stagger"] > .onsil-journal-grid__card {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 768px) {
	.onsil-pill {
		padding: 14px 48px;
	}
}

/* ── CTA band (site-wide, every page) ── */

/* Figma 558:622: 1920x400 band, py 110, column gap 12, one full-bleed photo behind. */
.onsil-cta {
	position: relative;
	overflow: hidden;
	background-color: var(--c-accent);
	padding-block: 104px;
	text-align: center;
}

body:not(.onsil-home) .onsil-main > .onsil-cta {
	margin-top: 40px;
}

.onsil-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
}

.onsil-cta__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px; /* fix-10 (audit MEDIUM #10): was 12px, and .onsil-cta__btn's own 20px margin-top
	   stacked ON TOP of this gap (32px total before the button, not 20) — live-measured this alone
	   accounted for the desktop section running 430px against the 400px frame. */
	margin-inline: auto;
}

.onsil-cta__title {
	font-family: var(--f-ui), sans-serif;
	font-weight: 500;
	font-size: 32px;
	line-height: 1.3; /* fix-10: 1.35→1.3, part of the same desktop overage fix */
	color: var(--c-on-dark);
}

.onsil-cta__sub {
	font-family: var(--f-ui), var(--f-body), sans-serif;
	font-size: 16px;
	color: var(--c-on-dark);
}

/* fix-10: the button now spaces off the flex `gap` alone, like its siblings — the extra
   margin-top double-counted against that gap (see .onsil-cta__inner above). */
.onsil-cta__btn {
	margin-top: 12px;
	transition: background-color 200ms ease;
}

/* Over the dark photo the shared pill's opacity fade reads lighter, not darker — darken the fill instead. */
@media (hover: hover) {
	.onsil-cta__btn:hover {
		opacity: 1;
		background-color: #7d5e4a; /* --c-btn #936f57 at 85% brightness */
	}
}

@media (max-width: 768px) {
	.onsil-cta {
		/* fix-10: was 64px. The title fix below (24px→22px) removes an unintended 3rd wrapped
		   line, which on its own would have shrunk the section further below its already-short
		   345px measurement — padding increases here to compensate and move toward the 400px M
		   target; live-verify this figure, the M-height itself isn't independently confirmed
		   (home.md's own spec table gives 320 for this same band, not 400 — see bands/home.json). */
		padding-block: 119px;
	}

	body:not(.onsil-home) .onsil-main > .onsil-cta {
		margin-top: 32px;
	}

	.onsil-cta__bg {
		object-position: left center;
		transform: scale(1.35);
		transform-origin: left center;
	}

	.onsil-cta__title {
		/* fix-10: 24px rendered the manually-broken 2-line title as 3 physical lines at the
		   340px mobile .onsil-wrap width (live-measured) — Figma's design intent is 2 lines;
		   22px is the largest size that still fits both segments on one line each. */
		font-size: 22px;
		max-width: 100%;
	}
}