/**
 * /assets/css/pages/events.css
 * Events-only styles. Shared hero, hero lines, grid, RS mark, buttons,
 * section typography and design tokens belong to core.css/components.css.
 */

.page-events {
    --hero-min-height: 68vh;
    --hero-accent-x: 77%;
    --hero-accent-y: 31%;
    --hero-accent-alpha: .21;
}

.events-hero-art {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 77% 31%, rgba(189,0,0,.21), transparent 31%),
        linear-gradient(120deg, #080808, #111 52%, #070707);
}

.calendar-nav-end {
    justify-content: flex-end;
}

/* =====================================================
           EVENTS SECTION
        ====================================================== */

        .events-section {

            padding:
                90px
                0
                115px;

        }
/* =====================================================
           FEATURED / CURRENT EVENT
        ====================================================== */

        .current-event-wrap {

            margin-top: 40px;

        }


        .current-event {

            position: relative;

            min-height: 390px;

            display: grid;

            grid-template-columns:
                minmax(0, 1.2fr)
                minmax(320px, .8fr);

            overflow: visible;

            border:
                1px solid
                var(--red-border);

            background:
                #0b0b0b;

        }


        .current-event-media {

            position: relative;

            min-height: 390px;

            overflow: hidden;

        }


        .current-event-media img {

            width: 100%;
            height: 100%;

            object-fit: cover;

        }


        .current-event-media::after {

            content: "";

            position: absolute;
            inset: 0;

            background:

                linear-gradient(
                    90deg,
                    rgba(0,0,0,.18),
                    rgba(0,0,0,.65)
                );

        }


        .current-event-content {

            position: relative;

            z-index: 2;

            display: flex;

            flex-direction: column;

            justify-content: center;

            padding: 42px;

        }


        .event-status {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            width: fit-content;

            min-height: 27px;

            padding:
                0
                9px;

            border:
                1px solid
                var(--red-border);

            color: #fff;

            background:
                var(--red-soft);

            font-size: .51rem;

            font-weight: 800;

            letter-spacing: .08em;

            text-transform: uppercase;

        }


        .event-status::before {

            content: "";

            width: 5px;
            height: 5px;

            border-radius: 50%;

            background:
                var(--red-bright);

        }


        .current-event-title {

            margin-top: 18px;

            color: #fff;

            font-size:
                clamp(
                    2rem,
                    4vw,
                    3.8rem
                );

            font-weight: 900;

            line-height: .96;

            letter-spacing: -.045em;

        }


        .current-event-description {

            margin-top: 16px;

            color:
                rgba(255,255,255,.43);

            font-size: .77rem;

            line-height: 1.72;

        }


        /* =====================================================
           EVENT META
        ====================================================== */

        .event-meta {

            display: flex;

            flex-wrap: wrap;

            gap: 12px;

            margin-top: 20px;

        }


        .event-meta-item {

            display: inline-flex;

            align-items: center;

            gap: 7px;

            color:
                rgba(255,255,255,.38);

            font-size: .57rem;

        }


        .event-meta-item i {

            color:
                var(--red-bright);

        }


        /* =====================================================
           EVENTS GRID
        ====================================================== */

        .event-grid {

            display: grid;

            grid-template-columns:
                repeat(
                    3,
                    minmax(0, 1fr)
                );

            gap: 14px;

            margin-top: 42px;

        }


        .event-card {

            position: relative;

            display: flex;

            flex-direction: column;

            min-width: 0;

            overflow: visible;

            border:
                1px solid
                var(--border);

            background:
                var(--panel);

            transition:
                transform .18s ease,
                border-color .18s ease,
                background .18s ease;

        }


        .event-card:hover {

            transform:
                translateY(-3px);

            border-color:
                var(--red-border);

            background:
                var(--panel-hover);

        }


        .event-image {

            position: relative;

            aspect-ratio:
                16 / 9;

            overflow: hidden;

            background:
                #080808;

        }


        .event-image img {

            width: 100%;
            height: 100%;

            object-fit: cover;

            transition:
                transform .25s ease;

        }


        .event-card:hover
        .event-image img {

            transform:
                scale(1.025);

        }


        .event-image::after {

            content: "";

            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    to bottom,
                    rgba(0,0,0,.10),
                    rgba(0,0,0,.60)
                );

        }


        .event-image-title {

            position: absolute;

            z-index: 2;

            left: 20px;
            right: 20px;
            bottom: 18px;

            color: #fff;

            font-size: 1rem;

            font-weight: 900;

            line-height: 1.15;

            letter-spacing: -.025em;

        }


        .event-content {

            display: flex;

            flex: 1;

            flex-direction: column;

            padding:
                21px;

        }


        .event-description {

            margin-top: 14px;

            color:
                rgba(255,255,255,.34);

            font-size: .69rem;

            line-height: 1.65;

        }


        .event-time-box {

            margin-top: 18px;

            border:
                1px solid
                var(--border);

            background:
                #0a0a0a;

        }


        .event-time-row {

            display: grid;

            grid-template-columns:
                25px
                minmax(0, 1fr)
                auto;

            gap: 9px;

            align-items: center;

            min-height: 42px;

            padding:
                0
                12px;

            border-bottom:
                1px solid
                var(--border-soft);

        }


        .event-time-row:last-child {
            border-bottom: 0;
        }


        .event-time-row[hidden] {
            display: none;
        }


        .event-time-row i {

            color:
                var(--red-bright);

            font-size: .68rem;

        }


        .event-time-label {

            color:
                rgba(255,255,255,.27);

            font-size: .54rem;

            font-weight: 700;

        }


        .event-time-value {

            color:
                rgba(255,255,255,.65);

            font-size: .57rem;

            font-weight: 800;

            text-align: right;

        }


        /* =====================================================
           RSVP
        ====================================================== */

        .event-rsvps {

            display: flex;

            flex-wrap: wrap;

            gap: 6px;

            margin-top: 16px;

        }


        .event-rsvp {

            display: inline-flex;

            align-items: center;

            gap: 5px;

            min-height: 25px;

            padding:
                0
                8px;

            border:
                1px solid
                var(--border);

            color:
                rgba(255,255,255,.44);

            background:
                #0a0a0a;

            font-size: .52rem;

        }


        .event-rsvp strong {

            color: #fff;

        }


        /* =====================================================
           ACTIONS
        ====================================================== */

        .event-actions {

            display: flex;

            flex-wrap: wrap;

            gap: 8px;

            margin-top: auto;

            padding-top: 20px;

        }


        .event-button {

            min-height: 36px;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            gap: 7px;

            padding:
                0
                12px;

            border:
                1px solid
                var(--red);

            color: #fff;

            background:
                var(--red);

            font-size: .53rem;

            font-weight: 800;

            letter-spacing: .07em;

            text-transform: uppercase;

        }


        .event-button:hover {

            color: #fff;

            border-color:
                var(--red-bright);

            background:
                var(--red-bright);

        }


        .event-button.secondary {

            border-color:
                var(--border);

            color:
                rgba(255,255,255,.55);

            background:
                transparent;

        }


        .event-button.secondary:hover {

            color: #fff;

            border-color:
                rgba(255,255,255,.20);

            background:
                rgba(255,255,255,.035);

        }


        /* =====================================================
           LOADING / EMPTY
        ====================================================== */

        .events-loading {

            min-height: 280px;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            margin-top: 40px;

            padding: 40px;

            border:
                1px solid
                var(--border);

            background:
                #0d0d0d;

            text-align: center;

        }


        .loading-spinner {

            width: 30px;
            height: 30px;

            border:
                2px solid
                rgba(255,255,255,.08);

            border-top-color:
                var(--red-bright);

            border-radius: 50%;

            animation:
                eventSpin
                .75s
                linear
                infinite;

        }


        @keyframes eventSpin {

            to {
                transform: rotate(360deg);
            }

        }


        .loading-title {

            margin-top: 17px;

            color:
                rgba(255,255,255,.68);

            font-size: .67rem;

            font-weight: 800;

            letter-spacing: .09em;

            text-transform: uppercase;

        }


        .loading-copy {

            max-width: 440px;

            margin-top: 7px;

            color:
                rgba(255,255,255,.26);

            font-size: .58rem;

            line-height: 1.6;

        }


        /* =====================================================
           CTA
        ====================================================== */

        .events-cta {

            padding:
                82px
                0;

            border-top:
                1px solid
                var(--border);

            background:

                radial-gradient(
                    circle at 81% 50%,
                    rgba(189,0,0,.15),
                    transparent 32%
                ),

                #090909;

        }


        .events-cta-grid {

            display: grid;

            grid-template-columns:
                minmax(0, 1fr)
                auto;

            gap: 50px;

            align-items: center;

        }


        .events-cta-title {

            color: #fff;

            font-size:
                clamp(
                    2rem,
                    4vw,
                    4rem
                );

            font-weight: 900;

            line-height: .94;

            letter-spacing: -.045em;

            text-transform: uppercase;

        }


        .events-cta-copy {

            max-width: 700px;

            margin-top: 14px;

            color:
                rgba(255,255,255,.36);

            font-size: .75rem;

            line-height: 1.68;

        }
/* =====================================================
           MODAL
        ====================================================== */

        .event-modal {

            position: fixed;

            inset: 0;

            z-index: 99999;

            display: none;

            align-items: center;

            justify-content: center;

            padding: 20px;

        }


        .event-modal.open {
            display: flex;
        }


        .event-modal-backdrop {

            position: absolute;

            inset: 0;

            background:
                rgba(0,0,0,.82);

        }


        .event-modal-panel {

            position: relative;

            z-index: 2;

            width:
                min(
                    700px,
                    100%
                );

            max-height:
                calc(100vh - 60px);

            overflow-y: auto;

            padding: 30px;

            border:
                1px solid
                var(--border);

            background:
                #0b0b0b;

        }


        .event-modal-close {

            position: absolute;

            top: 16px;
            right: 16px;

            width: 34px;
            height: 34px;

            border:
                1px solid
                var(--border);

            color: #fff;

            background:
                #111;

            cursor: pointer;

        }


        .event-modal-title {

            margin:
                0
                45px
                18px
                0;

            color: #fff;

            font-size: 1.6rem;

            font-weight: 900;

        }


        .event-modal-copy {

            color:
                rgba(255,255,255,.50);

            font-size: .80rem;

            line-height: 1.75;

            white-space: pre-line;

        }


        body.modal-open {
            overflow: hidden;
        }



        .calendar-browse {
            margin-top: 18px;
            margin-top: 96px;
            padding-top: 72px;
            border-top: 1px solid var(--border);
        }

        .calendar-section-title {
            margin-bottom: 0;
        }

        /* =====================================================
           RESPONSIVE
        ====================================================== */

        @media (max-width: 1199.98px) {

            .event-grid {

                grid-template-columns:
                    repeat(
                        2,
                        minmax(0, 1fr)
                    );

            }

        }


        @media (max-width: 991.98px) {

            .current-event {

                grid-template-columns:
                    1fr;

            }
.current-event-media {

                min-height: 300px;

            }

        }


        @media (max-width: 767.98px) {
.event-grid {

                grid-template-columns: 1fr;

            }


            .current-event-content {

                padding: 28px;

            }


            .events-cta-grid {

                grid-template-columns: 1fr;

            }

        }


        /* =====================================================
           CALENDAR / SEARCH
        ====================================================== */

        .event-tools {
            margin-top: 42px;
            border: 1px solid var(--border);
            background: #0d0d0d;
        }

        .event-tools-top {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 14px;
            padding: 16px;
            border-bottom: 1px solid var(--border);
        }

        .event-search-wrap {
            position: relative;
        }

        .event-search-wrap i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--red-bright);
            font-size: .78rem;
            pointer-events: none;
        }

        .event-search {
            width: 100%;
            min-height: 44px;
            padding: 0 14px 0 40px;
            border: 1px solid var(--border);
            outline: 0;
            color: #fff;
            background: #080808;
            font: inherit;
            font-size: .7rem;
        }

        .event-search:focus {
            border-color: var(--red-border);
            box-shadow: 0 0 0 3px rgba(189,0,0,.07);
        }

        .event-search::placeholder {
            color: rgba(255,255,255,.24);
        }

        .event-view-toggle {
            display: inline-flex;
            border: 1px solid var(--border);
            background: #080808;
        }

        .event-view-btn {
            min-height: 42px;
            padding: 0 14px;
            border: 0;
            border-right: 1px solid var(--border);
            color: rgba(255,255,255,.42);
            background: transparent;
            cursor: pointer;
            font-size: .57rem;
            font-weight: 800;
            letter-spacing: .07em;
            text-transform: uppercase;
        }

        .event-view-btn:last-child { border-right: 0; }

        .event-view-btn.active,
        .event-view-btn:hover {
            color: #fff;
            background: var(--red-soft);
        }

        .calendar-shell {
            padding: 16px;
        }

        .calendar-header {
            display: grid;
            grid-template-columns: auto minmax(0,1fr) auto;
            gap: 10px;
            align-items: center;
            margin-bottom: 14px;
        }

        .calendar-title {
            color: #fff;
            font-size: 1rem;
            font-weight: 900;
            letter-spacing: -.02em;
            text-align: center;
        }

        .calendar-nav {
            display: inline-flex;
            gap: 7px;
        }

        .calendar-nav-btn,
        .calendar-today-btn {
            min-height: 34px;
            padding: 0 11px;
            border: 1px solid var(--border);
            color: rgba(255,255,255,.60);
            background: #090909;
            cursor: pointer;
            font-size: .55rem;
            font-weight: 800;
            letter-spacing: .06em;
            text-transform: uppercase;
        }

        .calendar-nav-btn:hover,
        .calendar-today-btn:hover {
            color: #fff;
            border-color: var(--red-border);
        }

        .calendar-weekdays,
        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, minmax(0, 1fr));
        }

        .calendar-weekday {
            padding: 9px 8px;
            border-top: 1px solid var(--border);
            border-left: 1px solid var(--border);
            color: rgba(255,255,255,.26);
            font-size: .5rem;
            font-weight: 800;
            letter-spacing: .07em;
            text-align: center;
            text-transform: uppercase;
        }

        .calendar-weekday:last-child { border-right: 1px solid var(--border); }

        .calendar-day {
            min-height: 126px;
            padding: 8px;
            border-left: 1px solid var(--border);
            border-top: 1px solid var(--border);
            background: #0a0a0a;
        }

        .calendar-day:nth-child(7n) { border-right: 1px solid var(--border); }
        .calendar-day:nth-last-child(-n + 7) { border-bottom: 1px solid var(--border); }
        .calendar-day.outside { background: #080808; }

        .calendar-day-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 25px;
            height: 25px;
            margin-bottom: 7px;
            border-radius: 50%;
            color: rgba(255,255,255,.50);
            font-size: .58rem;
            font-weight: 800;
        }

        .calendar-day.today .calendar-day-number {
            color: #fff;
            background: var(--red);
        }

        .calendar-day.outside .calendar-day-number { opacity: .28; }

        .calendar-event {
            display: block;
            width: 100%;
            margin-top: 5px;
            padding: 6px 7px;
            overflow: hidden;
            border: 1px solid var(--red-border);
            color: rgba(255,255,255,.78);
            background: var(--red-soft);
            cursor: pointer;
            font-size: .51rem;
            line-height: 1.25;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .calendar-event:hover { color: #fff; background: rgba(189,0,0,.14); }

        .calendar-event-time {
            color: var(--red-bright);
            font-weight: 800;
        }

        .event-list-view[hidden],
        .calendar-shell[hidden] { display: none !important; }

        .search-empty {
            padding: 34px 18px;
            color: rgba(255,255,255,.32);
            font-size: .67rem;
            text-align: center;
        }

        /* Discord-style description markup */
        .discord-markup strong { color: rgba(255,255,255,.88); font-weight: 800; }
        .discord-markup em { color: rgba(255,255,255,.72); }
        .discord-markup u { text-underline-offset: 2px; }
        .discord-markup s { opacity: .62; }
        .discord-markup code {
            padding: 2px 5px;
            border: 1px solid rgba(255,255,255,.09);
            border-radius: 3px;
            color: rgba(255,255,255,.78);
            background: rgba(255,255,255,.055);
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
            font-size: .92em;
        }
        .discord-markup pre {
            margin: 10px 0 0;
            padding: 12px;
            overflow-x: auto;
            border: 1px solid var(--border);
            background: #070707;
            white-space: pre-wrap;
        }
        .discord-markup pre code { padding: 0; border: 0; background: none; }
        .discord-markup blockquote {
            margin: 9px 0 0;
            padding-left: 11px;
            border-left: 3px solid rgba(189,0,0,.55);
            color: rgba(255,255,255,.48);
        }
        .discord-markup a { color: #ff4f4f; text-decoration: underline; text-underline-offset: 2px; }
        .discord-markup br { line-height: 1.85; }
        .discord-markup h1,
        .discord-markup h2,
        .discord-markup h3 {
            margin: 1.05em 0 .42em;
            color: #fff;
            font-weight: 900;
            line-height: 1.15;
            letter-spacing: -.025em;
        }
        .discord-markup h1:first-child,
        .discord-markup h2:first-child,
        .discord-markup h3:first-child { margin-top: 0; }
        .discord-markup h1 { font-size: 1.32em; }
        .discord-markup h2 { font-size: 1.20em; }
        .discord-markup h3 { font-size: 1.08em; }
        .event-description.discord-markup h1,
        .event-description.discord-markup h2,
        .event-description.discord-markup h3,
        .current-event-description.discord-markup h1,
        .current-event-description.discord-markup h2,
        .current-event-description.discord-markup h3 {
            margin-top: .8em;
        }

        /* Add-to-calendar dropdown */
        .event-card.calendar-menu-open,
        .current-event.calendar-menu-open {
            z-index: 100;
        }

        .calendar-action-wrap { position: relative; }
        .calendar-menu {
            position: absolute;
            z-index: 50;
            right: 0;
            bottom: calc(100% + 7px);
            width: 210px;
            padding: 6px;
            border: 1px solid var(--border);
            background: #090909;
            box-shadow: 0 18px 50px rgba(0,0,0,.45);
        }
        .calendar-menu[hidden] { display: none; }
        .calendar-menu a {
            display: flex;
            align-items: center;
            gap: 9px;
            min-height: 36px;
            padding: 0 9px;
            color: rgba(255,255,255,.60);
            font-size: .58rem;
            font-weight: 700;
        }
        .calendar-menu a:hover { color: #fff; background: rgba(255,255,255,.045); }
        .calendar-menu i { color: var(--red-bright); width: 15px; text-align: center; }

        @media (max-width: 767.98px) {
            .event-tools-top { grid-template-columns: 1fr; }
            .event-view-toggle { width: 100%; }
            .event-view-btn { flex: 1; }
            .calendar-browse { margin-top: 70px; padding-top: 55px; }
            .calendar-shell { padding: 10px; overflow-x: auto; }
            .calendar-header { min-width: 720px; }
            .calendar-weekdays,
            .calendar-grid { min-width: 720px; }
            .calendar-day { min-height: 110px; }
        }