/* ============================================================
   Clean section system (replaces Divi's et_pb_section/row/column
   scaffolding). Values taken from the live site's computed styles.
   ============================================================ */

.s { position: relative; }

/* Site-wide container — mirrors the header's .nav-container EXACTLY at every viewport
   (width:90% capped at 1440; below 1365 it goes full width with 15px inset). Using the
   same rule, not a fixed 72px pad, so content lines up with the header at ALL widths,
   not just at 1440px. */
.s > .s-container,
.ac-container {
	width: 90%;
	max-width: 1440px;
	margin: 0 auto;
}
@media (max-width: 1365px) {
	.s > .s-container,
	.ac-container { width: 100%; padding-left: 15px; padding-right: 15px; }
}
/* The hero opts out of that 15px collapse. The header needs the room because
   its nav row runs out of slack at 1365; a hero holding one 650px text column
   does not, and dropping its inset from 5% (68px) to 15px in a single pixel of
   resize slams the headline against the viewport edge. Keep the 90% container
   for as long as the side-strip hero layout exists (the 900px mobile rule below
   is where the strip becomes a band). Site-wide on purpose: this used to be a
   body.home-only override in tmj-lean.css, which is why the home hero looked
   right and every other page's did not. */
@media (min-width: 901px) {
	.s-hero > .s-container { width: 90%; padding-left: 0; padding-right: 0; }
}

/* Vertical rhythm (from live computed section padding) */
.s--pt-0  { padding-top: 0; }
.s--pt-27 { padding-top: 27px; }
.s--pt-30 { padding-top: 30px; }
.s--pt-40 { padding-top: 40px; }
.s--pt-60 { padding-top: 60px; }
.s--pt-70 { padding-top: 70px; }
.s--pt-80 { padding-top: 80px; }
.s--pt-hero { padding-top: 167px; } /* fixed header is 138px tall; clears it + ~35px like the live site */
/* Restores the 27px/27px vertical padding Divi put on each content .et_pb_row.
   Add to text sections that in Divi had a single content row so the clean section
   keeps the original inner rhythm. */
.s--rowpad > .s-container { padding-top: 27px; padding-bottom: 27px; }
.s--pb-0  { padding-bottom: 0; }
.s--pb-27 { padding-bottom: 27px; }
.s--pb-30 { padding-bottom: 30px; }
.s--pb-40 { padding-bottom: 40px; }
.s--pb-54 { padding-bottom: 54px; }
.s--pb-60 { padding-bottom: 60px; }
.s--pb-70 { padding-bottom: 70px; }
.s--pb-80 { padding-bottom: 80px; }

/* Backgrounds */
.s--dark   { background-color: #153b37; }
.s--dark2  { background-color: #1a4a45; }
.s--light  { background-color: #ffffff; }
.s--mist   { background-color: #f1f6f5; }
.s--tint   { background-color: rgba(241,240,239,0.36); }
.s--diamond-bg {
	background-color: #ffffff;
	background-image: url('/wp-content/uploads/2026/02/BG-DIAMOND_1.webp');
	background-repeat: repeat;
	background-size: 5px;
}

/* Two-column (image + text) layout */
.s-2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}
.s-2col--bottom { align-items: end; }
/* Two independent lists/columns of unequal height read better top-aligned than centred. */
.s-2col--top { align-items: start; }
/* 1/3 + 2/3 bio layout (matches Divi's 1_3/2_3 columns, 72px gutter); image left, text top-aligned */
.s-2col--13 { grid-template-columns: 384fr 840fr; gap: 72px; align-items: start; }

/* ---- HERO: dark section + image faded into the ground colour on the right ---- */
.s-hero { overflow: hidden; }

/* A floor under the hero, and the content centred in it (client 2026-09-11: "make
   these have a minimum height of 50vh so they don't look so squashed up on the top").
   Interior heroes had no height of their own at all -- they were `s--pt-hero` (167px
   of header clearance) plus whatever the title and one paragraph happened to need,
   so a short hero like /condition/sleep-apnea/ came out barely taller than its own
   top padding and the photo beside it was a letterboxed sliver.
   Centring matters as much as the floor: with the content pinned at the top by that
   167px, extra height would just pool underneath it and leave the same crammed look.
   The home hero sets its own taller floor and its own centring (tmj-lean.css 7a);
   this rule is the same shape at lower specificity, so that one still wins.
   Desktop only -- below 901px the photo leaves the side and becomes a band in flow,
   and a viewport-height floor under a stacked column just adds dead space. */
@media (min-width: 901px) {
	.s-hero {
		display: flex;
		align-items: center;
		min-height: 50vh;
		min-height: 50svh;
	}
}

/* THE HERO'S LAYER STACK LIVES HERE, ONCE.
   It used to be written out per hero -- 22 generated `body.page-id-N .s-hero__bg`
   rules in tmj-pages.css, the home page's two variants, and .s-hero__bg--data for
   blog posts, each restating the same gradient beside its own photo URL because
   `background-image` replaces the whole layer stack. That is why this file has
   carried a warning for months telling the next person to remember to repeat the
   gradient. Adding the top fade below would have meant writing it 26 times and
   them agreeing forever.
   So the photo and the fades are variables and the stack is assembled once. A
   hero that wants its own photo now sets ONE property:

       body.page-id-1234 { --hero-photo: url('...'); }

   and one that wants a different ground -- the home page's cream variant is the
   only one -- sets --hero-ground-rgb, which recolours both fades because they are
   written in terms of it. Per-post heroes (single.php, template-blog.php,
   template-symptom.php) put --hero-photo in an inline style on the element, which
   is the same switch reached from PHP.
   Do not go back to declaring `background-image` on a hero. */
.s-hero {
	/* The ground the photo fades into: this section's own background. */
	--hero-ground-rgb: 21, 59, 55;

	/* No top fade. One was added on 2026-09-11 to dissolve the photo's top edge into
	   the section's ground, and the client read the result as a leftover artifact --
	   "a weird little gray-beige gradient from the top of the header" -- on the home
	   page and on every other hero. The panel's top edge is a clean line instead. The
	   layer slot is kept as a variable so a hero can opt one back in without the stack
	   being rewritten; nothing sets it today. */
	--hero-top-fade: none;

	/* Side fade: the left edge of the photo dissolving into the text column. */
	--hero-side-fade: linear-gradient(100deg,
		rgb(var(--hero-ground-rgb)) 20%,
		rgba(var(--hero-ground-rgb), 0) 100%);
}

/* The default hero photo, as the var()'s fallback rather than a declaration -- a
   declaration here would sit on the same element that reads it and would beat the
   `body.page-id-N { --hero-photo }` rules, which are inherited. Was
   hero-doctor-patient.avif, which is PORTRAIT (1086x1448) being used as a 60%-wide
   full-height background — background-size:cover then crops the doctor's face out.
   hero-doctor-patient-wide.avif is the same shot in its landscape crop.
   2026-10-06: that shot was an AI stand-in of Dr. Ferzli beside a DENTAL CHAIR
   (banned on this site, see bin/check-banned-images.sh). Replaced with a real photo
   from the practice shoot: Dr. Ferzli reviewing a 3D CBCT scan, cropped so he sits
   right of centre and clears the side fade. Do not reuse this frame (or its burst
   neighbours) in page-specific slots -- client asked for no duplicate photos. */
.s-hero__bg {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: 60%;
	background-image:
		var(--hero-top-fade),
		var(--hero-side-fade),
		var(--hero-photo, url('/wp-content/uploads/2026/10/tmj-hero-dr-ferzli-3d-scan-review.avif'));
	background-size: cover;
	/* Top-aligned, not centred. `cover` crops on whichever axis is proportionally
	   longer, and once the panel is wider than the photo's 3:2 -- a short window,
	   or any laptop at 16:10 and below -- that axis is the vertical one and a
	   centred crop takes the slice off the TOP, i.e. off the subject's head. The
	   bottom of these photos is shoulders and floor, so pinning the top is the
	   crop that always keeps the face. Client, 2026-09-11: "just making it
	   top-aligned so that it guarantees to show the head, that'd be fine too." */
	/* --hero-focal lets one photo move its crop without restating this rule; it is
	   set per page next to --hero-photo by bin/write-hero-css.py (FOCAL map). */
	background-position: var(--hero-focal, center top);
	background-repeat: no-repeat;
	z-index: 0;
	pointer-events: none;
}

/* 2026-09-11 — THE PHOTO STARTS BELOW THE FIXED CHROME.
   Client: "the header sits on top of the image, cutting off the top of their
   head ... it needs to show the whole head."

   The chrome is 138px of fixed bars and this panel ran from y=0, so the top
   138px of every hero photo was behind them. On the home page the subject's
   crown sits 2.4% down the source file, which is ~18px into a 745px panel: no
   amount of re-cropping or re-scaling rescues it, because `cover` anchors the
   picture's top edge to the panel's top edge and 2.4% of any plausible panel
   height is still under the bars. Making the chrome transparent (tmj-header.css)
   is half the answer -- it stops hiding the head -- but nav labels then sit on
   whatever the photo happens to put there, which on this photo is hair on the
   right and flat wall on the left.

   So the panel itself starts at the chrome's bottom edge. Two things fall out of
   that: the whole subject is below the chrome at every size, by construction
   rather than by tuning; and the strip the chrome floats over is the section's
   own ground colour, full width, so the nav has one uniform background to be
   legible against instead of two.

   --hero-chrome-h is declared in tmj-header.css next to the heights it is made
   of. Desktop only: below 901px the mobile rule at the bottom of this file
   flattens this panel into a static 185px band that is already in flow below
   the chrome, so there is nothing to inset. */
@media (min-width: 901px) {
	.s-hero__bg { top: var(--hero-chrome-h, 138px); }
}

/* A FLOOR UNDER THE INNER-PAGE HERO.
   Client 2026-09-14: "these header sections ... need a minimum height or something
   because all the images are getting clipped. I think a minimum of 50vh would do."

   The panel is inset --hero-chrome-h from the top (rule above) and otherwise takes
   whatever height the copy needs. On a service or condition page that is a short title
   and a two-line standfirst, so the panel ends up very wide and very flat — measured
   2026-09-14 at 1440x900: /condition/sleep-apnea/ and /condition/chronic-pain/ are both
   493px tall with a 355px panel inside an 864px-wide box, i.e. roughly 2.4:1. `cover`
   fills a box that wide by matching the photo's WIDTH and discarding the vertical
   overflow, so a 3:2 portrait arrives with the top and bottom thrown away. The
   `background-position: center top` above already spends the whole crop budget keeping
   the head; the real fix is to stop the box being so flat.

   A floor on the section raises the panel with it, because .s-hero__bg pins both top and
   bottom. Flex-centred for the same reason body.home is (tmj-lean.css 7a): once the box
   is taller than the copy, top-aligned text leaves the headline stranded against the
   chrome.

   Scope notes. Home is excluded — it sets its own stage in tmj-lean.css 7a and already
   fills the viewport. Desktop only, matching the inset above: below 901px the panel is a
   static 185px band in flow and there is nothing to stretch. And on a short window the
   copy already needs more than 50vh, so this is inert there; it bites on tall displays,
   which is where the letterboxing was worst. */
@media (min-width: 901px) {
	body:not(.home) .s-hero {
		min-height: 50vh;
		display: flex;
		align-items: center;
	}
}

/* 2026-10-06 — CAP THE PANEL AT 2:1.
   Client: the condition/service hero photos looked "oddly placed" -- faces jammed
   into the corner, chins and hands cut off. Measured at 1728x958: the panel was
   1037x383, i.e. 2.7:1. A 3:2 stock photo under `cover` in a box that flat loses
   ~45% of its height, so no focal point can frame a whole head plus the jaw/hands
   these photos are about, and re-cropping the files can't add pixels.
   So the panel's width now follows its height: aspect-ratio with width:auto
   derives the width from the inset-defined height, max-width keeps the old 60%
   ceiling. At 2:1 a 3:2 photo keeps 75% of its height and every hero subject fits.
   The panel stays pinned right and its side fade still starts at its own left edge,
   so the narrower panel blends into the ground with no seam.
   Inner pages only: home's .hero-callouts markers are positioned against the full
   60% panel (tmj-lean.css 7b). Desktop only: below 901px the panel is the static
   185px band (rule further down). */
@media (min-width: 901px) {
	body:not(.home) .s-hero__bg {
		width: auto;
		max-width: 60%;
		aspect-ratio: 2 / 1;
	}
}

.s-hero > .s-container { position: relative; z-index: 1; }

/* ---- PRF: full-bleed image with green gradient overlay, TRUE parallax ---- */
.s-prf {
	background-image:
		linear-gradient(180deg, rgba(21,59,55,0.84) 0%, rgba(21,59,55,0.89) 100%),
		url('/wp-content/uploads/2024/03/PRF-Injection.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/* Generic image column: image fills the column, centered */
.s-col-img { text-align: center; }
.s-imgwrap { display: block; width: 100%; }
/* Height cap, client 2026-09-11. Note it comes with `width: auto`, which is the
   whole reason it is safe: this file's long-standing rule is "constrain WIDTH,
   never height" (see .u-img-fit in tmj-lean.css, and the guard in
   bin/write-lean-page.php that fails a build on an inline max-height) because a
   max-height applied while the width is pinned to 100% clamps one axis against a
   fixed other and DISTORTS the picture -- that is how the TMJ infographic once
   shipped stretched. With width:auto both axes are free, so the image simply
   scales down until it fits whichever limit it meets first and the ratio is always
   the file's own. max-width keeps the column limit; the auto margins re-centre an
   image that the height cap has made narrower than its column.
   The guard still stands for CONTENT: this is the primitive's own rule, written
   once, not a max-height sprayed onto inline styles. */
.s-imgwrap > img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 60vh;
	margin-left: auto;
	margin-right: auto;
}

/* ---- .diamond-frame : reusable, editable image effect ----
   Wrap an image in .diamond-frame to get: the image at 80% width (centered),
   a coral diamond sitting BEHIND it at the left edge (::before), and the
   TMJ-ICON.svg diamond hung off the bottom-right corner (::after).
   Tweak the two pseudo-elements below to restyle every instance at once. */
.diamond-frame {
	position: relative;
	display: inline-block;
	max-width: 80%;
	vertical-align: bottom;
}
.diamond-frame > img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.diamond-frame::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 100px; height: 100px;
	background: #e8a087;
	transform: translate(-50%, -50%) rotate(45deg);
	z-index: 0;
}
.diamond-frame::after {
	content: "";
	position: absolute;
	right: 0; bottom: 0;
	width: 122px; height: 122px;
	background-image: url('/wp-content/uploads/2026/01/TMJ-ICON.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transform: translateX(50%);
	z-index: 2;
}

/* Bio band: breathing room above the CTA buttons (not the hero) */
.s--dark:not(.s-hero) .hero-buttons { margin-top: 2rem; }

/* ---- LOCATION pages (shared frame across every /<city>/ page) ----
   Same white-rounded-card-on-green layout the blog single uses (.ac-card-*
   scaffold lives in blog.css but its frame/title are gated to .single-post).
   .s-loc re-applies that frame for the page context so every location page
   only needs its own H1 + .info-content + the (identical) contact sidebar. */
.s-loc { padding: 150px 0 60px; }
.s-loc .ac-card-row { background: #ffffff; }
.s-loc .ac-loc-title h1 {
	font-family: "Gilda Display", Georgia, "Times New Roman", serif;
	font-size: 40px;
	line-height: 40px;
	font-weight: 500;
	color: #333333;
	/* 76px reproduces the live title block + the empty featured-image slot above the body */
	margin: 0 0 76px;
}
@media (max-width: 980px) {
	.s-loc { padding: 110px 0 40px; }
	.s-loc .ac-loc-title h1 { font-size: 32px; line-height: 1.1; }
}

@media (max-width: 900px) {
	.s > .s-container, .ac-container { padding-left: 24px; padding-right: 24px; }
	.s-2col { grid-template-columns: 1fr; gap: 32px; }
	/* Mobile: header is ~70px (super-header hidden) — no need for 167px */
	.s--pt-hero { padding-top: 90px; }
	/* Mobile hero image becomes a static block on top — drop the side fade, cap the
	   height (185px = desktop cap - 75), add space below. The fixed height + cover
	   means NO photo is ever taller than this, any device.
	   The gradients are switched off through the variables now rather than by
	   restating background-image, so a page's own --hero-photo still reaches it (it
	   used to survive only because `body.page-id-N .s-hero__bg` outranked this rule,
	   which also meant those pages kept a gradient this rule meant to drop).
	   Declared on .s-hero, not on .s-hero__bg: the home page overrides
	   --hero-side-fade at a higher specificity on the same element and keeps its
	   cream fade here, exactly as it does today. */
	.s-hero {
		--hero-side-fade: none;
	}
	.s-hero__bg {
		position: relative;
		width: 100%;
		height: 185px;
		margin-bottom: 28px;
	}
	/* Keep the framed image at 80% on mobile; shrink the diamonds to fit */
	.diamond-frame { max-width: 80%; }
	.diamond-frame::before { width: 64px; height: 64px; }
	.diamond-frame::after { width: 82px; height: 82px; }
}