/* Contact page: facts column beside the booking card, full-width map below. */
.contact__grid{display:grid;gap:40px;align-items:start}
.contact__link{font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px;display:inline-block;margin-top:6px}
.contact__links{list-style:none;padding:0;margin:0;display:grid;gap:4px}
/* The section tint fills the slot until the lazy map paints over it, so it never reads as a gap above the band. */
.map iframe{width:100%;height:360px;border:0;display:block;background:var(--bg-3)}

/* Facts column: a stack of blocks split by the line token, one display-face heading style for every block. */
.facts{margin-top:32px;border-top:1px solid var(--line)}
.fact{padding:24px 0;border-bottom:1px solid var(--line)}
.fact__h{font-family:var(--head);font-weight:400;font-size:1.75rem;letter-spacing:.03em;line-height:1;margin:0 0 12px}
.fact__big{font-family:var(--head);font-size:2.6rem;line-height:1;letter-spacing:.02em;display:block;margin-bottom:8px}
.fact__sub{font-weight:700;margin:18px 0 4px}
.fact__tel{font-weight:700;color:var(--ink);white-space:nowrap}
/* Each link is a full tap target (--tap tall, text centred); a long email never overflows a narrow block. */
.fact .contact__link{display:inline-flex;align-items:center;min-height:var(--tap);margin-top:0;overflow-wrap:anywhere}
.fact address{font-style:normal;line-height:1.5;font-size:1.05rem;font-weight:500}
.facts__row{display:grid}

@media(min-width:768px){ /* breakpoint: tablet */
  .contact__grid{grid-template-columns:1.05fr .95fr}
}
/* BUG-018: at tablet the card beside the column is ~315px wide, so the date/drop-off pair clips the select text.
   Keep the pair stacked on /contact until the card has room (two-up resumes at desktop). Scoped to .contact; the
   hero card has its twin rule in hero.css (BUG-020): change both together. */
@media(min-width:768px) and (max-width:1023px){ /* breakpoint: tablet only */
  .contact .pane .two{grid-template-columns:1fr}
}
@media(min-width:1024px){ /* breakpoint: desktop */
  /* Call and Visit sit side by side; the row draws the pair's one bottom rule. */
  .facts__row{grid-template-columns:1fr 1fr;gap:0 32px;border-bottom:1px solid var(--line)}
  .facts__row .fact{border-bottom:0}
}
