/* ---------- Our clinics ---------- */
.clinics{background:var(--reviews-bg)}
.clinic-note{font-size:.875rem;color:var(--muted);margin:-.8rem 0 1.6rem} /* sits between Patient Voices and Good to Know, so it shares their edge colour */
.clinic-cards{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:1.8rem;max-width:960px;margin:0 auto}
.clinic{border:1px solid var(--card-border);border-radius:5px;background:var(--card-bg);padding:2.4rem 2.2rem 2.2rem;display:flex;flex-direction:column}
.clinic-service{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500}
.clinic h3{font-size:1.9rem;color:var(--cream);margin:.7rem 0 1rem}
.clinic address{font-style:normal;color:var(--cream-dim);font-size:1rem;line-height:1.7;display:flex;flex-direction:column;margin-bottom:1.6rem}
.clinic-link{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;font-size:.8125rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream);transition:color .3s}
.clinic-link:hover{color:var(--gold-ink)}
.clinic-tour{margin-top:4.5rem}
.clinic-tour-head{text-align:center;font-size:1.7rem;color:var(--cream);margin-bottom:2.4rem}
/* one row per location, in the order set in the CMS; the location name sits to the left of its three photos */
.tour-places{display:grid;gap:2.8rem}
.tour-place{display:grid;grid-template-columns:minmax(10rem,.75fr) repeat(3,1fr);gap:1.6rem 1.2rem;align-items:start}
.tour-place>.tour-item:nth-child(3n+2){grid-column-start:2} /* a fourth photo starts a new line under the first */
.tour-place-head{grid-column:1;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;padding-top:.2rem}
.tour-place-head h4{font-size:1.5rem;color:var(--cream);line-height:1.1}
.tour-place-head span{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:500}
.tour-item{margin:0}
.tour-media{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:var(--card-bg)}
.tour-media video,.tour-img img{display:block;width:100%;height:100%;object-fit:cover}
.tour-img[data-focus="left"] img{object-position:0 50%}.tour-img[data-focus="right"] img{object-position:100% 50%}
.tour-item figcaption{margin-top:.7rem;font-size:.8125rem;letter-spacing:.04em;color:var(--muted)}
.tour-toggle{position:absolute;right:.7rem;bottom:.7rem;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:rgba(6,13,26,.62);color:#f6f1e7;transition:background .3s}
.tour-toggle:hover{background:rgba(6,13,26,.85)}
.tour-toggle:focus-visible{outline:2px solid var(--gold-bright);outline-offset:2px}
.tour-toggle svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tour-toggle .i-play{fill:currentColor}
.tour-toggle .i-pause,.tour-toggle.is-paused .i-play{display:block}
.tour-toggle .i-play,.tour-toggle.is-paused .i-pause{display:none}
@media(max-width:820px){
  .clinic-cards{grid-template-columns:1fr}
  .tour-places{gap:2.4rem}
  .tour-place{grid-template-columns:repeat(3,1fr);gap:0 .9rem}
  .tour-place>.tour-item:nth-child(3n+2){grid-column-start:auto}
  .tour-place-head{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.3rem .8rem;padding:0;margin-bottom:1rem}
  /* a location with a single clip or photo: its label sits beside it rather than above an empty half */
  .tour-place[data-items="1"] .tour-place-head{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-start;align-self:end;margin:0 0 2.2rem}
  .tour-place[data-items="1"] .tour-item{grid-column:1;grid-row:1}
}
@media(max-width:640px){
  .clinic{padding:2rem 1.6rem 1.8rem} .clinic h3{font-size:1.6rem}
  .tour-place{grid-template-columns:repeat(2,1fr);row-gap:1.4rem}
  .tour-place-head{margin-bottom:0}
  /* an odd photo out runs the full width in a wider frame rather than leaving a gap */
  .tour-place:not([data-items="1"]) .tour-item:last-child:nth-child(even){grid-column:1/-1}
  .tour-place:not([data-items="1"]) .tour-item:last-child:nth-child(even) .tour-media{aspect-ratio:16/10}
}