/* Venue info page.
 *
 * A full-screen page, deliberately NOT styled like the item sheet. That modal
 * already owns a visual language in this app -- slides up from the bottom,
 * floating circular X over an edge-to-edge 16:10 photo, flat white surface,
 * transactional footer. If the info screen reused it, guests would read the
 * two as the same kind of thing.
 *
 * So this one diverges on all four:
 *   entry    slides in from the RIGHT, like a pushed page, not up like a sheet
 *   chrome   a labelled "back to menu" bar, not a floating dismiss X
 *   surface  raised cards on the app's tinted --bg, not flat white
 *   imagery  rounded cover banner + circular logo badge, not a full-bleed photo
 *
 * Shared with the app: --primary accents, .pill chips, .section-title colour,
 * .card border-bottom row rhythm, Poppins inherited from body.
 *
 * The panel is hidden with [hidden] + visibility, never removed from the DOM:
 * its text must stay in the document for crawlers that do not run scripts.
 */

.vi-scrim{
  position:fixed; inset:0; z-index:60;
  background:rgba(15,15,15,.44);
  display:none;
}
.vi-scrim.open{ display:block; }

.vi{
  position:fixed; z-index:61;
  top:0; bottom:0; left:0; right:0;
  /* Centred with margin rather than left:50% + translateX(-50%).
     A transform on a position:fixed element creates a containing block and a
     compositing layer, which on iOS Safari can stop an overflow:auto child
     from scrolling by touch at all. No transform, no problem -- and with the
     animation gone there is nothing left that needed one. */
  width:var(--frame-fluid, min(100vw, 440px));
  margin-inline:auto;
  visibility:hidden;
  background:var(--bg);
  color:var(--ink);
  display:flex; flex-direction:column; overflow:hidden;
}
/* [hidden] ships in the markup for no-JS visitors; once JS runs the open
   state owns visibility and must beat display:none. */
.vi[hidden]{ display:flex; }
.vi.open{ visibility:visible; }

/* --- back bar -------------------------------------------------------- */
.vi-topbar{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  gap:12px; min-height:56px;
  /* Matches .bar's padding exactly, so the language select lands on the same
     pixel here as it does on the menu: x=359, y=12 at a 440px frame. */
  padding:12px 16px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  /* 12px to match .bar, but yield to the notch on a full-screen page. */
  padding-top:max(12px, env(safe-area-inset-top));
}
.vi-back{
  display:inline-flex; align-items:center; gap:6px;
  border:none; cursor:pointer;
  /* Same washed fill as .lang-select opposite it, and the same 41px box, so
     the two controls in this bar read as a matched pair. Because the fill is
     now visible, the button's BOX aligns to the 16px content gutter -- no
     negative margin pulling the glyph out to the edge. */
  background:var(--primary-washed);
  height:41px; padding:0 14px; border-radius:12px;
  font-family:inherit; font-size:14px; font-weight:600;
  color:var(--primary);
/* Named properties, never the `all` shorthand: `transition:.2s` also animates
   `visibility`, so these children kept fading for 200ms after the panel had
   already been hidden. */
  transition:background-color .2s ease, color .2s ease;
}
.vi-back:focus-visible,
.vi-action:focus-visible,
.vi-link:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

.vi-body{
  flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:0 0 32px;
  padding-bottom:max(32px, env(safe-area-inset-bottom));
}

/* --- profile block --------------------------------------------------- */
.vi-profile{ position:relative; padding:0 16px; margin-bottom:14px; }
.vi-cover{
  display:block; width:100%; aspect-ratio:3/1;
  object-fit:cover; background:var(--bg-light);
  border-radius:0 0 var(--radius) var(--radius);
}
/* No cover: nothing is drawn at all. A tinted placeholder band read as a
   broken image rather than as a deliberate absence. */
.vi-logo{
  position:relative; display:block;
  /* Centred and overlapping the banner by half its height -- the profile
     layout the circular crop was chosen for. */
  width:96px; height:96px; margin:-48px auto 0;
  border-radius:999px;          /* circular: the menu's .thumb is a 10px rect */
  object-fit:cover; background:var(--bg-light);
  border:3px solid var(--surface);
  box-shadow:var(--shadow);
}
/* The logo's -48px pull exists to overlap the banner by half. With no banner
   there is nothing to overlap, and the pull cropped the top half of the logo
   against the header instead. */
.vi-profile--nocover .vi-logo{ margin-top:16px; }

.vi-identity{ padding:12px 4px 0; text-align:center; }
/* Without a logo there is no circle overlapping the banner, so the name sits
   tight against the cover's lower edge. */
.vi-profile--coveronly .vi-identity{ padding-top:22px; }

/* With no cover and no logo the name sits straight under the top bar with
   nothing above it. Give it room so it reads as a heading, not a stray line. */
.vi-profile--noimages .vi-identity{ padding-top:32px; }
.vi-h2{ margin:0; font-size:28px; font-weight:700; line-height:1.15; overflow-wrap:anywhere; }
/* Same asset and height as .brand-image in the menu header, which the
   full-screen page covers. */
.vi-poweredby{ display:block; height:18px; width:auto; margin:8px auto 16px; }

.vi-status{
  display:inline-flex; align-items:center; gap:7px;
  margin:8px 0 0; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:600;
}
.vi-status.is-open{ color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, white 88%); }
.vi-status.is-closed{ color:var(--danger); background:color-mix(in srgb, var(--danger) 12%, white 88%); }
.vi-dot{ width:6px; height:6px; border-radius:999px; background:currentColor; flex:none; }

.vi-meta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; margin:10px 0 0; }
.vi-meta .vi-status{ margin:0; }
.vi-tag{                       /* .pill */
  font-size:12px; padding:4px 8px; border-radius:999px;
  background:var(--primary-washed); color:var(--primary);
}
.vi-tag--price{ background:var(--bg-light); color:var(--text-dark); font-weight:600; }

.vi-lede{
  margin:0 16px 16px; font-size:14px; line-height:1.6; color:var(--muted);
}

/* --- actions --------------------------------------------------------- */
.vi-actions{ display:flex; gap:8px; flex-wrap:wrap; margin:0 16px 18px; }
.vi-action{
  /* All three actions share one geometry and type scale; only the fill
     separates them. Secondary uses the app's .tab idiom -- washed primary
     ground, primary ink -- so the row reads as one control group. */
  flex:1 1 auto; white-space:nowrap;
  /* 45px: the actions are the page's main call to action and carry more
     weight than the 41px header controls. Flex centring rather than vertical
     padding, so the box holds whatever the label length. */
  display:inline-flex; align-items:center; justify-content:center;
  height:45px; padding:0 12px; border-radius:14px;
  border:1px solid transparent;
  background:var(--primary-washed); color:var(--primary);
  font-size:14px; font-weight:600; text-decoration:none;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
/* Secondary actions never take the primary fill -- not on hover, not in any
   other state. On touch, :hover sticks after a tap, so a button that inverts
   stays looking selected long after the finger has gone. */
.vi-action--primary{           /* .sticky-btn */
  background:var(--primary); border-color:var(--primary); color:#fff;
}
/* Below 400px the three labels stop fitting on one line, and which language
   breaks first varies -- Spanish gives out at 360, Hungarian and German at
   320, English not at all. Rather than let flexbox wrap them arbitrarily
   (which strands whichever button happens to overflow on its own row), the
   primary takes a full row of its own and the secondaries share the next.
   Measured across all four languages: 400px and up fits on one line. */
@media (max-width: 400px){
  .vi-action--primary{ flex:1 1 100%; }
}

/* --- cards: the item sheet is flat white; this screen is raised cards -- */
.vi-card{
  background:var(--surface);
  border-radius:var(--radius);
  padding:14px 16px;
  margin:0 16px 12px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.vi-h3{                        /* .section-title, card scale */
  margin:0 0 8px; font-size:16px; font-weight:600; color:var(--primary);
}

/* --- rows: .card's border-bottom rhythm ------------------------------ */
.vi-dl{ margin:0; }
.vi-row{
  display:flex; gap:12px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.vi-row:last-child{ border-bottom:none; padding-bottom:0; }
/* Content-width, so the value gets every pixel the label does not need. */
.vi-dt{ flex:0 0 auto; white-space:nowrap; font-size:13px; color:var(--muted); }
.vi-dd{ margin:0; flex:1 1 auto; font-size:15px; font-weight:500; overflow-wrap:anywhere; }
/* Contact values sit against the right edge, so label and value anchor to
   opposite sides of the card the way the hours rows already do. */
.vi-dl--right .vi-dd{ text-align:right; }

.vi-bullets{
  margin:0; padding:0 0 0 18px;
  display:grid; gap:8px;
  /* Same type as .vi-lede -- these are prose notes, not data values, so they
     read as description rather than as a table. Markers stay primary.
     Full-strength ink rather than the lede's --muted: the description is
     scene-setting, this is information a guest may actually need. */
  font-size:14px; line-height:1.6; color:var(--text-dark);
}
.vi-bullets li::marker{ color:var(--primary); }

.vi-link{ color:var(--primary); text-decoration:none; font-weight:500; }


/* --- hours ----------------------------------------------------------- */
.vi-hours{ display:block; }
.vi-hours-row{
  display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.vi-hours-row:last-child{ border-bottom:none; padding-bottom:0; }
.vi-day{ color:var(--muted); font-size:13px; }
.vi-time{ font-variant-numeric:tabular-nums; font-weight:500; }
.vi-time.is-closed{ color:var(--muted); font-weight:400; }
.vi-hours-row.is-today .vi-day,
.vi-hours-row.is-today .vi-time{ color:var(--primary); font-weight:600; }

.vi-address{ font-style:normal; font-size:15px; line-height:1.55; }
/* The quietest tier on the page: no fill, no border, just a primary link --
   one step below the washed chips and two below the action buttons. */
.vi-maplink{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; text-decoration:none;
  color:var(--primary); font-size:14px; font-weight:500;
}
/* The pin's visual mass sits above its point, so it reads low against the
   text baseline. Nudge it back up to optical centre. */
.vi-maplink svg{ margin-top:-2px; }
.vi-maplink:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; }

.vi-socials{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.vi-socials a{                 /* .tab, chip scale */
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  padding:8px 14px; border-radius:999px;
  background:var(--primary-washed); color:var(--primary);
  font-weight:600; font-size:13px; text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
}

/* Hover styling only where a pointer actually hovers. On touch, :hover latches
   after a tap and leaves controls looking permanently active. */
@media (hover: hover) and (pointer: fine){
  .vi-back:hover{ background:var(--primary); color:#fff; }
  .vi-socials a:hover{ background:var(--primary); color:#fff; }
  .vi-link:hover{ text-decoration:underline; }
  .vi-maplink:hover{ text-decoration:underline; }
}