/* Directory verticals (2026-10-07): /brothels, /clubs, /events — the public
 * landing, city, venue and event pages. Same brand tokens as everything else;
 * calm, editorial, photo-led. Classes: .dir-*  */

.dir-page { padding: calc(var(--nav-height) + var(--space-xl)) 0 var(--space-3xl); }
.dir-page .container { display: grid; gap: var(--space-xl); }

/* ---- Hero ---- */
.dir-hero { display: grid; gap: var(--space-sm); max-width: 62rem; }
.dir-hero h1 {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem);
    line-height: 1.02;
    letter-spacing: -.02em;
}
.dir-hero-lead { margin: 0; max-width: 54ch; color: var(--color-text-dim); font-size: var(--fs-md); line-height: 1.6; }
.dir-hero-meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; color: var(--color-text-faint); font-size: var(--fs-sm); }

/* ---- City chips ---- */
.dir-cities { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.dir-chip {
    display: inline-flex;
    align-items: baseline;
    gap: .45em;
    padding: .5rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface-1);
    color: var(--color-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.dir-chip strong { font-family: var(--font-serif); }
.dir-chip:hover { border-color: var(--color-accent); transform: translateY(-1px); }
.dir-chip.is-active { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.dir-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- Venue cards ---- */
.dir-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: var(--space-md);
}
.dir-card {
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-1);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.dir-card:hover { transform: translateY(-3px); border-color: var(--color-border-strong); box-shadow: var(--shadow-md); }
.dir-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.dir-card-media { position: relative; aspect-ratio: 16/10; background: var(--color-surface-2); }
.dir-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-card-media-empty {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(90% 120% at 85% 0%, var(--color-accent-soft), transparent 60%),
        var(--color-surface-2);
    color: var(--color-text-faint);
    font-family: var(--font-serif);
    font-size: 2.2rem;
}
.dir-card-flag {
    position: absolute;
    top: .7rem;
    left: .7rem;
    padding: .25rem .65rem;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--color-bg) 65%, transparent);
    backdrop-filter: blur(6px);
    color: var(--color-text);
    font-size: var(--fs-xs);
    font-weight: 700;
}
.dir-card-body { display: grid; gap: .3rem; align-content: start; padding: var(--space-sm) var(--space-md) var(--space-md); }
.dir-card-body h3 { margin: 0; font-family: var(--font-serif); font-size: var(--fs-lg); line-height: 1.15; }
.dir-card-city { color: var(--color-accent); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.dir-card-tagline { margin: 0; color: var(--color-text-dim); font-size: var(--fs-sm); line-height: 1.5; }
.dir-card-meta { margin-top: .35rem; color: var(--color-text-faint); font-size: var(--fs-xs); }

/* ---- Event cards: date block + body ---- */
.dir-event-list { display: grid; gap: var(--space-sm); }
.dir-event {
    display: grid;
    grid-template-columns: 5.2rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-1);
    color: inherit;
    text-decoration: none;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.dir-event:hover { transform: translateY(-2px); border-color: var(--color-border-strong); }
.dir-event:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.dir-event-date {
    display: grid;
    justify-items: center;
    gap: .05rem;
    padding: .55rem .4rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    text-align: center;
}
.dir-event-date strong { font-family: var(--font-serif); font-size: 1.5rem; line-height: 1; }
.dir-event-date span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-faint); }
.dir-event-main { display: grid; gap: .15rem; min-width: 0; }
.dir-event-main h3 { margin: 0; font-family: var(--font-serif); font-size: var(--fs-md); line-height: 1.2; }
.dir-event-sub { color: var(--color-text-dim); font-size: var(--fs-sm); overflow-wrap: break-word; }
.dir-event-arrow { color: var(--color-text-faint); font-size: 1.1rem; }
.dir-event.is-past { opacity: .9; } /* v3.61: dimmed but still 4.5:1+ */

/* ---- SEO copy block ---- */
.dir-seo {
    max-width: 64rem;
    padding: var(--space-lg) var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-surface-1) 70%, transparent);
}
.dir-seo h2 { margin: 0 0 var(--space-xs); font-family: var(--font-serif); font-size: var(--fs-lg); }
.dir-seo p { margin: 0 0 var(--space-sm); color: var(--color-text-dim); line-height: 1.7; max-width: 70ch; }
.dir-seo p:last-child { margin-bottom: 0; }

/* ---- Cross links + empty state ---- */
.dir-cross { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: center; color: var(--color-text-faint); font-size: var(--fs-sm); }
.dir-cross a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
.dir-cross a:hover { text-decoration: underline; }
.dir-empty {
    display: grid;
    justify-items: start;
    gap: var(--space-sm);
    max-width: 44rem;
    padding: clamp(1.5rem, 4vw, 2.75rem);
    border: 1.5px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: radial-gradient(120% 140% at 100% 0%, var(--color-accent-soft), transparent 60%);
}
.dir-empty h2 { margin: 0; font-family: var(--font-serif); font-size: var(--fs-xl); line-height: 1.1; }
.dir-empty p { margin: 0; color: var(--color-text-dim); line-height: 1.6; }

/* ---- Detail pages ---- */
.dir-detail { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .dir-detail { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 1fr); } }
.dir-detail-media { border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--color-border); }
.dir-detail-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.dir-detail-body { display: grid; gap: var(--space-md); }
.dir-detail-body .prose p { margin: 0 0 var(--space-sm); color: var(--color-text-dim); line-height: 1.7; max-width: 70ch; }
.dir-facts {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-1);
}
.dir-facts dt { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.dir-facts dd { margin: .15rem 0 0; overflow-wrap: break-word; }
.dir-facts dd a:not(.btn) { color: var(--color-accent); }
.dir-back {
    justify-self: start;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-text-faint);
    text-decoration: none;
}
.dir-back:hover { color: var(--color-accent); }
.dir-ended {
    display: inline-flex;
    padding: .3rem .8rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-dim);
    font-size: var(--fs-xs);
    font-weight: 700;
}

.dir-section-title { display: flex; align-items: baseline; gap: var(--space-sm); margin: 0; font-family: var(--font-serif); font-size: var(--fs-xl); line-height: 1.1; }
.dir-section-title small { font-family: var(--font-sans); color: var(--color-text-faint); font-size: var(--fs-sm); font-weight: 500; }

@media (max-width: 560px) {
    .dir-event { grid-template-columns: 4.2rem minmax(0, 1fr); }
    .dir-event-arrow { display: none; }
}

/* ---------------- v3.39: hub stats strip + map section ---------------- */
.dir-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-xl);
    margin: var(--space-md) 0 var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-1);
    color: var(--color-text-dim);
    font-size: var(--fs-sm);
}
.dir-stats strong {
    color: var(--color-text);
    font-size: 1.15em;
    margin-right: 0.35rem;
}
.dir-map-section { margin: var(--space-xl) 0; }
.dir-map-section .directory-map { margin-top: var(--space-sm); }

/* v3.40: venue social links row */
.dir-social { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; }
.dir-social a { white-space: nowrap; }

/* ================================================================ *
 * v3.46 Venue pages v2 — the playful layer: cover hero + avatar
 * identity, sticker badges, photo gallery, the lineup, real street
 * maps. Tones match the map's vertical palette.
 * ================================================================ */
.dir-cover { position: relative; display: grid; gap: 0; }
.dir-cover-media {
    position: relative;
    aspect-ratio: 21 / 8;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
}
.dir-cover-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-cover-media--brothel { background: radial-gradient(120% 160% at 15% 0%, rgba(255, 77, 141, .32), transparent 60%), radial-gradient(130% 140% at 90% 100%, rgba(194, 24, 107, .25), var(--color-surface-2) 70%); }
.dir-cover-media--club { background: radial-gradient(120% 160% at 15% 0%, rgba(143, 107, 255, .32), transparent 60%), radial-gradient(130% 140% at 90% 100%, rgba(90, 60, 240, .25), var(--color-surface-2) 70%); }
.dir-cover-scrim { position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--color-bg) 88%, transparent), transparent 55%); pointer-events: none; }
.dir-cover-back {
    position: absolute;
    top: var(--space-sm);
    left: var(--space-sm);
    padding: .35rem .85rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg) 72%, transparent);
    backdrop-filter: blur(8px);
}

.dir-identity {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    padding: 0 var(--space-md);
    margin-top: -3.4rem;
    position: relative;
    z-index: 1;
}
.dir-avatar {
    width: 8rem;
    height: 8rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-bg);
    background: var(--color-surface-1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 55%, transparent), var(--shadow-lg);
}
.dir-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dir-avatar span { font-family: var(--font-serif); font-size: 3.4rem; color: var(--color-accent); }
.dir-avatar--brothel { box-shadow: 0 0 0 3px rgba(255, 77, 141, .65), var(--shadow-lg); }
.dir-avatar--brothel span { color: #ff4d8d; }
.dir-avatar--club { box-shadow: 0 0 0 3px rgba(143, 107, 255, .65), var(--shadow-lg); }
.dir-avatar--club span { color: #8f6bff; }

.dir-identity-main { flex: 1 1 18rem; display: grid; gap: .35rem; padding-bottom: .35rem; }
.dir-identity-main h1 { margin: 0; font-family: var(--font-serif); font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.02em; }
.dir-identity-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem .7rem; }
.dir-identity-city { font-weight: 700; color: var(--color-text-dim); }
.dir-identity-city:hover { color: var(--color-accent); }
.dir-cover-actions { display: flex; gap: .5rem; align-items: center; padding-bottom: .5rem; }

/* Sticker badges — slightly rotated, loud, unmistakably playful. */
.dir-sticker {
    display: inline-block;
    padding: .28rem .7rem;
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    transform: rotate(-2.5deg);
    box-shadow: var(--shadow-sm);
}
.dir-sticker-featured {
    transform: rotate(2deg);
    background: linear-gradient(135deg, var(--color-pop-orange), var(--color-pop-pink));
    color: #fff;
    border: 2px solid color-mix(in srgb, var(--color-bg) 65%, transparent);
}
.dir-sticker-open.is-open {
    background: rgba(39, 194, 129, .18);
    color: #27c281;
    border: 2px solid rgba(39, 194, 129, .5);
    animation: dir-sticker-pulse 2.6s ease-in-out infinite;
}
.dir-sticker-open.is-closed { background: color-mix(in srgb, var(--color-text-dim) 14%, transparent); color: var(--color-text-dim); border: 2px solid transparent; }
@keyframes dir-sticker-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(39, 194, 129, .35); }
    50% { box-shadow: 0 0 0 7px rgba(39, 194, 129, 0); }
}
.dir-kind-chip {
    display: inline-block;
    padding: .28rem .7rem;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #fff;
}
.dir-kind-chip--brothel { background: linear-gradient(135deg, #ff4d8d, #c2186b); }
.dir-kind-chip--club { background: linear-gradient(135deg, #8f6bff, #5a3cf0); }
.dir-kind-chip--event { background: linear-gradient(135deg, #ffb340, #f07f1f); color: #2b1600; }

/* Gallery — masonry columns like the profile gallery, with captions. */
.dir-gallery { columns: 3 14rem; column-gap: .85rem; }
.dir-gallery-item {
    margin: 0 0 .85rem;
    break-inside: avoid;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface-1);
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.dir-gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.dir-gallery-item img { width: 100%; display: block; }
.dir-gallery-item figcaption { padding: .45rem .7rem; font-size: var(--fs-xs); color: var(--color-text-dim); }

.dir-lineup { margin-top: var(--space-xs); }
/* The lineup sits in the venue/event page's main column, not the full page,
   so its columns follow the room it actually has (v3.60): the shared
   .card-grid counts columns by SCREEN width and squeezed four ~150px cards
   into that column. Same card width as the browse grid. */
.card-grid.dir-lineup { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.5rem), 1fr)); gap: var(--space-md); }

/* Real street map (cached image -> tap for live tiles). */
.dir-map-full { margin: 0; }
.dir-street-map {
    position: relative;
    aspect-ratio: 1040 / 480;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
}
.dir-street-map-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.dir-street-map-img.is-theme-dark { display: block; }
:root[data-theme="light"] .dir-street-map-img.is-theme-dark { display: none; }
:root[data-theme="light"] .dir-street-map-img.is-theme-light { display: block; }
.dir-street-map-go {
    position: absolute;
    left: 50%;
    bottom: var(--space-md);
    transform: translateX(-50%);
    padding: .55rem 1.1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg) 78%, transparent);
    backdrop-filter: blur(8px);
    color: var(--color-text);
    font-weight: 700;
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.dir-street-map-go:hover { transform: translateX(-50%) translateY(-2px); border-color: var(--color-accent); }
.dir-street-map-live { position: absolute; inset: 0; }
.dir-street-map-live .leaflet-container { width: 100%; height: 100%; background: var(--color-surface-2); font: inherit; }

@media (max-width: 700px) {
    .dir-cover-media { aspect-ratio: 16 / 9; }
    .dir-identity { margin-top: -2.4rem; padding: 0 var(--space-sm); }
    .dir-avatar { width: 5.5rem; height: 5.5rem; }
    .dir-avatar span { font-size: 2.2rem; }
    .dir-gallery { columns: 2 9rem; column-gap: .6rem; }
    .dir-street-map { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
    .dir-sticker-open.is-open { animation: none; }
}

/* Event page v2: the tilted date sticker + the host-venue card. */
.dir-date-sticker {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: grid;
    justify-items: center;
    gap: 0;
    padding: .55rem .95rem .5rem;
    border-radius: var(--radius-lg);
    background: var(--color-pop-lime);
    color: #1c2403;
    transform: rotate(3deg);
    box-shadow: var(--shadow-md);
}
.dir-date-sticker strong { font-family: var(--font-serif); font-size: 1.9rem; line-height: 1; }
.dir-date-sticker span { font-size: var(--fs-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }

.dir-host-card {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-1);
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.dir-host-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-border-strong); }
.dir-host-card .dir-host-card-avatar { width: 3.5rem; height: 3.5rem; border-width: 2px; }
.dir-host-card .dir-host-card-avatar span { font-size: 1.4rem; }
.dir-host-card-main { display: grid; gap: .2rem; justify-items: start; min-width: 0; }
.dir-host-card-eyebrow { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-dim); }
.dir-host-card-main strong { font-family: var(--font-serif); font-size: var(--fs-md); }
.dir-host-card .dir-event-arrow { margin-left: auto; }
.dir-cover-media--event { background: radial-gradient(120% 160% at 15% 0%, rgba(255, 179, 64, .34), transparent 60%), radial-gradient(130% 140% at 90% 100%, rgba(240, 127, 31, .26), var(--color-surface-2) 70%); }

/* Venue cards: per-vertical tone accent + the small avatar chip. */
.dir-card--brothel { --dir-tone: #ff4d8d; }
.dir-card--club { --dir-tone: #8f6bff; }
.dir-card--brothel:hover, .dir-card--club:hover { border-color: color-mix(in srgb, var(--dir-tone) 55%, var(--color-border-strong)); }
.dir-card--brothel .dir-card-city, .dir-card--club .dir-card-city { color: var(--dir-tone); }
.dir-card-media { position: relative; }
.dir-card-avatar {
    position: absolute;
    left: .7rem;
    bottom: -.9rem;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--color-bg);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--dir-tone, var(--color-accent)) 60%, transparent);
    z-index: 1;
}
.dir-card-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-card-avatar + .dir-card-body, .dir-card--brothel .dir-card-body, .dir-card--club .dir-card-body { padding-top: var(--space-sm); }

/* The live Leaflet marker: a tone-coloured LuXeel pin, not the stock blue. */
.dir-live-pin {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pin-tone, var(--color-accent));
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--pin-tone, var(--color-accent)) 35%, transparent), 0 2px 8px rgba(0, 0, 0, .45);
}

/* ------- Community photos (v3.47): "Add your photo" on venue pages ------- */
.dir-add-photo { margin-top: var(--space-md); }
.dir-add-photo-cta { color: var(--color-text-muted); font-size: 0.95rem; }
.dir-add-photo-cta a { color: var(--color-accent); }
.dir-add-photo-box summary { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; }
.dir-add-photo-box summary::-webkit-details-marker { display: none; }
.dir-add-photo-form {
    margin-top: var(--space-sm);
    padding: var(--space-md);
    border: 2px dashed color-mix(in srgb, var(--color-accent) 45%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
    display: grid;
    gap: var(--space-sm);
    max-width: 30rem;
}
.dir-add-photo-form label { display: grid; gap: 0.3rem; font-size: 0.9rem; }
.dir-add-photo-form input[type="text"] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    padding: 0.5rem 0.7rem;
}
.dir-add-photo-form button { justify-self: start; }
.dir-add-photo-hint { color: var(--color-text-muted); font-size: 0.8rem; margin: 0; }
.dir-add-photo-notice {
    display: inline-block;
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    margin-bottom: var(--space-sm);
}
.dir-add-photo-notice.is-good { background: color-mix(in srgb, #2ecc71 16%, transparent); border: 1px solid color-mix(in srgb, #2ecc71 45%, transparent); }
.dir-add-photo-notice.is-bad { background: color-mix(in srgb, #ff5c5c 14%, transparent); border: 1px solid color-mix(in srgb, #ff5c5c 45%, transparent); }

/* v3.60 — /events?city=… (the header menu follows the visitor's area). */
.dir-city-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: var(--space-xs) 0 0; color: var(--color-text-dim); font-size: var(--fs-sm); }
.dir-city-chip { display: inline-flex; align-items: center; padding: .3rem .75rem; border: 1px solid var(--color-accent); border-radius: var(--radius-pill); color: var(--color-text); font-weight: 600; }
.dir-city-filter a { color: var(--color-accent); font-weight: 600; }

/* v3.60 — full lineup page (/…/lineup) and the venue page's "See all". */
.dir-lineup-page { padding-top: calc(var(--nav-height, 5rem) + var(--space-lg)); padding-bottom: var(--space-2xl); }
.dir-breadcrumb { margin-bottom: var(--space-md); font-size: var(--fs-sm); }
.dir-breadcrumb a { color: var(--color-text-dim); text-decoration: none; font-weight: 600; }
.dir-breadcrumb a:hover { color: var(--color-accent); }
.dir-lineup-head { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.dir-lineup-head .dir-section-title { margin: 0; }
.dir-lineup-head .dir-hero-lead { margin: .35rem 0 0; }
.dir-lineup-avatar { width: 4rem; height: 4rem; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-border-strong); }
.dir-filter-chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-lg); }
.dir-filter-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: 0 .95rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); color: var(--color-text); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.dir-filter-chip:hover { border-color: var(--color-accent); }
.dir-filter-chip.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); }
.dir-filter-chip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.dir-filter-count { color: var(--color-text-dim); font-weight: 500; }
.dir-live-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 25%, transparent); }
.dir-lineup-count { margin: 0 0 var(--space-sm); color: var(--color-text-dim); font-size: var(--fs-sm); }
.dir-lineup-full { margin-top: 0; }
.pagination-gap { display: inline-flex; align-items: center; padding: 0 .4rem; color: var(--color-text-faint); }
@media (max-width: 640px) {
    .dir-filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
    .dir-filter-chips::-webkit-scrollbar { display: none; }
    .dir-filter-chip { flex: none; }
}

/* v3.60 — the lineup as a sideways row of small cards (venue + event pages).
   Rail behaviour (swipe, drag, arrows, edge fade) comes from discover.css/js. */
.lu-rail { margin-top: var(--space-xl); }
.lu-rail .dc-rail-head { margin-bottom: var(--space-xs); }
.lu-rail .dir-section-title { margin: 0; }
.dc-rail-track.lu-track { grid-auto-columns: 10.5rem; gap: var(--space-sm); list-style: none; }
.lu-card, .lu-more-item { min-width: 0; margin: 0; scroll-snap-align: start; }
.lu-card-link { display: grid; height: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface-1); color: var(--color-text); text-decoration: none; transition: transform var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.lu-card-link:hover { border-color: var(--color-border-strong); transform: translateY(-3px); }
.lu-card-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lu-card-media { position: relative; display: block; aspect-ratio: 4 / 5; background: var(--color-surface-2); overflow: hidden; }
.lu-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--duration-base) var(--ease-out); }
.lu-card-link:hover .lu-card-media img { transform: scale(1.05); }
.lu-card-initial { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--font-serif); font-size: 2.6rem; color: var(--color-text-faint); }
.lu-card-live { position: absolute; left: .45rem; bottom: .45rem; display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border-radius: var(--radius-pill); background: rgba(10, 10, 12, .72); color: #fff; font-size: .7rem; font-weight: 700; backdrop-filter: blur(6px); }
.lu-card-live i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--color-success); }
.lu-card-body { display: grid; gap: .15rem; padding: .6rem .7rem .7rem; min-width: 0; }
/* The name shortens with "…"; the tick beside it always stays visible. */
.lu-card-name { display: flex; align-items: center; gap: .25rem; min-width: 0; font-size: var(--fs-sm); font-weight: 700; line-height: 1.25; }
.lu-card-name-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lu-card-name .lx-ticks { flex: none; margin-left: 0; }
.lu-card-meta { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--color-text-faint); font-size: var(--fs-xs); }
.lu-card-rate { color: var(--color-text-dim); font-size: var(--fs-xs); }
.lu-card-rate b { color: var(--color-accent); font-weight: 700; }
.lu-card-rate .money-approx { display: block; }
.lu-card-plan { color: var(--color-text-faint); font-size: var(--fs-xs); font-weight: 600; }
.lu-more { height: 100%; box-sizing: border-box; display: grid; place-content: center; gap: .3rem; min-height: 100%; padding: var(--space-sm); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); color: var(--color-text); text-align: center; text-decoration: none; scroll-snap-align: start; transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out); }
.lu-more:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.lu-more-count { font-family: var(--font-serif); font-size: 2rem; line-height: 1; }
.lu-more-label { color: var(--color-accent); font-size: var(--fs-sm); font-weight: 700; }
@media (max-width: 640px) {
    .dc-rail-track.lu-track { grid-auto-columns: 40%; }
}
@media (prefers-reduced-motion: reduce) {
    .lu-card-link, .lu-card-media img { transition: none; }
    .lu-card-link:hover { transform: none; }
}
/* Text starts at the top of every card, price or not; the heading takes the
   room it needs and its note wraps underneath rather than squeezing it. */
.lu-card-link { grid-template-rows: auto 1fr; }
.lu-card-body { align-content: start; }
.lu-rail .dc-rail-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.lu-rail .dir-section-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .75rem; row-gap: .15rem; }

/* v3.60c — no cover photo: a slim branded band instead of ~470px of flat
   gradient (the name, avatar and actions below carry the page). */
.dir-cover-media--plain { aspect-ratio: auto; height: clamp(8.5rem, 15vw, 12.5rem); }
.dir-cover-media--plain::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-text) 5%, transparent) 0 1px, transparent 1px 22px);
    mask-image: linear-gradient(90deg, #000, transparent 75%);
    pointer-events: none;
}
/* …and the name block sits below the slim band instead of across its edge. */
.dir-cover:has(.dir-cover-media--plain) .dir-identity { margin-top: var(--space-md); }

/* v3.60c — phone polish from the visual re-check. */
/* Venue/event pages end at the map: no doubled bottom spacing above the footer. */
.dir-page-venue, .dir-page-event { padding-bottom: 0; } /* the page frame already adds space above the footer */
@media (max-width: 480px) {
    /* "Find us", "On the map"…: the small note goes under the heading. */
    .dir-section-title { flex-wrap: wrap; row-gap: .2rem; }
    .dir-section-title small { flex-basis: 100%; }
}
@media (max-width: 700px) {
    /* The cached street image keeps its own shape on phones, so its
       required "© OpenStreetMap" credit isn't cropped off. */
    .dir-street-map { aspect-ratio: 1040 / 480; }
    .dir-street-map-go { bottom: var(--space-xs); padding: .4rem .85rem; white-space: nowrap; font-size: var(--fs-xs); }
}

/* v3.61: a venue without a cover photo gets no empty banner — just the back link. */
.dir-cover-media.dir-cover-media--plain { height:auto; aspect-ratio:auto; border:0; background:none; overflow:visible; border-radius:0; }
.dir-cover-media--plain::before, .dir-cover-media--plain .dir-cover-scrim { display:none; }
.dir-cover-media--plain .dir-cover-back { position:static; display:inline-block; }
.dir-cover:has(.dir-cover-media--plain) .dir-identity { margin-top:var(--space-sm); padding-left:0; }

/* v3.61: open-now badge on venue cards */
.dir-card-open { align-self: flex-start; margin: .4rem 0 .1rem; }
.dir-card-open[hidden] { display: none; }