/* treatment.css — single treatment page (Figma "/service-page/Grid-L").
   Layout shell + hero + sticky anchor nav + consultation sidebar + bottom CTA.
   Content-block styling is reused from blog-single.css (.article …). */

.treatment__top { padding-top: var(--space-m); }

/* Bottom breathing room before the footer (same rhythm as .blog-post__content). */
.treatment__content { padding-bottom: var(--space-3xl); }

.treatment__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	column-gap: var(--space-3xl);
	/* Cells stretch to the row height so the sidebar cell is tall enough for its
	   sticky child to travel as the long main column scrolls. */
	align-items: stretch;
}
/* Let the main column shrink below its content's intrinsic width (sticky nav,
   tables, etc.) instead of forcing horizontal page overflow. */
.treatment__main { min-width: 0; }

/* ---------- Hero ---------- */
.treatment__hero {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	padding-top: var(--space-3xl);
}
.treatment__title { margin: 0; }
.treatment__title em,
.treatment__title i { font-style: italic; }
.treatment__lead {
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	color: var(--color-grey-700);
	max-width: 720px;
}
.treatment__hero-media {
	width: 100%;
	aspect-ratio: 2 / 1;
	border-radius: var(--radius-s);
	overflow: hidden;
	background: var(--color-grey-200);
}
.treatment__hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Hero as a YouTube facade (smedia widget): 16:9 instead of the 2:1 image box. */
.treatment__hero-media--yt { aspect-ratio: 16 / 9; }

/* ---------- Sticky anchor nav ---------- */
.anchor-nav {
	position: sticky;
	top: var(--header-h);
	z-index: 5;
	background: var(--color-white);
	padding-block: var(--space-xs);
}
/* One knob for the edge fade: its width, the scroll-padding that keeps snapped
   pills clear of it, and the reveal offset read by treatment.js. Narrower on
   phones (client: the fade was washing out the first visible label). */
.anchor-nav__controls { position: relative; max-width: 100%; --anav-pad: 56px; }
.anchor-nav__track {
	display: flex;
	align-items: center;
	gap: var(--space-2x);
	padding: var(--space-2x);
	background: var(--color-grey-100);
	border-radius: var(--radius-m);
	overflow-x: auto;
	scrollbar-width: none;
	scroll-behavior: smooth;
	/* Touch swipe: keep momentum inside the track, never bounce the page sideways. */
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	/* Tapping/tabbing a pill makes the browser scroll it "just" into view — which
	   parked it under the 56px edge fade, half-covered. Reserve the fade's width
	   for every scroll-into-view (browser-driven focus scroll included). */
	scroll-padding-inline: var(--anav-pad);
	/* Stop between pills, never mid-label: a half-cut, half-faded pill at the edge
	   looked like a rendering bug. */
	scroll-snap-type: x proximity;
}
.anchor-nav__track::-webkit-scrollbar { display: none; }

/* Edge fades + round arrows on both sides — toggled by JS per scroll position,
   so the anchors can be scrolled back and forth. */
.anchor-nav__controls::before,
.anchor-nav__controls::after {
	content: "";
	position: absolute;
	/* Full height of the bar, not inset by the track padding. Inset, the fade was
	   exactly as tall as a pill (28px), so its 8px corner radius ate the corners
	   right where the text sits and labels bled out from under it. Spanning the
	   whole height pushes the rounded corners into the padding, where there is no
	   content, and leaves a full-width rectangle across the pill itself. */
	top: 0;
	bottom: 0;
	width: var(--anav-pad);
	pointer-events: none;
	opacity: 0;
	z-index: 1;
	transition: opacity .2s ease;
}
/* Colour stop in px, not %, and tied to the pill gap. After a snap the next pill
   sits at scroll-padding (= fade width), so the PREVIOUS one still pokes out up to
   `fade width - gap`. A percentage stop left that sliver only half-covered — the
   label visibly bled out. Going solid until the last `--space-2x` means the fade
   is opaque exactly across the sliver and only softens over the final 8px, and it
   holds for both fade widths (20px mobile / 56px desktop) without a second rule. */
.anchor-nav__controls::before {
	left: 0;
	border-radius: var(--radius-m) 0 0 var(--radius-m);
	background: linear-gradient(270deg, rgba(249, 249, 249, 0) 0, var(--color-grey-100) var(--space-2x));
}
.anchor-nav__controls::after {
	right: 0;
	border-radius: 0 var(--radius-m) var(--radius-m) 0;
	background: linear-gradient(90deg, rgba(249, 249, 249, 0) 0, var(--color-grey-100) var(--space-2x));
}
.anchor-nav__arrow {
	position: absolute;
	top: 50%;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--color-grey-200);
	color: var(--color-grey-900);
	box-shadow: 0 4px 16px rgba(13, 13, 13, .12);
	cursor: pointer;
	z-index: 2;
	opacity: 0;
	pointer-events: none;
	transform: translateY(-50%) scale(.85);
	transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.anchor-nav__arrow--prev { left: -8px; }
.anchor-nav__arrow--next { right: -8px; }
.anchor-nav__arrow--prev svg { transform: rotate(180deg); }
.anchor-nav__arrow:hover { background: var(--color-grey-400); }
.anchor-nav__controls.has-prev::before,
.anchor-nav__controls.has-next::after { opacity: 1; }
.anchor-nav__controls.has-prev .anchor-nav__arrow--prev,
.anchor-nav__controls.has-next .anchor-nav__arrow--next {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(-50%) scale(1);
}
.anchor-nav__item {
	flex: 0 0 auto;
	padding: var(--space-3xs) var(--space-xs);
	border-radius: var(--radius-s);
	/*font-size: var(--fs-body-s);*/
	font-size: var(--fs-caption);
	line-height: var(--lh-body-s);
	font-weight: 500;
	color: var(--color-grey-900);
	white-space: nowrap;
	text-decoration: none;
	scroll-snap-align: start;
	transition: background-color .2s ease, color .2s ease;
}
.anchor-nav__item:hover { background: var(--color-grey-200); }
.anchor-nav__item.is-active {
	background: var(--color-grey-900);
	color: var(--color-grey-100);
	/* Deliberately NOT lifted above the edge fades (z-index 1). Sitting on top of
	   them, the black pill punched a hard rectangle through the gradient every
	   time the active item changed mid-scroll — the client saw it as flickering.
	   Fading out like every other pill is the calmer read, and the reveal logic
	   in treatment.js keeps the active pill out from under the fade anyway. */
}

/* Touch / small screens: no arrows (client request) — the edge fades stay as the
   swipe affordance and the pills get a comfortable tap height. */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
	.anchor-nav__arrow { display: none; }
	/* No arrows here, so the fade is the only affordance — keep it, but narrow
	   enough not to grey out the first label. Mandatory snapping because this is
	   where the client saw pills cut in half after a swipe. */
	.anchor-nav__controls { --anav-pad: 20px; }
	.anchor-nav__track { scroll-snap-type: x mandatory; }
	/*.anchor-nav__item { padding-block: var(--space-2x); }*/
	.anchor-nav__item {
		padding-block: 0;
		/*font-size: var(--fs-caption);*/
		/*line-height: var(--lh-caption);*/
	}
}

/* Anchor targets — whole blocks and h2s typed inside a WYSIWYG body — land just below
   the sticky header + anchor nav, not under it. --anav-h is the nav's real height,
   published by treatment.js (76px desktop / 68px phone); the fallback covers no-JS. */
.treatment__article { margin-top: var(--space-xl); }
.treatment__article .t-block,
.treatment__article h2[id] { scroll-margin-top: calc(var(--header-h) + var(--anav-h, 76px) + var(--space-s)); }

/* ---------- Consultation sidebar ---------- */
.treatment__rail-sticky { position: sticky; top: calc(var(--header-h) + var(--space-l)); }

.consult {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	padding: var(--space-3xl) var(--space-l);
	border: 1px solid var(--color-grey-200);
	border-radius: var(--radius-s);
}
.consult__content { display: flex; flex-direction: column; gap: var(--space-m); width: 100%; }
.consult__header { display: flex; flex-direction: column; gap: var(--space-2x); }
.consult__title { margin: 0; }
.consult__text {
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	color: var(--color-grey-900);
}

.consult__features { display: flex; flex-direction: column; gap: var(--space-2x); }
.consult__feature {
	display: flex;
	align-items: center;
	gap: var(--space-2x);
	padding-bottom: var(--space-2x);
	border-bottom: 1px solid var(--color-grey-200);
}
.consult__feature-icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	color: var(--color-grey-900);
	line-height: 0;
}
.consult__feature-icon-img { width: 24px; height: 24px; object-fit: contain; }
.consult__feature-body { display: flex; flex-direction: column; min-width: 0; }
.consult__feature-title {
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	font-weight: 500;
	color: var(--color-grey-900);
}
.consult__feature-sub {
	font-size: var(--fs-body-s);
	line-height: var(--lh-body-s);
	color: var(--color-grey-800);
}

.consult__actions { display: flex; flex-direction: column; width: 100%; }
.consult__btn { width: 100%; }
.consult__or {
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--fs-body-s);
	font-weight: 500;
	color: var(--color-grey-900);
}

/* ---------- Mobile sticky bottom CTA ---------- */
.treatment-bottomcta { display: none; }
.treatment-bottomcta[hidden] { display: none; }
.treatment-bottomcta__btn { width: 100%; }

/* ---------- Tablet/mobile: drop the sidebar, show bottom CTA ---------- */
@media (max-width: 1024px) {
	.treatment__grid { grid-template-columns: minmax(0, 1fr); }
	.treatment__rail { display: none; }
	
	.treatment-bottomcta {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 40;
		padding: var(--space-xs) var(--gutter);
		background: var(--color-white);
		border-top: 1px solid var(--color-grey-200);
		box-shadow: 0 -4px 16px rgba(13, 13, 13, .06);
		/* JS toggles .is-visible within the editable scroll-progress window. */
		transform: translateY(120%);
		transition: transform .3s ease;
		pointer-events: none;
	}
	.treatment-bottomcta.is-visible { transform: translateY(0); pointer-events: auto; }
	.treatment-bottomcta__inner {
		max-width: calc(var(--container-max) + (var(--gutter) * 2));
		margin-inline: auto;
	}
}

@media (max-width: 600px) {
	.treatment__title { font-size: var(--fs-h-l); line-height: var(--lh-h-l); letter-spacing: var(--ls-h-l); }
	.treatment__hero { padding-top: var(--space-l); }
	.treatment__hero-media { aspect-ratio: 3 / 2; }
	/* Rating bar stacks: stars on top, label below (client). */
	.treatment__rating { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2x); }
}

@media (prefers-reduced-motion: reduce) {
	.treatment-bottomcta { transition: none; }
}