/* The clinic page body (#282): Braden's pick of 2026-10-22, "Claude's Choice 2 (it keeps the
   Google map) with Codex's 'Care available in <town>' banner and the Choice 4 bands". Lifted from
   the sandbox that he picked from (sandbox/2026-10-22-layout-rethink/claude/lr.css, the .lr-loc
   rules and the banner rules, rounds 1-3 folded together with the later value winning) and
   re-scoped from the sandbox's body class to the page's own <main class="loc-page">. The markup is
   emitted by scripts/build-location-pages.py, never by hand. The approved photo hero and the
   shared header, call bar and footer are not touched by anything in this file.

   Brand: navy #00076D, green #53BA00, never white text on green. No white card on a white ground:
   a card on a white section is tinted, a card on a tinted band is white, and the busiest blocks
   (the visit facts and the providers) sit on navy. Text on the two tints was measured: #4A5568 is
   6.47:1 on #E9EEF8 and 6.52:1 on #E6F3DA; #377A00 is 4.57:1 and 4.61:1; #9FE06A on navy is
   10.67:1. Every @media upper bound uses the repo's .98px convention. */

.loc-page {
  --lr-line: rgba(0, 7, 109, .10);
  --lr-tint: #E9EEF8;
  --lr-sage: #E6F3DA;
  --lr-glow: #9FE06A;
  --lr-on-dark: rgba(255, 255, 255, .78);
  --lr-navy-band: linear-gradient(160deg, #0A1488, var(--navy) 60%, #00054C);
}

.loc-page .lr-eyebrow {
  font: 700 .72rem/1.3 Inter, system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-text); margin: 0 0 .65rem;
}
.loc-page .lr-eyebrow--on-dark { color: var(--lr-glow); }
.loc-page #request-callback { scroll-margin-top: 110px; }
.loc-page #request-callback .container > * { border-radius: 22px; }

/* ---------------------------------------------------------------- plan your visit */
.loc-page .lr-visit { background: var(--lr-tint); padding: clamp(2rem, 4vw, 3.25rem) 0; }
.loc-page .lr-visit-grid {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
  gap: 1.25rem; align-items: stretch;
}
.loc-page .lr-visit-map {
  border-radius: 20px; overflow: hidden; border: 1px solid transparent; background: var(--bg-blue);
  display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(0, 7, 109, .08);
}
.loc-page .lr-visit-map iframe { display: block; width: 100%; flex: 1 1 auto; min-height: 340px; border: 0; }
.loc-page .lr-visit-map .loc-visit-bar { border-radius: 0; margin: 0; background: #fff; }
/* the facts card and, on a clinic with a surgery centre beside it, that centre's card */
.loc-page .lr-visit-side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
/* the facts card on navy (Codex's "Clinic essentials" treatment) */
.loc-page .lr-visit-card {
  flex: 1 1 auto;
  border-radius: 20px; padding: clamp(1.25rem, 2.5vw, 1.9rem);
  background: var(--lr-navy-band); border: 1px solid transparent; color: #fff;
  box-shadow: 0 18px 48px rgba(0, 7, 109, .10);
}
.loc-page .lr-visit-card h2 {
  font-family: "Playfair Display", Georgia, serif; color: #fff;
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin: 0 0 .75rem;
}
.loc-page .lr-visit-card .lr-eyebrow { color: var(--lr-glow); }
.loc-page .lr-visit-card .loc-dl dt { color: var(--lr-glow); border-color: rgba(255, 255, 255, .14); }
.loc-page .lr-visit-card .loc-dl dd { color: #fff; border-color: rgba(255, 255, 255, .14); }
.loc-page .lr-visit-card .loc-dl a, .loc-page .lr-visit-card .loc-rail-google { color: #fff; }
.loc-page .lr-visit-card .loc-closed { color: var(--lr-on-dark); border-color: rgba(255, 255, 255, .14); }
.loc-page .lr-visit-card .btn-outline { border-color: rgba(255, 255, 255, .45); color: #fff; background: transparent; }
.loc-page .lr-visit-card .btn-outline:hover { border-color: var(--lr-glow); color: var(--lr-glow); }
.loc-page .lr-visit-card :focus-visible { outline-color: #fff; }
.loc-page .lr-visit-ins {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: .35rem;
  font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- office story + callback form */
.loc-page .lr-split-wrap { background: #fff; }
.loc-page .lr-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: clamp(1.5rem, 4vw, 3rem); align-items: start;
}
/* the shared callback component, unchanged markup, as a tinted card in the column */
.loc-page .lr-split-form .section-tint { background: none; padding: 0; }
.loc-page .lr-split-form .section-tint > .container { padding: 0; max-width: none; }
.loc-page .lr-split-form .section-tint > .container > * {
  background: var(--lr-tint); border: 1px solid transparent; border-radius: 22px;
  box-shadow: none; padding: clamp(1.15rem, 2.5vw, 1.75rem); max-width: none;
}
.loc-page .lr-split-form .form-row { grid-template-columns: 1fr; }
.loc-page .lr-split-main .loc-block { margin-bottom: 2.25rem; }
.loc-page #before-your-visit {
  background: rgba(83, 186, 0, .09); border: 1px solid transparent;
  border-radius: 18px; padding: 1.25rem 1.4rem;
}

/* providers on a navy band; real portraits at their own proportions, never cropped to a new
   shape, and sized by role from the roster (never by position): the Medical Director a step
   larger than the physicians, the physicians a step larger than everyone else
   (brand_system.md, "Provider photos"). */
.loc-page .loc-prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.loc-page .loc-prov-grid li {
  display: flex; align-items: center; gap: .9rem; background: var(--lr-tint);
  border: 1px solid transparent; border-radius: 16px; padding: .7rem .9rem .7rem .7rem;
}
.loc-page .lr-prov-photo { width: 60px; height: auto; border-radius: 10px; flex: none; }
.loc-page .loc-prov-grid .loc-prov-tile { width: 60px; height: 80px; border-radius: 10px; flex: none; }
.loc-page .loc-prov--physician .lr-prov-photo { width: 72px; }
.loc-page .loc-prov-grid .loc-prov--physician .loc-prov-tile { width: 72px; height: 96px; }
.loc-page .loc-prov--director .lr-prov-photo { width: 78px; }
.loc-page .loc-prov-grid .loc-prov--director .loc-prov-tile { width: 78px; height: 104px; }
.loc-page .loc-prov-name { display: inline-flex; min-height: 28px; align-items: center; }
.loc-page #clinic-providers { background: var(--lr-navy-band); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2rem); }
.loc-page #clinic-providers h2 { color: #fff; }
.loc-page #clinic-providers .loc-prov-grid li { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.loc-page #clinic-providers .loc-prov-name { color: #fff; }
.loc-page #clinic-providers .loc-prov-cred { color: var(--lr-glow); }
.loc-page #clinic-providers .loc-prov-role { color: var(--lr-on-dark); }
.loc-page #clinic-providers .loc-prov-tile { background: #fff; color: var(--navy); }
.loc-page #clinic-providers :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- the long lists on a tint */
.loc-page .lr-rest { background: var(--lr-tint); padding-top: 1rem; padding-bottom: clamp(2rem, 4vw, 3.25rem); }
.loc-page .lr-rest .loc-panel, .loc-page .lr-rest .loc-card, .loc-page .lr-rest .info-block {
  background: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(0, 7, 109, .06);
}
.loc-page #insurance { background: #fff; border-radius: 22px; padding: clamp(1.2rem, 3vw, 2rem); box-shadow: 0 10px 30px rgba(0, 7, 109, .08); }
.loc-page #insurance .loc-panel { box-shadow: none; background: var(--lr-tint); }
.loc-page #insurance .loc-index a { background: #fff; }
/* conditions and communities side by side; the towns on a green band */
.loc-page .lr-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.loc-page .lr-pair > .loc-block { margin: 0; }
/* the pair is not a .loc-block, so `.loc-block + .loc-block` cannot space it: same interval here */
.loc-page .lr-pair, .loc-page .lr-pair + .loc-block { margin-top: calc(var(--l-8) * 1.25); }
.loc-page .lr-pair > .lr-towns { background: var(--lr-sage); border-radius: 22px; padding: clamp(1.2rem, 3vw, 2rem); }
.loc-page .lr-towns .loc-geo-grid li { background: #fff; border-color: transparent; }
.loc-page #work-and-accident-injuries .info-block { border-left: 4px solid var(--navy); }

/* ---------------------------------------------------------------- Codex's care banner */
.loc-page .lr-banner {
  position: relative; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 300px;
  border-radius: 18px; overflow: hidden; background: var(--navy); color: #fff;
  margin: 2.25rem 0;
}
.loc-page .lr-banner-copy { position: relative; z-index: 1; padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.4rem, 4vw, 3rem); }
.loc-page .lr-banner-h {
  font-family: "Playfair Display", Georgia, serif; color: #fff;
  font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; margin: .6rem 0 1rem;
}
.loc-page .lr-banner-copy > p:not(.lr-eyebrow):not(.lr-banner-h) { color: var(--lr-on-dark); max-width: 40ch; line-height: 1.7; margin: 0; }
.loc-page .lr-banner-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.loc-page .lr-banner-link {
  color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 5px;
  display: inline-flex; min-height: 44px; align-items: center;
}
.loc-page .lr-banner-link:hover { color: var(--lr-glow); }
/* supporting art only (Codex-generated, decorative, alt="") */
.loc-page .lr-banner-art { position: relative; min-height: 100%; }
.loc-page .lr-banner-art::before {
  content: ""; position: absolute; z-index: 1; inset: 0;
  background: linear-gradient(90deg, var(--navy), transparent 32%); pointer-events: none;
}
.loc-page .lr-banner-art img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
/* owner ruling 2026-10-22: generated art that shows anatomy is captioned as an illustration */
.loc-page .lr-banner-cap { position: absolute; right: 14px; bottom: 12px; z-index: 1; padding: 2px 8px; border-radius: 4px; background: rgba(3,12,50,.72); color: #E5EAF5; font-size: 11px; letter-spacing: .04em; }
.loc-page .lr-banner :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------- narrower screens */
@media (max-width: 1023.98px) {
  .loc-page .lr-visit-grid, .loc-page .lr-split, .loc-page .lr-pair { grid-template-columns: 1fr; }
  .loc-page .lr-visit-side { order: -1; }    /* facts first on a phone, the map after */
  .loc-page .lr-split-form { order: -1; }    /* the form straight after the visit facts */
}
@media (max-width: 760.98px) {
  .loc-page .lr-visit-map iframe { min-height: 240px; }
  .loc-page .lr-banner { grid-template-columns: minmax(0, 1fr); }
  .loc-page .lr-banner-art { height: 185px; min-height: 0; order: -1; }
  .loc-page .lr-banner-art::before { background: linear-gradient(0deg, var(--navy), transparent 40%); }
  .loc-page .lr-banner-art img { object-position: center 50%; }
}