/*
Theme Name: Evenue Default
Description: The workhorse design theme — every module, a calm neutral styling opinion, fully shaped through the design tokens. Port of the legacy evenue-default design exploration onto the v2 starter structure.
Version: 0.6.1

Requires PHP: 8.1
Author: Evenue
Text Domain: evenue-default
Contract: 2.12.0
*/

/* Every color, font, radius, and shadow comes from the --evenue-* tokens
   evenue-core emits (docs/TOKENS.md in evenue.core). Structural values —
   the 1200px container, grid gaps, hover lifts, overlay scrims on imagery —
   are this design's own opinion. */

* { box-sizing: border-box; }

/* The heights the sticky stack is built from: the header row and the
   breadcrumb bar. From 1025px up the trail rides under the header, so the
   stack is both; below, the trail scrolls away and the stack is the header.
   Sidebars and every #anchor target clear the stack. */
:root {
    --header-h: 84px;
    --crumb-h: 44px;
    --stack-h: var(--header-h);
}
@media (min-width: 1025px) {
    :root { --stack-h: calc(var(--header-h) + var(--crumb-h)); }
}
[id] { scroll-margin-top: calc(var(--stack-h) + 16px); }

body {
    margin: 0;
    background: var(--evenue-page-bg);
    color: var(--evenue-body-text);
    font-family: var(--evenue-body-font);
    letter-spacing: var(--evenue-body-letter-spacing);
    line-height: var(--evenue-body-line-height);
    font-size: 16px;
}

h1, h2, h3, h4 {
    font-family: var(--evenue-heading-font);
    letter-spacing: var(--evenue-heading-letter-spacing);
    line-height: var(--evenue-heading-line-height);
    color: var(--evenue-heading-text);
    font-weight: 700;
    margin: 0 0 0.5em;
}

h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

a { color: var(--evenue-link); text-decoration: none; transition: color 150ms ease; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; border-radius: var(--evenue-image-radius); display: block; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.muted { color: var(--evenue-muted-text); }

/* The signature label device: small caps eyebrow in the brand color. */
.eyebrow {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-weight: 700;
    color: var(--evenue-brand);
    margin-bottom: 8px;
}

/* Section titles carry a short 60px rule underneath. */
.section-title { position: relative; padding-bottom: 14px; margin-bottom: 20px; }
.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: var(--evenue-divider-h-weight);
    background: var(--evenue-divider-h-color);
}
.section-title.centered { text-align: center; }
.section-title.centered::after { left: 50%; transform: translateX(-50%); }

/* ---------- buttons ---------- */

.button {
    display: inline-block;
    background: var(--evenue-button-bg);
    color: var(--evenue-button-text);
    border: var(--evenue-button-border-width) solid var(--evenue-button-border-color);
    border-radius: var(--evenue-button-radius);
    font-size: var(--evenue-button-font-size);
    font-family: inherit;
    padding: var(--evenue-button-padding-y) var(--evenue-button-padding-x);
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.button:hover {
    background: var(--evenue-button-bg-hover);
    color: var(--evenue-button-text-hover);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--evenue-card-shadow);
}
.button:active { background: var(--evenue-button-bg-active); transform: none; }

.button.ghost {
    background: transparent;
    color: var(--evenue-brand);
    border: var(--evenue-border);
}
.button.ghost:hover { background: var(--evenue-surface-bg); color: var(--evenue-brand); }

/* The button is a row now: label, then the drawn arrow. */
.button { display: inline-flex; align-items: center; gap: 0; }
.button.lg { padding: calc(var(--evenue-button-padding-y) * 1.35) calc(var(--evenue-button-padding-x) * 1.35); font-size: 1.05rem; }
/* On the hero a ghost button stands on photography, so it carries its own
   hairline instead of borrowing the page's border color. */
.hero-actions .button.ghost { color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.hero-actions .button.ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: #fff; }

/* ---------- header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--evenue-page-bg);
    border-bottom: var(--evenue-divider-h-weight) solid var(--evenue-divider-h-color);
    transition: box-shadow 200ms ease;
}
/* The shadow appears once the page has moved underneath the header. */
.site-header.scrolled { box-shadow: var(--evenue-card-shadow); }

.header-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 20px;
    padding-top: 16px;
    padding-bottom: 16px;
    /* A fixed row, so the trail underneath knows where the header ends. */
    min-height: calc(var(--header-h) - var(--evenue-divider-h-weight));
}

.brand {
    font-family: var(--evenue-heading-font);
    font-size: 1.4rem;
    color: var(--evenue-heading-text);
    font-weight: 700;
}
.brand:hover { text-decoration: none; color: var(--evenue-brand); }
.brand img { height: 50px; max-width: 150px; width: auto; border-radius: 0; }

.site-nav { display: flex; align-items: center; justify-content: center; gap: 2.2rem; }
.site-nav .button { display: none; } /* the drawer's copy of the booking button, phones only */
.site-nav > a:not(.button) {
    position: relative;
    color: var(--evenue-heading-text);
    font-weight: 500;
    padding: 4px 0;
}
.site-nav > a:not(.button):hover,
.site-nav > a:not(.button)[aria-current] { color: var(--evenue-brand); text-decoration: none; }
.site-nav > a:not(.button)::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 2px;
    background: var(--evenue-brand);
    transition: width 200ms ease;
}
.site-nav > a:not(.button):hover::after,
.site-nav > a:not(.button)[aria-current]::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 16px; justify-self: end; }
.header-actions .button { font-size: 0.9rem; padding: calc(var(--evenue-button-padding-y) * 0.7) calc(var(--evenue-button-padding-x) * 0.8); }

.lang-switcher { display: inline-flex; gap: 8px; padding-left: 14px; border-left: var(--evenue-divider-v-weight) solid var(--evenue-divider-v-color); }
.lang { font-size: 0.8rem; color: var(--evenue-muted-text); }
.lang.current { color: var(--evenue-brand); font-weight: 700; }

/* From four languages up the codes fold into a disclosure. */
.lang-switcher--menu { position: relative; }
.lang-switcher--menu > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 44px;
}
.lang-switcher--menu > summary::-webkit-details-marker { display: none; }
.lang-switcher--menu > summary::after {
    content: "\203a";
    display: inline-block;
    transform: rotate(90deg);
    transition: transform 150ms ease;
}
.lang-switcher--menu[open] > summary::after { transform: rotate(-90deg); }
.lang-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1002;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    background: var(--evenue-surface-bg);
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    box-shadow: var(--evenue-modal-shadow);
}
.lang-menu .lang { text-align: right; }

/* Burger + off-canvas drawer (mobile). */
.burger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
}
.burger span {
    width: 24px;
    height: 2px;
    background: var(--evenue-heading-text);
    transition: transform 200ms ease, opacity 200ms ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 768px) {
    .header-inner { grid-template-columns: auto auto; justify-content: space-between; }
    .burger { display: flex; }
    .site-nav {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1.6rem;
        padding: 5rem 2rem 2rem;
        background: var(--evenue-page-bg);
        box-shadow: var(--evenue-modal-shadow);
        /* Closed drawer is out of the tab order and the AX tree, not just
           off-screen; visibility flips after the slide-out, before the slide-in. */
        visibility: hidden;
        transition: left 250ms ease, visibility 0s 250ms;
        z-index: 1001;
    }
    .site-nav.open { left: 0; visibility: visible; transition: left 250ms ease, visibility 0s; }
    .nav-scrim {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5); /* structural scrim, no token exists */
        z-index: 1000;
    }
    .nav-scrim.open { display: block; }
    .header-actions .button { display: none; }
    .site-nav .button { display: inline-flex; min-height: 44px; }
}

/* ---------- breadcrumbs ---------- */

/* One hairline bar above the page, the trail scrollable on phones. A fixed
   row, so nothing underneath it moves when a long trail scrolls. */
.breadcrumbs {
    height: var(--crumb-h);
    font-size: 0.85rem;
    background: var(--evenue-page-bg);
    border-bottom: var(--evenue-divider-h-weight) solid var(--evenue-divider-h-color);
}
.breadcrumbs__inner { display: flex; align-items: center; height: 100%; }
.breadcrumbs ol { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.breadcrumbs ol::-webkit-scrollbar { display: none; }
.breadcrumbs li { display: flex; gap: 10px; align-items: center; }
.breadcrumbs li + li::before { content: "\203a"; color: var(--evenue-muted-text); }
.breadcrumbs a { color: var(--evenue-muted-text); }
.breadcrumbs a:hover { color: var(--evenue-link); text-decoration: none; }
.breadcrumbs [aria-current] { color: var(--evenue-heading-text); font-weight: 600; }
/* On the desktop the trail rides under the header. */
@media (min-width: 1025px) {
    .breadcrumbs { position: sticky; top: var(--header-h); z-index: 900; }
}

/* ---------- footer ---------- */

.site-footer {
    margin-top: 64px;
    background: var(--evenue-heading-text);
    color: var(--evenue-page-bg);
}
.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding-top: 28px;
    padding-bottom: 28px;
    font-size: 0.9rem;
}
.footer-inner a { color: inherit; opacity: 0.85; }
.footer-inner .muted { color: inherit; opacity: 0.6; }
.footer-nav { display: inline-flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.footer-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; }
.footer-legal { display: inline-flex; gap: 14px; flex-wrap: wrap; }
.footer-note { flex-basis: 100%; margin: 0; font-size: 0.8rem; opacity: 0.6; }

/* ---------- hero banner ---------- */

.hero-banner {
    position: relative;
    min-height: 480px;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-color: var(--evenue-heading-text);
    overflow: hidden;
}
.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Structural legibility scrim over arbitrary imagery. */
    background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.65));
}
.hero-banner.compact { min-height: 240px; height: auto; padding: 72px 0; }
.hero-content { position: relative; max-width: 900px; padding: 0 20px; animation: heroFadeIn 0.9s ease both; }
.hero-title { color: #fff; margin-bottom: 0.3em; }
.hero-tagline { color: rgba(255, 255, 255, 0.92); font-size: clamp(1.05rem, 2vw, 1.4rem); margin: 0 auto 1.4em; max-width: 46rem; }
.hero-banner .button { font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.hero-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; opacity: 0.92; }
.hero-link:hover { color: #fff; opacity: 1; }
/* The AI badge takes the corner the hero's text leaves free. On the front
   page the search card overlaps the hero's lower 36px; the badge clears it. */
.hero-banner > .ai-label--badge { left: auto; right: 16px; bottom: 16px; }
.hero-banner:has(+ .hero-search) > .ai-label--badge { bottom: calc(36px + 16px); }

/* In-page jumps glide instead of cutting — the hero's "our properties", the
   property quicklinks, the results anchors. Motion is a preference. */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-content { animation: none; }
}

/* Search card overlapping the hero bottom edge. */
.hero-search {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: -36px auto 0;
    padding: 0 20px;
}
.hero-search form {
    display: flex;
    gap: 10px;
    background: var(--evenue-surface-bg);
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    box-shadow: var(--evenue-modal-shadow);
    padding: 12px;
}
.hero-search input {
    flex: 1;
    border: none;
    background: none;
    font: inherit;
    color: var(--evenue-body-text);
    padding: 8px 10px;
    outline: none;
    min-width: 0;
}

/* ---------- sections ---------- */

.section { padding: 56px 0; }
.section-alt { background: var(--evenue-surface-bg); border-top: var(--evenue-border); border-bottom: var(--evenue-border); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.section-sub { color: var(--evenue-muted-text); max-width: 46rem; margin-top: -8px; }
.more-link { font-weight: 600; white-space: nowrap; }

.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 768px) { .two-col { grid-template-columns: 1fr; } }

.fact-box {
    background: var(--evenue-surface-bg);
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    box-shadow: var(--evenue-card-shadow);
    padding: 22px 24px;
}
.fact-box p { margin: 0 0 0.6em; }
.fact-box p:last-child { margin-bottom: 0; }
/* Booking embed: 290px holds the booking widget's stacked form, a second
   status line included. A shorter frame gets a denser form, never a cut one. */
.booking-embed { display: block; width: 100%; height: 290px; border: 0; margin-top: 0.6rem; }
.fact-box h2, .fact-box h3 { margin-bottom: 0.8em; font-size: 1.15rem; } /* sidebar boxes follow the page's h1 as h2, same size as before */
/* The facts inside a booking card: one per line, each led by its icon. */
.fact-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.fact-list li { display: flex; align-items: center; color: var(--evenue-body-text); }
.fact-list .icon { color: var(--evenue-brand); margin-right: 0.55em; }
.button.block { display: flex; width: 100%; justify-content: center; }

.rating { color: var(--evenue-secondary); font-size: 0.75em; vertical-align: 0.15em; letter-spacing: 0.1em; }

/* Brand CTA band. It closes the page and hands over to the footer: the two
   touch, so the foot of the site reads as one block instead of a colored slab
   adrift between two stretches of white. The copy keeps the left edge of every
   section above it; the action sits opposite, where the eye ends up. */
.cta-band {
    background: var(--evenue-brand);
    color: var(--evenue-button-text);
    padding: 64px 0;
    /* No margin: the section above already ends in its own padding, and a
       second gap left the band floating in white. */
    margin-top: 0;
}
.cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}
.cta-copy { max-width: 46rem; }
.cta-band h2 { color: inherit; margin-bottom: 0.35em; }
.cta-band p { opacity: 0.9; margin: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .button { background: var(--evenue-surface-bg); color: var(--evenue-brand); border-color: transparent; }
.cta-band .button:hover { background: var(--evenue-page-bg); color: var(--evenue-brand); }
/* A second action on the band: the same shape without the fill, so the two
   do not read as one wide white block. */
.cta-band .button.ghost { background: transparent; color: var(--evenue-button-text); border-color: rgba(255, 255, 255, 0.6); }
.cta-band .button.ghost:hover { background: rgba(255, 255, 255, 0.14); color: var(--evenue-button-text); border-color: #fff; }
/* A band that nothing follows would meet the dark footer, dark on dark: it
   takes the light surface instead and the footer closes on it. */
.cta-band:last-child { background: var(--evenue-surface-bg); color: var(--evenue-heading-text); border-top: var(--evenue-border); }
.cta-band:last-child p { color: var(--evenue-body-text); opacity: 1; }
.cta-band:last-child .button { background: var(--evenue-button-bg); color: var(--evenue-button-text); border-color: var(--evenue-button-border-color); }
.cta-band:last-child .button:hover { background: var(--evenue-button-bg-hover); color: var(--evenue-button-text-hover); }
.cta-band:last-child .button.ghost { background: transparent; color: var(--evenue-brand); border-color: var(--evenue-brand); }
.cta-band:last-child .button.ghost:hover { background: var(--evenue-page-bg); color: var(--evenue-brand); border-color: var(--evenue-brand); }
.site-main:has(.cta-band:last-child) + .site-footer { margin-top: 0; }
@media (max-width: 640px) {
    .cta-band { padding: 48px 0; }
    .cta-inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}

/* ---------- icons ---------- */

/* Drawn at the size and color of the text beside them, never larger than the
   line they sit on. Every icon here has a label next to it, so they carry no
   meaning of their own — they give a run of facts something to scan by. */
.icon {
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    vertical-align: -0.17em;
    stroke-width: 1.7;
}
.card-meta .icon, .facts-row .icon, .detail-item .icon, .place-block > .icon,
.fact-box p .icon, .view-toggle .icon { margin-right: 0.45em; }
.more-link .icon, .button .icon, .hero-link .icon { margin-left: 0.45em; margin-right: 0; }
.more-link:hover .icon, .button:hover .icon { transform: translateX(3px); }
.more-link .icon, .button .icon { transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1); }
.place-block > .icon { color: var(--evenue-brand); width: 1.4em; height: 1.4em; }

/* The badge shows only the short mark; its full label stays readable for
   screen readers. */
.ai-label__sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- AI-generated image badge ---------- */

/* An image the plugin flags as AI-generated (contract 2.11.0) carries a badge
   on the image itself: the sparkle and the short label on a solid chip, heading
   ink with page-colored text (the footer's pairing), so it keeps its contrast
   over any photograph. The image's wrapper positions it: bottom right, so it
   reads as part of the picture and not of the card text below it. */
.ai-label--badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: calc(100% - 24px);
    padding: 2px 7px 2px 6px;
    border-radius: 999px;
    background: var(--evenue-heading-text);
    color: var(--evenue-page-bg);
    font-family: var(--evenue-body-font);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.04em;
}
.ai-label--badge[hidden] { display: none; }
.ai-label--badge .icon { width: 10px; height: 10px; }

/* ---------- cards ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 24px;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--evenue-surface-bg);
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    box-shadow: var(--evenue-card-shadow);
    overflow: hidden;
    color: inherit;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms ease;
}
.card:hover {
    text-decoration: none;
    transform: translateY(-8px);
    box-shadow: var(--evenue-modal-shadow);
}

.card-image-wrap { position: relative; overflow: hidden; }
.card-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 0;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.card:hover .card-image { transform: scale(1.08); }
/* A room card's image has no wrapper: it is the card's first band, 3:2. A
   percentage margin resolves against the card's width, which puts the badge
   on that band's bottom-right corner instead of under the text. */
.unit-card > .ai-label--badge { top: 0; bottom: auto; margin-top: calc(100% * 2 / 3 - 12px); transform: translateY(-100%); }

.card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-meta {
    display: flex;
    align-items: center;
    color: var(--evenue-brand);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.card-title {
    display: block;
    margin: 0;
    font-size: 1.25rem;
    font-family: var(--evenue-heading-font);
    letter-spacing: var(--evenue-heading-letter-spacing);
    color: var(--evenue-heading-text);
    font-weight: 700;
}
.card:hover .card-title { color: var(--evenue-brand); }
.card-tags { display: block; color: var(--evenue-muted-text); font-size: 0.85rem; }
.card-excerpt { display: block; color: var(--evenue-body-text); font-size: 0.95rem; }
.card-excerpt p { margin: 0; }

/* List view (toggled on archives; preference kept in localStorage). */
.card-grid.list-view { grid-template-columns: 1fr; gap: 1rem; }
.card-grid.list-view .card { flex-direction: row; align-items: stretch; }
.card-grid.list-view .card:hover { transform: translateY(-2px); }
.card-grid.list-view .card-image-wrap { flex: 0 0 200px; }
.card-grid.list-view .card-image { height: 100%; aspect-ratio: auto; min-height: 130px; }
.card-grid.list-view .card-body { padding: 14px 18px; }
@media (max-width: 576px) {
    .card-grid.list-view .card-image-wrap { flex-basis: 110px; }
    .card-grid.list-view .card-title { font-size: 1rem; }
    .card-grid.list-view .card-excerpt { display: none; }
}

.view-toggle {
    display: inline-flex;
    background: var(--evenue-page-bg);
    border: var(--evenue-border);
    border-radius: var(--evenue-button-radius);
    overflow: hidden;
}
.view-toggle button {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 7px 12px;
    cursor: pointer;
    color: var(--evenue-muted-text);
    font-size: 0.95rem;
    line-height: 1;
}
.view-toggle button.active { background: var(--evenue-brand); color: var(--evenue-button-text); }

.results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
}
.results-count { color: var(--evenue-muted-text); font-size: 0.95rem; }
.results-count strong { color: var(--evenue-heading-text); }

/* Pager — the results bar's voice, mirrored under the grid. Steps are links
   with a tappable height; the one that cannot go further is muted. */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    padding-top: 16px;
    border-top: var(--evenue-divider-h-weight) solid var(--evenue-divider-h-color);
    font-size: 0.95rem;
}
.pager__step { display: inline-block; padding: 10px 0; font-weight: 600; }
.pager__step[aria-hidden] { color: var(--evenue-muted-text); opacity: 0.5; font-weight: 400; }
.pager__position { color: var(--evenue-muted-text); }

/* ---------- property tiles (front page) ---------- */

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 24px;
}
.tile {
    position: relative;
    display: block;
    height: 280px;
    border-radius: var(--evenue-container-radius);
    overflow: hidden;
    box-shadow: var(--evenue-card-shadow);
    background: var(--evenue-heading-text);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms ease;
}
.tile:hover { transform: translateY(-8px); box-shadow: var(--evenue-modal-shadow); text-decoration: none; }
.tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); }
.tile:hover img { transform: scale(1.08); }
.tile-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 20px;
    /* Structural legibility gradient over arbitrary imagery. */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0) 60%);
    color: #fff;
}
.tile-overlay h3 { color: inherit; margin: 0; }
.tile-overlay .tile-sub { font-size: 0.88rem; opacity: 0.85; }
.tile-overlay .rating { color: #fff; }
/* The house's name holds the bottom left of the tile; the badge takes the right. */
.tile > .ai-label--badge { left: auto; right: 20px; bottom: 20px; }

/* Card rail: three across on the desktop, the rest one swipe away. The
   track is a scroller with snap points, so a keyboard, a trackpad and the
   two arrows all move it the same way. Its padding keeps the hover lift and
   the shadow inside the scroller instead of clipping them. */
.slider { position: relative; margin-top: 24px; }
.slider__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 2 * 2rem) / 3);
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 8px 0 24px;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track > * { scroll-snap-align: start; }
.slider__controls { display: flex; justify-content: flex-end; gap: 10px; }
.slider__arrow {
    width: 44px;
    height: 44px;
    border: var(--evenue-border);
    border-radius: 50%;
    background: var(--evenue-surface-bg);
    color: var(--evenue-heading-text);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.slider__arrow:hover:not(:disabled) { color: var(--evenue-brand); border-color: var(--evenue-brand); }
.slider__arrow:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 1024px) { .slider__track { grid-auto-columns: calc((100% - 1.5rem) / 2); gap: 1.5rem; } }
@media (max-width: 768px) { .slider__track { grid-auto-columns: 82%; gap: 1rem; } }

/* ---------- filter panel ---------- */

.filter-panel {
    background: var(--evenue-surface-bg);
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    box-shadow: var(--evenue-card-shadow);
    padding: 28px;
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.filter-group-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--evenue-heading-text);
    display: flex;
    align-items: center;
    gap: 12px;
}
.filter-group-title::after {
    content: "";
    flex: 1;
    height: var(--evenue-divider-h-weight);
    background: var(--evenue-divider-h-color);
}

/* Chip rows stay on one line and are dragged — a wrapped block of twelve
   categories reads as a paragraph of pills, not as a control. The padding
   keeps the hover lift and the shadow inside the scroller. */
/* The programme's categories on the front page: entrances into the archive,
   already narrowed — the legacy landing page filtered here and the eye still
   looks for it. */
.home-chips { margin: 20px 0 4px; }

.filter-chips {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    cursor: grab;
    padding: 4px 0 10px;
}
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chips.dragging { cursor: grabbing; scroll-behavior: auto; }
.filter-chips.dragging a, .filter-chips.dragging button { pointer-events: none; }
/* Dragging a row must not start a text selection under the pointer. */
.filter-chips { user-select: none; -webkit-user-select: none; }
.chip {
    display: inline-block;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 7px 16px;
    border: var(--evenue-border);
    border-radius: 999px;
    background: var(--evenue-page-bg);
    color: var(--evenue-heading-text);
    font-size: 0.9rem;
    transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.chip:hover {
    text-decoration: none;
    border-color: var(--evenue-brand);
    color: var(--evenue-brand);
    transform: translateY(-2px);
    box-shadow: var(--evenue-card-shadow);
}
.chip.active { background: var(--evenue-brand); border-color: var(--evenue-brand); color: var(--evenue-button-text); }

.filter-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filter-form select {
    max-width: 100%;
    min-width: 0;
    padding: 9px 12px;
    border: var(--evenue-border);
    border-radius: var(--evenue-button-radius);
    background: var(--evenue-page-bg);
    color: var(--evenue-heading-text);
    font-family: inherit;
    font-size: 0.95rem;
}
.filter-form input {
    padding: 9px 12px;
    border: var(--evenue-border);
    border-radius: var(--evenue-button-radius);
    background: var(--evenue-page-bg);
    color: var(--evenue-body-text);
    font: inherit;
}
.filter-form input[type="search"] { min-width: 200px; }
.filter-form .button { padding: 9px 18px; }
.reset-link { color: var(--evenue-muted-text); font-size: 0.9rem; }

.filter-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--evenue-surface-bg);
    border: var(--evenue-border);
    color: var(--evenue-brand);
    font-size: 0.85rem;
    font-weight: 600;
}
.filter-tag a { color: var(--evenue-muted-text); font-weight: 400; }

/* ---------- amenities ---------- */

.amenity-grid {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px 28px;
}

.facts-row li { display: flex; align-items: center; }
.facts-row .icon { color: var(--evenue-brand); }
.facts-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding: 14px 0;
    margin: 0 0 20px;
    border-top: var(--evenue-divider-h-weight) solid var(--evenue-divider-h-color);
    border-bottom: var(--evenue-divider-h-weight) solid var(--evenue-divider-h-color);
    color: var(--evenue-heading-text);
    font-weight: 500;
}
.amenity { padding: 10px 0; border-bottom: var(--evenue-divider-h-weight) solid var(--evenue-divider-h-color); }
.amenity-name { display: block; font-weight: 600; color: var(--evenue-heading-text); }
a.amenity-name { color: var(--evenue-link); }
.amenity-comment { display: block; color: var(--evenue-muted-text); font-size: 0.88rem; }

/* ---------- single: shared ---------- */

/* `.wrap.single`, never a bare `.single`: WordPress puts `single` on <body>
   of every detail page, and a bare selector padded the whole document —
   40px above the sticky header, which only reached the top once you had
   scrolled past it. This class belongs to the page containers of this theme. */
.wrap.single { padding-top: 40px; }
.single-head { margin-bottom: 20px; }
.single-meta {
    color: var(--evenue-brand);
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 8px;
}
.single-image { width: 100%; max-height: 460px; object-fit: cover; }
/* The plate's own box: it keeps the spacing and holds the AI badge on the image. */
.single-image-wrap { position: relative; margin-bottom: 28px; }

.prose { max-width: 48rem; }
/* A text column with nothing beside it sat hard against the left edge of a
   1200px page, half the width empty next to it. When the prose is the only
   column on the page, it takes the middle. Where it has a companion — the
   room's booking card, the event's sidebar — it stays on the left, because
   there the empty side is not empty. */
.wrap.single > .prose, .single > .prose { margin-inline: auto; }
.prose a { text-decoration: underline; }
.prose blockquote { border-left: var(--evenue-divider-v-weight) solid var(--evenue-divider-v-color); margin: 1em 0; padding-left: 1em; color: var(--evenue-muted-text); }

.place-block {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 20px 0;
    padding: 14px 18px;
    background: var(--evenue-surface-bg);
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
}
.place-block address { font-style: normal; }
.maps-link { font-weight: 600; white-space: nowrap; }

.assoc-link { margin-top: 20px; color: var(--evenue-muted-text); }

/* ---------- single: event ---------- */

/* Full-bleed hero, content pinned to the bottom edge. */
.event-hero, .venue-hero {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    background-color: var(--evenue-heading-text);
}
.event-hero::before, .venue-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.72));
}
.event-hero-inner, .venue-hero-inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px 48px;
    color: #fff;
}
.event-hero-badge, .venue-hero-badge {
    display: inline-block;
    background: var(--evenue-secondary);
    color: var(--evenue-button-text);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 14px;
}
.event-hero h1, .venue-hero h1 { color: inherit; margin-bottom: 0.3em; }
.event-hero-meta, .venue-hero-meta { display: flex; gap: 24px; flex-wrap: wrap; font-size: 0.95rem; opacity: 0.92; }
.event-hero > .ai-label--badge, .venue-hero > .ai-label--badge { left: auto; right: 16px; bottom: 16px; }

.event-layout, .venue-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2.5rem;
    align-items: start;
    padding-top: 40px;
}
@media (max-width: 992px) { .event-layout, .venue-layout { grid-template-columns: 1fr; } }

.event-sidebar, .venue-sidebar { position: sticky; top: calc(var(--stack-h) + 16px); display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 992px) { .event-sidebar, .venue-sidebar { position: static; } }

.highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.highlight-card {
    background: var(--evenue-surface-bg);
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    padding: 16px 18px;
}
.highlight-card .eyebrow { margin-bottom: 4px; }
.highlight-card strong { color: var(--evenue-heading-text); }

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-top: 28px;
}
.detail-item {
    padding: 14px 0;
    border-top: var(--evenue-divider-h-weight) solid var(--evenue-divider-h-color);
}
.detail-item .eyebrow { margin-bottom: 2px; }
.detail-item a { text-decoration: underline; text-underline-offset: 0.15em; } /* WCAG 1.4.1: link in a text block needs more than color */

/* Venue split: text beside image. */
.venue-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    margin-top: 24px;
}
@media (max-width: 768px) { .venue-split { grid-template-columns: 1fr; } }
/* The image's own box, centered in the row as the image was, so the AI badge
   sits on the image rather than at the foot of a taller text column. */
.venue-split-media { position: relative; }

/* Event gallery: 4 columns, first image spans 2×2 (double class outranks
   the shared .gallery-grid rules below). */
.gallery-grid.event-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 24px 0;
}
.gallery-grid.event-gallery img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; }
.gallery-grid.event-gallery > :first-child { grid-column: span 2; grid-row: span 2; }
.gallery-grid.event-gallery > :first-child img { aspect-ratio: auto; }
@media (max-width: 576px) {
    .gallery-grid.event-gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid.event-gallery > :first-child { grid-column: span 2; grid-row: auto; }
    .gallery-grid.event-gallery > :first-child img { aspect-ratio: 2 / 1; }
}

/* Related events: horizontal scroll row. */
.card-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px;
    gap: 20px;
    overflow-x: auto;
    padding: 8px 4px 16px;
    scroll-snap-type: x proximity;
    margin-top: 24px;
}
.card-row .card { scroll-snap-align: start; }

/* ---------- single: property ---------- */

.property-topbar { padding-top: 40px; margin-bottom: 20px; }

/* The section links are the page's own navigation, so they get the page's
   full width: a bar of equal-width tabs under the title, hairline above and
   below, sticking under the site header while the page moves. The tab of the
   section you are reading carries the brand underline (marked from the
   document by theme.js, so it cannot go stale with the markup). */
.property-nav {
    position: sticky;
    top: var(--stack-h);
    z-index: 40;
    background: var(--evenue-page-bg);
    border-top: var(--evenue-divider-h-weight) solid var(--evenue-divider-h-color);
    border-bottom: var(--evenue-divider-h-weight) solid var(--evenue-divider-h-color);
    margin-bottom: 32px;
}
.quicklinks {
    display: flex;
    gap: 0;
    font-size: 0.95rem;
    font-weight: 600;
    overflow-x: auto;
    scrollbar-width: none;
}
.quicklinks::-webkit-scrollbar { display: none; }
.quicklinks a {
    flex: 1 1 0;
    min-width: max-content;
    text-align: center;
    padding: 17px 14px;
    white-space: nowrap;
    color: var(--evenue-body-text);
    border-bottom: 2px solid transparent;
    margin-bottom: calc(-1 * var(--evenue-divider-h-weight));
    transition: color 150ms ease, border-color 150ms ease;
}
.quicklinks a:hover { color: var(--evenue-brand); text-decoration: none; }
.quicklinks a.active { color: var(--evenue-brand); border-bottom-color: var(--evenue-brand); }
@media (max-width: 760px) {
    /* Too many sections for equal columns: the bar scrolls instead of cramming. */
    .quicklinks a { flex: 0 0 auto; padding-inline: 18px; text-align: left; }
}

/* The body of the page starts under the bar, so it no longer carries the
   top padding that opened the document. */
.property-body { padding-top: 0; }

/* Gallery header: big image + 2×2 side tiles. */
.property-gallery {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 220px);
    gap: 12px;
    margin-bottom: 32px;
}
.property-gallery a { display: block; overflow: hidden; border-radius: var(--evenue-image-radius); position: relative; }
.property-gallery a:first-child { grid-row: span 2; }
.property-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 400ms ease; }
.property-gallery a:hover img { transform: scale(1.05); }
.property-gallery .more-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}
@media (max-width: 768px) {
    .property-gallery { grid-template-columns: 1fr; grid-template-rows: 260px; }
    .property-gallery a:not(:first-child) { display: none; }
    .property-gallery a:first-child { grid-row: auto; }
}

.property-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 992px) { .property-layout { grid-template-columns: 1fr; } }

.property-panel {
    background: var(--evenue-surface-bg);
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    padding: 2rem;
}
.property-panel section + section {
    margin-top: 28px;
    padding-top: 28px;
    border-top: var(--evenue-divider-h-weight) solid var(--evenue-divider-h-color);
}

.facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.property-sidebar { display: flex; flex-direction: column; gap: 20px; position: sticky; top: calc(var(--stack-h) + 16px); }
@media (max-width: 992px) { .property-sidebar { position: static; } }

/* ---------- destination page (magazine composition) ---------- */

.dest-hero {
    position: relative;
    border-radius: var(--evenue-container-radius);
    overflow: hidden;
    padding: clamp(48px, 8vw, 88px) clamp(24px, 5vw, 56px);
    margin-top: 32px;
    color: #fff;
    background-size: cover;
    background-position: center;
    background-color: var(--evenue-heading-text);
}
.dest-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.68));
}
.dest-hero.plain { color: var(--evenue-heading-text); background: var(--evenue-surface-bg); border: var(--evenue-border); }
.dest-hero.plain::before { display: none; }
.dest-hero-inner { position: relative; max-width: 720px; }
.dest-hero h1 { color: inherit; font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: 0.3em; }
.dest-hero .eyebrow { color: inherit; opacity: 0.85; }
.dest-hero.plain .eyebrow { color: var(--evenue-brand); opacity: 1; }
.dest-hero-lead { font-size: 1.1rem; opacity: 0.92; max-width: 40rem; }
.dest-hero-stats { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; font-size: 0.9rem; opacity: 0.85; }
.dest-hero > .ai-label--badge { left: auto; right: 16px; bottom: 16px; }

/* Spotlight: featured card split. */
.spotlight {
    position: relative;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 0;
    margin-top: 32px;
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    overflow: hidden;
    background: var(--evenue-surface-bg);
    box-shadow: var(--evenue-card-shadow);
}
.spotlight img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; border-radius: 0; }
/* The badge takes the image's grid cell (first row, first column in both
   layouts) as its box, so it lands on the image's bottom-right corner. */
.spotlight > .ai-label--badge { grid-area: 1 / 1 / 2 / 2; }
.spotlight-body { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.spotlight-body h2, .spotlight-body h3 { margin: 0; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); }
.spotlight-body p { margin: 6px 0 0; }
.spotlight-body .button { align-self: flex-start; }
/* A house with no picture keeps the panel, not an empty half. */
.spotlight--plain { grid-template-columns: 1fr; }
@media (max-width: 768px) { .spotlight { grid-template-columns: 1fr; } }

/* Sticky filter bar over the grid. */
.dest-filterbar {
    position: sticky;
    top: calc(var(--stack-h) + 12px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 32px 0 8px;
    padding: 12px 16px;
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    background: var(--evenue-surface-bg);
    box-shadow: var(--evenue-card-shadow);
}
.dest-filterbar .filter-chips { flex: 1 1 320px; min-width: 0; }
.dest-filterbar .chip { cursor: pointer; font-family: inherit; }
.dest-search {
    padding: 8px 14px;
    border: var(--evenue-border);
    border-radius: 999px;
    background: var(--evenue-page-bg);
    color: var(--evenue-body-text);
    font: inherit;
    min-width: 170px;
}
.dest-count { color: var(--evenue-muted-text); font-size: 0.85rem; white-space: nowrap; }

.dest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    margin-top: 20px;
}
/* The filter bar hides cards in place; they are in a slider track now, so
   the rule cannot name the grid they used to sit in. */
.card.is-hidden { display: none; }
.card.is-highlighted { outline: 2px solid var(--evenue-brand); outline-offset: 2px; }

/* Map with a floating detail card. */
.dest-map-wrap { position: relative; margin-top: 40px; }
.dest-map-card {
    position: absolute;
    right: 16px;
    bottom: 16px;
    z-index: 500;
    width: min(300px, calc(100% - 32px));
    background: var(--evenue-surface-bg);
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    box-shadow: var(--evenue-modal-shadow);
    overflow: hidden;
    display: none;
}
.dest-map-card.open { display: block; }
.dest-map-card img { width: 100%; height: 130px; object-fit: cover; border-radius: 0; }
.dest-map-card > .ai-label--badge { top: calc(130px - 12px); bottom: auto; transform: translateY(-100%); } /* on the 130px image band */
.dest-map-card .card-body { padding: 14px 16px; }
.dest-map-card .close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--evenue-button-bg);
    color: var(--evenue-button-text);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    line-height: 1;
}

/* Teardrop map pins (styled via JS-injected divIcons). */
.poi-pin {
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--evenue-brand);
    border: 2px solid var(--evenue-surface-bg);
    box-shadow: var(--evenue-card-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
}
.poi-pin span { transform: rotate(45deg); color: var(--evenue-button-text); font-size: 0.75rem; font-weight: 700; }
.poi-pin.venue { background: var(--evenue-heading-text); }
.poi-pin.is-active { outline: 3px solid var(--evenue-secondary); }

/* ---------- gallery + map + lightbox (shared) ---------- */

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
    margin: 24px 0;
}
.gallery-grid img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.gallery-grid__item { position: relative; padding: 0; border: 0; background: none; display: block; cursor: zoom-in; } /* focus ring stays the browser default */

.map-embed {
    width: 100%;
    margin: 20px 0;
    border: var(--evenue-border);
    border-radius: var(--evenue-container-radius);
    overflow: hidden;
    background: var(--evenue-surface-bg);
    z-index: 0;
}
.map-embed a { color: var(--evenue-link); }

.starter-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    align-items: center;
    justify-content: center;
}
.starter-lightbox.open { display: flex; }
.starter-lightbox img {
    max-width: 88vw;
    max-height: 86vh;
    object-fit: contain;
    border-radius: var(--evenue-image-radius);
    box-shadow: var(--evenue-modal-shadow);
}
.starter-lightbox button {
    position: absolute;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.4rem;
    cursor: pointer;
    padding: 12px 20px;
    line-height: 1;
}
.lb-close { top: 12px; right: 16px; }
.lb-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.starter-lightbox .lb-ai { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); text-align: center; margin: 0; padding: 4px 12px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.75rem; letter-spacing: 0.06em; }

/* ---------- 404 ---------- */

.error-404 { max-width: 600px; margin: 100px auto; text-align: center; padding: 0 20px; }
.error-404 h1 { font-size: 4.5rem; margin-bottom: 0.2em; }
.error-404 p { color: var(--evenue-muted-text); font-size: 1.1rem; margin-bottom: 2em; }