/* Location page — page-specific layout tweaks (ports mockups/location.html inline CSS). */
/* Title shares the content column's left edge with a tight gap (matches Wine Club). */
.visit-page.section{padding-top:clamp(30px,4vw,52px);padding-bottom:clamp(40px,6vw,72px)}
.visit__h{margin:0 0 14px}
/* NB: the intro paragraph is styled by .pagelede in base.css and nothing here.
   It held the blurb to 46ch so it would not run the full grid width; the panel's own
   max-width does that job for every page at once now. */
.visit-contact.section{padding-top:clamp(36px,5vw,64px);padding-bottom:clamp(40px,6vw,72px)}
.visit{display:grid;grid-template-columns:1fr;gap:clamp(28px,5vw,56px);align-items:start}
.visit__info dl{margin:26px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 28px}
.visit__info dt{font-family:var(--font-display);font-style:italic;color:var(--gold-ink)}
.visit__info dd{margin:0;color:var(--ink-2)}
.visit__info dd a{border-bottom:1.5px solid var(--olive)}
.visit__see{font-family:var(--font-display);font-style:italic;font-size:1.5rem;color:var(--ink);margin:14px 0 0}
.visit__note{color:var(--sage);font-size:.9rem;margin:22px 0 0;max-width:42ch}
.visit__actions{margin-top:28px}
.map-box{aspect-ratio:4/3;background:var(--cream-2);border:1px solid var(--line);border-radius:var(--r);position:relative;overflow:hidden}
.map-box__frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.contact-form{max-width:680px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media(min-width:981px){
  .visit{grid-template-columns:1fr 1fr}
}

/* Phone and email in the visit details are the two things someone taps on a phone, and
   they rendered 21px tall. Real rows, not text with a link colour. */
.visit-details dd a,
.visit dd a { display: inline-block; padding: 9px 0; }

/* ===== Good to know (client, 2026-08-29) =====
   Bullets, because Stacey ruled out prose: "Obviously, I don't want it in paragraph
   format." The heading is small and quiet rather than a display banner -- she was not
   sure it needed a title at all ("maybe it doesn't even need to be titled"), and the
   constraint on the whole band was that the page not get rearranged: "I like the way this
   page is laid out though, so I don't want to rearrange it too much."

   It sits on the page's own ground, between two sections that both have their own fill,
   so it reads as a quiet shelf between them rather than a third competing block. */
/* THE GAP ABOVE THIS BAND IS TWO PADDINGS, NOT ONE (fixed 2026-08-30). The Find Us
   section already carries up to 72px of bottom padding, and this band was adding up to
   another 44 on top of it -- about 116px of nothing between the Get Directions button and
   this box. Renato: "too much space between get directions and good to know vertically."
   So the section above gives up most of its bottom padding when this band follows it, and
   the band leads with none of its own. Scoped with :has() rather than by editing the
   section outright, because the Find Us section keeps its full spacing on any page or
   arrangement where this band is not underneath it. */
.visit-page.section:has(+ .visit-facts) { padding-bottom: clamp(16px, 2.2vw, 26px); }
.visit-facts { padding-top: 0; padding-bottom: clamp(28px, 4vw, 44px); }
.visit-facts__in {
  max-width: 900px;
  border: 1px solid var(--taupe);
  border-radius: var(--r);
  background: var(--cream);
  padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.6vw, 32px);
}
.visit-facts__h {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  margin: 0 0 clamp(12px, 1.6vw, 16px);
}
/* Two columns where there is room, one where there is not. Five short facts in a single
   column runs as a thin ladder down a wide page; in two it reads at a glance, which is
   the whole job of this band.

   COLUMNS, NOT GRID. A two-column grid fills left-to-right, so the moment one fact wraps
   to two lines its whole row grows and the short fact beside it is left sitting over a
   gap -- which is what "Gluten-free options across most of the menu" did. Multi-column
   flows down and balances the two halves itself, and it keeps doing so when the client
   changes five facts into four or seven, which a fixed row count would not. */
.visit-facts__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.visit-facts__list li + li { margin-top: 8px; }
@media (min-width: 700px) {
  .visit-facts__list {
    column-count: 2;
    column-gap: clamp(20px, 3vw, 40px);
  }
  /* Without this a bullet can break across the column boundary, leaving its dash at the
     foot of one column and its words at the head of the next. */
  .visit-facts__list li { break-inside: avoid; }
  /* The first item in the second column must not inherit the 8px that separates rows
     inside a column, or the two columns start at different heights. */
  .visit-facts__list li:first-child { margin-top: 0; }
}
.visit-facts__list li {
  position: relative;
  padding-left: 18px;
  line-height: 1.55;
  color: var(--ink);
}
/* A small rule rather than a disc: the page has no other bulleted list and a disc reads
   as a form control next to this type. */
.visit-facts__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 9px;
  height: 1px;
  background: var(--taupe);
}
/* The laptop line is prose because April said it had to be -- "I think it needs some
   verbiage" -- and it is set apart from the facts above it so it does not read as a sixth
   amenity. */
.visit-facts__note {
  margin: clamp(14px, 1.8vw, 18px) 0 0;
  padding-top: clamp(12px, 1.6vw, 16px);
  border-top: 1px solid var(--taupe);
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.6;
  max-width: 62ch;
}