\n *

Providers

<- SIBLING, and it comes FIRST\n *

… the module mount …\n *\n * The title is the page template's and sits OUTSIDE the [data-page] wrapper, before it. So the\n * obvious `[data-page=\"providers\"] h1` matches nothing, and CSS has no preceding-sibling\n * combinator to reach backwards — the title would have silently stayed brand-dark on a\n * brand-dark scrim, which is the one failure mode this whole file exists to prevent.\n * Matching on the COLUMN that contains the wrapper is what reaches both elements.\n *\n * Flat `:has()`, top level, never nested — a nested one compiles through Sass and is then\n * silently dropped by the browser.\n *\n * The text-shadow is the hero's own (`text-hero.scss`), and it is not decoration: 3.22 is a\n * thin margin, and a shadow buys real legibility where a glyph edge meets a bright petal.\n */\n.tlr-page-column:has([data-page=\"providers\"]) .tlr-page-title-display {\n color: var(--tlr-hero-text);\n text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);\n}\n\n/* The cards, and the filter chips — everything body-sized gets an opaque ground.\n *\n * Targeted through the directory's ACCESSIBLE NAME, not its class. Every class the providers\n * module renders is a CSS-module hash (`_card_1pvtv_102`) that changes when the module is\n * rebuilt, so a class selector would work today and break silently on the next build. The\n * aria-label is a semantic contract; the hash is a build artifact.\n *\n * The chips carry near-black body-size labels and were previously transparent — on the scrim\n * they would be body text on a photograph, which 60% does not support. Giving them the same\n * ground as the cards keeps the whole directory reading against one known colour.\n */\n[data-page=\"providers\"] [aria-label=\"Provider directory\"] li > article,\n[data-page=\"providers\"] [aria-label^=\"Filter by\"] button {\n background: var(--tlr-color-bg, #fbfaff);\n}\n\n/* Home — \"About Dr. Fisher\" section, narrower on large screens (client alteration, John 2026-08-14).\n *\n * The section carries `.tlr-layout-wide` (core adds it to any has-image Section so the float\n * image has room), which is core's OWN escape hatch to open the whole page column to\n * $tlr-content-max (1280px) — see app.scss's \"…AND THE EXCEPTION TO THAT BINDING\". That's the\n * \"correct overall page max-width\" and this alteration does not touch it: other blocks on the\n * home page still want the full column. What's wrong is that being `.tlr-section--has-image`\n * also EXEMPTS this section from core's own measure-clamp (the one that keeps text-only\n * Sections narrow inside a wide column) — so at desktop widths this one section fills the\n * whole 1280px column, wider than its own prose was ever meant to read at.\n *\n * 900px matches $tlr-quote-measure — the pull-quote directly above this section on the page\n * already reads at that width, so the two blocks now share one column edge going down the\n * page instead of the quote suddenly widening into the section below it.\n *\n * Scoped via :has(#about-dr-fisher), not a class: `.tlr-section--has-image`/`.tlr-layout-wide`\n * are shared with every other has-image section sitewide, and the module's own classes are\n * CSS-module hashes that change on rebuild. The h2's anchor id is the one stable, semantic\n * hook this section owns — core slugifies it from the heading text (BLOCKS-09), so it only\n * moves if \"About Dr. Fisher\" is retitled.\n *\n * margin-inline: auto is required alongside max-width — `.tlr-section` has no centering of its\n * own (app.scss: \"Section WIDTH is governed at the PAGE column, not here\"), so without it the\n * section would clamp to 900px but stay pinned to the column's left edge instead of centering.\n */\n@media (min-width: 1024px) {\n .tlr-section:has(#about-dr-fisher) {\n max-width: 900px;\n margin-inline: auto;\n }\n}\n\n/* \"Where do I start?\" CTA icon, fit to its frame with zero cropping\n * (client alteration, John 2026-08-19 — repeats wherever this CTA panel appears).\n *\n * `.tlr-cta-frame-img` is Tailor's stock CTA-panel image slot, shared by every CTA panel\n * sitewide — including, further down this same home page, the \"Read Dr. Fisher's book\" panel,\n * whose slot holds a real photograph. `object-fit: cover` is correct for that photo filling its\n * 266x200 frame. It is the wrong tool for THIS instance, which holds Bloom's lotus mark instead.\n *\n * VERIFIED against the served markup and the actual asset, not assumed:\n * - frame: 266.664 x 200 (ratio 1.333)\n * - this asset (`f7a2973f-b938-481a-8325-4ab56d83fbfb`): 344 x 234 (ratio 1.470)\n * `cover` scales to the LARGER of the two ratios to fill the frame, then crops the overflow —\n * here that means the mark is blown up past its own edges before the crop even happens, which\n * is what read as truncation.\n *\n * FIRST FIX TRIED, AND WHY IT WAS WRONG: `transform: scale(0.8)` on the `` itself. For an\n * ``, the element IS the box — there is no separate \"picture\" underneath it to scale\n * independently. Transforming the element shrinks the box and its (still cover-cropped)\n * content together, as one visual unit (John, 2026-08-19 — \"you resized the box not the image\n * within\"). It happened to LOOK fixed because shrinking the whole unit also shrinks the\n * clipped edges out of view, but the frame's real footprint never changes and the image is\n * still being cropped underneath the shrink.\n *\n * THE ACTUAL FIX: `object-fit: contain`. This is the one object-fit value whose job is\n * exactly \"fit the image inside the box\" — it touches nothing about the box (still exactly\n * 266x200, same as `cover` gets), and instead scales the PICTURE to the SMALLER of the two\n * ratios so the entire source (100% of it, zero cropping) lands inside that unchanged frame,\n * letterboxed on whichever axis has slack. No arbitrary tuned constant, no re-measuring if the\n * asset is ever swapped for a different one.\n *\n * Scoped to THIS asset, not the class: `.tlr-cta-frame-img` is a stable Tailor class (not a\n * build hash) but it's the same class the book-cover photo two panels down uses, and `cover` is\n * correct there — scoping by class alone would squash that photo too. The media ID is the\n * stable hook: Tailor re-serves the identical file whenever this \"Where do I start?\" panel\n * repeats on other pages, so this one rule fixes every instance, not just this page's.\n */\nimg.tlr-cta-frame-img[src*=\"f7a2973f-b938-481a-8325-4ab56d83fbfb\"] {\n object-fit: contain;\n}\n\n/* Same icon, taste pass on top of the fit above (John, 2026-08-19 — \"add transform to the\n * image to make it 25% smaller and top-justified\").\n *\n * This IS the right place for `transform: scale()` — unlike the truncation bug above, there is\n * no cropping left to hide: `object-fit: contain` already shows 100% of the source with zero\n * crop, so shrinking the whole rendered unit now is a size preference, not a bug mask.\n *\n * `object-position: top` flushes the contained picture to the top of the 266x200 box first\n * (default is center). `transform-origin: top` then anchors the scale to that same top edge,\n * so shrinking by 25% holds the top edge in place and closes the gap from the bottom — without\n * it, the default center origin would shrink toward the box's middle and pull the icon's top\n * down away from the frame's top, undoing the top-justify.\n */\nimg.tlr-cta-frame-img[src*=\"f7a2973f-b938-481a-8325-4ab56d83fbfb\"] {\n object-position: top;\n transform: scale(0.75);\n transform-origin: top;\n}\n\n/* Hero identity — icon cheated down 8px toward the stacked wordmark, widescreen only\n * (client alteration, John 2026-08-19 — \"cheat the icon down 8px to the stacked wordmark\").\n *\n * `.tlr-hero__logo` + the stacked wordmark (`.tlr-lockup.tlr-hero__name`) are ONE shared\n * component (`hero-shell.scss`) used by every hero on the site — Image Hero, Text Hero — and\n * by both hero COMPOSITIONS: at rest, a big centred vertical stack over the photo (this is\n * what \"hero layouts\" means and what John is looking at); docked, a small horizontal lockup\n * in the nav band after scrolling. It is the SAME element interpolating between the two via\n * `--hero-p`, never a second copy. `:not([data-hero-docked])` keeps this to the rest\n * composition only — the docked, in-nav-band mark is a different, smaller reading John did\n * not ask to touch.\n *\n * `transform: translateY()` on the logo ALONE, not a `--hero-identity-gap` reduction: gap is\n * a flex gap on the shared column (icon, then gap, then wordmark below it) — shrinking the\n * gap variable pulls the WORDMARK up toward the icon, not the icon down toward the wordmark,\n * and the wordmark's position is what the hero title beneath it is balanced against.\n * Translating the icon leaves the wordmark and the title below it exactly where they already\n * sit; only the icon itself moves. (Same lesson as the CTA icon above: transform is the\n * right tool here because there is genuinely nothing to fit or crop — just a rendered\n * position to nudge — unlike there, where it was standing in for a sizing fix.)\n *\n * \"Widescreen\": hero-shell.scss defines no breakpoint of its own for this — its one media\n * query (`max-width: 600px`) is the mobile hero composition, a different layout entirely\n * (smaller mark, tighter vertical rhythm) where an 8px cheat tuned for the big rest\n * composition would not read the same. `$tlr-breakpoint-wide` (1600px) exists in the token\n * file but is documented there as a distinct, unrelated concern (card-grid two-axis fit).\n * `$tlr-breakpoint-desktop` (1024px) — \"room to set things side by side\" — is the closest\n * real precedent, and the same cut line this file already uses for the about-dr-fisher rule\n * above, so it's the one used here too rather than a third arbitrary value.\n */\n@media (min-width: 1024px) {\n .tlr-hero:not([data-hero-docked]) .tlr-hero__logo {\n transform: translateY(8px);\n }\n}\n/* Hotfix (John, 2026-08-26): hide the \"Source\" click-out link on review cards.\n Bloom-specific presentation choice, not a framework default. */\n.tlr-review-source {\n display: none;\n}","js"]