/* ValuFlor — styles for the shared content blocks in src/partials (branches.html, logos.html).
   A page that includes either partial lists this file in its front matter: "css": ["/css/sections.css"].
   Tokens and the base components (.branch, .embed, .marquee, .lift) live in site.css; this file only adds to them. */

/* ── coverage: branch list beside the map ─────────────────────────────── */
.coverage{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:26px;margin-top:32px;align-items:start}
.coverage__list>.branch:last-child{margin-bottom:0}

/* A branch row is one card holding two controls: a button that points the map at the branch, and a link
   that opens the address in a maps app. The button's hit area is stretched over the whole card so the row
   still behaves as one target; the address link sits above that layer. */
.branch{position:relative}
.branch__pick{-webkit-appearance:none;appearance:none;display:block;width:100%;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.branch__pick::after{content:"";position:absolute;inset:-1px -1px -1px -3px;border-radius:0 10px 10px 0}
.branch--ghost .branch__pick::after{inset:-1px;border-radius:10px}
.branch__pick:focus-visible{outline:0}
.branch__pick:focus-visible::after{outline:2px solid var(--vfgoldt);outline-offset:3px}
.branch .branch__kind{display:block;line-height:1}
.branch .branch__name{display:block}
.branch a.branch__addr{position:relative;z-index:1}
.branch p.branch__addr{display:block}
@media (pointer:coarse){
  /* the address is one line of 14px text: give a finger 44px without moving anything */
  .branch a.branch__addr::after{content:"";position:absolute;inset:-6px -10px -16px}
}

/* map idle state, as drawn in the design */
.coverage .embed__idle{gap:14px}
.coverage .embed__idle .eyebrow{letter-spacing:.18em}

/* ── logo marquees: keyboard pause ────────────────────────────────────── */
/* Each marquee carries a visually hidden button. Focusing it stops the scroll (site.css pauses on
   :focus-within) and pressing it toggles the pause (site.js). The band is masked at both ends, which would
   clip a focus ring drawn on it, so the ring is drawn on the group instead. */
@supports selector(:has(*)){
  .logos__group:has(.marquee__pause:focus-visible){outline:2px solid var(--vfgoldt);outline-offset:6px;border-radius:10px}
}
html.rm .marquee__pause{display:none}   /* nothing is moving, so there is nothing to pause */