/* CCAPP Directory
   Brand tokens arrive per-instance as --cdir-brand / --cdir-brand-600 /
   --cdir-on-brand on the root element, so one stylesheet serves every site.
   Anything carrying white text uses brand-600: Education's #2AD2C9 is a LIGHT
   colour and white on it is 1.88:1 — unreadable. Never paint white on --cdir-brand.

   Divi ships `#page-container a { color: … }`, an ID selector no class of ours
   can outrank, which silently painted button labels the same colour as their own
   background. Colour on links and buttons is therefore forced. That is the one
   legitimate use of !important here: overriding a host theme we do not control. */

.cdir {
  --cdir-ink: #2D2926;
  --cdir-ink-soft: #5B5856;
  --cdir-line: #E4E3E2;
  --cdir-line-soft: #F1F1F0;
  --cdir-surface: #FFFFFF;
  --cdir-canvas: #F6F8F9;
  --cdir-r: 16px;
  --cdir-r-sm: 10px;
  --cdir-shadow: 0 1px 2px rgba(45,41,38,.05), 0 10px 26px -16px rgba(45,41,38,.24);
  --cdir-lift: 0 2px 6px rgba(45,41,38,.07), 0 26px 50px -22px rgba(45,41,38,.38);

  color: var(--cdir-ink);
  font-size: 17px;
  line-height: 1.65;
  container-type: inline-size;
}
.cdir *, .cdir *::before, .cdir *::after { box-sizing: border-box; }
.cdir a { color: var(--cdir-brand-600); }

/* Divi's default page template reserves an empty sidebar column. body_class()
   swaps the layout class; this removes the leftover element and its gutter. */
body.cdir-fullwidth #sidebar,
body.cdir-fullwidth .et_pb_widget_area { display: none !important; }
body.cdir-fullwidth #left-area { width: 100% !important; padding-right: 0 !important; float: none !important; }

/* Divi also caps the content column at 1080px, which on a 1900px screen left
   roughly a third of the window empty while card titles wrapped onto two lines
   inside 270px columns. A directory is a browsing surface — it should use the
   window. Only on pages carrying our shortcode, and still capped so the text
   never runs to an unreadable measure. */
body.cdir-fullwidth #main-content > .container { width: 94% !important; max-width: 1640px !important; }
body.cdir-fullwidth .et_pb_row:has(.cdir) { width: 94%; max-width: 1640px; }

/* inline icons */
.cdir-ico { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cdir-ico--pin { width: .95em; height: .95em; opacity: .75; }

/* ══════════ THE OPENING ══════════
   A FULL-WIDTH band — no map beside it. Larry tried the map running up the side
   of the headline and rejected it: "H1 should be a full row without the map."
   The map lives below, next to the listings, where it belongs.

   No stat tiles. "No need for the numbers." */
.cdir-lead { display: block; }

.cdir-hero {
  position: relative; overflow: hidden;
  border-radius: var(--cdir-r) var(--cdir-r) 0 0;
  padding: 3.2rem 2.6rem 4.8rem;
  color: var(--cdir-on-brand);
  background:
    radial-gradient(115% 150% at 88% -20%, rgba(255,255,255,.20), transparent 55%),
    linear-gradient(122deg,
      color-mix(in srgb, var(--cdir-brand-600) 82%, #000) 0%,
      var(--cdir-brand-600) 52%,
      color-mix(in srgb, var(--cdir-brand) 78%, #fff) 100%);
}
/* Fine diagonal ruling — texture at reading distance, invisible up close.
   It is what keeps a large flat brand field from looking like a coloured box. */
.cdir-hero::after {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: repeating-linear-gradient(62deg, rgba(255,255,255,.09) 0 1px, transparent 1px 15px);
}
.cdir-hero-in { position: relative; z-index: 1; max-width: 52rem; }
.cdir-hero-eye {
  margin: 0 0 .9rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; opacity: .84;
}
.cdir-hero-t {
  margin: 0 0 .8rem; font-size: clamp(2rem, 4vw, 3.1rem); line-height: 1.05;
  font-weight: 700; letter-spacing: -.03em; color: var(--cdir-on-brand);
  text-wrap: balance;
}
.cdir-hero-s { margin: 0; font-size: 1.08rem; line-height: 1.55; opacity: .93; max-width: 44rem; }

/* ---------- filters ---------- */
/* Lifted onto the band's bottom edge on a real shadow. The overlap is what
   makes the opening read as one object instead of a coloured strip with a form
   under it — and it puts the search where the eye already is. */
.cdir-filters {
  display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end;
  padding: 1.1rem 1.2rem;
  margin: -2.9rem 1.6rem 0; position: relative; z-index: 3;
  background: var(--cdir-surface); border: 1px solid var(--cdir-line);
  border-radius: var(--cdir-r);
  box-shadow:
    0 24px 44px -22px color-mix(in srgb, var(--cdir-brand-600) 62%, transparent),
    0 2px 6px rgba(45,41,38,.08);
}
.cdir-field { display: flex; flex-direction: column; gap: .32rem; min-width: 12rem; }
.cdir-field--grow { flex: 1 1 18rem; }
.cdir-label { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cdir-ink-soft); }
.cdir-input-wrap { position: relative; display: block; }
.cdir-input-wrap .cdir-ico { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--cdir-ink-soft); width: 1.05rem; height: 1.05rem; }
.cdir-input-wrap input { padding-left: 2.3rem !important; }
.cdir-field input, .cdir-field select {
  width: 100%; padding: .68rem .85rem; font-size: 1rem; font-family: inherit;
  color: var(--cdir-ink); background: #fff;
  border: 1px solid var(--cdir-line); border-radius: var(--cdir-r-sm);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cdir-field input:focus, .cdir-field select:focus {
  outline: none; border-color: var(--cdir-brand-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cdir-brand) 25%, transparent);
}

/* ---------- facet panels ----------
   Full-width row under the search fields, so a directory with a lot of options
   (schools carry languages and delivery; treatment carries setting, population
   and licence) still reads as one control surface rather than a wall.

   auto-FIT, not auto-fill: a directory with one filter group gets one panel that
   spans the row and lays its options out in columns, instead of a narrow box with
   half the page empty beside it. The option list is itself a grid for the same
   reason — three choices belong side by side across 1500px, not stacked. */
.cdir-facets {
  flex: 1 0 100%;
  display: grid; gap: .55rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  margin-top: .35rem; padding-top: .95rem;
  border-top: 1px solid var(--cdir-line);
}
.cdir-facet {
  background: #fff; border: 1px solid var(--cdir-line);
  border-radius: var(--cdir-r-sm); overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.cdir-facet[open] { border-color: color-mix(in srgb, var(--cdir-brand) 45%, var(--cdir-line)); }
.cdir-facet:hover { box-shadow: 0 2px 10px rgba(16, 24, 40, .07); }
.cdir-facet-h {
  display: flex; align-items: center; gap: .45rem;
  padding: .6rem .7rem; cursor: pointer; list-style: none;
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cdir-ink-soft); user-select: none;
}
.cdir-facet-h::-webkit-details-marker { display: none; }
.cdir-facet[open] .cdir-facet-h { color: var(--cdir-ink); }
.cdir-facet-l { flex: 1 1 auto; }
.cdir-facet-n {
  min-width: 1.25rem; padding: 0 .3rem; border-radius: 999px;
  background: var(--cdir-brand-600); color: var(--cdir-on-brand);
  font-size: .7rem; line-height: 1.25rem; text-align: center; letter-spacing: 0;
}
.cdir-facet-c {
  width: .85rem; height: .85rem; flex: none; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .2s ease;
}
.cdir-facet[open] .cdir-facet-c { transform: rotate(180deg); }
.cdir-facet-b {
  padding: 0 .35rem .45rem; max-height: 17rem; overflow-y: auto;
  display: grid; gap: 0 .4rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  animation: cdir-facet-in .22s ease both;
}
@keyframes cdir-facet-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cdir-opt {
  display: flex; align-items: center; gap: .5rem;
  padding: .34rem .45rem; border-radius: var(--cdir-r-sm);
  font-size: .88rem; line-height: 1.25; color: var(--cdir-ink); cursor: pointer;
  transition: background .14s ease;
}
.cdir-opt:hover { background: color-mix(in srgb, var(--cdir-brand) 9%, transparent); }
.cdir-opt input { flex: none; width: 1rem; height: 1rem; accent-color: var(--cdir-brand-600); margin: 0; }
.cdir-opt-t { flex: 1 1 auto; }
.cdir-opt-n { flex: none; font-size: .76rem; font-variant-numeric: tabular-nums; color: var(--cdir-ink-soft); }
.cdir-opt.is-off { opacity: .42; cursor: default; }
.cdir-opt.is-off:hover { background: none; }
@media (prefers-reduced-motion: reduce) {
  .cdir-facet-b { animation: none; }
  .cdir-facet-c { transition: none; }
}

/* ---------- active filter chips ---------- */
.cdir-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .9rem 0 0; }
.cdir-chips-l { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cdir-ink-soft); margin-right: .15rem; }
.cdir-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .26rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--cdir-brand) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--cdir-brand) 34%, transparent);
  color: var(--cdir-brand-600) !important; text-decoration: none !important;
  font-size: .86rem; font-weight: 600;
  transition: background-color .15s ease, transform .15s ease;
}
.cdir-chip:hover { background: color-mix(in srgb, var(--cdir-brand) 24%, #fff); transform: translateY(-1px); }
.cdir-chip-x { font-size: 1.05em; line-height: 1; opacity: .7; }
.cdir-chip--clear { background: transparent; border-style: dashed; }

/* ---------- buttons ---------- */
.cdir-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .42rem;
  padding: .62rem 1.05rem; border-radius: var(--cdir-r-sm); border: 1px solid transparent;
  font: inherit; font-weight: 650; font-size: .94rem; line-height: 1.2;
  text-decoration: none !important; cursor: pointer; white-space: nowrap;
  background: var(--cdir-brand-600); color: var(--cdir-on-brand) !important;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.cdir-btn:hover, .cdir-btn:focus {
  transform: translateY(-1px); color: var(--cdir-on-brand) !important;
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--cdir-brand) 70%, transparent);
}
.cdir-btn:active { transform: translateY(0); }
.cdir-btn--ghost { background: #fff; color: var(--cdir-brand-600) !important; border-color: var(--cdir-line); }
.cdir-btn--ghost:hover, .cdir-btn--ghost:focus { border-color: var(--cdir-brand-600); background: var(--cdir-canvas); }
.cdir-btn--sm { padding: .62rem 1.15rem; font-size: .95rem; border-radius: 999px; }
.cdir-btn--block { display: flex; width: 100%; margin-bottom: .5rem; }
.cdir-arrow { width: .9em; height: .9em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s cubic-bezier(.2,.8,.25,1); }

.cdir-body > .cdir-chips { margin-left: 1.6rem; margin-right: 1.6rem; }

/* ---------- results bar ---------- */
.cdir-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.5rem 0 .9rem; }
.cdir-count { margin: 0; color: var(--cdir-ink-soft); }
.cdir-count strong { color: var(--cdir-ink); font-size: 1.3rem; font-variant-numeric: tabular-nums; }

/* ---------- results + sticky map ---------- */
/* align-items STRETCH, deliberately. A sticky element can only travel inside its
   containing block, so shrinking the map column to the height of the map itself
   leaves it nowhere to stick and it scrolls away with everything else. The column
   has to be as tall as the results beside it. */
.cdir-split { display: grid; gap: 1.3rem; grid-template-columns: 1fr; align-items: stretch; }
@container (min-width: 60rem) {
  .cdir--hasmap .cdir-split { grid-template-columns: minmax(0, 1.75fr) minmax(21rem, 1fr); }
}
.cdir-split.is-mapoff { grid-template-columns: 1fr !important; }
.cdir-split.is-mapoff .cdir-mapcol { display: none; }

/*
 * The map follows the page down, and stops clear of whatever is pinned to the
 * top of the window. Divi's header is fixed and the admin bar sits above it, so
 * a fixed offset would slide the map underneath one or both; --cdir-sticky-top
 * is measured from the real thing at run time and falls back to a sane gap when
 * scripting is off.
 */
.cdir-mapcol { position: relative; }
.cdir-mapstick { position: sticky; top: var(--cdir-sticky-top, 1.5rem); }
/* Never taller than the space left under the pinned header, or the bottom of the
   map is permanently off-screen while it is stuck. */
.cdir-map {
  height: min(34rem, calc(100vh - var(--cdir-sticky-top, 1.5rem) - 5rem));
  min-height: 20rem; border: 1px solid var(--cdir-line); border-radius: var(--cdir-r);
  overflow: hidden; box-shadow: var(--cdir-shadow); background: var(--cdir-canvas);
}
.cdir-maphint { margin: .5rem 0 0; font-size: .8rem; color: var(--cdir-ink-soft); text-align: center; }
.cdir-pin {
  width: 100%; height: 100%; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 2px solid #fff; background: var(--cdir-ink-soft);
  box-shadow: 0 3px 9px rgba(0,0,0,.35); transition: transform .18s ease;
}
.cdir-pin.is-member { background: var(--cdir-brand-600); }
.cdir-pin.is-hot { transform: rotate(-45deg) scale(1.45); z-index: 500; }
.cdir-pop-name { font-weight: 700; display: block; margin-bottom: .1rem; }

/* ---------- cards ----------
   STRUCTURE from the reference directory: portrait on its own line, name beneath
   at full width, sentence-case section headings, one filled chip, one solid
   button, hairline borders, generous white space.

   MOTION is ours, and it is not optional — "it needs animation, cards, pop, wow
   factor" was the brief. A previous pass stripped the hover out on the grounds
   that the static reference has none, which was the wrong lesson to draw from a
   screenshot: a screenshot cannot show you a hover state. The rule is that
   nothing moves until the pointer arrives, and then everything on the card moves
   together, once, in the same direction. */
.cdir-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.15rem;
  grid-template-columns: 1fr;
}
/* Two across, as asked. The reference runs three, but it does so at full page
   width with no map beside it; here the map takes a third of the row. */
@container (min-width: 46rem) { .cdir-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cdir-card {
  position: relative; display: flex; flex-direction: column; isolation: isolate;
  padding: 1.75rem 1.75rem 1.6rem;  /* classic; cover and split reset this */
  background: var(--cdir-surface);
  border: 1px solid var(--cdir-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(45,41,38,.04);
  transition:
    transform .34s cubic-bezier(.2,.8,.25,1),
    box-shadow .34s cubic-bezier(.2,.8,.25,1),
    border-color .28s ease;
  animation: cdir-rise .5s cubic-bezier(.2,.7,.3,1) both;
  animation-delay: calc(var(--i, 0) * 42ms);
}

/* Two washes, both invisible at rest. ::before is the brand light that blooms
   from the top-right corner; ::after is a thin brand line that draws itself
   along the bottom edge. Together they read as the card lighting up rather than
   simply being outlined. */
.cdir-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(115% 75% at 100% 0%, color-mix(in srgb, var(--cdir-brand) 15%, transparent), transparent 62%);
  opacity: 0; transition: opacity .34s ease;
}
.cdir-card::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px; pointer-events: none;
  border-radius: 0 0 13px 13px;
  background: linear-gradient(90deg, var(--cdir-brand), color-mix(in srgb, var(--cdir-brand) 30%, #fff));
  transform: scaleX(0); transform-origin: left;
  transition: transform .42s cubic-bezier(.2,.8,.25,1);
}
.cdir-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--cdir-brand) 52%, var(--cdir-line));
  box-shadow:
    0 2px 6px rgba(45,41,38,.06),
    0 28px 52px -24px rgba(45,41,38,.42);
}
.cdir-card:hover::before { opacity: 1; }
.cdir-card:hover::after  { transform: scaleX(1); }

/* Everything on the card answers the same hover, together. */
.cdir-card:hover .cdir-avatar { transform: scale(1.06) rotate(-2.5deg); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--cdir-brand) 85%, transparent); }
.cdir-card:hover .cdir-quick  { color: var(--cdir-brand-600) !important; border-color: var(--cdir-brand); transform: rotate(8deg) scale(1.06); }
.cdir-card:hover .cdir-tag.is-lead { transform: translateY(-1px); }
.cdir-card:hover .cdir-btn--sm { box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--cdir-brand) 80%, transparent); }
.cdir-card:hover .cdir-btn--sm .cdir-arrow { transform: translateX(3px); }

/* A member card carries the brand at rest, not only on hover — that visible
   difference IS the argument for membership, and it should be legible while
   scrolling past, not only when the pointer lands. */
.cdir-card.is-member {
  border-color: color-mix(in srgb, var(--cdir-brand) 38%, var(--cdir-line));
  background:
    radial-gradient(90% 55% at 100% 0%, color-mix(in srgb, var(--cdir-brand) 7%, transparent), transparent 58%),
    var(--cdir-surface);
}
.cdir-card.is-member::after { transform: scaleX(.16); }
.cdir-card.is-member:hover::after { transform: scaleX(1); }

/* Pin hover on the map picks its card out of the grid. */
.cdir-card.cdir-hot {
  border-color: var(--cdir-brand);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--cdir-brand) 34%, transparent),
    0 26px 48px -24px rgba(45,41,38,.4);
  transform: translateY(-4px);
}
.cdir-card.cdir-hot::before { opacity: 1; }
.cdir-card.cdir-hot::after  { transform: scaleX(1); }

/* ══════════ CARD TREATMENT · COVER ══════════
   A brand gradient runs across the top with the mark breaking out of it.
   Members get the brand band, everyone else graphite — the difference is
   readable while scrolling past, which is the argument for membership.
   This is the treatment that gains most once Certemy logos land: the tile stops
   being two initials and becomes a real mark set against colour. */
.cdir-grid--cover .cdir-card { padding: 0; overflow: hidden; border-radius: 16px; }
.cdir-band {
  position: relative; height: 6.4rem; flex: none;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: .9rem 1rem;
  background: linear-gradient(118deg, #46433F 0%, #6E6A66 60%, #8C8783 100%);
}
.cdir-band::after {
  content: ""; position: absolute; inset: 0; opacity: .8; pointer-events: none;
  background-image: repeating-linear-gradient(58deg, rgba(255,255,255,.11) 0 1px, transparent 1px 13px);
}
.cdir-card.is-member .cdir-band {
  background:
    radial-gradient(120% 160% at 12% 118%, rgba(255,255,255,.32), transparent 58%),
    linear-gradient(118deg,
      color-mix(in srgb, var(--cdir-brand-600) 82%, #000) 0%,
      var(--cdir-brand-600) 52%,
      color-mix(in srgb, var(--cdir-brand) 80%, #fff) 100%);
}
.cdir-grid--cover .cdir-band .cdir-ribbon {
  position: relative; z-index: 1; margin: 0;
  background: rgba(255,255,255,.94); border-color: transparent;
}
.cdir-grid--cover .cdir-band .cdir-quick { position: relative; z-index: 1; background: rgba(255,255,255,.9); border-color: transparent; }
/* The band is positioned, so without a stacking context of its own the main
   column paints UNDERNEATH it and the overlapping mark gets its top half
   clipped away. Positioned + z-index puts the tile back on top, which is the
   whole point of the treatment. */
.cdir-grid--cover .cdir-main {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; flex: 1 1 auto; padding: 0 1.6rem 1.5rem;
}
.cdir-grid--cover .cdir-avatar {
  width: 5.4rem; height: 5.4rem; margin-top: -2.7rem; border-radius: 18px;
  background: #fff; border: 3px solid #fff;
  box-shadow: 0 10px 24px -14px rgba(45,41,38,.6);
  font-size: 1.5rem;
}
/* On the cover treatment the tile sits ON the band, so it is always white with
   coloured initials — the member rule that fills the tile with brand would put
   teal on teal and lose the mark entirely. */
.cdir-grid--cover .cdir-avatar,
.cdir-grid--cover .cdir-card.is-member .cdir-avatar--mono {
  background: #fff; border: 3px solid #fff; color: var(--cdir-brand-600);
}
.cdir-grid--cover .cdir-card:not(.is-member) .cdir-avatar--mono { color: #56524E; }
.cdir-grid--cover .cdir-card-title { margin: .85rem 0 .25rem; font-size: 1.42rem; }
.cdir-grid--cover .cdir-card-sub { margin: 0 0 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--cdir-line); }
.cdir-grid--cover .cdir-card:hover .cdir-avatar { transform: translateY(-3px) scale(1.05); }

/* ══════════ CARD TREATMENT · SPLIT ══════════
   Horizontal: a tinted panel carrying the mark and the state licence, the facts
   beside it. Wide and low, so two fit where one tall card stood — and the left
   panel is exactly where a facility photograph goes once we have one. */
.cdir-grid--split { grid-template-columns: 1fr; }
@container (min-width: 46rem) { .cdir-grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cdir-grid--split .cdir-card { padding: 0; display: grid; grid-template-columns: 9.5rem 1fr; border-radius: 12px; overflow: hidden; }
.cdir-side {
  position: relative; display: grid; place-items: center; padding: 1.2rem 1rem 2rem;
  background: linear-gradient(160deg, #F4F4F3, #FBFBFA);
  border-right: 1px solid var(--cdir-line);
}
.cdir-card.is-member .cdir-side {
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--cdir-brand) 15%, #fff),
    color-mix(in srgb, var(--cdir-brand) 4%, #fff));
}
/* .cdir-side-lic removed 0.11.1 — licence numbers are per-location and
   belong on the listing page, not on a card. */
.cdir-grid--split .cdir-avatar { width: 4.6rem; height: 4.6rem; font-size: 1.3rem; background: #fff; }
.cdir-grid--split .cdir-main { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.35rem 1.5rem 1.25rem; }
.cdir-grid--split .cdir-card-title { font-size: 1.2rem; }
.cdir-grid--split .cdir-card-sub { margin: 0 0 .9rem; font-size: .88rem; }
.cdir-grid--split .cdir-group { margin-bottom: .85rem; }
.cdir-grid--split .cdir-group-l { font-size: .82rem; margin-bottom: .38rem; }
.cdir-grid--split .cdir-tag { font-size: .8rem; padding: .24rem .72rem; }
.cdir-grid--split .cdir-card-foot { padding-top: 1rem; }
@container (max-width: 46rem) {
  .cdir-grid--split .cdir-card { grid-template-columns: 1fr; }
  .cdir-side { border-right: 0; border-bottom: 1px solid var(--cdir-line); padding-bottom: 2rem; }
}

/* Portrait line: the circle, and one quiet round action opposite it. */
.cdir-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: 1.15rem; }

.cdir-avatar {
  width: 6rem; height: 6rem; border-radius: 50%;
  object-fit: cover; display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg, color-mix(in srgb, var(--cdir-brand) 24%, #fff), color-mix(in srgb, var(--cdir-brand) 7%, #fff));
  border: 1px solid color-mix(in srgb, var(--cdir-brand) 18%, transparent);
  transition: transform .38s cubic-bezier(.2,.8,.25,1), box-shadow .38s ease;
}
.cdir-avatar--mono { font-size: 1.85rem; font-weight: 700; letter-spacing: .01em; color: var(--cdir-brand-600); }

/* A REAL LOGO IS NOT AN AVATAR.
   The monogram tile is a circle with the mark cropped to fill, which is right
   for two initials and wrong for artwork: a horizontal wordmark clipped to a
   circle loses both ends, and `cover` crops before the circle even gets to it.
   So when the tile is carrying a logo, square it off, contain it, sit it on
   white, and give it breathing room — the mark is then shown whole, whatever
   its aspect ratio, which is the entire point of having gone and fetched it. */
.cdir-avatar--logo {
  object-fit: contain;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--cdir-line);
  padding: .34rem;
}
.cdir-card.is-member .cdir-avatar--logo { background: #fff; border-color: color-mix(in srgb, var(--cdir-brand) 30%, var(--cdir-line)); }
.cdir-card.is-member .cdir-avatar--mono { background: var(--cdir-brand-600); color: var(--cdir-on-brand); border-color: transparent; }

.cdir-quick {
  width: 2.3rem; height: 2.3rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--cdir-line); background: #fff;
  color: var(--cdir-ink-soft) !important;
  transition: border-color .22s ease, color .22s ease, background-color .22s ease, transform .32s cubic-bezier(.2,.8,.25,1);
}
.cdir-quick svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cdir-quick:hover { color: var(--cdir-brand-600) !important; border-color: var(--cdir-brand); background: color-mix(in srgb, var(--cdir-brand) 8%, #fff); }

/* The name: full card width, large and only lightly weighted, like the
   reference. It is the one piece of type meant to be read from across a room. */
.cdir-card-title {
  margin: 0 0 .3rem; font-size: 1.55rem; line-height: 1.2; font-weight: 650;
  letter-spacing: -.02em; text-wrap: balance; hyphens: none;
}
.cdir-card-title a { text-decoration: none !important; color: var(--cdir-ink) !important; }
.cdir-card-title a:hover { color: var(--cdir-brand-600) !important; }

.cdir-ribbon {
  display: inline-flex; align-items: center; gap: .28rem;
  margin-left: .45rem; vertical-align: .18em;
  padding: .2rem .62rem .2rem .48rem; border-radius: 999px;
  background: color-mix(in srgb, var(--cdir-brand) 16%, #fff);
  color: var(--cdir-brand-600);
  border: 1px solid color-mix(in srgb, var(--cdir-brand) 34%, transparent);
  font-size: .7rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.cdir-ribbon svg { width: .8em; height: .8em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* A sheen crosses the badge once when the card is hovered — the one piece of
   pure delight on the card, and it lands on the thing worth noticing. */
.cdir-ribbon { position: relative; overflow: hidden; }
.cdir-ribbon::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
  transform: translateX(-120%);
}
.cdir-card:hover .cdir-ribbon::after { animation: cdir-sheen .85s cubic-bezier(.3,.6,.3,1) .1s; }
@keyframes cdir-sheen { to { transform: translateX(120%); } }

/* The reference's "LCSW · 3+ years" line. */
.cdir-card-sub { margin: 0 0 1.25rem; font-size: .95rem; color: var(--cdir-ink-soft); }

/* Section headings are sentence case and dark, not tiny grey capitals — the
   difference between a card that reads and a card that shouts. */
.cdir-group { margin: 0 0 1.15rem; }
.cdir-group-l {
  display: block; margin-bottom: .55rem;
  font-size: .95rem; font-weight: 650; color: var(--cdir-ink);
}
.cdir-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; }
.cdir-tag {
  transition: transform .28s cubic-bezier(.2,.8,.25,1), border-color .2s ease, color .2s ease;
  font-size: .86rem; font-weight: 500; padding: .34rem .85rem; border-radius: 999px;
  background: #fff; color: var(--cdir-ink); border: 1px solid var(--cdir-line);
  line-height: 1.4;
}
/* one filled chip, as the reference does with a primary specialty */
.cdir-tag.is-lead { background: var(--cdir-ink); color: #fff; border-color: var(--cdir-ink); }
.cdir-card.is-member .cdir-tag.is-lead { background: var(--cdir-brand-600); border-color: var(--cdir-brand-600); color: var(--cdir-on-brand); }

.cdir-card-desc {
  margin: 0 0 1.25rem; font-size: .95rem; line-height: 1.6; color: var(--cdir-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* No rule above the footer — the reference separates it with space alone. */
.cdir-card-foot {
  margin: auto 0 0; padding-top: 1.35rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.cdir-foot-l { display: block; font-size: .92rem; color: var(--cdir-ink-soft); margin-bottom: .1rem; }
.cdir-foot-v { display: block; font-size: 1.02rem; font-weight: 700; color: var(--cdir-ink); }
a.cdir-foot-tel { color: var(--cdir-ink) !important; text-decoration: none !important; }
a.cdir-foot-tel:hover { color: var(--cdir-brand-600) !important; }

/* Visually hidden but read aloud — the theme may not define this. */
.cdir .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- pager, empty, source ---------- */
.cdir-pager { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1.6rem 0 0; }
.cdir-page {
  min-width: 2.4rem; text-align: center; padding: .4rem .6rem;
  border: 1px solid var(--cdir-line); border-radius: var(--cdir-r-sm);
  color: var(--cdir-ink) !important; text-decoration: none !important; font-weight: 650;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.cdir-page:hover { border-color: var(--cdir-brand-600); transform: translateY(-1px); }
.cdir-page.is-on { background: var(--cdir-brand-600); border-color: var(--cdir-brand-600); color: var(--cdir-on-brand) !important; }

.cdir-empty { padding: 2.4rem 1.4rem; text-align: center; background: var(--cdir-canvas); border: 1px dashed var(--cdir-line); border-radius: var(--cdir-r); }
.cdir-empty-h { font-size: 1.15rem; font-weight: 700; margin: 0 0 .3rem; }
.cdir-empty .cdir-help { color: var(--cdir-ink-soft); font-size: .93rem; margin-bottom: 0; }
.cdir-source { margin: 1.3rem 0 0; font-size: .83rem; color: var(--cdir-ink-soft); }

/* ---------- ONE LISTING ----------
   Same language as the index: brand band on top, content beside a sticky panel.
   The band is shorter here because the search does not sit on its edge. */
.cdir-hero--detail { padding: 2.2rem 2.4rem 2.4rem; border-radius: var(--cdir-r); }
.cdir-hero--detail .cdir-hero-in { max-width: 62rem; }

.cdir-back {
  display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.4rem;
  font-size: .9rem; font-weight: 600;
  color: var(--cdir-on-brand) !important; text-decoration: none !important;
  opacity: .88; transition: opacity .18s ease, transform .18s ease;
}
.cdir-back svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cdir-back:hover { opacity: 1; transform: translateX(-2px); }

.cdir-detail-id { display: flex; align-items: center; gap: 1.2rem; }
.cdir-detail-id .cdir-avatar {
  width: 5.4rem; height: 5.4rem; border-radius: 20px; flex: none;
  background: #fff; border: 3px solid rgba(255,255,255,.85);
  color: var(--cdir-brand-600); font-size: 1.6rem;
  box-shadow: 0 12px 26px -16px rgba(0,0,0,.7);
}
.cdir-detail-id .cdir-hero-t { margin: 0 0 .2rem; font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.cdir-detail-id .cdir-hero-s { font-size: 1rem; }

.cdir-detail-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.3rem 0 0; }
.cdir-ribbon--solid { background: #fff; color: var(--cdir-brand-600); border-color: transparent; }
.cdir-ribbon--quiet {
  background: rgba(255,255,255,.16); color: var(--cdir-on-brand);
  border-color: rgba(255,255,255,.42);
}

.cdir-detail-grid { display: grid; gap: 1.8rem; grid-template-columns: 1fr; margin-top: 1.8rem; align-items: stretch; }
@container (min-width: 52rem) { .cdir-detail-grid { grid-template-columns: minmax(0, 1.9fr) minmax(19rem, 1fr); } }
.cdir-sidestick { position: sticky; top: var(--cdir-sticky-top, 1.5rem); }

.cdir-h2 {
  margin: 2rem 0 .8rem; font-size: 1.22rem; font-weight: 650; letter-spacing: -.01em;
  color: var(--cdir-ink);
}
.cdir-detail-main > .cdir-h2:first-child, .cdir-shots + .cdir-h2 { margin-top: 0; }
.cdir-prose { max-width: 66ch; }
.cdir-prose p { margin: 0 0 1rem; }

/* Photographs the facility supplied. First one leads; the rest sit under it. */
.cdir-shots {
  display: grid; gap: .6rem; margin: 0 0 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
.cdir-shots img {
  width: 100%; height: 11rem; object-fit: cover;
  border-radius: var(--cdir-r-sm); border: 1px solid var(--cdir-line);
  background: var(--cdir-canvas);
}
.cdir-shots img:first-child { grid-column: 1 / -1; height: 20rem; }

.cdir-panel {
  padding: 1.35rem 1.4rem; background: var(--cdir-surface);
  border: 1px solid var(--cdir-line); border-radius: var(--cdir-r);
  box-shadow: var(--cdir-shadow);
}
.cdir-addr { margin: 0 0 1rem; font-size: 1rem; line-height: 1.5; }

.cdir-facts { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--cdir-line-soft); display: grid; gap: .55rem; }
.cdir-facts dt { font-size: .85rem; color: var(--cdir-ink-soft); }
.cdir-facts dd { margin: 0 0 .3rem; font-size: 1rem; font-weight: 650; color: var(--cdir-ink); }

.cdir-map--one { height: 16rem; min-height: 0; margin-top: 1rem; }

/* ---------- motion ---------- */
@keyframes cdir-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .cdir *, .cdir *::before, .cdir *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important;
  }
  .cdir-card:hover, .cdir-chip:hover, .cdir-page:hover, .cdir-btn:hover { transform: none; }
  .cdir-card:hover .cdir-avatar, .cdir-card:hover .cdir-quick,
  .cdir-card:hover .cdir-tag.is-lead, .cdir-card:hover .cdir-btn--sm .cdir-arrow { transform: none; }
  .cdir-card::after, .cdir-card:hover::after { transition: none; }
  .cdir-card:hover .cdir-ribbon::after { animation: none; }
}

/* ══════════ ZIP + RADIUS ══════════
   "Within 25 miles of 95814" is the control a person actually reaches for on a
   treatment finder, so it sits in the main filter bar beside search — not folded
   into a panel. The two fields are one thought, so they are sized to sit next to
   each other and not wrap apart on a normal screen. */
.cdir-field--zip { min-width: 9.5rem; flex: 0 0 auto; }
.cdir-field--radius { min-width: 9.5rem; flex: 0 0 auto; }
.cdir-field--zip input { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* An unrecognised ZIP has to say so. Returning the unfiltered list to somebody
   who asked for "within 10 miles" looks like an answer and is not one. */
.cdir-zipwarn {
  flex: 1 0 100%; margin: .3rem 0 0; padding: .6rem .8rem;
  font-size: .88rem; line-height: 1.45; color: #7A4A05;
  background: #FFF8E5; border: 1px solid #F0C36D; border-radius: var(--cdir-r-sm);
}

/* The lone membership pill on a listing page — no heading above it, so it needs
   its own breathing room rather than inheriting a paragraph's. */
.cdir-tags--member { margin: 0 0 1.6rem; }