/*
 * events.css  —  template-scoped stylesheet for Tribe single event pages
 * ------------------------------------------------------------------
 * Stage 5c: extracted verbatim from the inline <style> in
 * tribe-events/single-event.php (which rendered UCDon/Doncaster brand
 * colour group-wide). Colour tokenised to CURRENT rendered values:
 *   - exact token matches -> var(--token)
 *   - Phase 3a: every deferred literal resolved to a token (see
 *     docs/phase-3a-token-report.md)
 *   - greys collapsed to the neutral scale (Phase 3a)
 * No rendered colour changed vs the inline block. Overlays/shadows via
 * rgba(var(--*-rgb), a). Font sizes untouched (Phase 2.5).
 *
 * NOTE: the teal var(--blue) / var(--blue-dark) have no token and stay literal
 * (marked). They still render group-wide until Step 2 assigns a per-site
 * token. See docs/audit/inline-colour-moved.md.
 *
 * ENQUEUE: wired in functions.php on is_singular('tribe_events').
 */

/* ==========================================================================
   Doncaster College Event Page — Clean Grid Layout
   ========================================================================== */

/* --- Page-level grid ---------------------------------------------------- */
.tribe_events {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

#tribe-events-pg-template {
    max-width: 75rem;
}

/* Banner — full width */
.tribe-events-event-image {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: auto !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
.tribe-events-event-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* Left column */
.tribe-events-single-event-title {
    grid-column: 1 !important;
    color: var(--text-heading) !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    padding-right: 2rem !important;
    margin-bottom: 0 !important;
}
.tribe-events-schedule {
    grid-column: 1 !important;
    border-radius: 0 8px 8px 0 !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    margin-right: 2rem !important;
}
.tribe-events-single-event-description {
    grid-column: 1 !important;
    padding-right: 2rem !important;
    margin-bottom: 2rem !important;
    line-height: 1.6 !important;
    font-size: 1.1rem !important;
}
/* The Events Calendar ships its description body at 18px (1.125rem), under our
   1.1rem floor. Lift the description text (and its list items) to the floor. */
.tribe-events-single-event-description :is(p, li, span, a) {
    font-size: 1.1rem !important;
}
.tribe-events.tribe-common {
    grid-column: 1 !important;
    margin-bottom: 2rem !important;
    padding-right: 2rem !important;
}

/* Right column — RSVP card (+ virtual join when integrated) */
#rsvp-now {
    grid-column: 2 !important;
    grid-row: 2 / span 4 !important;
    background: linear-gradient(135deg, var(--surface-dark-alt) 0%, var(--navy) 100%) !important;
    border-radius: 16px !important;
    padding: 2.5rem !important;
    align-self: start !important;
    position: sticky !important;
    top: 20px !important;
    height: fit-content !important;
}

/* Meta — full width */
.tribe-events-single-section.tribe-events-event-meta {
    grid-column: 1 / -1 !important;
    background: var(--neutral-50) !important;
    padding: 2rem !important;
    border-radius: 12px !important;
    margin-top: 2rem !important;
}

/* Date/Time */
.tribe-event-date-start,
.tribe-event-time {
    color: var(--text-heading) !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}
.tribe-events-cost {
    display: inline-block !important;
    background: var(--blue) !important;
    color: var(--text-on-dark) !important;
    padding: 0.4rem 1rem !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    margin-left: 1rem !important;
}


/* ==========================================================================
   DNCG: Virtual join section (inside RSVP card via rsvp.php)
   ========================================================================== */

.dncg-virtual-section {
    text-align: center;
    padding-bottom: 1.5rem;
    margin-bottom:2rem !important;
}
.dncg-virtual-icon {
    font-size: 2.5rem;
    margin-bottom: 0.25rem;
}
.dncg-virtual-label {
    color: var(--blue-text) !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}
.dncg-virtual-heading {
    color: var(--text-on-dark) !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.5rem !important;
    line-height: 1.3 !important;
}
.dncg-virtual-datetime {
    color: rgba(var(--overlay-light-rgb), 0.8) !important;
    font-size: 1.1rem !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.5 !important;
}
.dncg-virtual-datetime strong {
    color: var(--text-on-dark) !important;
}

/* Join button (shared between integrated + standalone) */
.dncg-virtual-join-btn {
    display: inline-block !important;
    background: var(--blue) !important;
    color: var(--text-on-dark) !important;
    text-decoration: none !important;
    text-align: center !important;
    padding: 1.1rem 2.5rem !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 25px rgba(var(--blue-rgb), 0.35) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.dncg-virtual-join-btn:hover {
    background: var(--blue-dark) !important;
    color: var(--text-on-dark) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px rgba(var(--blue-rgb), 0.45) !important;
    text-decoration: none !important;
}
.dncg-virtual-join-btn:active {
    transform: translateY(-1px) !important;
}

/* Divider between join section and RSVP form */
.dncg-rsvp-divider {
    text-align: center;
    position: relative;
    margin: 0.5rem 0 1.5rem;
    padding: 0.75rem 0;
}
.dncg-rsvp-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(var(--overlay-light-rgb), 0.2);
}
.dncg-rsvp-divider span {
    position: relative;
    background: linear-gradient(135deg, var(--surface-dark-alt) 0%, var(--navy) 100%);
    padding: 0 1rem;
    color: rgba(var(--overlay-light-rgb), 0.6) !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    font-weight: 600 !important;
}

/* Footnote at bottom of RSVP card */
.dncg-virtual-footnote {
    text-align: center;
    color: rgba(var(--overlay-light-rgb), 0.45) !important;
    font-size: 1.1rem !important;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(var(--overlay-light-rgb), 0.1);
}


/* ==========================================================================
   DNCG: Standalone virtual block (fallback — only when NO RSVP)
   ========================================================================== */

.dncg-virtual-standalone {
    grid-column: 2 !important;
    grid-row: 2 / span 4 !important;
    align-self: start !important;
    position: sticky !important;
    top: 20px !important;
    height: fit-content !important;
    background: linear-gradient(135deg, var(--surface-dark-alt) 0%, var(--navy) 100%) !important;
    border-radius: 16px !important;
    padding: 2.5rem !important;
    text-align: center !important;
    overflow: hidden !important;
}
.dncg-virtual-standalone::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 150px;
    height: 150px;
    background: rgba(var(--blue-rgb), 0.12);
    border-radius: 50%;
}
.dncg-virtual-standalone::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 100px;
    height: 100px;
    background: rgba(var(--blue-rgb), 0.08);
    border-radius: 50%;
}
.dncg-virtual-standalone .dncg-virtual-icon,
.dncg-virtual-standalone .dncg-virtual-label,
.dncg-virtual-standalone .dncg-virtual-heading,
.dncg-virtual-standalone .dncg-virtual-datetime,
.dncg-virtual-standalone .dncg-virtual-join-btn {
    position: relative;
    z-index: 1;
}
.dncg-virtual-standalone .dncg-virtual-icon     { font-size: 3rem; }
.dncg-virtual-standalone .dncg-virtual-heading   { font-size: 1.6rem !important; }
.dncg-virtual-standalone .dncg-virtual-join-btn  { padding: 1.25rem 3rem !important; font-size: 1.1rem !important; }


/* ==========================================================================
   RSVP form styling
   ========================================================================== */

.tribe-tickets__rsvp {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}
.tribe-tickets__rsvp-details-wrapper,
.tribe-tickets__rsvp-actions-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}
.tribe-tickets__rsvp-details-wrapper {
    display: none !important;
}
.tribe-tickets__rsvp-title {
    color: var(--text-on-dark) !important;
    font-size: 2rem !important;
    margin-bottom: 1.5rem !important;
    font-weight: 600 !important;
    text-align: center !important;
}
.tribe-tickets__rsvp-attendance {
    background: rgba(var(--overlay-light-rgb), 0.15) !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    text-align: center !important;
    backdrop-filter: blur(10px) !important;
    margin-bottom: 1.5rem !important;
}
.tribe-tickets__rsvp-attendance-number {
    color: var(--text-on-dark) !important;
    font-size: 3rem !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
}
.tribe-tickets__rsvp-attendance-going {
    color: rgba(var(--overlay-light-rgb), 0.95) !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}
.tribe-tickets__rsvp-actions-rsvp > span {
    font-size: 1.1rem !important;
    display: block !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
}

/* RSVP "Going" button */
.tribe-tickets__rsvp-actions-button-going {
    background: var(--blue) !important;
    color: var(--text-on-dark) !important;
    border: none !important;
    padding: 1.5rem 3rem !important;
    font-size: 1.1rem;
    font-weight: 900;
    border-radius: 50px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 25px rgba(var(--blue-rgb), 0.35) !important;
    width: 100% !important;
    text-transform: uppercase !important;
    position: relative !important;
    overflow: hidden !important;
    max-width: 100% !important;
}
.tribe-tickets__rsvp-actions-button-going:hover {
    background: var(--blue-dark) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px rgba(var(--blue-rgb), 0.45) !important;
}
.tribe-tickets__rsvp-actions-button-going:active {
    transform: translateY(-1px) !important;
}

/* RSVP form fields */
.tribe-tickets__rsvp-ar {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: var(--surface) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin-top: 0 !important;
}
.tribe-tickets__rsvp-ar-form-wrapper {
    width: 100% !important;
    max-width: 100% !important;
}
.tribe-tickets__form-field {
    margin-bottom: 1.5rem !important;
}
.tribe-tickets__form-field-label {
    color: var(--text-heading) !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}
.tribe-tickets__form-field-input {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border: 2px solid var(--neutral-200) !important;
    border-radius: 8px !important;
    font-size: 1.1rem !important;
    transition: all 0.3s ease !important;
}
input.tribe-tickets__form-field-input[type="checkbox"],
input.tribe-tickets__form-field-input[type="radio"] {
    width: auto !important;
    padding: 0 !important;
    border-width: 1px !important;
    border-radius: 0 !important;
}
.tribe-tickets__form-field-input:focus {
    border-color: var(--blue-text) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(var(--surface-dark-alt-rgb), 0.1) !important;
}
.tribe-required {
    color: var(--blue-text) !important;
}
.tribe-tickets__rsvp-form-buttons {
    display: flex !important;
    gap: 1rem !important;
    justify-content: flex-end !important;
    margin-top: 2rem !important;
}
.tribe-tickets__rsvp-form-button--cancel {
    background: transparent !important;
    color: var(--neutral-500) !important;
    border: 2px solid var(--neutral-200) !important;
    padding: 0.75rem 2rem !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.tribe-tickets__rsvp-form-button--cancel:hover {
    border-color: var(--neutral-500) !important;
    background: var(--neutral-50) !important;
}
.tribe-tickets__rsvp-form-button--submit,
.tribe-tickets__rsvp-form-button--next {
    background: var(--blue) !important;
    color: var(--text-on-dark) !important;
    border: none !important;
    padding: 0.75rem 2rem !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
}
.tribe-tickets__rsvp-form-button--submit:hover,
.tribe-tickets__rsvp-form-button--next:hover {
    background: var(--blue-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 20px rgba(var(--blue-rgb), 0.3) !important;
}
.tribe-tickets__rsvp-ar-sidebar-wrapper {
    display: none !important;
}
.tribe-tickets__rsvp-wrapper {
    max-width: 100% !important;
}
.event-tickets .tribe-tickets__rsvp-ar-form {
    padding: 1rem !important;
}
.tribe-events-venue-map {
    width: 100% !important;
}

/* Calendar dropdown */
.tribe-events-c-subscribe-dropdown__button {
    background: var(--surface) !important;
    border: 2px solid var(--text-heading) !important;
    color: var(--text-heading) !important;
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.tribe-events-c-subscribe-dropdown__button:hover {
    background: var(--surface-dark-alt) !important;
    color: var(--text-on-dark) !important;
}
.tribe-events-c-subscribe-dropdown__button svg {
    stroke: currentColor !important;
}
.tribe-events-c-subscribe-dropdown__content {
    position: absolute !important;
    z-index: 100 !important;
    background: var(--surface) !important;
    box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.15) !important;
    border-radius: 8px !important;
    margin-top: 0.5rem !important;
    border: 1px solid var(--neutral-200) !important;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 768px) {
    .tribe_events {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 0.2rem !important;
    }
    .event-tickets .tribe-tickets__rsvp {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        margin-top: 0 !important;
    }
    .event-tickets .tribe-tickets__rsvp-actions,
    .tribe-tickets__rsvp-wrapper {
        margin-top: 0 !important;
    }
    .tribe-tickets__rsvp-wrapper {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Stacking order */
    .tribe-events-event-image              { order: 1 !important; }
    .tribe-events-single-event-title       { order: 2 !important; }
    .tribe-events-schedule                 { order: 3 !important; }
    #rsvp-now                              { order: 4 !important; }
    .dncg-virtual-standalone               { order: 4 !important; }
    .tribe-events-single-event-description { order: 5 !important; }
    .tribe-events.tribe-common             { order: 6 !important; }
    .tribe-events-single-section.tribe-events-event-meta { order: 7 !important; }

    /* Reset grid placement */
    .tribe-events-event-image,
    .tribe-events-single-event-title,
    .tribe-events-schedule,
    .tribe-events-single-event-description,
    .tribe-events.tribe-common,
    #rsvp-now,
    .dncg-virtual-standalone,
    .tribe-events-single-section.tribe-events-event-meta {
        grid-area: unset !important;
        grid-column: unset !important;
        grid-row: unset !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 1.5rem !important;
        position: relative !important;
        top: auto !important;
    }
    .tribe-events-event-image {
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
    }
    .tribe-events-single-event-title {
        font-size: 1.8rem !important;
        margin-bottom: 1rem !important;
    }
    #rsvp-now,
    .dncg-virtual-standalone {
        margin: 1.5rem 0 !important;
        padding: 1.5rem !important;
    }
    .dncg-virtual-heading {
        font-size: 1.3rem !important;
    }
    .tribe-tickets__rsvp-actions-button-going {
        font-size: 1.1rem !important;
        padding: 1.2rem 2rem !important;
    }
    .tribe-tickets__rsvp-actions-rsvp > span {
        font-size: 1.1rem !important;
    }
    .tribe-tickets__rsvp-title {
        font-size: 1.5rem !important;
    }
    .tribe-tickets__rsvp-attendance-number {
        font-size: 2.5rem !important;
    }
    .tribe-events.tribe-common {
        margin-bottom: 1.5rem !important;
    }
    .tribe-events-c-subscribe-dropdown__button {
        width: 100% !important;
        text-align: center !important;
    }
}

@media (max-width: 480px) {
    .tribe-events-single-event-title {
        font-size: 1.5rem !important;
    }
    #rsvp-now,
    .dncg-virtual-standalone {
        padding: 1.2rem !important;
    }
    .dncg-virtual-join-btn {
        padding: 1rem 2rem !important;
        font-size: 1.1rem !important;
    }
    .tribe-tickets__rsvp-actions-button-going {
        font-size: 1.1rem !important;
        padding: 1rem 1.5rem !important;
    }
}

/* Hide redundant Details meta section on virtual events */
.dncg-virtual-event .tribe-events-single-section.tribe-events-event-meta {
    display: none !important;
}


/* ==========================================================================
   Events breadcrumb (Tribe archive/single) — plain, compact
   Ported from dc-child/style.css L9772-9780. Font-size raised 0.85rem -> 1.2rem
   per the 1.1rem floor (explicit instruction; supersedes the Phase-2.5 defer
   for this one rule). No colour, so no token mapping.
   NOTE: `.tribe-events-before-html` can also render on the events archive;
   events.css is is_singular('tribe_events')-scoped, so broaden the enqueue
   if the archive breadcrumb needs this too.
   ========================================================================== */
.tribe-events-before-html,
.events-breadcrumb {
    /* Was a literal `"Arial", sans-serif`, the only literal typeface left in
       base-theme CSS and a breach of the token rule. The intent of the rule is
       to strip Tribe's own decorated breadcrumb styling back to plain body
       text, which is exactly what --font-body is. */
    font-family: var(--font-body) !important;
    font-size: 1.1rem !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* ==========================================================================
   Single-event hero — merged in from parts/events/single-hero.php
   --------------------------------------------------------------------------
   That part printed these rules in an inline <style> block at the bottom of the
   template: unminifiable, uncacheable, and re-emitted on every event page view.
   Same scope either way — the part only renders on is_singular('tribe_events'),
   which is exactly when this sheet is enqueued — so the move is behaviour-neutral.

   One change, not a port: the original targeted `.hero-page .card-date i`,
   written for the Font Awesome <i> elements that markup exception #1 replaced
   with inline SVG. dncg_icon() emits <svg class="icon">, so the selector was
   matching nothing. It now targets what the template actually outputs.
   ========================================================================== */
.hero-page .card-date {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-top: 1rem;
}
.hero-page .card-date > * {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.hero-page .card-date .icon {
    opacity: 0.8;
}

/* The hero's own stacking context, so the image sits behind the type. */
.hero-page {
    position: relative;
    z-index: 1;
}
.hero-page .image-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.3;
    background-size: cover;
    background-position: center;
}
.hero-page h1,
.hero-page .hero-page-content {
    position: relative;
    z-index: 2;
}