/* Editorial article layout — implemented from the "Blog Page Redesign" design
   (Variation 1 · Editorial Refined). Used by both single.php and
   template-article.php via template-parts/article-page.php. */

/* ---- Tokens local to this file ----------------------------------------- */
:root {
	--rehab-article-line-sage: rgba(186, 195, 161, 0.30);
	--rehab-article-line-tan:  rgba(190, 179, 158, 0.30);
	--rehab-article-line-soft: rgba(190, 179, 158, 0.15);
	--rehab-article-fg-3:      rgba(74, 74, 74, 0.7);
}

/* ---- Article shell ----------------------------------------------------- */
.rehab-article {
	background: var(--rehab-color-bg);
	color: var(--rehab-warm-charcoal);
}

/* ---- Breadcrumb -------------------------------------------------------- */
.rehab-article__crumb {
	border-bottom: 1px solid var(--rehab-article-line-soft);
	padding: 1.1rem 0 1rem;
}

.rehab-article__crumb > .rehab-container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem;
	font-family: var(--rehab-font-body);
	font-size: var(--rehab-breadcrumb-size);
	letter-spacing: var(--rehab-breadcrumb-tracking);
	text-transform: uppercase;
	color: var(--rehab-article-fg-3);
}

.rehab-article__crumb a {
	color: var(--rehab-article-fg-3);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s var(--rehab-ease);
}

.rehab-article__crumb a:hover {
	color: var(--rehab-sage-dark);
	border-bottom-color: currentColor;
}

.rehab-article__crumb-sep {
	color: rgba(122, 133, 106, 0.5);
}

.rehab-article__crumb-current {
	color: var(--rehab-warm-charcoal);
}

/* ---- Main grid: article + sidebar ------------------------------------- */
.rehab-article__main {
	padding: 2.5rem 0 4rem;
}

@media (min-width: 1024px) {
	.rehab-article__main {
		padding: 3rem 0 5rem;
	}
}

.rehab-article__layout {
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
	.rehab-article__layout {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 4rem;
	}
}

/* Constrain the prose column so headings + paragraphs don't go ultra-wide
   even when no sidebar is shown (mobile fallback layout). */
.rehab-article__column {
	min-width: 0;
	max-width: 800px;
	margin: 0 auto;
	width: 100%;
}

@media (min-width: 1024px) {
	.rehab-article__column {
		margin: 0;
		max-width: none;
	}
}

/* ---- Eyebrow + title -------------------------------------------------- */
.rehab-article__eyebrow {
	font-family: var(--rehab-font-body);
	font-weight: 500;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rehab-sage-text);
	margin: 0 0 0.7rem;
}

.rehab-article__title {
	/* Long compounds must break rather than push the page wide (REH-236).
	   The title sits OUTSIDE .rehab-article__body, so it never inherited the
	   overflow-wrap REH-10 added there. English titles rarely contain a word
	   long enough to notice; Dutch ones routinely do —
	   "antihistamineverslaving" at h1 size overflowed 360px by 25px and gave
	   the whole page a horizontal scrollbar. */
	overflow-wrap: break-word;
	font-family: var(--rehab-font-display);
	font-weight: 300;
	font-size: 2.25rem;
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: var(--rehab-warm-charcoal);
	margin: 0 0 1.5rem;
	max-width: 22ch;
	text-wrap: balance;
}

@media (min-width: 768px)  { .rehab-article__title { font-size: 2.75rem; } }
@media (min-width: 1024px) { .rehab-article__title { font-size: 3.25rem; } }

/* ---- Meta strip (badge + reading time + updated) --------------------- */
.rehab-article__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.25rem;
	align-items: center;
	margin-bottom: 2rem;
}

.rehab-article__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: var(--rehab-ethereal-sage);
	padding: 0.45rem 0.85rem;
	font-family: var(--rehab-font-body);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--rehab-sage-text);
	border: 1px solid var(--rehab-article-line-sage);
}

.rehab-article__badge-icon { color: var(--rehab-sage-text); }

.rehab-article__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--rehab-font-body);
	font-size: 0.82rem;
	color: var(--rehab-article-fg-3);
	font-weight: 400;
}

.rehab-article__meta-icon { color: currentColor; opacity: 0.8; }

.rehab-article__meta-item--quiet { color: var(--rehab-article-fg-3); }

/* ---- Author + reviewer split bar ------------------------------------- */
.rehab-article__credit {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	border-top: 1px solid var(--rehab-article-line-sage);
	border-bottom: 1px solid var(--rehab-article-line-sage);
	padding: 1.25rem 0;
	margin: 0 0 2.5rem;
}

.rehab-credit__cell {
	display: flex;
	gap: 0.85rem;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.2s var(--rehab-ease);
}

.rehab-credit__cell:hover { opacity: 0.85; }

.rehab-credit__avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--rehab-ethereal-sage);
	flex-shrink: 0;
	overflow: hidden;
	display: grid;
	place-items: center;
	border: 1px solid var(--rehab-article-line-sage);
}

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

.rehab-credit__initials {
	font-family: var(--rehab-font-display);
	font-size: 1rem;
	color: var(--rehab-sage-text);
}

.rehab-credit__text { display: flex; flex-direction: column; }

.rehab-credit__label {
	font-family: var(--rehab-font-body);
	font-size: 0.66rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--rehab-article-fg-3);
	font-weight: 500;
	margin-bottom: 2px;
}

.rehab-credit__name {
	font-family: var(--rehab-font-body);
	font-weight: 500;
	font-size: 0.9rem;
	color: var(--rehab-warm-charcoal);
	line-height: 1.3;
}

.rehab-credit__role {
	font-family: var(--rehab-font-body);
	font-size: 0.78rem;
	color: var(--rehab-article-fg-3);
	font-weight: 300;
	margin-top: 2px;
}

/* ---- Featured image with Diamond top-left corner --------------------- */
.rehab-article__featured {
	margin: 0 0 2.5rem;
}

.rehab-article__featured-image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rehab-ethereal-sage);
	border-top-left-radius: 100px;
}

.rehab-article__featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top right, rgba(186, 195, 161, 0.18), transparent 55%);
	pointer-events: none;
}

.rehab-article__featured-img,
.rehab-article__featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Article body typography -----------------------------------------
   Body fills the article column (no internal max-width) so the featured
   image and prose line up at the same width — matches the design. */
.rehab-article__body {
	font-family: var(--rehab-font-body);
	font-weight: 300;
	font-size: 1.0625rem;
	line-height: 1.78;
	color: var(--rehab-soft-charcoal);
	/* Break long unbreakable tokens (chemical names like
	   "3,4-Methylenedioxymethamphetamine", URLs, run-on words) instead of
	   letting them overflow the narrow column and widen the page on mobile. */
	overflow-wrap: break-word;
}

.rehab-article__body p { margin: 0 0 1.5rem; }
.rehab-article__body p:last-child { margin-bottom: 0; }

/* Stylised lede: first paragraph in the body gets a larger, lighter serif
   treatment — matches the design's "lede" without requiring authors to mark
   it up specially. */
.rehab-article__body > p:first-of-type {
	font-family: var(--rehab-font-display);
	font-weight: 300;
	font-size: 1.4rem;
	line-height: 1.45;
	letter-spacing: -0.015em;
	color: var(--rehab-warm-charcoal);
	margin-bottom: 1.75rem;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.rehab-article__body > p:first-of-type { font-size: 1.5rem; }
}

/* ...unless the lede is already on the page above the hero, in which case the
   body opens with ordinary prose (sheet row 73). */
.rehab-article__body--lede-above > p:first-of-type {
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

@media (min-width: 768px) {
	.rehab-article__body--lede-above > p:first-of-type { font-size: inherit; }
}

.rehab-article__body h2 {
	font-family: var(--rehab-font-display);
	font-weight: 300;
	font-size: 1.75rem;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--rehab-warm-charcoal);
	margin: 3.25rem 0 1.25rem;
	scroll-margin-top: calc(var(--rehab-header-height, 5rem) + 1rem);
}

@media (min-width: 768px) {
	.rehab-article__body h2 { font-size: 2rem; }
}

.rehab-article__body h3 {
	font-family: var(--rehab-font-display);
	font-weight: 300;
	font-size: 1.375rem;
	letter-spacing: -0.015em;
	color: var(--rehab-warm-charcoal);
	margin: 2.5rem 0 1rem;
	scroll-margin-top: calc(var(--rehab-header-height, 5rem) + 1rem);
}

@media (min-width: 768px) {
	.rehab-article__body h3 { font-size: 1.5rem; }
}

/* h4–h6 previously had no explicit size, so browsers fell back to their
   defaults (h5 ≈ 0.83em, h6 ≈ 0.67em) — i.e. *smaller* than the 1.0625rem
   body text. Size them into a clear descending hierarchy that stays at or
   above body size. */
.rehab-article__body h4 {
	font-family: var(--rehab-font-display);
	font-weight: 400;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
	line-height: 1.3;
	color: var(--rehab-warm-charcoal);
	margin: 2rem 0 0.75rem;
	scroll-margin-top: calc(var(--rehab-header-height, 5rem) + 1rem);
}

.rehab-article__body h5 {
	font-family: var(--rehab-font-body);
	font-weight: 600;
	font-size: 1.125rem;
	line-height: 1.4;
	color: var(--rehab-warm-charcoal);
	margin: 1.75rem 0 0.5rem;
	scroll-margin-top: calc(var(--rehab-header-height, 5rem) + 1rem);
}

.rehab-article__body h6 {
	font-family: var(--rehab-font-body);
	font-weight: 600;
	font-size: 1.0625rem;
	letter-spacing: 0.01em;
	line-height: 1.4;
	color: var(--rehab-warm-charcoal);
	margin: 1.5rem 0 0.5rem;
	scroll-margin-top: calc(var(--rehab-header-height, 5rem) + 1rem);
}

.rehab-article__body a {
	color: var(--rehab-sage-text);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
}

.rehab-article__body a:hover { color: var(--rehab-sage-dark); }

.rehab-article__body strong { font-weight: 500; color: var(--rehab-warm-charcoal); }

.rehab-article__body ul,
.rehab-article__body ol {
	padding-left: 1.4rem;
	margin: 0 0 1.5rem;
}

.rehab-article__body li { margin-bottom: 0.5rem; }

.rehab-article__body img {
	max-width: 100%;
	height: auto;
	margin: 2rem 0;
}

.rehab-article__body blockquote {
	font-family: var(--rehab-font-display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1.4;
	color: var(--rehab-warm-charcoal);
	border-left: 3px solid var(--rehab-sage);
	padding: 0.5rem 0 0.5rem 1.5rem;
	margin: 2rem 0;
}

/* ---- Legacy WP color presets ----------------------------------------
   Diamond's legacy content uses block colors (`has-beige-background-color`,
   `has-primary-background-color`, etc.) that were registered in the old
   diamond theme. Mirror those exact values here so legacy callouts retain
   their colored backgrounds inside the new editorial body. Values lifted
   from diamond/assets/css/main.min.css to match prod 1:1. */
.rehab-article__body .has-beige-background-color    { background-color: var(--rehab-cream-warm); }
.rehab-article__body .has-secondary-background-color { background-color: var(--rehab-surface-tint); }
.rehab-article__body .has-primary-background-color  { background-color: rgba(187, 195, 161, 0.14); }
.rehab-article__body .has-white-background-color    { background-color: var(--rehab-color-bg); }

/* When a coloured block uses `has-global-padding` but the page-level root
   padding is 0, the colour band has no breathing room. Force a reasonable
   padding so the colour swatch reads as a callout, not a stripe. */
.rehab-article__body .has-background.has-global-padding,
.rehab-article__body .has-background:not(.wp-block-button__link):not(.wp-element-button) {
	padding: 1.5rem 1.75rem;
}

.rehab-article__body .has-background > :first-child { margin-top: 0; }
.rehab-article__body .has-background > :last-child  { margin-bottom: 0; }

/* Legacy "secondary" text color (used on small caption-style runs). */
.rehab-article__body .has-secondary-color { color: var(--rehab-sage-text); }

/* ---- Tables in the article body (REH-304) -----------------------------

   The theme has always styled tables, but only through
   `.rehab-page-content > .wp-block-table`, which matches the page template
   alone. Everything on the article template — all 27 treatment pages, their
   comparison tables and the "In het kort" fact table — fell through to browser
   defaults: 8.5px cells, centred headers, no header tint.

   Same visual language as the page-template rule, restated here rather than
   added to that selector list, because the two live in different layouts and
   this one has to handle a narrower column. */
.rehab-article__body .wp-block-table {
	margin: 2rem 0;
	/* Imported content carries hard column widths; let a wide table scroll
	   inside its own box rather than widening the whole column. */
	overflow-x: auto;
}

.rehab-article__body .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--rehab-font-body);
	font-size: 0.95rem;
}

.rehab-article__body .wp-block-table th,
.rehab-article__body .wp-block-table td {
	border: 1px solid var(--rehab-color-line);
	padding: 0.625rem 0.75rem;
	text-align: left;
	vertical-align: top;
}

.rehab-article__body .wp-block-table th {
	background: var(--rehab-ethereal-sage);
	font-weight: 500;
	color: var(--rehab-color-ink);
}

/* A row-header column — the shape both the comparison tables and the fact
   table use — is a label, not a heading band, so it takes the tint without
   the full header weight. */
.rehab-article__body .wp-block-table tbody th {
	background: var(--rehab-sage-mist-2);
}

.rehab-article__body .wp-block-table figcaption {
	font-family: var(--rehab-font-body);
	font-size: 0.82rem;
	color: var(--rehab-color-ink-soft);
	margin-top: 0.6rem;
}

/* ---- A hero above the article layout (REH-303, aligned REH-304) --------

   rehab/assessment-hero uses the full-width .rehab-container, which is right
   on Diamond's full-bleed treatment pages. Inside the article layout it left
   the hero copy starting at 48px against the body's 168px — a 120px step
   between the headline and the first paragraph under it.

   Constrained here rather than on the block, so the block keeps behaving as
   it does everywhere else it is used. */
.rehab-article__hero .rehab-container {
	max-width: var(--rehab-container-narrow);
}

/* The hero band and its form card are both white (REH-307).

   A tint was tried here first, on the reasoning that a white band on a white
   page has no visible edge. Robbin's call is that it does not need one: the
   hero is the top of the page, the header sits directly above it, and letting
   the two run together as one white field reads calmer than banding it.

   The form card is white too — it ships a pale mint, which against a white
   hero read as a grey patch rather than a panel. Its border is what separates
   it now, which is enough on a surface this size.

   Stated here rather than left to the block's own default so the intent is
   explicit: this is a decision, not an omission. */
.rehab-article__hero .rehab-assessment-hero,
.rehab-article__hero .rehab-assessment-hero__form-card {
	background: var(--rehab-color-white, #FFFFFF);
}

/* The hero's own two columns take the same measures as the two below it, so
   the copy sits over the prose and the form over the sidebar rather than each
   having its own edges. Matches .rehab-article__layout exactly: the same 360px
   rail, the same 4rem gutter, and the same 1024px breakpoint at which that
   layout becomes two columns in the first place. */
@media (min-width: 1024px) {
	.rehab-article__hero .rehab-assessment-hero__grid {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 4rem;
	}
}

/* ---- Section blocks used inline in an article ------------------------- */

/* rehab/faq and rehab/cards-grid are page-section blocks: each carries its own
   container and band-sized vertical padding. That is right on a landing page
   and wrong halfway through a 2,500-word article, where the prose column
   already sets the measure — the nested container inset the FAQ list by 48px
   against the paragraphs above it, and the band padding opened a 5rem hole.
   Inside the article body they collapse to an ordinary block gap (REH-295). */
.rehab-article__body .rehab-faq,
.rehab-article__body .rehab-cards-grid {
	padding-top: 0;
	padding-bottom: 0;
	margin: 2rem 0;
}

.rehab-article__body .rehab-faq .rehab-container,
.rehab-article__body .rehab-cards-grid .rehab-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ---- Intro-first lead (rehab_article_intro_first) --------------------- */

/* The lead paragraphs, lifted above the contents and the hero. It reuses the
   body's prose container, so it needs no type rules of its own — only the gap
   that the body's own top margin would otherwise have supplied. */
.rehab-article__intro {
	margin-bottom: 2rem;
}

.rehab-article__intro > :first-child {
	margin-top: 0;
}

.rehab-article__intro > :last-child {
	margin-bottom: 0;
}

/* ---- Native table of contents (rehab_parent_extract_toc) -------------- */
.rehab-article__toc {
	background: var(--rehab-color-cream);
	border: 1px solid var(--rehab-article-line-tan);
	padding: 1.5rem 1.75rem;
	margin: 0 0 2.5rem;
	box-sizing: border-box;
}

.rehab-article__toc-title {
	font-family: var(--rehab-font-body);
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--rehab-warm-charcoal);
	margin: 0;
}

.rehab-article__toc-list {
	margin: 1.1rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: rehab-toc;
}

.rehab-article__toc-item {
	margin: 0;
	counter-increment: rehab-toc;
}

.rehab-article__toc-link {
	display: flex;
	gap: 0.6rem;
	font-family: var(--rehab-font-body);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--rehab-warm-charcoal);
	text-decoration: none;
	padding: 0.4rem 0;
}

.rehab-article__toc-link::before {
	content: counter(rehab-toc, decimal-leading-zero);
	color: var(--rehab-sage-text);
	font-variant-numeric: tabular-nums;
	flex: none;
}

.rehab-article__toc-link:hover {
	color: var(--rehab-sage-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- TOC plugin (Easy Table of Contents) inline polish ---------------- */
.rehab-article__body #ez-toc-container,
.rehab-article__body .ez-toc-v2_0_72 {
	background: var(--rehab-color-cream);
	border: 1px solid var(--rehab-article-line-tan);
	padding: 1.5rem 1.75rem !important;
	margin: 2.5rem 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	width: 100%;
	box-sizing: border-box;
}

.rehab-article__body .ez-toc-title-container {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.rehab-article__body .ez-toc-title {
	font-family: var(--rehab-font-body) !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	font-weight: 500 !important;
	color: var(--rehab-warm-charcoal) !important;
}

.rehab-article__body .ez-toc-list {
	margin: 1.25rem 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.rehab-article__body .ez-toc-list li > a {
	font-family: var(--rehab-font-body);
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--rehab-warm-charcoal);
	text-decoration: none;
	padding: 0.4rem 0;
	display: inline-block;
}

.rehab-article__body .ez-toc-list li > a:hover {
	color: var(--rehab-sage-dark);
}

/* ---- Inline talk-to-someone callout ---------------------------------- */
.rehab-article__talk {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	background: var(--rehab-color-bg);
	border: 1px solid var(--rehab-article-line-sage);
	padding: 1.5rem 1.75rem;
	margin: 3rem 0 0;
}

.rehab-article__talk-icon {
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--rehab-ethereal-sage);
	display: grid;
	place-items: center;
	color: var(--rehab-sage-text);
}

.rehab-article__talk-text { flex: 1 1 250px; }

.rehab-article__talk-title {
	font-family: var(--rehab-font-display);
	font-weight: 300;
	font-size: 1.25rem;
	color: var(--rehab-warm-charcoal);
	margin: 0 0 0.25rem;
	letter-spacing: -0.015em;
}

.rehab-article__talk-sub {
	font-family: var(--rehab-font-body);
	font-size: 0.85rem;
	color: var(--rehab-article-fg-3);
	font-weight: 300;
	margin: 0;
}

.rehab-article__talk-btn {
	flex-shrink: 0;
	font-size: 0.8125rem;
	padding: 0.85rem 1.75rem;
}

/* ---- Sidebar shell ---------------------------------------------------- */
.rehab-article__sidebar { min-width: 0; }

.rehab-article__sidebar-inner {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* The sidebar is a max-height, scrollable sticky column. Without this its flex
   children shrink to fit instead of letting the column scroll — squashing the
   CTA card, whose overflow:hidden then clips the "Ask a question" button. Pin
   shrink to 0 so the children keep their natural height and the column scrolls. */
.rehab-article__sidebar-inner > * {
	flex-shrink: 0;
}

@media (min-width: 1024px) {
	.rehab-article__sidebar-inner {
		position: sticky;
		top: calc(var(--rehab-header-height, 5rem) + 1.5rem);
		max-height: calc(100vh - var(--rehab-header-height, 5rem) - 3rem);
		overflow-y: auto;
		padding-right: 0.25rem; /* room for scrollbar */
	}
}

/* ---- Sidebar CTA card ------------------------------------------------- */
.rehab-article__cta {
	position: relative;
	overflow: hidden;
	background: var(--rehab-color-bg);
	border: 1px solid var(--rehab-article-line-sage);
	display: flex;
	flex-direction: column;
}

.rehab-article__cta-media {
	aspect-ratio: 5 / 4;
	background-image:
		linear-gradient(135deg, rgba(122, 133, 106, 0.85), rgba(122, 133, 106, 0.55) 60%, transparent),
		linear-gradient(135deg, var(--rehab-sage-light) 0%, var(--rehab-sage-dark) 100%);
	background-size: cover;
	background-position: center;
	position: relative;
}

/* Real photo behind the panel (REH-164) — the sage gradient stays as a wash
   over it so the overline/title keep their contrast. Team photo (REH-184) —
   the washes fall over the top/bottom edges, leaving the team's faces in the
   middle band clear. */
.rehab-article__cta--photo .rehab-article__cta-media {
	background-image:
		linear-gradient(135deg, rgba(122, 133, 106, 0.55), rgba(122, 133, 106, 0.25) 60%, transparent),
		url("/wp-content/uploads/2025/07/team-and-staff-7-7-2025-768x512.jpg");
}
.rehab-article__cta-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(122, 133, 106, 0.65), rgba(122, 133, 106, 0.15) 55%, transparent);
}

.rehab-article__cta-overline {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 2;
	font-family: var(--rehab-font-body);
	font-size: 0.65rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rehab-color-white);
	font-weight: 500;
	opacity: 0.92;
}

.rehab-article__cta-title {
	position: absolute;
	bottom: 1.1rem;
	left: 1.25rem;
	right: 1.25rem;
	z-index: 2;
	font-family: var(--rehab-font-display);
	font-weight: 300;
	font-size: 1.7rem;
	line-height: 1.05;
	letter-spacing: -0.015em;
	color: var(--rehab-color-white);
	text-wrap: balance;
	margin: 0;
}

.rehab-article__cta-title em {
	font-style: italic;
	font-weight: 400;
}

.rehab-article__cta-body {
	padding: 1.5rem 1.5rem 1.75rem;
}

.rehab-article__cta-copy {
	font-family: var(--rehab-font-body);
	font-size: 0.9rem;
	line-height: 1.65;
	color: var(--rehab-soft-charcoal);
	font-weight: 300;
	margin: 0 0 1.25rem;
}

.rehab-article__cta-btn {
	width: 100%;
	text-align: center;
	justify-content: center;
	font-size: 0.8125rem;
	padding: 0.85rem 1.75rem;
}

.rehab-article__cta-helper {
	font-family: var(--rehab-font-body);
	font-size: 0.72rem;
	color: var(--rehab-article-fg-3);
	font-weight: 300;
	text-align: center;
	margin: 0.65rem 0 0;
	letter-spacing: 0.02em;
}

/* ---- Sidebar related articles ---------------------------------------- */
.rehab-article__related-side {
	border-top: 1px solid var(--rehab-article-line-tan);
	padding-top: 1.5rem;
}

.rehab-article__related-eyebrow {
	font-family: var(--rehab-font-body);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--rehab-tan);
	margin: 0 0 1.25rem;
}

.rehab-article__related-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.rehab-article__related-item {
	padding: 1rem 0;
	border-top: 1px solid rgba(190, 179, 158, 0.18);
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
}

.rehab-article__related-item:first-child {
	border-top: 0;
	padding-top: 0.25rem;
}

.rehab-article__related-num {
	font-family: var(--rehab-font-display);
	font-size: 0.95rem;
	color: var(--rehab-sage-text);
	flex-shrink: 0;
	padding-top: 1px;
	letter-spacing: 0.04em;
}

.rehab-article__related-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.rehab-article__related-title {
	display: block;
	font-family: var(--rehab-font-body);
	font-size: 0.92rem;
	font-weight: 400;
	color: var(--rehab-warm-charcoal);
	line-height: 1.45;
	transition: color 0.2s var(--rehab-ease);
}

.rehab-article__related-link:hover .rehab-article__related-title {
	color: var(--rehab-sage-dark);
}

.rehab-article__related-meta {
	display: block;
	font-family: var(--rehab-font-body);
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--rehab-article-fg-3);
	margin-top: 4px;
	letter-spacing: 0.04em;
}

/*
 * Embedded iframes in article bodies (REH-189).
 *
 * Legacy article content carries embeds copied from the old site with hardcoded
 * pixel widths, e.g. the Google Sheets chart on /canada-dry-january-interest/:
 *   <iframe class="responsive-iframe" width="600" height="350" ...>
 * That `responsive-iframe` class has no CSS behind it anywhere — the name is
 * aspirational — so a 600px embed blew the document out to 624px at a 360px
 * viewport and produced site-wide horizontal scroll on that page.
 *
 * Constrain any article-body iframe to its container. Scoped to the article body
 * on purpose: the contact page's Google Map sits outside this wrapper and is
 * already sized correctly, so it stays untouched.
 */
.rehab-article__body iframe {
	max-width: 100%;
}

/* Team photograph in the "talk to us" band (REH-266). Sized to match the glyph
   circle it replaces, so the band's layout is unchanged whichever a brand
   uses. */
.rehab-article__talk-photo {
	width: 72px;
	height: 72px;
	flex-shrink: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--rehab-ethereal-sage);
}

.rehab-article__talk-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- CTA band inside the article body --------------------------------- */
/*
 * On the homepage the bands butt straight against their neighbours and their
 * own padding sets the rhythm, so every one looks identical. Dropped into the
 * prose flow they instead inherit whatever margin the previous block happened
 * to carry — an image, a paragraph, a table — which measured 32px above / 0
 * below, then 30/52, then 24 (sheet row 83). A margin of its own collapses
 * against the neighbour's rather than adding to it, so the band gets the same
 * breathing space above and below wherever it lands.
 */
.rehab-article__body > .wp-block-rehab-cta-band,
.rehab-article__body > .rehab-cta-band {
	margin-block: 48px;
}