/* ===========================================================================
   Page Reimagined — the shared layer for the Lovable redesigns (REH-323).

   Darko's Lovable prototypes (Anker, then Imani as a remix of it) share one
   design system: white ground with hairline dividers, the split hero with its
   trust list, the video reel, CTA breaks, stat band, card carousels, the
   definition-grid facts table, the pinned translucent navbar, the prototype's
   button metrics. It was built on Anker (REH-308..315) inside anker-child;
   lifted here unchanged so every brand on the design shares one copy.

   Loaded ONLY for brands that opt in with add_theme_support('rehab-reimagined')
   (see rehab_parent_reimagined_enqueue()), after the parent CSS and before the
   child stylesheet, so a child still overrides it. Diamond does not opt in.

   Page-scoped rules key off body.rehab-reimagined — pages built from the
   design's blocks (social-proof ribbon or section divider in the content).
   Unscoped rules are brand-wide for an opted-in brand.

   Colours are the parent's tokens: the brand's primary is --rehab-sage-dark,
   its pale secondary --rehab-ethereal-sage, the warm closing-band ground
   --rehab-surface-warm. Comments keep their Anker history (sheet rows, REH ids)
   because that is where each value was decided.
   ======================================================================== */

/* ===========================================================================
   Page Reimagined — treatment pages (REH-309)

   The Lovable prototype's treatment template: the contents list becomes a
   bordered white card with two bulleted columns, and the facts table reads
   as a label-over-value definition grid instead of a table.
   ======================================================================== */

.rehab-article__toc {
	background: #FFFFFF;
	border: 1px solid var(--rehab-color-line);
	border-radius: var(--rehab-radius-sm);
	padding: clamp(1.5rem, 3vw, 2rem);
}

.rehab-article__toc-title {
	color: var(--rehab-sage-dark);
	letter-spacing: 0.18em;
}

.rehab-article__toc-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.25rem 2rem;
}

@media (min-width: 640px) {
	.rehab-article__toc-list { grid-template-columns: 1fr 1fr; }
}

/* Bullet dot instead of the parent's decimal counter. */
.rehab-article__toc-link::before {
	content: "";
	width: 6px;
	height: 6px;
	margin-top: 0.55em;
	border-radius: 50%;
	background: rgba(var(--rehab-sage-dark-rgb), 0.6);
}

/* ---- Facts: definition grid, two column-pairs on desktop ---------------- */

.rehab-facts {
	margin: 2rem 0 2.5rem;
}

.rehab-facts table {
	display: block;
	width: 100%;
	border-collapse: collapse;
}

.rehab-facts tbody {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 3rem;
}

@media (min-width: 640px) {
	.rehab-facts tbody { grid-template-columns: 1fr 1fr; }
}

.rehab-facts tr {
	display: flex;
	flex-direction: column;
	padding: 0.7rem 0 0.8rem;
	border-bottom: 1px solid var(--rehab-color-line);
}

.rehab-facts th,
.rehab-facts td {
	padding: 0;
	border: none;
	text-align: left;
	background: none;
}

.rehab-facts th {
	font-family: var(--rehab-font-body);
	font-weight: 400;
	font-size: 0.85rem;
	/* .6 was 3.71:1 — these are the spec-table labels ("Opnameduur", "Detox")
	   flagged in round-5 feedback. .7 is 4.94:1, still clearly the quiet label
	   against the value below it. REH-315. */
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.7);
}

.rehab-facts td {
	margin-top: 0.15rem;
	font-family: var(--rehab-font-body);
	font-size: 1rem;
	color: var(--rehab-color-fg);
}

/* ---- Reimagined layout: one centered column, no rails ------------------- */

.rehab-reimagined .rehab-article__layout {
	grid-template-columns: minmax(0, 1fr);
}

.rehab-reimagined .rehab-article__sidebar,
.rehab-reimagined .rehab-article__talk {
	display: none;
}

.rehab-reimagined .rehab-article__column {
	max-width: 56rem;
	margin: 0 auto;
}

/* The band sections escape the prose column to run edge to edge; their own
   .rehab-container re-centers the content. translateX keeps the math simple
   and clip (REH-108) stops the 100vw scrollbar-width overflow. */
.rehab-reimagined .rehab-article__main {
	overflow-x: clip;
}

.rehab-reimagined .rehab-article__body section.rehab-spr,
.rehab-reimagined .rehab-article__body section.rehab-cta-band,
.rehab-reimagined .rehab-article__body .wp-block-rehab-medical-review {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* The intro paragraph reads as body copy here, not as the article lede. */
.rehab-reimagined .rehab-article__body > p:first-of-type {
	font-family: var(--rehab-font-body);
	font-size: 1.05rem;
	line-height: 1.65;
}

/* The design's closing band is the warm cream, not the brand's pale green
   (--rehab-color-cream is remapped to Secondary on this brand). */
.rehab-reimagined .rehab-cta-band--cream {
	background: var(--rehab-surface-warm);
}

/* Facts cells: kill the prose table chrome that outranked the base restyle. */
.rehab-reimagined .rehab-article__body .rehab-facts table,
.rehab-reimagined .rehab-article__body .rehab-facts tr,
.rehab-reimagined .rehab-article__body .rehab-facts th,
.rehab-reimagined .rehab-article__body .rehab-facts td {
	border: none;
	background: none;
	padding: 0;
}

.rehab-reimagined .rehab-article__body .rehab-facts tr {
	padding: 0.7rem 0 0.8rem;
	border-bottom: 1px solid var(--rehab-color-line);
}

/* ---- Reimagined homepage (REH-310) -------------------------------------- */

/* The design removed the light-green section backgrounds: everything sits on
   white, separated by hairlines (Darko's handoff note). */
body.rehab-reimagined {
	background: #FFFFFF;
}

.rehab-reimagined .rehab-bg-cream,
.rehab-reimagined .rehab-bg-sage-mist {
	background: #FFFFFF;
}

/* Hero: white ground; the trust row reads as a checked two-column list under
   a hairline, and the portrait gets the design's swept top-left corner. */
.rehab-reimagined .rehab-hero {
	background: #FFFFFF;
}

.rehab-hero__trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 2.5rem;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(var(--rehab-sage-dark-rgb), 0.3);
}

.rehab-hero__trust-item {
	display: flex;
	align-items: flex-start;
	gap: 0.625rem;
	font-size: 0.95rem;
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.85);
}

.rehab-hero__diamond {
	display: none;
}

.rehab-hero__trust-item::before {
	content: "✓";
	flex: none;
	font-weight: 700;
	color: var(--rehab-sage-dark);
}

.rehab-reimagined .rehab-hero__image-wrap {
	border-top-left-radius: 100px;
	overflow: hidden;
}

@media (max-width: 560px) {
	.rehab-hero__trust { grid-template-columns: 1fr; }
}

/* Stat band: white with hairline column separators and serif numerals. */
.rehab-reimagined .rehab-stat-band {
	background: #FFFFFF;
}

.rehab-reimagined .rehab-stat-band__item {
	text-align: center;
}

/* Team carousel: portrait, name and role only — the bios live on /team/. */
.rehab-reimagined .rehab-team-grid--carousel .rehab-team-card__excerpt {
	display: none;
}

/* Hero accent word ("jou") in the brand green. */
.rehab-reimagined .rehab-hero__h1 em {
	font-style: italic;
	color: var(--rehab-sage-dark);
}

/* ===========================================================================
   Page Reimagined — pixel audit fixes (REH-309/310/311 follow-up)
   Side-by-side against the Lovable prototype, desktop + mobile.
   ======================================================================== */

/* ---- Assessment-hero form card: the design's boxed, stacked fields ------ */

.rehab-reimagined .rehab-assessment-hero__form-card {
	border-radius: 8px;
}

.rehab-reimagined .rehab-assessment-hero__form-title {
	font-size: 1.4rem;
}

.rehab-reimagined .rehab-assessment-hero__form-row {
	display: block;
}

.rehab-reimagined .rehab-assessment-hero__field {
	margin-bottom: 1.1rem;
}

.rehab-reimagined .rehab-assessment-hero__field label {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: 0.8rem;
	font-weight: 500;
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.85);
}

.rehab-reimagined .rehab-assessment-hero__field input,
.rehab-reimagined .rehab-assessment-hero__field select {
	width: 100%;
	/* --rehab-color-line is the decorative hairline (1.29:1). A field boundary
	   is a UI component and owes 3:1 under WCAG 1.4.11. REH-315. */
	border: 1px solid var(--rehab-color-field-line);
	border-radius: 6px;
	background: #FFFFFF;
	padding: 0.8rem 1rem;
}

.rehab-reimagined .rehab-assessment-hero__field input:focus,
.rehab-reimagined .rehab-assessment-hero__field select:focus {
	border-color: var(--rehab-sage-dark);
	outline: none;
}

.rehab-reimagined .rehab-assessment-hero__form-card .rehab-btn--block {
	font-size: 0.8rem;
	white-space: normal;
}

/* "Of bel …" reads as plain centered text: no icon, no underline. */
.rehab-reimagined .rehab-assessment-hero__form-phone {
	justify-content: center;
	font-weight: 500;
	color: var(--rehab-color-ink);
}

.rehab-reimagined .rehab-assessment-hero__form-phone svg {
	display: none;
}

.rehab-reimagined .rehab-assessment-hero__form-phone u {
	text-decoration: none;
}

/* ---- Contents card links: quiet rows, not underlined green links -------- */

.rehab-reimagined .rehab-article__toc-link {
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.85);
	text-decoration: none;
}

.rehab-reimagined .rehab-article__toc-link:hover,
.rehab-reimagined .rehab-article__toc-link:focus-visible {
	color: var(--rehab-sage-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- Facts labels: quiet, not bold (outranked by the prose th rule) ----- */

.rehab-reimagined .rehab-article__body .rehab-facts th {
	font-family: var(--rehab-font-body);
	font-weight: 400;
	font-size: 0.85rem;
	/* Matches the base .rehab-facts th: .6 -> .7 (3.71 -> 4.94:1). REH-315. */
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.7);
}

/* ---- Content tables: the design's borderless definition look ------------ */
/* (rehab-facts has its own grid treatment above.) */

.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) table,
.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) th,
.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) td {
	border: none;
	background: none;
}

.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) th,
.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) td {
	padding: 0.85rem 1.5rem 0.85rem 0;
	text-align: left;
	vertical-align: top;
}

.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) thead th {
	font-family: var(--rehab-font-display);
	font-weight: 400;
	font-size: 0.95rem;
	/* .65 was 4.27:1, just under AA. REH-315. */
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.7);
	border-bottom: 1px solid var(--rehab-color-ink);
}

.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) tbody td {
	border-bottom: 1px solid var(--rehab-color-line);
	font-size: 0.95rem;
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.75);
}

.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) tbody td:first-child,
.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) tbody th {
	font-weight: 600;
	color: var(--rehab-color-ink);
	border-bottom: 1px solid var(--rehab-color-line);
}

/* ---- Buttons inside prose never inherit the link underline -------------- */

.rehab-reimagined .rehab-article__body .rehab-btn,
.rehab-reimagined .rehab-cta-band .rehab-btn {
	text-decoration: none;
}

/* ---- Section H2s at the design's scale ---------------------------------- */

.rehab-reimagined .rehab-article__body > h2 {
	font-size: clamp(2rem, 2.6vw, 2.4rem);
}

/* ---- FAQ heading centered like the prototype ---------------------------- */

.rehab-reimagined .wp-block-rehab-faq h2,
.rehab-reimagined .rehab-faq__heading {
	text-align: center;
}

/* ---- Homepage article row: image left, single outline CTA --------------- */

@media (min-width: 900px) {
	.rehab-reimagined .rehab-article-row--reverse .rehab-article-row__media {
		order: 0;
	}
}

.rehab-reimagined .rehab-article-row .rehab-btn--luxury {
	display: none;
}

/* ---- The swept 100px hero corner is a homepage motif only --------------- */

.rehab-reimagined .rehab-hero__image-wrap {
	border-top-left-radius: 0;
}

body.home.rehab-reimagined .rehab-hero__image-wrap {
	border-top-left-radius: 100px;
}

/* The contents card is a link-list-card here; prose link styling outranked
   the block's own quiet rows. */
.rehab-reimagined .rehab-article__body .rehab-link-list-card__link,
.rehab-reimagined .rehab-article__body .rehab-link-list-card__footer-link {
	text-decoration: none;
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.85);
}

.rehab-reimagined .rehab-article__body .rehab-link-list-card__footer-link {
	color: var(--rehab-sage-dark);
}

.rehab-reimagined .rehab-article__body .rehab-link-list-card__link:hover,
.rehab-reimagined .rehab-article__body .rehab-link-list-card__link:focus-visible {
	color: var(--rehab-sage-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The design's form column is wider; the one-line submit depends on it. */
@media (min-width: 1024px) {
	.rehab-reimagined .rehab-assessment-hero__grid {
		grid-template-columns: minmax(0, 1fr) 440px;
	}
}

/* FAQ heading at the design scale (it rendered at prose-h2 size). */
.rehab-reimagined .rehab-faq__heading {
	font-size: clamp(2.1rem, 2.8vw, 2.7rem);
}

/* Comparison/review first column: medium, not heavy. */
.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) tbody td:first-child,
.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) tbody th {
	font-weight: 500;
}

/* The FAQ section heading is a content H2 on treatment pages. */
.rehab-reimagined .rehab-article__body > h2#faq {
	text-align: center;
}

/* The cream closing band meets the footer without the article's tail gap. */
.rehab-reimagined .rehab-article__main {
	padding-bottom: 0;
}

/* ---- Button hover per the prototype: deeper forest + soft green glow,
   no lift (Darko's Lovable hover notes: "mekana zelena senka, bez lifta"). */

.rehab-btn--luxury {
	box-shadow: 0 10px 24px -10px rgba(var(--rehab-sage-dark-rgb), 0.55);
}

.rehab-btn--luxury:hover,
.rehab-btn--luxury:focus-visible {
	background-color: var(--rehab-deep-charcoal);
	color: #FFFFFF;
	transform: none;
	box-shadow: 0 14px 30px -10px rgba(var(--rehab-sage-dark-rgb), 0.7);
	text-decoration: none;
}

.rehab-btn--outline:hover,
.rehab-btn--outline:focus-visible {
	background: var(--rehab-deep-charcoal);
	border-color: var(--rehab-deep-charcoal);
	color: #FFFFFF;
}

.rehab-cta-band--line .rehab-btn--dark:hover,
.rehab-cta-band--line .rehab-btn--dark:focus-visible,
.rehab-cta-band--cream .rehab-btn--dark:hover,
.rehab-cta-band--cream .rehab-btn--dark:focus-visible {
	box-shadow: 0 14px 30px -10px rgba(var(--rehab-sage-dark-rgb), 0.7);
}

/* ---- Robbin's homepage spacing pass (REH-310 follow-up) ------------------ */

/* Hero: the prototype's decorative square keys off the brand green. */
.rehab-reimagined .rehab-hero__deco {
	border-color: rgba(var(--rehab-sage-dark-rgb), 0.4);
}

/* Video reel: three full-width cards at the design's 9/13 crop, white
   play disc with the brand triangle. */
.rehab-reimagined .rehab-video-reel__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.rehab-reimagined .rehab-video-reel__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.rehab-reimagined .rehab-video-reel__grid { grid-template-columns: repeat(3, 1fr); }
}

.rehab-reimagined .rehab-video-card {
	width: auto;
	min-width: 0;
	flex: none;
}

.rehab-reimagined .rehab-video-card__poster {
	aspect-ratio: 9 / 13;
}

.rehab-reimagined .rehab-video-card__play {
	width: 56px;
	height: 56px;
	background: rgba(255, 255, 255, 0.85);
	color: var(--rehab-sage-dark);
	backdrop-filter: blur(4px);
}

.rehab-reimagined .rehab-video-card__play svg {
	fill: currentColor;
	color: var(--rehab-sage-dark);
}

/* CTA breaks at the prototype's exact rhythm: hairline -> 60px -> heading
   (2.1rem, snug, no tracking) -> 36px -> button -> 24px -> note (0.85rem,
   no tracking) -> 60px -> hairline. */
.rehab-reimagined .rehab-cta-band--line {
	padding: 3.75rem 0;
}

.rehab-reimagined .rehab-cta-band--line .rehab-cta-band__heading {
	margin-bottom: 0;
	font-size: clamp(1.75rem, 1.2vw + 1.2rem, 2.1rem);
	line-height: 1.375;
	letter-spacing: 0;
}

.rehab-reimagined .rehab-cta-band--line .rehab-cta-band__stack {
	margin-top: 2.25rem;
}

.rehab-reimagined .rehab-cta-band__stack .rehab-cta-band__helper {
	margin-top: 1.5rem;
	font-size: 0.85rem;
	letter-spacing: normal;
}

/* Stat band: centered measure and the design's smaller numerals.
   70rem, not 64rem (sheet row 98): every neighbouring section runs its content
   out to 70rem, so the band was a step narrower than the page around it and
   squeezed four items into 229px columns — long values like "Voor partners"
   wrapped to two lines and left the row ragged. */
.rehab-reimagined .rehab-stat-band__grid {
	max-width: 70rem;
	margin-left: auto;
	margin-right: auto;
}

.rehab-reimagined .rehab-stat-band__value {
	font-size: 3rem;
}

/* Card carousels: a narrower measure with real gutters, so the arrows sit
   beside the cards instead of at the screen edge. */
.rehab-reimagined .rehab-cards-grid__viewport {
	max-width: 70rem;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1240px) {
	.rehab-reimagined .rehab-cards-grid__arrow--prev { left: -3.25rem; }
	.rehab-reimagined .rehab-cards-grid__arrow--next { right: -3.25rem; }
}

/* Kosten: the image fills the text column's height (the design's squared
   crop) instead of its natural landscape ratio. */
.rehab-reimagined .rehab-feature-split__media {
	height: 100%;
}

.rehab-reimagined .rehab-feature-split__media img {
	width: 100%;
	height: 100%;
	min-height: 480px;
	object-fit: cover;
}

/* ---- One-on-one audit round 2 (REH-310) ---------------------------------- */

/* CTA break headings run the full band width like the prototype's max-w-6xl,
   so the one-liners stay one line. */
.rehab-reimagined .rehab-cta-band--line .rehab-container--narrow {
	max-width: var(--rehab-container-max);
}

/* Video reel: plain captions under the stills — no card chrome. */
.rehab-reimagined .rehab-video-card {
	background: none;
	border: none;
}

.rehab-reimagined .rehab-video-card__caption {
	padding: 1rem 0 0;
	margin: 0;
	font-family: var(--rehab-font-body);
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.35;
	color: var(--rehab-color-ink);
}

/* The gallery heading balances over two lines like the prototype. */
.rehab-reimagined .rehab-gallery__header .rehab-heading {
	text-wrap: balance;
}

/* ---- Header detail pass (REH-310, Robbin review) ------------------------- */

/* The navbar rides the same 78rem measure as the content sections: the side
   padding absorbs the leftover viewport, with the sections' 24px gutter. */
.rehab-navbar {
	padding-left: max(1.5rem, calc((100% - 78rem) / 2 + 1.5rem));
	padding-right: max(1.5rem, calc((100% - 78rem) / 2 + 1.5rem));
}

/* The header CTA at the prototype's size (px-5 py-3, 0.82rem, wide tracking). */
.rehab-navbar .rehab-btn,
.rehab-navbar__actions .rehab-btn {
	padding: 0.75rem 1.25rem;
	font-size: 0.82rem;
	letter-spacing: 0.16em;
}

/* The phone number is plain text: no icon, no underline, body weight 500. */
.rehab-navbar a[href^="tel:"] {
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
	border-bottom: none;
}

.rehab-navbar a[href^="tel:"] svg {
	display: none;
}

.rehab-navbar a[href^="tel:"] u,
.rehab-navbar a[href^="tel:"] span {
	text-decoration: none;
	border-bottom: none;
}

/* Homepage hero: the prototype's even 50/50 split — this is what sets the
   design's headline line breaks. */
@media (min-width: 1024px) {
	body.home.rehab-reimagined .rehab-hero__grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* The hero block carries its own hardcoded 1440px container; on this brand
   it follows the shared 78rem measure like every other section. */
.rehab-reimagined .rehab-hero__container {
	max-width: var(--rehab-container-max);
	padding: 0 1.5rem;
}

/* The prototype's homepage headline runs at 4rem on desktop. */
@media (min-width: 1024px) {
	body.home.rehab-reimagined .rehab-hero__h1 {
		font-size: 4rem;
	}
}

/* ---- Button metrics per the prototype (REH-310, Robbin detail pass) ------
   The design's buttons run smaller type (0.82rem) with wider tracking and
   generous vertical padding (py-4 / px-8; the article outline py-3.5 / px-7).
   Ours kept the parent's 15px/0.12em, which reads cramped next to the mock.
   The sticky mobile CTA and the navbar keep their own tuned sizes. */

.rehab-btn {
	font-size: 0.82rem;
	letter-spacing: 0.16em;
}

.rehab-btn--luxury:not(.rehab-sticky-cta__open),
.rehab-btn--dark,
.rehab-btn--light {
	padding: 1.0625rem 2rem;
}

.rehab-btn--outline {
	padding: 1rem 1.75rem;
	border: 1px solid var(--rehab-sage-dark);
	color: var(--rehab-sage-dark);
}

/* Higher-specificity earlier rules restated at the new metrics. */
.rehab-navbar .rehab-btn,
.rehab-navbar__actions .rehab-btn {
	padding: 0.75rem 1.25rem;
}

.rehab-cta-band--cream .rehab-btn--light {
	padding: 1.0625rem 2rem;
}

/* ---- Header stays pinned (REH-310, Robbin review) ------------------------
   The parent hides the fixed navbar while scrolling down (header.js toggles
   .is-hidden). The prototype's header is always visible — sticky with a
   translucent blurred ground. Neutralise the hide here rather than fork
   the shared script; Diamond keeps its behaviour. */

.rehab-navbar.is-hidden {
	transform: none;
}

.rehab-navbar,
.rehab-navbar.is-stuck {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--rehab-color-line);
}

/* ===========================================================================
   Darko feedback round, 28 Aug (sheet) — REH-310/309 follow-ups
   ======================================================================== */

/* The hero trust list is body type everywhere (some pages inherited serif). */
.rehab-hero__trust-item {
	font-family: var(--rehab-font-body);
}

/* [E3] The tab bar's baseline ends at the last tab, not the container edge. */
.rehab-treatment-index__tabbar {
	width: fit-content;
	max-width: 100%;
}

/* [E9] The glass play button sits above centre so no face is covered. */
.rehab-reimagined .rehab-hero__play {
	align-items: flex-start;
}

.rehab-reimagined .rehab-hero__play svg,
.rehab-reimagined .rehab-hero__play > * {
	margin-top: calc(40% - 28px);
}

/* [E10] No rule above the steps coda. */
.rehab-reimagined .rehab-steps--flow .rehab-steps__outro {
	border-top: none;
	padding-top: 0;
}

/* [E13/E27] The numbers band carries no rules of its own; the section
   dividers around it do the separating. */
.rehab-reimagined .rehab-stat-band {
	border-top: none;
	border-bottom: none;
}

/* [E18] Form microcopy centred under the phone line. */
.rehab-reimagined .rehab-assessment-hero__consent {
	text-align: center;
}

/* [E20] Content tables: the header rule is a hairline like the rest. */
.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) thead th {
	border-bottom: 1px solid var(--rehab-color-line);
}

/* [E22] Ribbon tooltips float above the sections that follow. */
.rehab-reimagined .rehab-article__body section.rehab-spr {
	position: relative;
	z-index: 5;
}

/* [E23] The closing band's lede stays centred inside article prose. */
.rehab-reimagined .rehab-article__body .rehab-cta-band__lede {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/* [E24] The light green ground is gone brand-wide (contact & friends). */
.rehab-bg-cream,
.rehab-bg-sage-mist {
	background: #FFFFFF;
}

/* [E11] Mobile: the cream band's buttons stack at full width instead of
   one oversized mailto pill. */
@media (max-width: 560px) {
	.rehab-cta-band--cream .rehab-cta-band__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.rehab-cta-band--cream .rehab-btn {
		width: 100%;
		white-space: normal;
	}
}

/* [E4/R36] Location/method cards level out: the track stretches its items,
   so every card's bottom edge lines up regardless of copy length. */
.rehab-reimagined .rehab-cards-grid--carousel .rehab-cards-grid__track {
	align-items: stretch;
}

.rehab-reimagined .rehab-cards-grid--carousel .rehab-card {
	height: auto;
}

/* [E12] Slide dots under the carousels — phones only, like Diamond. */
.rehab-carousel-dots {
	display: none;
	justify-content: center;
	gap: 0.4rem;
	margin-top: 1rem;
}

.rehab-carousel-dots button {
	width: 7px;
	height: 7px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(var(--rehab-sage-dark-rgb), 0.3);
	cursor: pointer;
	transition: background 0.2s var(--rehab-ease);
}

.rehab-carousel-dots button.is-active {
	background: var(--rehab-sage-dark);
}

@media (max-width: 767px) {
	.rehab-carousel-dots { display: flex; }
}

/* [E2] The compact call CTA under the video reel: solid button on the white
   ground, plain centred microcopy without the marker dot. */
.rehab-reimagined .rehab-cta-band--none .rehab-btn--dark {
	background: var(--rehab-sage-dark);
	color: #FFFFFF;
}

.rehab-reimagined .rehab-cta-band--none .rehab-btn--dark:hover,
.rehab-reimagined .rehab-cta-band--none .rehab-btn--dark:focus-visible {
	background: var(--rehab-deep-charcoal);
	color: #FFFFFF;
}

.rehab-reimagined .rehab-cta-band--none .rehab-cta-band__helper::before {
	display: none;
}

.rehab-reimagined .rehab-cta-band--none {
	padding: 0 0 3.5rem;
}

/* [E19] Article prose margins leak into embedded CTA bands and inflate
   their height; the band's own rhythm is authoritative. */
.rehab-reimagined .rehab-article__body .rehab-cta-band__heading {
	margin-top: 0;
}

.rehab-reimagined .rehab-article__body .rehab-cta-band__helper,
.rehab-reimagined .rehab-article__body .rehab-cta-band__lede {
	margin-bottom: 0;
}

/* ===========================================================================
   Feedback round 2 (sheet, 1 Sep) — reopened + new items
   ======================================================================== */

/* [R20] The dark 3px rule sat on <thead> itself, not the th (missed before). */
.rehab-reimagined .rehab-article__body figure.wp-block-table:not(.rehab-facts) thead {
	border-bottom: 1px solid var(--rehab-color-line);
}

/* [R31] CTA breaks sit on the warm cream, like the closing band. */
.rehab-reimagined .rehab-cta-band--line,
.rehab-cta-band--line {
	background: var(--rehab-surface-warm);
}

/* [R35] The team photo fills the card — the base block sizes it with a
   padding-ratio hack that left an 18px strip under the hover shade. */
.rehab-team-grid--carousel .rehab-team-card__photo {
	height: 100%;
	padding-bottom: 0;
}

/* [R37/R38] Mobile ribbon: breathing room on the right, and tooltips become
   a bottom sheet instead of clipping at the edges. */
@media (max-width: 767px) {
	.rehab-spr__logos {
		gap: 1.5rem 1rem;
		padding: 0 1.25rem;
	}

	.rehab-spr__logo img {
		max-width: 8.5rem;
	}

}

/* Diamond's tap panel (tooltip-mobile.js) takes over at ITS breakpoint —
   720px, not our 767 grid break — so there is no dead band where neither
   tooltip works. */
@media (max-width: 720px) {
	.rehab-spr__tip {
		display: none;
	}
}

/* [R40] Mobile: the team section and the reviews element sit closer. */
@media (max-width: 767px) {
	.rehab-reimagined .rehab-team-grid--carousel {
		padding-bottom: 1.5rem;
	}

	.rehab-reimagined .rehab-review-sources,
	.rehab-reimagined [class*="wp-block-rehab-review-sources"] section {
		padding-top: 1rem;
	}
}

/* [R47] The team grid shows people, not bios — names and roles only. */
.rehab-team-grid--grid .rehab-team-card__excerpt {
	display: none;
}

/* ---- [R24/R32/R43/R44] One root cause: the body ground was the pale green
   on every non-reimagined page — the "green behind everything", the page
   title bands and the bedankt pages all inherited it. White, brand-wide. */
body {
	background: #FFFFFF;
}

/* Page titles share the prose measure, so the H1 lines up with the copy
   beneath it (the 'Team' misalignment). */
.rehab-page-title {
	max-width: 56rem;
	margin: 0 auto;
	padding: 2.75rem 1.5rem 0.5rem;
	box-sizing: content-box;
}

@media (min-width: 62rem) {
	.rehab-page-title {
		box-sizing: border-box;
		padding-left: 0;
		padding-right: 0;
	}
}

.rehab-page-title h1 {
	margin: 0;
}

/* [R33] Contact on phones: the form leads, the contact methods follow. */
@media (max-width: 900px) {
	.rehab-contact-methods__grid {
		display: flex;
		flex-direction: column;
	}

	.rehab-contact-methods__rail {
		order: 2;
	}
}

/* [R32] Breadcrumbs read the same on every page: the page-level crumb bar
   matches the article one (uppercase, quiet, hairline below). */
.rehab-breadcrumb {
	border-bottom: 1px solid var(--rehab-color-line);
	padding: 0.9rem 0;
	font-family: var(--rehab-font-body);
	font-size: var(--rehab-breadcrumb-size);
	font-weight: 500;
	letter-spacing: var(--rehab-breadcrumb-tracking);
	text-transform: uppercase;
}

.rehab-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rehab-breadcrumb__list li {
	display: flex;
	gap: 0.6rem;
	color: var(--rehab-color-ink);
}

.rehab-breadcrumb__list li + li::before {
	content: "/";
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.4);
}

.rehab-breadcrumb__list a {
	/* A real link, so it carries the AA duty the decorative "/" separator above
	   does not: .6 was 3.71:1, .7 is 4.94:1. REH-315. */
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.7);
	text-decoration: none;
}

.rehab-breadcrumb__list a:hover {
	color: var(--rehab-sage-dark);
	text-decoration: underline;
}

.rehab-team-card__excerpt {
	display: none;
}

/* Mobile hero: text leads, the video/photo follows — the parent block puts
   media first (order: -1) under 1024px, which fronts the video reel. */
@media (max-width: 1023px) {
	.rehab-hero__media {
		order: 0;
	}
}

/* ---- [R62] Mobile air: the hero carried Diamond-sized top padding on top
   of the fixed-header offset, and the breadcrumb row added its own 40px. */
@media (max-width: 767px) {
	.rehab-hero {
		padding-top: 2rem;
	}

	main > .rehab-breadcrumb {
		margin-top: 0.75rem;
	}

	main > .rehab-breadcrumb + * ,
	main > .rehab-breadcrumb + .rehab-page-content {
		margin-top: 0;
	}
}

/* A band with three figures fills the row instead of leaving an empty fourth
   column (Imani, REH-319). Anker's bands carry four, so this does not apply
   there. Phones keep the block's own stacked layout. */
@media (min-width: 981px) {
	.rehab-stat-band__grid:has(> .rehab-stat-band__item:nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Inactive why-tabs labels at AA (Anker REH-315, now shared): the block's .45
   alpha measured 2.1-2.8:1. Anker keeps its identical rule in anker-child. */
.rehab-why-tabs__tab {
	color: rgba(var(--rehab-soft-charcoal-rgb), 0.7);
}