/* Visit page only. The map module's own styles are map/banhaus-map.css (loaded after this file, so
   overrides here use a second class). Shared pieces (facts, steps, copy, lnk, label) are in site.css.
   Two parts with the same shape: text in columns 1–4, its map in 5–12 (1–5 / 6–12 at 1024–1279);
   below 1024 one column, the map right after the part's heading. */

/* ── part 1: getting here on foot ── */
.visit{ --map-h:clamp(560px, calc(100svh - var(--hdr) - var(--s-7) * 2), 820px); padding-block:var(--s-7) var(--sec) }
.visit__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto auto auto minmax(0,1fr); column-gap:var(--g) }
.visit__intro,.visit-walk,.visit-open{ grid-column:1/5; min-width:0 }
.visit__intro{ grid-row:1 }
.visit__intro>.t-xl{ margin-top:-.28em }
.visit-walk{ grid-row:2; margin-top:var(--s-7) }
.visit-open{ grid-row:3; margin-top:var(--s-6) }
.visit-map--walk{ grid-column:5/-1; grid-row:1/-1 }
@media (min-width:1024px) and (max-width:1279px){
  .visit__intro,.visit-walk,.visit-open{ grid-column:1/6 }
  .visit-map--walk{ grid-column:6/-1 }
}
@media (max-width:1023px){
  .visit{ padding-top:var(--s-6) }
  .visit__grid{ display:flex; flex-direction:column }
  .visit__intro{ order:1 } .visit-map--walk{ order:2 } .visit-walk{ order:3 } .visit-open{ order:4 }
  .visit-map--walk{ margin-top:var(--s-6) }
  .visit-walk{ margin-top:var(--s-5) }
}

/* address, then subway and hours */
.visit-addr{ margin-top:var(--s-5) }
.visit-addr__row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:var(--s-4) }
.visit-addr__alt{ font-size:var(--t-s); color:var(--fg-2) }
.visit-addr__main+.visit-addr__row{ margin-top:-2px }
.visit-addr__row+.visit-addr__alt{ margin-top:0 }
.visit-addr__copy{ margin-inline:-4px }
html[lang=en] .visit-addr__main{ text-wrap:balance }
.visit-facts{ --cols:2; margin-top:var(--s-6) }
.visit-facts dd{ text-wrap:balance }

/* directions: rows on hairlines (a numbered list read as a table of steps); with the vector map each row is a
   button that shows its stretch of the route */
.visit-walk__h{ margin-bottom:var(--s-2) }
.visit-steps li{ display:block; padding:0; border-top:1px solid var(--line) }
.visit-steps li::before{ content:none }
.visit-steps li:last-child{ border-bottom:1px solid var(--line) }
.visit-step{ display:grid; grid-template-columns:28px minmax(0,1fr); align-items:baseline; width:calc(100% + var(--s-3) * 2); min-height:52px; margin-inline:calc(var(--s-3) * -1); padding:var(--s-3); text-align:left; transition:background-color .25s,color .2s }
.visit-step::before{ content:counter(step); font-size:var(--t-s); font-weight:600; color:var(--fg-2); font-variant-numeric:tabular-nums; transition:color .2s }
button.visit-step:hover,button.visit-step:hover::before{ color:var(--acc) }
button.visit-step[aria-pressed=true]{ background:var(--bg-2) }
button.visit-step[aria-pressed=true]::before{ color:var(--fg) }

/* map apps: one row of links, right after the directions */
.visit-apps{ display:flex; flex-wrap:wrap; column-gap:var(--s-5) }
.visit-open .label{ margin-bottom:var(--s-1) }

/* ── entrance photos (appear once the owner's photos are added) ── */
.visit-photos__row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--g) }
@media (max-width:767px){ .visit-photos__row{ grid-template-columns:repeat(3,72%); overflow-x:auto; scroll-snap-type:x mandatory } .visit-photos__row li{ scroll-snap-align:start } }

/* ── arrival: the real sign, so the door is recognisable (text 1–4, photo 5–12; photo first below 1024) ── */
.visit+.visit-arrive,.visit-arrive+.visit-park{ padding-top:0 }
.visit-arrive__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); align-items:end }
.visit-arrive__text{ grid-column:1/5; min-width:0 }
.visit-arrive__text .label{ margin-bottom:var(--s-2) }
.visit-arrive__text p{ text-wrap:balance }
.visit-arrive__photo{ grid-column:5/9; margin:0 }
@media (min-width:1024px) and (max-width:1279px){ .visit-arrive__text{ grid-column:1/6 } .visit-arrive__photo{ grid-column:6/10 } }
@media (max-width:1023px){
  .visit-arrive__grid{ display:flex; flex-direction:column-reverse; align-items:stretch; gap:var(--s-4) }
  .visit-arrive__photo .ph{ aspect-ratio:3/2 !important }
}
@media (max-width:767px){ .visit-arrive__photo{ margin-inline:calc(var(--m) * -1) } }

/* ── part 2: parking (follows part 1 without a second section gap) ── */
.visit+.visit-park,.visit+.visit-photos{ padding-top:0 }
.visit-park__grid{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--g); align-items:start }
.visit-park__text{ grid-column:1/5; min-width:0 }
.visit-map--parking{ grid-column:5/-1 }
.visit-park .visit-rows{ margin-top:var(--s-5) }
@media (min-width:1024px) and (max-width:1279px){
  .visit-park__text{ grid-column:1/6 }
  .visit-map--parking{ grid-column:6/-1 }
}
@media (max-width:1023px){
  .visit-park__grid{ display:flex; flex-direction:column; align-items:stretch }
  .visit-park__text{ display:contents }
  .visit-park__text>h2{ order:1 } .visit-map--parking{ order:2; margin-top:var(--s-5) } .visit-park .visit-rows{ order:3 } .visit-park__more{ order:4 }
}

/* parking rows: name, a short value on the right, ↗ when the row links out */
.visit-rows li{ border-top:1px solid var(--line) }
.visit-rows li:last-child{ border-bottom:1px solid var(--line) }
.visit-row{ display:grid; grid-template-columns:minmax(0,1fr) auto 12px; column-gap:var(--s-4); align-items:center; min-height:52px; padding-block:var(--s-3); line-height:1.5 }
.visit-row__meta{ font-size:var(--t-s); color:var(--fg-2); text-align:right; white-space:nowrap }
.visit-row .i-ext{ color:var(--fg-2); transition:color .2s }
a.visit-row .visit-row__name{ transition:color .2s }
a.visit-row:hover .visit-row__name,a.visit-row:hover .i-ext{ color:var(--acc) }
.visit-park__more{ margin-top:var(--s-2); align-self:flex-start }

/* ── maps: the walk map is the inline static map without JS (landscape; portrait on phones) and, with JS, a fixed frame
   where the static map holds the place until the vector map has drawn. The parking map exists only with the vector
   map: without JS or WebGL it is left out (the walk map's static version marks the car parks). ── */
.visit-map{ position:relative; min-width:0; overflow:hidden; background:var(--bg); border:1px solid var(--line) }
.visit-map>.map-svg{ display:block; width:100%; height:auto }
.visit-map>.map-svg--portrait{ display:none }
@media (min-width:1024px){ .visit-map--walk,.js .visit-map--walk.is-static{ align-self:start } }
.js .visit-map--walk{ align-self:stretch; min-height:var(--map-h); aspect-ratio:auto; border-radius:0 }
.js .visit-map>.map-svg{ position:absolute; inset:0; height:100%; transition:opacity .5s ease,visibility 0s }
.js .visit-map.is-ready>.map-svg{ opacity:0; visibility:hidden; transition:opacity .5s ease,visibility 0s .5s }
.js .visit-map.is-static{ min-height:0; aspect-ratio:auto }
.js .visit-map.is-static>.map-svg{ position:static; height:auto }
.visit-map--parking{ display:none }
.js .visit-map--parking{ display:block; aspect-ratio:16/10 }
.js .visit-map--parking.is-static{ display:none }
@media (max-width:1023px){
  .js .visit-map--walk{ min-height:0; aspect-ratio:3/2 }
  .js .visit-map--parking{ aspect-ratio:3/2 }
}
@media (max-width:767px){
  .visit-map{ margin-inline:calc(var(--m) * -1); border-inline:0 }
  .visit-map>.map-svg--landscape{ display:none }
  .visit-map>.map-svg--portrait{ display:block }
  .js .visit-map--walk{ aspect-ratio:4/5 }
  .js .visit-map--parking{ aspect-ratio:1/1 }
}

/* zoom: two 44 px buttons in the top right corner, shown once the vector map is ready */
.visit-zoom{ position:absolute; z-index:3; top:var(--s-3); right:var(--s-3); display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:2px }
.visit-zoom[hidden]{ display:none }
.visit-zoom button{ display:grid; place-items:center; width:44px; height:44px; color:var(--fg); transition:background-color .2s,color .2s }
.visit-zoom button+button{ border-top:1px solid var(--line) }
.visit-zoom button:hover{ background:var(--bg-2) }
.visit-zoom button:disabled{ color:var(--line); background:none; cursor:default }
.visit-zoom .i{ width:16px; height:16px }

/* the credit as a line of inline links; the point of the active step (or of the hovered car park) */
.visit-map .bh-map__credit{ padding:2px var(--s-2) }
.visit-map .bh-pin.is-step{ z-index:6 }
.visit-map .bh-pin.is-step .bh-pin__square,
.visit-map .bh-pin.is-step .bh-pin__ring,
.visit-map .bh-pin.is-step .bh-pin__badge{ outline:2px solid var(--acc); outline-offset:3px }