/* pages/clinics.css — /clinics/, /clinics/<town>/, /clinics/<town>/card/, /schedule/, /emergencies/,
   /appointments/, /thanks/ (Owner: B; DESIGN §4.27, §5.2–§5.7). Layout only: colours, sizes, radii and
   type of shared components stay in main.css. Same three breakpoints (≤1080 / ≤900 / ≤640), no print. */

/* ---- clinic town page: opener with the side card as the aside (DESIGN §5.3) ---- */
/* a sixth, absorbing row (". aside", 1fr) takes the side card's extra height so the four text rows stack at their
   natural spacing instead of being stretched to share the card's ~540px */
.opener--task.has-aside.town-opener .wrap{grid-template-areas:"crumbs crumbs" "title aside" "lede aside" "next aside" "hours aside" ". aside";grid-template-rows:auto auto auto auto auto 1fr;row-gap:0}
.town-opener__where{max-width:40em}
.town-opener .opener__aside{align-self:start}
.town-next{grid-area:next;margin:var(--s-2) 0 var(--s-4)}
.town-next__title{font-size:var(--fs-md);margin:0 0 var(--s-3);color:var(--teal-deep)}
.town-hours{grid-area:hours;margin:0;max-width:40em;color:var(--gray-text);font-size:var(--fs-base);line-height:1.5}
.town-hours b{color:var(--ink)}
.side-card__label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2);margin:0}
.side-card__label .eyebrow{margin:0}
.side-card__forget{margin:0;text-align:center}
.side-card__forget .text-link{background:none;border:0;cursor:pointer;font-family:var(--display);font-size:var(--fs-sm)}
/* the Forget affordance belongs to the remembered card only (site.js shows [data-forget-hide] whenever any town is set) */
.side-card:not(.is-mine) .side-card__forget,.clinic-card:not(.is-mine) [data-forget]{display:none}
.side-card .rating{margin:0}
/* TEMP → main.css: Directions (154px with its icon) + "Request a visit" (162px) need 324px side by side; the card's
   interior is 304px at ≥1081 and 284px at 901–1080, so the 1fr/1fr pair always wrapped "Request a visit" onto two
   lines (65px tall). Stack the pair at every width — both stay one line, 48px. Request: make main.css
   .side-card__grid{grid-template-columns:1fr} and drop the ≤900 override. */
.side-card__grid{grid-template-columns:1fr}

/* ---- clinic town page: body + rail ---- */
.town-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-8) var(--s-9);align-items:start;padding:var(--s-8) var(--gutter) var(--s-9)}
.town-main{min-width:0;display:grid;gap:var(--s-8)}
.town-main>.prose{max-width:var(--measure)}
.town-rail{position:sticky;top:calc(var(--nav-h) + 16px);display:grid;gap:var(--s-5);min-width:0}
.town-rail .strip-911{margin:0}
.town-rail .book-mini{max-width:none}
.town-rail .ccard__rows{grid-template-columns:1fr;gap:0}
.town-rail .ccard__rows dt{border-bottom:0;padding-bottom:0}
.town-rail .ccard__rows dd{padding-top:4px}
.provider__text{min-width:0}
.provider__steps li .tel{margin:2px 4px;vertical-align:middle}
.provider__step-text{display:inline}
.town-photo{margin:0;width:100%;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--gray-wash);align-self:start}
.town-photo img{display:block;width:100%;height:auto}
.town-dates h2,.town-guides h2,.other-clinics h2{margin-bottom:var(--s-4)}
.town-dates__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);max-width:var(--measure)}
.town-dates__list li{padding:10px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:var(--fs-base);font-variant-numeric:tabular-nums;color:var(--ink)}
.town-dates__more{max-width:var(--measure)}
.town-dates__more>summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-family:var(--display);font-weight:700;color:var(--teal-deep);cursor:pointer}
.town-dates__more>summary::-webkit-details-marker{display:none}
.town-dates__more>summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:var(--mint-mid);color:var(--teal-ink);font-weight:800;line-height:1}
.town-dates__more[open]>summary::before{content:"–"}
.town-dates__note{margin:var(--s-3) 0 0;font-size:var(--fs-sm);color:var(--gray-text)}
.town-dates__acts{margin:var(--s-3) 0 0}
.town-guides__lede{max-width:var(--measure);color:var(--gray-text);margin:0 0 var(--s-4)}
.town-guides .doc-list{max-width:var(--measure);margin-bottom:0}
.other-clinics__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);max-width:var(--measure)}
.other-clinics__row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(280px,340px);gap:var(--s-2) var(--s-4);align-items:center;padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.other-clinics__town{display:inline-flex;align-items:center;min-height:44px;font-family:var(--display);font-weight:700;font-size:var(--fs-md);color:var(--teal-deep);text-decoration:none}
.other-clinics__town:hover{text-decoration:underline;text-decoration-color:var(--mint)}
.town-layout+.cta-band{margin-top:0}

/* ---- /clinics/ hub ---- */
.clinics-list .clinic-list{margin-bottom:var(--s-7)}
/* five cards in two columns: the odd last card spans the row as a wide card, so no orphan (DESIGN §4.10) */
.clinic-list>li:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:160px minmax(0,1fr) auto;grid-template-areas:"head head head" "photo body acts";gap:var(--s-3) var(--s-5);align-items:start}
.clinic-list>li:last-child:nth-child(odd) .clinic-card__head{grid-area:head}
.clinic-list>li:last-child:nth-child(odd) .clinic-card__photo{grid-area:photo}
.clinic-list>li:last-child:nth-child(odd) .clinic-card__body{grid-area:body}
.clinic-list>li:last-child:nth-child(odd) .clinic-card__actions{grid-area:acts;flex-direction:column;align-items:stretch;margin-top:0}
.clinics-list .strip-911{margin:0}

/* ---- /clinics/<town>/card/ ---- */
.card-page{max-width:640px;padding-top:var(--s-8);padding-bottom:var(--s-9)}
.card-page__back{margin:var(--s-5) 0 0}
.ccard__title{margin:0;font:inherit;color:inherit;letter-spacing:0}
.ccard__who{display:block;margin-top:4px;font-family:var(--body);font-weight:600;font-size:var(--fs-sm);color:var(--gray-text)}
.ccard__acts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.ccard__url{min-width:0}
.ccard__rows dd{min-width:0}

/* ---- /schedule/ ---- */
.sched-hours{max-width:var(--measure);margin:0 0 var(--s-5);color:var(--ink)}
.sched-jump{margin:0 0 var(--s-7)}
.sched-towns{display:grid;gap:var(--s-7)}
.sched-town{scroll-margin-top:calc(var(--nav-h) + 16px);max-width:var(--measure);padding-top:var(--s-5);border-top:1px solid var(--line)}
.sched-town__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-4)}
.sched-town__head h2{margin:0}
.sched-dates{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sched-dates li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);padding:8px 0;border-bottom:1px solid var(--line);font-family:var(--display);font-weight:600;font-size:var(--fs-base);font-variant-numeric:tabular-nums;color:var(--ink)}
.sched-dates li.is-next{font-weight:800;color:var(--teal-deep)}
.sched-dates .chip{min-height:32px;padding:4px 12px}
.sched-more>summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-family:var(--display);font-weight:700;color:var(--teal-deep);cursor:pointer}
.sched-more>summary::-webkit-details-marker{display:none}
.sched-more>summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:var(--mint-mid);color:var(--teal-ink);font-weight:800;line-height:1}
.sched-more[open]>summary::before{content:"–"}
.sched-town__acts{margin:var(--s-4) 0 0}
.sched-town__prov{margin:var(--s-3) 0 0;font-size:var(--fs-sm);color:var(--gray-text)}
.sched .strip-911{margin:var(--s-8) 0 0}

/* ---- /emergencies/ ---- */
.emerg-lead{margin-top:var(--s-3)}
.emerg .strip-911{margin:0 0 var(--s-7)}
.emerg h2{margin-bottom:var(--s-4)}
.emerg-towns{list-style:none;margin:0 0 var(--s-8);padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-3)}
.emerg-towns .btn{justify-content:center;gap:var(--s-2);white-space:normal;text-align:center;padding-left:12px;padding-right:12px} /* 12px side padding: "Rock Springs, WY" fits one line in a 216px cell at 1440 */
.emerg-towns .tag{font-size:var(--fs-xs);padding:3px 10px}
.emerg-blocks{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);margin:0 0 var(--s-9)}
.town-block{min-width:0;border:2px solid var(--line);border-radius:var(--r-lg);background:var(--white);scroll-margin-top:calc(var(--nav-h) + 16px)}
.town-block.is-mine{border-color:var(--teal-deep)}
.town-block__summary{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);min-height:64px;padding:var(--s-3) var(--s-5);cursor:pointer}
.town-block__summary::-webkit-details-marker{display:none}
.town-block__title{margin:0;font-size:var(--fs-lg)}
.town-block__sub{color:var(--gray-text);font-size:var(--fs-sm);font-weight:600;min-width:0}
.town-block__chev{margin-left:auto;flex:none;width:24px;height:24px;stroke:var(--teal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg);transition:transform .15s}
.town-block[open]>.town-block__summary .town-block__chev{transform:rotate(-90deg)}
.town-block__body{padding:0 var(--s-5) var(--s-5);border-top:1px solid var(--line)}
.town-block__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);padding-top:var(--s-4)}
.town-block__grid>*{min-width:0}
.town-block .tel--block{min-width:0}
.town-block__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-4);margin-top:var(--s-4)}
.emerg-prose{max-width:var(--measure)}
.emerg-prose__acts{margin-top:var(--s-5)}

/* ---- /appointments/ ---- */
.appt-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,1.16fr) minmax(0,1fr);gap:var(--s-5);align-items:start} /* cards 1–2 ≈380px so the longest town + number strip stays one line */
.appt-card{display:grid;gap:var(--s-4);align-content:start;padding:var(--s-5)}
.appt-card__title{display:flex;align-items:center;gap:var(--s-3);margin:0;font-size:var(--fs-lg)}
.appt-card__num{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--teal-deep);color:var(--on-dark);font-family:var(--display);font-weight:800;font-size:var(--fs-md)}
.appt-card__text{min-width:0}
.appt-next{margin:0;font-weight:600;color:var(--ink)}
.appt-next:empty{display:none}
.appt-chooser,.appt-prov{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.appt-prov li{display:grid;gap:4px}
.appt-prov__who{font-size:var(--fs-sm);color:var(--gray-text);font-weight:600;padding-left:14px}
.appt-card__lede{margin:0;color:var(--ink)}
.appt-card__note{margin:0;font-size:var(--fs-sm);color:var(--gray-text)}
/* remembered clinic (DESIGN §5.7): the other four rows collapse behind "Other clinics" (page script in appointments.njk) */
.appt-others>summary{list-style:none;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-family:var(--display);font-weight:700;color:var(--teal-deep);cursor:pointer}
.appt-others>summary::-webkit-details-marker{display:none}
.appt-others>summary::before{content:"+";display:inline-grid;place-items:center;width:22px;height:22px;margin-right:8px;border-radius:50%;background:var(--mint-mid);color:var(--teal-ink);font-weight:800;line-height:1}
.appt-others[open]>summary::before{content:"–"}
.appt-others__list{list-style:none;margin:var(--s-2) 0 0;padding:0;display:grid;gap:var(--s-2)}
.appt-prov .appt-others__list li{display:grid;gap:4px}
.appt-form{display:block}
.appt-form .field:last-of-type{margin-bottom:var(--s-4)}
.appt-form .appt-card__note{margin-top:var(--s-3)}

/* ---- /thanks/ ---- */
.thanks{padding-bottom:var(--s-6)}
.thanks__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-5);align-items:start}
.thanks__card{display:grid;gap:var(--s-4);justify-items:start}
.thanks__title{margin:0;font-size:var(--fs-lg)}
.thanks__next{margin:0;color:var(--ink);line-height:1.6}
.thanks__card.is-set .thanks__title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* set state: the §10.7 sentence carries "While you wait" itself */
.thanks+.router{padding-top:0}

/* ---- lg ≤1080 ---- */
@media (max-width:1080px){
  .town-layout{grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-7) var(--s-7)}
  .emerg-towns{grid-template-columns:repeat(3,minmax(0,1fr))}
  .appt-cards{grid-template-columns:1fr 1fr}
  .appt-cards>li:last-child{grid-column:1/-1}
}

/* ---- md ≤900 ---- */
@media (max-width:900px){
  .opener--task.has-aside.town-opener .wrap{display:block}
  .town-opener .opener__aside{margin:var(--s-4) 0 var(--s-5)}
  .town-next{margin:0 0 var(--s-4)}
  .town-layout{grid-template-columns:1fr;gap:var(--s-8);padding-top:var(--s-7)}
  .town-rail{position:static;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .town-rail .strip-911,.town-rail .ccard{grid-column:1/-1}
  .other-clinics__row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"town chip" "tel tel"}
  .other-clinics__row .tel{grid-area:tel}
  .emerg-towns{grid-template-columns:repeat(2,minmax(0,1fr))}
  .town-block__grid{grid-template-columns:1fr}
  .clinic-list>li:last-child:nth-child(odd){display:flex;flex-direction:column;grid-template-columns:none}
  .clinic-list>li:last-child:nth-child(odd) .clinic-card__actions{flex-direction:row;align-items:center;margin-top:auto}
  .appt-cards{grid-template-columns:1fr}
  .appt-cards>li:last-child{grid-column:auto}
  .thanks__grid{grid-template-columns:1fr}
}

/* ---- sm ≤640 ---- */
@media (max-width:640px){
  /* first mobile fold (DESIGN §5.3/§6): town · hospital line · side card · three chips above the bottom bar
     (bar top = 772px at 390×844) — tighter gaps on phones. The side card's eyebrow "Call the {town} clinic"
     stays visible (§4.11); the privacy note under "Make {town} my clinic" is shown once the card is the
     remembered clinic (it explains a button that needs JS, so no-JS loses nothing) — that is what buys the
     ~100px the two-line "Rock Springs, Wyoming" h1 needs. */
  .town-opener{padding-top:var(--s-3);padding-bottom:var(--s-5)}
  .town-opener .opener__aside{margin:var(--s-1) 0}
  /* phone-only card spacing (12px padding, 6px row gaps): with the tighter opener/aside gaps above this is what keeps
     the third chip above the bar on the two-line "Rock Springs, Wyoming" page (bar top 772, chip bottom 762) */
  .side-card{padding:var(--s-3);gap:6px}
  .side-card__grid{gap:6px}
  .side-card:not(.is-mine) .side-card__note{display:none}
  .town-opener .opener__title{margin-bottom:var(--s-1)}
  .town-opener__where{margin-bottom:var(--s-1)}
  .town-next{margin:0 0 var(--s-3)}
  .town-next__title{margin-bottom:var(--s-1)}
  .town-next__title{font-size:var(--fs-base)}
  .town-layout{padding-top:var(--s-6);gap:var(--s-7)}
  .town-main{gap:var(--s-7)}
  .town-rail{grid-template-columns:1fr;gap:var(--s-4)}
  .town-photo{border-radius:var(--r-lg)}
  .provider__steps li .tel{display:flex;width:100%;margin:6px 0}
  .other-clinics__row{padding:var(--s-2) 0}
  .card-page{padding-top:var(--s-6)}
  .card-page .ccard__rows{grid-template-columns:1fr;gap:0}
  .card-page .ccard__rows dt{border-bottom:0;padding-bottom:0}
  .card-page .ccard__rows dd{padding-top:4px}
  .sched-jump{margin-bottom:var(--s-6)}
  .sched-towns{gap:var(--s-6)}
  .sched-town__head .tel{width:100%;justify-content:center}
  /* first fold = 911 + the five town buttons (DESIGN §6): two columns, Buffalo spanning, so the chooser ends above the bar */
  .emerg .strip-911{margin-bottom:var(--s-5)}
  .emerg h2{margin-bottom:var(--s-3)}
  .emerg-towns{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin-bottom:var(--s-7)}
  .emerg-towns>li:last-child:nth-child(odd){grid-column:1/-1}
  .emerg-towns .btn{padding-left:8px;padding-right:8px;line-height:1.15}
  .emerg-blocks{margin-bottom:var(--s-8)}
  .town-block__summary{padding:var(--s-2) var(--s-4);min-height:56px}
  .town-block__body{padding:0 var(--s-3) var(--s-3)}
  /* 300px CSS viewport (Safari page zoom, C-3): the 22px number + pill padding + three nested boxes must fit — tighten the block and card padding only on phones */
  .town-block .num-card{padding:var(--s-3)}
  .town-block__sub{flex-basis:100%}
  .appt-card{padding:var(--s-4)}
  .thanks__card .btn{width:100%}
}