/*
 * Spektrix Events — Template Styles
 * Uses Archipelago theme.json CSS custom properties throughout.
 * File: events.css — place in /wp-content/plugins/spektrix-events/
 */

/* ═══════════════════════════════════════════════════
   LOCAL TOKEN ALIASES (shorthand for readability)
   ═══════════════════════════════════════════════════ */
:root {
    --c-atlantic: var(--wp--preset--color--atlantic);
    --c-tresco:   var(--wp--preset--color--tresco);
    --c-sky:      var(--wp--preset--color--sky);
    --c-gorse:    var(--wp--preset--color--gorse);
    --c-sound:    var(--wp--preset--color--sound);
    --c-island:   var(--wp--preset--color--island);
    --c-white:    var(--wp--preset--color--white);

    --f-serif:    var(--wp--preset--font-family--dm-serif-display);
    --f-sans:     var(--wp--preset--font-family--dm-sans);

    --shadow-card:  var(--wp--preset--shadow--card);
    --shadow-hover: var(--wp--preset--shadow--card-hover);

    --radius-card: 8px;
    --radius-pill: 50px;

    --section-pad: clamp(3rem, 6vw, 6rem);
    --grid-gap:    clamp(1rem, 2vw, 1.5rem);
    --content-max: var(--wp--style--global--content-size, 1400px);
}


/* ═══════════════════════════════════════════════════
   SHARED UTILITIES
   ═══════════════════════════════════════════════════ */

.events-section__inner {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.events-section__heading {
    font-family: var(--f-serif);
    font-size: clamp(1.75rem, 3vw, 2.375rem);
    color: var(--c-atlantic);
    text-align: center;
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* Buttons */
.btn {
    display: inline-block;
    font-family: var(--f-sans);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 28px;
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
    text-decoration: none;
    line-height: 1;
}

.btn--gorse {
    background: var(--c-gorse);
    color: var(--c-white);
    border-color: var(--c-gorse);
}
.btn--gorse:hover {
    background: #d99600;
    border-color: #d99600;
    box-shadow: var(--wp--preset--shadow--gorse-glow);
    transform: translateY(-1px);
}

.btn--outline-white {
    background: transparent;
    color: var(--c-white);
    border-color: var(--c-white);
}
.btn--outline-white:hover {
    background: var(--c-white);
    color: var(--c-atlantic);
}

.btn--full {
    display: block;
    text-align: center;
    width: 100%;
}


/* ═══════════════════════════════════════════════════
   HERO — ARCHIVE
   ═══════════════════════════════════════════════════ */

.events-hero {
    position: relative;
    min-height: clamp(280px, 45vw, 520px);
    background-color: var(--c-atlantic);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(2rem, 5vw, 4rem);
}

.events-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(28,46,56,0.75) 0%, rgba(28,46,56,0.2) 60%, transparent 100%);
}

.events-hero__content {
    position: relative;
    z-index: 1;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    width: 100%;
    text-align: center;
}

.events-hero__title {
    font-family: var(--f-serif);
    font-size: clamp(2.5rem, 7vw, 5rem);
    color: var(--c-white);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.events-hero__subtitle {
    font-family: var(--f-sans);
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: rgba(255,255,255,0.85);
    margin: 0;
}


/* ═══════════════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════════════ */

.events-search {
    background: var(--c-atlantic);
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.events-search__inner {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    text-align: center;
}

.events-search__heading {
    font-family: var(--f-serif);
    color: var(--c-white);
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: 1.25rem;
}

.events-search__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.events-search__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    width: 100%;
    max-width: 900px;
}

.events-search__input,
.events-search__select {
    font-family: var(--f-sans);
    font-size: 0.875rem;
    background: var(--c-white);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 4px;
    padding: 10px 14px;
    color: var(--c-atlantic);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s, background 0.2s;
}

.events-search__input::placeholder {
    color: rgba(28,46,56,0.45);
}

.events-search__input:focus,
.events-search__select:focus {
    outline: none;
    border-color: var(--c-gorse);
    background: var(--c-white);
}

.events-search__select option {
    background: var(--c-white);
    color: var(--c-atlantic);
}

.events-search__submit {
    background: var(--c-gorse);
    color: var(--c-white);
    border: 2px solid var(--c-gorse);
    border-radius: var(--radius-pill);
    font-family: var(--f-sans);
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 14px 40px;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s;
}
.events-search__submit:hover {
    background: #d99600;
    box-shadow: var(--wp--preset--shadow--gorse-glow);
}


/* ═══════════════════════════════════════════════════
   CURRENT MAJOR EXHIBITIONS
   ═══════════════════════════════════════════════════ */

.events-exhibitions {
    background: var(--c-white);
    padding: var(--section-pad) 0;
}

.exhibitions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--grid-gap);
}

@media (max-width: 640px) {
    .exhibitions-grid { grid-template-columns: 1fr; }
}

.exhibition-card {
    background: var(--c-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
}
.exhibition-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}

.exhibition-card__image-wrap {
    display: block;
    overflow: hidden;
    aspect-ratio: 16/9;
    position: relative;
}
.exhibition-card__image {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.exhibition-card:hover .exhibition-card__image { transform: scale(1.03); }

.exhibition-card__island-pill {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--c-sound);
    color: var(--c-white);
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.exhibition-card__body { padding: 1.25rem 1.25rem 1.5rem; }

.exhibition-card__taxonomy {
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-sound);
    display: block;
    margin-bottom: 0.5rem;
}

.exhibition-card__title {
    font-family: var(--f-serif);
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}
.exhibition-card__title a {
    color: var(--c-atlantic);
    text-decoration: none;
}
.exhibition-card__title a:hover { color: var(--c-sound); }

.exhibition-card__dates {
    font-family: var(--f-sans);
    font-size: 0.875rem;
    color: var(--c-atlantic);
    margin-bottom: 0.25rem;
}
.exhibition-card__dates strong { font-style: italic; }

.exhibition-card__included,
.exhibition-card__price {
    font-family: var(--f-sans);
    font-size: 0.8rem;
    color: var(--c-sound);
    margin: 0;
}


/* ═══════════════════════════════════════════════════
   UPCOMING EVENTS
   ═══════════════════════════════════════════════════ */

.events-upcoming {
    background: var(--c-sky);
    padding: var(--section-pad) 0;
}

.events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--grid-gap);
}
@media (max-width: 900px) { .events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .events-grid { grid-template-columns: 1fr; } }


/* ── Event Card ────────────────────────────── */

.event-card {
    background: var(--c-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.event-card:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-3px);
}
.event-card--sold-out { opacity: 0.75; }

.event-card__image-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
}
.event-card__image {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.event-card:hover .event-card__image { transform: scale(1.03); }

.event-card__image--placeholder {
    width: 100%; height: 100%;
    background: var(--c-tresco);
}

.event-card__location-pill {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: var(--c-sound);
    color: var(--c-white);
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
}

.event-card__body {
    padding: 1rem 1.125rem 1.25rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.event-card__taxonomy {
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-sound);
    display: block;
    margin-bottom: 0.4rem;
}

.event-card__title {
    font-family: var(--f-serif);
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.25;
    margin-bottom: 0.5rem;
    flex: 1;
}
.event-card__title a {
    color: var(--c-atlantic);
    text-decoration: none;
}
.event-card__title a:hover { color: var(--c-sound); }

.event-card__meta {
    font-family: var(--f-sans);
    font-size: 0.8rem;
    color: var(--c-atlantic);
    margin-bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    align-items: baseline;
}

.event-card__price {
    color: var(--c-gorse);
    font-weight: 700;
}

.event-card__dates { color: var(--c-atlantic); }
.event-card__dates em,
.event-card__meta .when { font-style: italic; }

.event-card__book-link {
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-gorse);
    text-decoration: none;
    display: inline-block;
    margin-top: auto;
    transition: color 0.2s;
}
.event-card__book-link:hover { color: #d99600; }

.event-card__sold-out-badge {
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-tresco);
    margin-top: auto;
}


/* Load More */
.events-load-more__wrap {
    text-align: center;
    margin-top: clamp(2rem, 4vw, 3rem);
}

.events-load-more {
    min-width: 160px;
}
.events-load-more[disabled] { opacity: 0.5; pointer-events: none; }

.events-empty {
    text-align: center;
    font-family: var(--f-sans);
    color: var(--c-atlantic);
    opacity: 0.6;
    padding: 3rem 0;
}


/* ═══════════════════════════════════════════════════
   BEYOND THE MUSEUM WALLS
   ═══════════════════════════════════════════════════ */

.events-beyond {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: clamp(280px, 40vw, 480px);
}

@media (max-width: 768px) {
    .events-beyond { grid-template-columns: 1fr; }
    .events-beyond__image { min-height: 240px; }
}

.events-beyond__image {
    background: var(--c-tresco);
    background-size: cover;
    background-position: center;
}

.events-beyond__content {
    background: var(--c-tresco);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}

.events-beyond__eyebrow {
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(28,46,56,0.6);
    display: block;
    margin-bottom: 0.75rem;
}

.events-beyond__heading {
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 3vw, 2.375rem);
    color: var(--c-atlantic);
    line-height: 1.1;
    margin-bottom: 1rem;
}

.events-beyond__text {
    font-family: var(--f-sans);
    font-size: 0.95rem;
    color: var(--c-atlantic);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    max-width: 520px;
}

/* Button stays its natural width — not full flex column width */
.events-beyond__content .btn {
    align-self: flex-start;
}


/* ═══════════════════════════════════════════════════
   SINGLE EVENT — HEADER BACKGROUND
   ═══════════════════════════════════════════════════ */

.single-events #masthead,
.single-events .site-header {
    background: #96aa96 !important;
    background: var(--c-tresco, #96aa96) !important;
}

.single-events .site-logo-link img {
    filter: brightness(0) saturate(100%);
}

.single-events .nav-link,
.single-events .utility-menu a {
    color: var(--c-atlantic) !important;
}
.single-events .nav-link:hover,
.single-events .utility-menu a:hover {
    color: var(--c-sound) !important;
}

.single-events .hamburger-line {
    background-color: var(--c-atlantic) !important;
}


/* ═══════════════════════════════════════════════════
   SINGLE EVENT — HERO
   ═══════════════════════════════════════════════════ */

.event-hero {
    display: grid;
    grid-template-columns: 3fr 2fr;
    min-height: clamp(320px, 45vw, 520px);
    padding-top: 178px;
    margin-top: 0;
}

.admin-bar .event-hero {
    padding-top: 210px;
}

@media (max-width: 768px) {
    .event-hero { grid-template-columns: 1fr; }
}

.event-hero__image-col {
    overflow: hidden;
    position: relative;
}
.event-hero__image {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.event-hero__image--placeholder {
    width: 100%; height: 100%;
    background: var(--c-tresco);
}

.event-hero__info-col {
    background: var(--c-island);
    padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3.5vw, 3rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
}

.event-hero__location-pill {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: var(--c-white);
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    margin-bottom: 0.75rem;
    align-self: flex-start;
}

.event-hero__taxonomy {
    font-family: var(--f-sans);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
    display: block;
    margin-bottom: 0.5rem;
}

.event-hero__title {
    font-family: var(--f-serif);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: var(--c-white);
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.event-hero__excerpt {
    font-family: var(--f-sans);
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.event-hero__divider {
    width: 48px;
    height: 2px;
    background: rgba(255,255,255,0.35);
    margin-bottom: 1rem;
}

.event-hero__meta { margin-bottom: 0; }
.event-hero__book { align-self: flex-start; }

.event-hero__sold-out {
    font-family: var(--f-sans);
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
    font-style: italic;
}


/* ═══════════════════════════════════════════════════
   SINGLE EVENT — BREADCRUMB
   ═══════════════════════════════════════════════════ */

.event-breadcrumb {
    background: var(--c-sky);
    border-bottom: 1px solid var(--c-tresco);
    padding: 0.75rem 0;
}

.event-breadcrumb__inner {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
    font-family: var(--f-sans);
    font-size: 0.8rem;
    color: var(--c-atlantic);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.event-breadcrumb__inner a {
    color: var(--c-sound);
    text-decoration: none;
}
.event-breadcrumb__inner a:hover { text-decoration: underline; }
.event-breadcrumb__sep { color: var(--c-tresco); }


/* ═══════════════════════════════════════════════════
   SINGLE EVENT — BODY + SIDEBAR
   ═══════════════════════════════════════════════════ */

.event-body {
    max-width: var(--content-max);
    margin-inline: auto;
    padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 2.5rem);
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
    overflow: visible;
}

@media (max-width: 1024px) {
    .event-body { grid-template-columns: 1fr; }
    .event-sidebar {
        order: -1;
        position: relative;
        top: auto;
        width: 100%;
        max-width: 100%;
        max-height: none;
    }
    .event-details-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
}

.event-content h2 {
    font-family: var(--f-serif);
    font-size: clamp(1.5rem, 2.5vw, 1.75rem);
    color: var(--c-atlantic);
    margin-bottom: 1.25rem;
}

.event-content p {
    font-family: var(--f-sans);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--c-atlantic);
}

.event-content > ul li,
.event-content > ol li {
    font-family: var(--f-sans);
    font-size: 1rem;
    line-height: 1.75;
    color: var(--c-atlantic);
}


/* ── Sidebar Card ──────────────────────────── */

.event-sidebar {
    align-self: start;
    position: sticky;
    top: 196px;
}

.event-details-card {
    background: var(--c-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.75rem 1.5rem 1.5rem;
    border-top: 4px solid var(--c-sound);
}

.event-details-card__heading {
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-sound);
    margin-bottom: 1.25rem;
}

.event-details-card__section {
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--c-sky);
}
.event-details-card__section:last-of-type {
    border-bottom: none;
    margin-bottom: 1.5rem;
}

.event-details-card__label {
    font-family: var(--f-sans);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(28,46,56,0.5);
    margin-bottom: 0.4rem;
}

.event-details-card__section p {
    font-family: var(--f-sans);
    font-size: 0.9rem;
    color: var(--c-atlantic);
    margin: 0 0 0.2rem;
}

.event-details-card__prices {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.event-details-card__prices li {
    display: flex;
    justify-content: space-between;
    font-family: var(--f-sans);
    font-size: 0.875rem;
    color: var(--c-atlantic);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--c-sky);
}
.event-details-card__prices li:last-child { border-bottom: none; }

.event-details-card__prices .price-name { flex: 1; }
.event-details-card__prices .price-value { font-weight: 700; }

.event-details-card__map-link {
    font-family: var(--f-sans);
    font-size: 0.875rem;
    color: var(--c-sound);
    text-decoration: underline;
}
.event-details-card__map-link:hover { color: var(--c-atlantic); }

.event-details-card__fee-note {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    color: rgba(28,46,56,0.5);
    text-align: center;
    margin-top: 0.6rem;
    margin-bottom: 0;
}

.event-details-card__sold-out {
    font-family: var(--f-sans);
    font-size: 0.875rem;
    color: var(--c-tresco);
    text-align: center;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════
   MORE TO EXPLORE
   ═══════════════════════════════════════════════════ */

.events-more {
    background: var(--c-tresco);
    padding: var(--section-pad) 0;
}

.events-more .events-section__heading {
    color: var(--c-atlantic);
}

.events-more .event-card {
    background: var(--c-white);
}


/* ═══════════════════════════════════════════════════
   SINGLE EVENT — EXTRA CONTENT FIELDS
   ═══════════════════════════════════════════════════ */

.event-hero__subtitle {
    font-family: var(--f-sans);
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.event-hero__booking-notes {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
    margin-top: 0.5rem;
    line-height: 1.5;
}

.event-content__editorial-intro {
    font-family: var(--f-sans);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    line-height: 1.6;
    color: var(--c-atlantic);
    margin-bottom: 2rem;
    font-weight: 300;
}

.event-content__video {
    margin: 2rem 0;
    aspect-ratio: 16/9;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.event-content__video iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.event-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin: 2rem 0;
}
.event-gallery__item {
    display: block;
    aspect-ratio: 4/3;
    border-radius: var(--radius-card);
    overflow: hidden;
}
.event-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.event-gallery__item:hover img { transform: scale(1.04); }

.event-accessibility {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--c-sky);
    border-radius: var(--radius-card);
}
.event-accessibility__heading {
    font-family: var(--f-sans);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-sound);
    margin-bottom: 0.75rem;
}
.event-accessibility__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.event-accessibility__item {
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 600;
    background: var(--c-white);
    border: 1px solid var(--c-tresco);
    color: var(--c-atlantic);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}

.event-content__practical {
    margin: 1.5rem 0;
}
.event-content__practical h3 {
    font-family: var(--f-serif);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.event-content__sponsor {
    font-family: var(--f-sans);
    font-size: 0.8rem;
    color: rgba(28,46,56,0.55);
    border-top: 1px solid var(--c-tresco);
    padding-top: 1rem;
    margin-top: 2rem;
}

.event-details-card__booking-notes {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    color: var(--c-sound);
    margin-top: 0.5rem;
    line-height: 1.5;
    font-style: italic;
}
.event-details-card__location-notes {
    font-family: var(--f-sans);
    font-size: 0.8rem;
    color: rgba(28,46,56,0.7);
    margin-top: 0.35rem;
    line-height: 1.5;
}
.event-details-card__accessibility {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.event-details-card__accessibility li {
    font-family: var(--f-sans);
    font-size: 0.8rem;
    color: var(--c-atlantic);
    padding-left: 1rem;
    position: relative;
}
.event-details-card__accessibility li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--c-sound);
    font-weight: 700;
}


/* ═══════════════════════════════════════════════════
   SINGLE EVENT — REVISED META STRIP
   ═══════════════════════════════════════════════════ */

.event-hero__meta-list {
    list-style: none !important;
    margin: 0 0 1.5rem !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.event-hero__meta-list li {
    font-family: var(--f-sans);
    font-size: clamp(1.05rem, 1.8vw, 1.25rem);
    color: rgba(255,255,255,0.88);
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.event-hero__meta-label {
    font-weight: 700;
    color: var(--c-white);
    min-width: 140px;
    flex-shrink: 0;
    font-size: clamp(0.75rem, 1.2vw, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* ═══════════════════════════════════════════════════
   SINGLE EVENT — STICKY SIDEBAR
   ═══════════════════════════════════════════════════ */

.admin-bar .event-sidebar {
    top: 228px;
}

.single-events #page,
.single-events .site,
.single-events #primary,
.single-events .site-main {
    overflow: visible !important;
}

.event-body { overflow: visible; }
.event-sidebar { overflow: visible; }


/* ═══════════════════════════════════════════════════
   SINGLE EVENT — ACCESSIBILITY ICONS IN SIDEBAR
   ═══════════════════════════════════════════════════ */

.event-details-card__accessibility {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-access-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.event-access-item__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--c-sound);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.event-access-item__icon svg {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    display: block;
    flex-shrink: 0;
}

.event-access-item__label {
    font-family: var(--f-sans);
    font-size: 0.825rem;
    color: var(--c-atlantic);
    line-height: 1.3;
}


/* ═══════════════════════════════════════════════════
   SINGLE EVENT — CONTENT: BOOKING NOTES + GALLERY
   ═══════════════════════════════════════════════════ */

.event-content__booking-notes {
    margin-top: 2.5rem;
    padding: 1rem 1.25rem;
    background: var(--c-sky);
    border-radius: var(--radius-card);
    font-family: var(--f-sans);
    font-size: 0.875rem;
    color: var(--c-atlantic);
    line-height: 1.6;
}

.event-content__booking-notes p { margin: 0; }

.event-details-card__body-text {
    font-family: var(--f-sans);
    font-size: 0.85rem;
    color: var(--c-atlantic);
    line-height: 1.6;
    margin: 0;
}

.event-details-card__section--sponsor {
    border-top: 1px dashed var(--c-tresco);
}

.event-details-card__sponsor {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    color: rgba(28,46,56,0.6);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}


/* ═══════════════════════════════════════════════════
   SINGLE EVENT — CHOOSE A DATE
   ═══════════════════════════════════════════════════ */

.event-instances {
    background: var(--c-sky);
    border-bottom: 1px solid var(--c-tresco);
    padding: clamp(2rem, 4vw, 3rem) 0;
}

.event-instances__inner {
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
}

.event-instances__heading {
    font-family: var(--f-serif);
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    color: var(--c-atlantic);
    margin-bottom: 1.25rem;
}

.event-instances__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--c-tresco) transparent;
}

.event-instances__list::-webkit-scrollbar { width: 4px; }
.event-instances__list::-webkit-scrollbar-track { background: transparent; }
.event-instances__list::-webkit-scrollbar-thumb { background: var(--c-tresco); border-radius: 4px; }

.event-instance {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    background: var(--c-white);
    border-radius: var(--radius-card);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-card);
    transition: box-shadow 0.2s, transform 0.15s;
}

.event-instance:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-1px);
}

.event-instance--unavailable { opacity: 0.6; }

.event-instance__date {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.event-instance__day {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-sound);
}

.event-instance__full {
    font-family: var(--f-serif);
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    color: var(--c-atlantic);
    line-height: 1.2;
}

.event-instance__time {
    font-family: var(--f-sans);
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-atlantic);
    white-space: nowrap;
}

.event-instance__venue {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.event-instance__area {
    font-family: var(--f-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-sound);
}

.event-instance__venue-name {
    font-family: var(--f-sans);
    font-size: 0.9rem;
    color: var(--c-atlantic);
}

.event-instance__book {
    padding: 10px 24px;
    font-size: 12px;
    white-space: nowrap;
}

.event-instance__sold-out {
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--c-tresco);
}

@media (max-width: 480px) {
    .event-instance {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }
    .event-instance__time { grid-column: 1; font-size: 0.875rem; }
    .event-instance__venue { grid-column: 1; }
    .event-instance__action { grid-column: 2; grid-row: 1 / 4; align-self: center; }
}


/* ═══════════════════════════════════════════════════
   DEFINITIVE FIXES — load order independent
   ═══════════════════════════════════════════════════ */

.single-events #primary,
.single-events #page,
.single-events .site,
.single-events #primary.site-main { overflow: visible !important; }

ul.event-hero__meta-list,
ul.event-hero__meta-list li,
ul.event-details-card__accessibility,
ul.event-details-card__accessibility li,
ul.event-details-card__prices,
ul.event-details-card__prices li {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    background-image: none !important;
}

html:has(body.single-events) {
    margin-top: 0 !important;
}
body.single-events #wpadminbar {
    position: fixed;
}