/* ============================================================
   JID Rebuild — Clinics / Locations page
   Complete Physio · brand teal #1db1db
   Loaded only on the converted `clinics` route.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.jid-crumb{display:flex; align-items:center; gap:9px; padding:26px 0 0; font-size:.82rem; color:var(--slate)}
.jid-crumb a{color:var(--slate); transition:color .15s ease}
.jid-crumb a:hover{color:var(--teal-ink)}
.jid-crumb span[aria-hidden]{color:#b6c2c9}
.jid-crumb [aria-current]{color:var(--ink); font-weight:600}

/* ---------- Tighter masthead (no oversized hero) ---------- */
.jid-masthead--tight{padding:22px 0 30px}
.jid-masthead--tight h1{font-size:clamp(2.1rem,4.4vw,3rem); margin-bottom:14px}
.jid-masthead--tight p{font-size:1.08rem}

/* ---------- Postcode finder ---------- */
.jid-finder{max-width:640px; margin:0 auto 14px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow-lift); padding:24px}
.jid-finder__label{display:block; font-family:var(--font-display); font-weight:700; font-size:.95rem;
  color:var(--ink); margin-bottom:12px; text-align:center}
.jid-finder__row{display:flex; gap:10px; flex-wrap:wrap}
.jid-finder__inputwrap{position:relative; flex:1 1 240px; min-width:0}
.jid-finder__inputwrap svg{position:absolute; left:15px; top:50%; transform:translateY(-50%); color:#9aa6ad; pointer-events:none}
.jid-finder__inputwrap input{width:100%; font-family:var(--font-body); font-size:.98rem; color:var(--ink);
  padding:13px 16px 13px 44px; border-radius:999px; border:1px solid var(--line); background:#fff;
  outline:none; transition:all .2s ease; text-transform:uppercase}
.jid-finder__inputwrap input::placeholder{color:#9aa6ad; text-transform:none}
.jid-finder__inputwrap input:focus{border-color:var(--teal); box-shadow:0 0 0 4px rgba(29,177,219,.13)}
.jid-finder__row .jid-btn{padding-left:26px; padding-right:26px}
.jid-finder__status{margin:13px 0 0; text-align:center; font-size:.9rem; color:var(--slate); min-height:1px}
.jid-finder__status.is-error{color:#c0392b}
.jid-finder__status.is-ok{color:var(--teal-ink); font-weight:600}

/* ---------- Grid head ---------- */
.jid-grid-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin:38px 0 22px; padding-bottom:16px; border-bottom:1px solid var(--line)}
.jid-grid-head h2{font-family:var(--font-display); font-weight:800; font-size:1.4rem; color:var(--ink); margin:0; letter-spacing:-.01em}
.jid-count{font-family:var(--font-display); font-weight:600; font-size:.86rem; color:var(--slate); white-space:nowrap}

/* ---------- Clinic grid ---------- */
.jid-clinicgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; padding-bottom:8px}

.jid-cliniccard{display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); transition:transform .26s cubic-bezier(.2,.7,.2,1), box-shadow .26s ease, border-color .26s ease}
.jid-cliniccard:hover{transform:translateY(-5px); box-shadow:var(--shadow-lift); border-color:var(--pill-line)}
.jid-cliniccard__media{position:relative; aspect-ratio:600/340; overflow:hidden; background:#eef4f6}
.jid-cliniccard__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.jid-cliniccard:hover .jid-cliniccard__media img{transform:scale(1.05)}
.jid-cliniccard__dist{position:absolute; top:12px; right:12px; background:var(--teal); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:.76rem; padding:6px 11px; border-radius:999px;
  box-shadow:0 4px 12px rgba(29,177,219,.45)}

.jid-cliniccard__body{display:flex; flex-direction:column; flex:1; padding:20px 20px 22px}
.jid-cliniccard__body h3{font-family:var(--font-display); font-weight:800; font-size:1.14rem; color:var(--ink); margin:0 0 10px; letter-spacing:-.01em}
.jid-cliniccard__addr,.jid-cliniccard__meta{display:flex; align-items:flex-start; gap:8px; margin:0 0 9px; font-size:.88rem; line-height:1.5; color:var(--body)}
.jid-cliniccard__addr svg,.jid-cliniccard__meta svg{flex-shrink:0; margin-top:3px; color:var(--teal)}
.jid-cliniccard__meta{color:var(--slate); font-size:.84rem}
.jid-cliniccard__cta{display:inline-flex; align-items:center; gap:7px; margin-top:auto; padding-top:14px;
  font-family:var(--font-display); font-weight:700; font-size:.86rem; color:var(--teal-ink)}
.jid-cliniccard__cta svg{transition:transform .25s ease}
.jid-cliniccard:hover .jid-cliniccard__cta svg{transform:translateX(4px)}

.jid-clinicgrid__empty{text-align:center; padding:40px 0 10px; color:var(--slate); font-size:1rem}
.jid-linkbtn{background:none; border:none; color:var(--teal-ink); font-family:var(--font-display); font-weight:700; font-size:1rem; cursor:pointer; text-decoration:underline}

/* ---------- Ready to Book CTA ---------- */
.jid-bookcta{position:relative; z-index:1; margin-top:56px;
  background:linear-gradient(120deg,var(--header-bg),#1d3742)}
.jid-bookcta__inner{max-width:var(--maxw); margin:0 auto; padding:52px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap}
.jid-bookcta__copy h2{font-family:var(--font-display); font-weight:800; font-size:clamp(1.6rem,3vw,2.2rem); color:#fff; margin:0 0 8px; letter-spacing:-.01em}
.jid-bookcta__copy p{margin:0; font-size:1.05rem; color:rgba(255,255,255,.86); max-width:540px}
.jid-bookcta__actions{display:flex; gap:14px; flex-wrap:wrap}
.jid-btn--outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.jid-btn--outline-light:hover{background:rgba(255,255,255,.1); border-color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .jid-clinicgrid{grid-template-columns:repeat(2,1fr); gap:22px}
}
@media(max-width:768px){
  .jid-finder{padding:20px}
  .jid-finder__row .jid-btn{flex:1 1 auto}
}
/* Mobile-only scroll affordance: signals there's a finder + clinic list below.
   (This stylesheet is enqueued only on the clinics route, so html scope is safe.)
   NB: base rule defined BEFORE the media query so the mobile display:flex wins. */
html{scroll-behavior:smooth}
.jid-scrollcue{display:none; flex-direction:column; align-items:center; gap:3px;
  margin:14px auto 0; padding:4px; text-decoration:none; color:var(--teal-ink);
  font-family:var(--font-display); font-weight:700; font-size:.82rem; letter-spacing:.01em}
.jid-scrollcue__chev{animation:jid-bounce 1.6s ease-in-out infinite}
@keyframes jid-bounce{0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.jid-scrollcue__chev{animation:none}}

@media(max-width:600px){
  .jid-clinicgrid{grid-template-columns:1fr; gap:18px}
  .jid-grid-head{margin-top:30px}
  .jid-bookcta__inner{padding:40px 18px}
  .jid-bookcta__actions{width:100%}
  .jid-bookcta__actions .jid-btn{flex:1 1 auto}
  /* Tighten the hero on mobile so the finder card peeks above the fold (scroll cue). */
  .jid-clinics .jid-masthead--tight{padding:14px 0 18px}
  .jid-clinics .jid-masthead--tight p{font-size:.98rem; margin-bottom:4px}
  .jid-scrollcue{display:flex}
}

/* ── Optional interactive map (Leaflet, lazy-loaded, post-search only) ──── */
.jid-mapblock{max-width:640px; margin:0 auto; text-align:center}
.jid-maptoggle{display:flex; width:100%; align-items:center; justify-content:center; gap:9px; margin-top:2px}
.jid-maptoggle[hidden]{display:none}   /* the [hidden] attr must beat the display rule above */
.jid-maptoggle svg{flex:0 0 auto}
.jid-maptoggle__chev{transition:transform .2s ease}
.jid-maptoggle[aria-expanded="true"] .jid-maptoggle__chev{transform:rotate(180deg)}
.jid-map-wrap{margin-top:14px; text-align:left; animation:jid-mapdrop .25s ease both}
@keyframes jid-mapdrop{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.jid-map{height:420px; width:100%; border:1px solid var(--line); border-radius:14px;
  overflow:hidden; background:#eef2f4; z-index:0}
.jid-map__hint{margin:9px 2px 0; font-size:.82rem; color:var(--slate); text-align:center}
.jid-map__hint:empty{display:none}
.leaflet-container{font:inherit}
.leaflet-popup-content{font:13px/1.4 var(--font-body)}
.leaflet-popup-content strong{color:var(--ink)}
.jid-map-pin-pulse{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
@media(max-width:600px){.jid-map{height:330px}}