/* ============================================
   VENUE PAGE

   The per-venue pages generated by tools/build-seo.mjs. They are the site's
   only server-rendered content, so everything here has to be readable with
   JavaScript off — no data-aos attributes, no opacity:0 waiting on a library.

   Palette and rhythm come from tokens.css and the dark navy/gold page chrome in
   premium-fx.css, so these pages read as part of the site rather than as
   generated output bolted onto it.
   ============================================ */

.venue-page {
    /* Clears the fixed 80px header (see .header in styles.css). */
    padding: calc(80px + var(--space-6)) 0 var(--space-8);
    color: var(--page-text);
}

.venue-page .container {
    max-width: 52rem;
}

/* --- Breadcrumb --- */
.venue-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--page-text-secondary);
    margin-bottom: var(--space-5);
}

.venue-crumbs a {
    color: var(--page-text-secondary);
    text-decoration: underline;
    text-decoration-color: rgba(255, 215, 0, 0.4);
    text-underline-offset: 3px;
    /* An inline crumb is only as tall as its text; the padding makes it a
       thumb-sized target without moving the row, which is taller anyway. */
    padding: 4px 0;
}

.venue-crumbs a:hover { color: var(--accent-gold); }
.venue-crumbs [aria-current] { color: var(--page-text); }

/* --- Heading --- */
.venue-head { margin-bottom: var(--space-6); }

.venue-title {
    font-family: var(--font-heading);
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    color: var(--accent-gold);
    margin: 0 0 var(--space-3);
}

.venue-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    color: var(--page-text-secondary);
    margin: 0;
}

/* The rating is an editorial score with no review count behind it, so it is
   labelled as one. That label is also why no aggregateRating is emitted in the
   JSON-LD — structured data has to match what the page can actually support. */
.venue-rating { color: var(--page-text); }
.venue-rating small {
    display: block;
    font-size: var(--text-xs);
    color: var(--page-text-secondary);
    letter-spacing: var(--tracking-wide);
}

/* --- Photograph --- */
.venue-figure {
    margin: 0 0 var(--space-6);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-3);
}

.venue-figure img {
    display: block;
    width: 100%;
    height: auto;
    /* width/height are set on the element from the JPEG header, so the box is
       reserved before the image loads and the text below never jumps. */
}

/* --- Prose --- */
.venue-body { margin-bottom: var(--space-7); }

.venue-body p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    margin: 0 0 var(--space-4);
    color: var(--page-text);
}

.venue-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    text-wrap: pretty;
}

.venue-body h2 {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    color: var(--accent-gold);
    margin: var(--space-6) 0 var(--space-3);
}

.venue-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    padding: 0;
    margin: var(--space-5) 0 0;
}

.venue-pills li {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: rgba(255, 215, 0, 0.1);
    border: 1px solid rgba(255, 215, 0, 0.25);
    font-size: var(--text-sm);
    color: var(--page-text);
}

/* --- Facts --- */
.venue-facts,
.venue-related {
    margin-bottom: var(--space-7);
    padding: var(--card-pad);
    border-radius: var(--radius-lg);
    background: var(--page-bg-alt);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.venue-facts h2,
.venue-related h2 {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--accent-gold);
    margin: 0 0 var(--space-4);
}

.venue-facts dl {
    display: grid;
    /* Label column sizes to the longest label, then stops — on a phone the
       whole thing collapses to a single column instead of squeezing. */
    grid-template-columns: auto 1fr;
    gap: var(--space-3) var(--space-5);
    margin: 0 0 var(--space-5);
    font-size: var(--text-base);
}

.venue-facts dt {
    color: var(--page-text-secondary);
    font-weight: var(--weight-semibold);
}

.venue-facts dd { margin: 0; color: var(--page-text); }
.venue-facts a { color: var(--accent-gold); text-decoration: underline; text-underline-offset: 3px; }

.venue-map-link {
    display: inline-block;
    min-height: 44px;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #b8860b 0%, #ffd700 100%);
    color: #14204a !important;
    font-weight: var(--weight-semibold);
    text-decoration: none !important;
}

.venue-map-link:hover { box-shadow: var(--shadow-gold-glow); }

/* --- Related venues ---
   These links are the whole reason the generated pages get crawled at all: a
   page nothing points to is a page Google never reaches. */
.venue-related ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-3);
}

.venue-related li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-3);
}

.venue-related a {
    color: var(--page-text);
    text-decoration: underline;
    text-decoration-color: rgba(255, 215, 0, 0.45);
    text-underline-offset: 3px;
    padding: 4px 0;
}

.venue-related a:hover { color: var(--accent-gold); }

.quiet {
    color: var(--page-text-secondary);
    font-size: var(--text-sm);
}

/* --- Footer navigation --- */
.venue-foot-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.venue-foot-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--accent-gold);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- Serbian category index --- */
.venue-index {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-7);
    display: grid;
    gap: var(--space-5);
}

.venue-index li {
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.venue-index li:last-child { border-bottom: 0; }

.venue-index a {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    color: var(--accent-gold);
    text-decoration: none;
}

.venue-index a:hover { text-decoration: underline; text-underline-offset: 4px; }

.venue-index .quiet { display: block; margin-top: var(--space-1); }

.venue-index p {
    margin: var(--space-2) 0 0;
    line-height: var(--leading-normal);
    color: var(--page-text);
}

@media (max-width: 600px) {
    .venue-facts dl { grid-template-columns: 1fr; gap: var(--space-1) 0; }
    .venue-facts dd { margin-bottom: var(--space-3); }
}