/* Event-page crowd gallery — mu-plugins/coco-crowd-gallery.
   Phone: one swipeable row with a peek of the next photo.
   Desktop: a 4-wide grid. Every colour and face comes from the venue's own
   event-page tokens (--v2-* / --theme-*), so TWNTY7 is red + gold, Haus ember
   on cocoa with square corners, Cité amber on midnight. */

.coco-crowd {
    position: relative;
    padding: 36px 0 40px;
    background: var(--v2-bg, var(--theme-bg-primary, #0d0d0d));
    color: var(--v2-ink, var(--theme-text-primary, #faf7f0));
}
.coco-crowd::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 80px; height: 2px;
    transform: translateX(-50%);
    background: var(--v2-accent, var(--theme-accent, #c9a227));
    opacity: .6;
}
.coco-crowd__inner { max-width: 1280px; margin: 0 auto; }
.coco-crowd__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 0 16px;
    margin-bottom: 16px;
}
.coco-crowd__title {
    margin: 0;
    font-family: var(--v2-display, var(--theme-font-display, inherit));
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: var(--v2-title-spacing, -.01em);
    text-transform: var(--v2-title-transform, none);
    color: var(--v2-ink, var(--theme-text-primary, #faf7f0));
}
.coco-crowd__eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--v2-accent, var(--theme-accent, #c9a227));
}

/* The strip: horizontal scroll-snap on phones. */
.coco-crowd__strip {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0 16px 6px;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.coco-crowd__strip::-webkit-scrollbar { display: none; }
.coco-crowd__item {
    flex: 0 0 70%;
    max-width: 300px;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}
.coco-crowd__item::before, .coco-crowd__item::marker { content: none; }
.coco-crowd__link {
    display: block;
    position: relative;
    overflow: hidden;
    /* Fixed frame = no layout shift whatever the photo's own shape. */
    aspect-ratio: 4 / 5;
    border-radius: var(--v2-radius, 12px);
    background: var(--v2-surface, var(--theme-bg-card, #1e1e1e));
    outline-offset: 3px;
}
.coco-crowd__link:focus-visible { outline: 2px solid var(--v2-accent, var(--theme-accent, #c9a227)); }
.coco-crowd__link picture, .coco-crowd__link img {
    display: block;
    width: 100%;
    height: 100%;
}
.coco-crowd__link img {
    object-fit: cover;
    transition: transform .4s ease;
}
@media (hover: hover) {
    .coco-crowd__link:hover img { transform: scale(1.035); }
}

@media (min-width: 600px) {
    .coco-crowd__item { flex-basis: 40%; }
}
@media (min-width: 900px) {
    .coco-crowd { padding: 48px 0 52px; }
    .coco-crowd__head { justify-content: center; text-align: center; padding: 0 24px; margin-bottom: 22px; }
    .coco-crowd__strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 24px;
        overflow: visible;
    }
    .coco-crowd__item { max-width: none; }
    /* Square on desktop: two compact rows, not a wall of portraits. */
    .coco-crowd__link { aspect-ratio: 1 / 1; }
    /* 9 photos would leave one orphan on a 4-wide grid. */
    .coco-crowd__item:nth-child(9) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .coco-crowd__link img { transition: none; }
    .coco-crowd__strip { scroll-behavior: auto; }
}

/* ── Lightbox ─────────────────────────────────────────────────────── */
.coco-crowd-lb {
    width: 100vw; height: 100vh; height: 100dvh;
    max-width: none; max-height: none;
    margin: 0; padding: 0;
    border: 0;
    background: #050507;
    color: #f4efe6;
    overflow: hidden;
}
.coco-crowd-lb::backdrop { background: rgba(5, 5, 7, .7); }
.coco-crowd-lb[open] { display: flex; align-items: center; justify-content: center; }
.coco-crowd-lb__figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    touch-action: pan-y;
}
.coco-crowd-lb__img {
    display: block;
    max-width: min(100vw, 1200px);
    max-height: calc(100dvh - 120px);
    width: auto; height: auto;
    object-fit: contain;
    user-select: none;
}
.coco-crowd-lb__cap {
    font-size: 13px;
    color: rgba(244, 239, 230, .75);
    text-align: center;
    padding: 0 16px;
}
.coco-crowd-lb__btn {
    position: absolute;
    display: grid; place-items: center;
    width: 48px; height: 48px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 24px; line-height: 1;
    cursor: pointer;
}
.coco-crowd-lb__btn:focus-visible { outline: 2px solid var(--v2-accent, #c9a227); outline-offset: 2px; }
.coco-crowd-lb__close { top: max(12px, env(safe-area-inset-top)); right: 12px; }
.coco-crowd-lb__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.coco-crowd-lb__next { right: 12px; top: 50%; transform: translateY(-50%); }
.coco-crowd-lb__count {
    position: absolute;
    top: max(24px, calc(env(safe-area-inset-top) + 12px));
    left: 16px;
    font-size: 12px; letter-spacing: .12em;
    color: rgba(244, 239, 230, .7);
}
@media (max-width: 599px) {
    .coco-crowd-lb__prev, .coco-crowd-lb__next { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); transform: none; }
    .coco-crowd-lb__img { max-height: calc(100dvh - 150px); }
}

/* "More from <venue> →" — to the venue's /gallery/<venue>/ page. */
.coco-crowd__more {
    margin: 14px 0 0;
    padding: 0 16px;
}
.coco-crowd .coco-crowd__more a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--v2-accent, var(--theme-accent, #c9a227));
    text-decoration: underline;
    text-underline-offset: 5px;
}
.coco-crowd .coco-crowd__more a:hover { opacity: .8; }