/* ---------- visit ---------- */
/* the street address under the title (moved here from the old hero's stylesheet) */
.address {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 500;
}
#visit-h {
  --big: clamp(min(88px, 27.5vw), 25vw, 160px); /* big and bold like FAQ, a little smaller since it's longer */
}
.visit {
  display: grid;
  gap: 22px;
  align-items: start;
}
@media (min-width: 900px) {
  .visit {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }
}
.info {
  display: grid;
  gap: 22px;
}
.info-card {
  container-type: inline-size; /* its rows stack by the card's own width, not the screen's (below) */
  padding: 22px;
  display: grid;
  gap: 12px;
}
.info-card h3 {
  font-size: 1.5rem;
}
.rows {
  display: grid;
}
.rows div {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 2px solid var(--hair);
}
.rows dt {
  font-weight: 700;
}
.rows dd {
  overflow-wrap: anywhere; /* last resort: a long address breaks rather than spilling out of the card */
}
/* under the hours: they can change, so the latest are on Google Maps */
.hours-note {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--muted);
}
/* a narrow card puts each label above its value; the card is narrow on phones and beside the map from 900px */
@container (max-width: 460px) {
  .rows div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}
.where {
  display: grid;
  gap: 18px;
}
.map-card {
  display: grid;
  overflow: hidden;
  border: var(--line) solid var(--edge);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--hard);
}
[data-mode="night"] .map-card {
  border: 1.5px solid var(--hair);
  box-shadow: none;
}
.map {
  display: block;
  width: 100%;
  height: 360px;
  border: 0;
  background: var(--photo);
}
.map-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-top: 2px solid var(--hair);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}
.map-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 640px) {
  .map {
    height: 300px;
  }
}
/* the "How to find Mench Cafe" video under the map: square like the clip, as wide as the map, so nothing is
   cropped. Its label sits at the top, clear of the play bar; .photo--real is in the selector because 18-photos.css
   (loaded later) puts the label at the bottom with a selector of the same weight, which would otherwise win. */
.entrance-video {
  aspect-ratio: 1;
}
.entrance-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo--real.entrance-video figcaption {
  top: 10px;
  bottom: auto;
}
/* Reserve a table lands here and lights the Contact card (js/reserve.js): its outline turns red by day, yellow at
   night, and a ring pulses out of it twice, like Sponsor us's email box. --lit-base keeps the card's own shadow
   under the ring (the hard ink shadow by day; an empty one at night, so both lists have two shadows to blend). */
.info-card {
  --lit: var(--red);
  --lit-base: var(--hard);
  transition: border-color 0.4s ease;
}
[data-mode="night"] .info-card {
  --lit: var(--yellow);
  --lit-base: 0 0 0 0 transparent;
}
.info-card.is-lit,
[data-mode="night"] .info-card.is-lit {
  border-color: var(--lit);
  animation: visit-lit 1.4s ease-out;
}
@keyframes visit-lit {
  0%,
  45% {
    box-shadow:
      var(--lit-base),
      0 0 0 0 color-mix(in srgb, var(--lit) 70%, transparent);
  }
  15% {
    transform: scale(1.015);
  }
  30% {
    transform: none;
  }
  44%,
  100% {
    box-shadow:
      var(--lit-base),
      0 0 0 14px color-mix(in srgb, var(--lit) 0%, transparent);
  }
}
/* less motion: the outline still changes colour, without the bump and the rings */
@media (prefers-reduced-motion: reduce) {
  .info-card.is-lit,
  [data-mode="night"] .info-card.is-lit {
    animation: none;
  }
}