/* =============================================================================
   MODULE · b-local — service area, address, hours, directions

   Three equal columns on desktop, stacked on a phone in the order someone
   actually needs them: where it is, when it is open, who it serves. Most of
   this module's traffic arrives from a phone on a local search, so the address
   and the tel: link are first in the source and first on the small screen.

   The hours list is a <dl> because it is genuinely pairs of terms and values,
   and a definition list is the one place where that markup is not a stretch.
   ========================================================================== */

.b-local__inner {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--sp-8), 4vw, var(--sp-12));
}

/* --- head ---------------------------------------------------------------- */

.b-local__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  max-width: var(--measure);
}

.b-local__eyebrow,
.b-local__lede { margin: 0; }

.b-local__h { text-wrap: balance; }

/* --- the three fact columns ---------------------------------------------- */

.b-local__facts {
  display: grid;
  gap: clamp(var(--sp-8), 4vw, var(--sp-12));
  padding-top: clamp(var(--sp-6), 3vw, var(--sp-10));
  border-top: 1px solid var(--line);
}

.b-local__fact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.b-local__fact-h {
  color: var(--accent);
  margin: 0;
}

/* --- address and phone ---------------------------------------------------- */

.b-local__address {
  font-style: normal;            /* <address> italicises by default */
  color: var(--ink);
  margin: 0;
}

.b-local__phone { margin: 0; }

.b-local__actions {
  margin: var(--sp-1) 0 0;
  display: flex;
}

/* Colour only. Nothing on this site moves on hover. */
.b-local__link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-hover) var(--ease-out);
}

.b-local__link:hover { color: var(--ink); }

/* --- hours ---------------------------------------------------------------- */

.b-local__hours {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.b-local__hour {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.b-local__hour:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.b-local__hour dt {
  color: var(--ink);
  margin: 0;
}

.b-local__hour dd {
  color: var(--soft);
  margin: 0;
  text-align: right;
}

/* --- service area --------------------------------------------------------- */

/* The metro line under the town grid — a quiet footnote to the list, not a
   ninth entry in it. */
.b-local__metro {
  margin: var(--sp-4) 0 0;
}

.b-local__cities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3) var(--sp-5);
  color: var(--ink);
}

/* Sage as a decorative mark, never as type — it is 2.0:1 on a light ground. */
.b-local__cities li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
}

.b-local__cities li::before {
  content: "";
  width: var(--sp-2);
  height: var(--sp-2);
  margin-top: 0.62em;
  background: var(--sage);
}

/* --- slot primitive (scoped) ----------------------------------------------
   Only two of these exist in the whole module, and that is the point: the
   heading and the optional intro are the only editable copy here. Everything
   else is practice data. */

.b-local .slot {
  color: var(--soft);
  border: 0;
  border-radius: var(--radius);
  margin: 0;
}

.b-local .slot--inline {
  display: inline;
  border-bottom: 1px dashed var(--sage);
}

/* --- wide ----------------------------------------------------------------- */

@media (min-width: 860px) {
  .b-local__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(var(--sp-10), 5vw, var(--sp-16));
  }

  .b-local__cities { grid-template-columns: minmax(0, 1fr); }
}

/* Tap floor. The phone link measured 111x20 — it is the single most likely
   thing a visitor on a phone actually taps, and it was the smallest target on
   the page. Project floor is 44px. */
.b-local__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap-min);
}