/**
 * site-venue.css - the venue details blocks, shared by every web rendering of a venue.
 *
 * Consumers: the generated partner pages (scripts/admin scripts/generate-partner-venue-pages.js)
 * and venue{,-bg}.html, which renders public venues client-side from getPublicVenues. Before this
 * file both carried their own inline copy of the same rules and had already drifted.
 *
 * Layout and the reasons behind the numbers: Documentation/Admin/venue_page_layout.md § 4. The one
 * rule to keep in mind when changing widths: the shell may grow, a paragraph may not. Prose stays
 * in the 50-75 character band (~660px here); extra width buys a second column or a wider slot
 * grid, nothing else.
 *
 * Built on the tokens in site-theme.css. The chrome (header, footer, CTA) is site-common.css.
 */

/* ── Shell ─────────────────────────────────────────────────────────────────── */

/* 1160 minus the 20px gutters is a 1120px content box, which is what § 4's widths add up to. */
.venue-shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 20px;
}

main { padding: 0; }

/* ── Breadcrumb ────────────────────────────────────────────────────────────── */

/* Draws the trail that the BreadcrumbList in the head already declares. The separator is a CSS
   pseudo-element so it stays out of the accessible name. */
.breadcrumb {
  padding-top: 20px;
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.breadcrumb li + li::before {
  content: "\203A";
  color: var(--sn-text-3);
}

.breadcrumb a {
  color: var(--sn-text-2);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--sn-text);
  text-decoration: underline;
}

.breadcrumb [aria-current="page"] {
  color: var(--sn-text);
  font-weight: 600;
}

/* ── Identity band ─────────────────────────────────────────────────────────── */

/* Name, partner badge, open/closed, address and chips. ABOVE the tab bar, because all of it is
   true whichever tab is open - that is the whole point of the band (§ 2). */
/* Vertical padding as longhands, not the `14px 0 16px` shorthand this used to carry. The band also
   carries .venue-shell, and a shorthand sets all four sides - so it was resetting the shell's 20px
   side gutters to 0 and winning on source order. Above 1160px the shell is centred in so much
   margin that nothing showed; at or below it the shell fills the viewport and the name, address and
   chips sat hard against the screen edge while the breadcrumb above and the tabs below - which use
   longhands - kept their gutter. */
.venue-identity {
  padding-top: 14px;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.venue-identity h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  line-height: 1.15;
  color: var(--sn-text);
}

.venue-headline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.venue-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--sn-radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* display:inline-flex above outranks the hidden attribute, which is the same trap rv-picker and
   rv-panel already document. */
.venue-badge[hidden] { display: none; }

.venue-badge.partner { background: var(--sn-primary); color: var(--sn-on-dark); }

/* The address opens the venue in the user's maps app, so it carries the same affordance as the
   phone/website links in the facts table. inline-block rather than block, so the hover underline
   hugs the address instead of stretching the column; the vertical padding brings a single line up
   to a comfortable tap target. */
.venue-location {
  color: var(--sn-text-2);
  font-size: 15px;
}

/* Map pin before the address. Drawn in CSS rather than as markup in the two page templates:
   the generated page and venue.html build their identity block separately, so an inline <svg>
   would be a third hand-kept copy of the same glyph (sportIconHtml is already two). Masked
   rather than used as a background image so it takes currentColor and follows the address -
   muted on its own, the link colour when the address links to Maps. */
.venue-location::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.venue-location a {
  color: var(--sn-primary);
  text-decoration: none;
  display: inline-block;
  padding: 4px 0;
}

.venue-location a:hover { color: var(--sn-primary-dark); text-decoration: underline; }

.venue-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.venue-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--sn-radius-pill);
  background: var(--sn-primary-tint);
  color: var(--sn-primary);
  font-size: 13px;
  font-weight: 600;
}

.sport-icon { flex-shrink: 0; }

.venue-tag.free { background: var(--sn-success-tint); color: var(--sn-success-dark); }
.venue-tag.paid { background: #FFF7E6; color: var(--sn-warning-dark); }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */

/* Styled here rather than in site-reservation.js because the buttons ship in the served HTML and
   must look right before any module loads - and must still look right if one never does.
   Sticky under the 60px fixed header: a tab bar that scrolls away is the documented failure mode
   of this pattern, and the bar is the only route back to Details from a long grid. */
.rv-tabs {
  position: sticky;
  top: 60px;
  z-index: 10;
  display: flex;
  /* Height is fixed rather than left to the text, because the reservation grid's own sticky
     header has to stop below this bar and so needs a number it can trust. The tabs stretch to
     fill it, so their padding still centres the labels. */
  height: 44px;
  gap: 6px;
  margin: 0 0 22px;
  border-bottom: 1px solid var(--sn-border);
  background: var(--sn-bg);
}

/* Where anything below the tab bar has to stop when it sticks: the 60px fixed header plus the
   44px bar. Declared here, beside the two numbers it adds up, and read by .rv-thead in
   site-reservation.js. */
:root { --sn-rv-head-top: 104px; }

.rv-tab {
  background: none;
  border: none;
  cursor: pointer;
  padding: 11px 18px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  color: var(--sn-text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.rv-tab[aria-selected="true"] { color: var(--sn-primary); border-bottom-color: var(--sn-primary); }
.rv-tab:hover { color: var(--sn-text); }
.rv-tab:focus-visible { outline: 3px solid var(--sn-success); outline-offset: -3px; }

/* ── Details panel: two columns ────────────────────────────────────────────── */

/* Text left, gallery right. 440px for the gallery leaves ~656px for prose, which is the measure;
   the source order is text first, and the phone rule below moves the gallery up visually without
   moving it in the markup. */
.venue-details {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 24px;
  align-items: start;
  padding-bottom: 40px;
}

.venue-col-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.venue-col-media { min-width: 0; }

/* No photos: the text column takes the whole width rather than leaving a hole. */
.venue-details.no-media { grid-template-columns: minmax(0, 1fr); }

/* ...but the two cards should not. Stretched across the full 1160px for the sake of two rows a
   card reads as an empty band, which is not what the same card looks like on a venue that has
   photos - and now that the description is boxed too, a full-width one above a capped facts table
   would read as a mistake rather than a pair. Both are capped at the width they have in the
   two-column layout - the shell's 1160 less the 440 media column and the 24 gap - so they look the
   same either way. Below that width they simply fill the column. */
.venue-details.no-media .venue-description,
.venue-details.no-media .venue-facts { max-width: 696px; }

/* 900, the same width at which the home page's two-column audience block stacks - a venue detail
   column and a players card are the same decision, and 899 here was an accident, not a tuning. */
@media (max-width: 900px) {
  .venue-details {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The photo is the hook on a phone, as it is in the app, so it renders above the text while the
     markup keeps description-then-gallery for crawlers and screen readers. */
  .venue-col-media { order: -1; }
}

/* ── Description ───────────────────────────────────────────────────────────── */

/* Boxed like the facts table below it, so the two blocks of venue detail read as a pair rather
   than one panel and one loose paragraph. Same chrome as .venue-facts deliberately - two boxes a
   shade apart would look like a mistake. The generator emits this div only when the venue has a
   description, so an empty box is not reachable. */
.venue-description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--sn-text-2);
  white-space: pre-line;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  padding: 14px 16px;
}

/* ── Facts table ───────────────────────────────────────────────────────────── */

.venue-facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 16px;
  font-size: 14px;
  background: var(--sn-surface);
  border: 1px solid var(--sn-border);
  border-radius: var(--sn-radius);
  padding: 14px 16px;
}

.venue-facts dt {
  color: var(--sn-text-3);
  font-weight: 600;
}

.venue-facts dd {
  margin: 0;
  color: var(--sn-text);
  min-width: 0;
}

.venue-facts a {
  color: var(--sn-primary);
  text-decoration: none;
  word-break: break-word;
}

.venue-facts a:hover { color: var(--sn-primary-dark); text-decoration: underline; }

/* Hours collapse to today. A <details> rather than a scripted toggle, so the disclosure works
   with no JS at all and keeps its own keyboard and accessibility behaviour. */
.venue-hours-today > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.venue-hours-today > summary::-webkit-details-marker { display: none; }

/* Sized to sit with the 14px row text rather than shrink away from it - at 11px the triangle read
   as punctuation, not as the control it is. */
.venue-hours-today > summary::after {
  content: "\25BE";
  color: var(--sn-primary);
  font-size: 15px;
  line-height: 1;
}

.venue-hours-today[open] > summary::after { content: "\25B4"; }
.venue-hours-today > summary:focus-visible { outline: 3px solid var(--sn-success); outline-offset: 2px; }

.venue-hours-week {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 13px;
}

.venue-hours-week .day { color: var(--sn-text-3); }

/* ── Gallery ───────────────────────────────────────────────────────────────── */

/* One photo at a time. The frame is a fixed 16:9 box so a slow photo cannot shift the page, and it
   is all there is: the arrows flank the photo the way the marketing pages' phone carousel flanks
   its screenshot, and nothing sits below it. A dot row and a thumbnail rail under the frame spent
   two more bands of vertical space restating what the counter in the corner already says.
   Arrows and counter both overlay the photo on the same solid fill - venues upload their own
   images, so a bare white glyph on an unknown photo would be a contrast gamble; the fill is what
   makes overlaying safe. */
.venue-gallery {
  display: flex;
  flex-direction: column;
}

.venue-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
  background: var(--sn-surface-alt);
}

/* A scroll-snap track, not a JS slideshow. One photo at a time, native swipe with the platform's
   own momentum, and keyboard scrolling all work before site-venue.js loads and still work if it
   never does - the module adds the arrows, counter and lightbox on top. */
.venue-track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  /* The snap points are the photos; the bar would sit over one of them. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.venue-track::-webkit-scrollbar { display: none; }

.venue-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.venue-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.venue-slide:focus-visible { outline: 3px solid var(--sn-success); outline-offset: -3px; }

.venue-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 3px 9px;
  border-radius: var(--sn-radius-pill);
  background: rgba(7, 26, 52, 0.82);
  color: var(--sn-on-dark);
  font-size: 12px;
  font-weight: 600;
  pointer-events: none;
}

/* Centred on the frame and inset from its edges, so each arrow sits over the photo it moves rather
   than in a control row of its own. The frame is the positioning context, and its overflow:hidden
   keeps them inside the rounded corners. */
.venue-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  /* The counter's fill exactly. Two overlays on one photo that did not match would read as two
     different kinds of thing. */
  background: rgba(7, 26, 52, 0.82);
  color: var(--sn-on-dark);
  cursor: pointer;
}

.venue-arrow[data-photo-step="-1"] { left: 10px; }
.venue-arrow[data-photo-step="1"] { right: 10px; }

/* Hover only where a pointer can leave the element again: on a touch screen :hover latches after
   the tap and the arrow sits there looking selected. Same reasoning as the phone carousel. */
@media (hover: hover) and (pointer: fine) {
  .venue-arrow:hover:not(:disabled) { background: var(--sn-primary); }
}

.venue-arrow:active:not(:disabled) { background: var(--sn-primary); }
/* Dimmed rather than hidden, as in the app, so the photo never changes what it is wearing. */
.venue-arrow:disabled { opacity: 0.35; cursor: default; }
.venue-arrow:focus-visible { outline: 3px solid var(--sn-success); outline-offset: 2px; }
.venue-arrow svg { width: 20px; height: 20px; }

/* Thumb-sized on a phone - 44px is the HIG target and WCAG 2.5.5 Enhanced - and tighter to the
   edge, since the frame is narrower there. 600, matching the header's own phone breakpoint - 599
   was an accident. */
@media (max-width: 600px) {
  .venue-arrow { width: 44px; height: 44px; }
  .venue-arrow[data-photo-step="-1"] { left: 8px; }
  .venue-arrow[data-photo-step="1"] { right: 8px; }
}

/* The dot row and the thumbnail rail that used to sit under the frame are gone. Both were pickers
   for a gallery capped at five photos, in a column where every band under the photo pushed the
   facts table further down the page; the counter names the position and the arrows move it. */

@media (max-width: 600px) {
  .venue-frame { border-radius: var(--sn-radius); }
}

/* ── Lightbox ──────────────────────────────────────────────────────────────── */

/* A <dialog> opened with showModal(), so focus trapping and Escape are the platform's. */
.venue-lightbox {
  padding: 0;
  border: none;
  background: transparent;
  max-width: 96vw;
  max-height: 94vh;
}

.venue-lightbox::backdrop { background: rgba(7, 26, 52, 0.88); }

.venue-lightbox img {
  display: block;
  max-width: 96vw;
  max-height: 94vh;
  width: auto;
  height: auto;
  border-radius: var(--sn-radius);
}

.venue-lightbox-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(7, 26, 52, 0.82);
  color: var(--sn-on-dark);
  font-size: 20px;
  cursor: pointer;
}

.venue-lightbox-close:focus-visible { outline: 3px solid var(--sn-success); outline-offset: 2px; }