/* Event listings, modals, and event-carousel surfaces. */

.event-viewer {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.event-viewer__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start
}

.event-panel {
    background: var(--surface-card);
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, .2);
    padding: 1.25rem;
    box-shadow: 0 12px 28px #0f172a33;
    position: relative;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden
}

.event-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: .7
}

.event-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem
}

.event-panel__header h4 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5rem
}

.event-nav {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #3498dbe6;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: 0 6px 16px #3498db59;
    transition: transform .2s ease, box-shadow .2s ease
}

.event-nav:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px #3498db73
}

.event-track-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden
}

.event-nav--prev,
.event-nav--next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2
}

.event-nav--prev {
    left: -14px
}

.event-nav--next {
    right: -14px
}

.event-track {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: 0;
    overflow: hidden;
    scroll-snap-type: none;
    will-change: transform;
    transition: transform .6s ease
}

.event-viewer .event-card--past {
    scroll-snap-align: start
}

.event-track::-webkit-scrollbar {
    height: 8px
}

.event-track::-webkit-scrollbar-thumb {
    background: #94a3b866;
    border-radius: 999px
}

.event-card {
    flex: 0 0 320px;
    text-align: left;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 14px #00000014;
    overflow: hidden;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease
}

.event-card__media {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    background: #0f172a
}

@media (max-width: 768px) {
    .event-card__media {
        height: 30vh
    }
}

.event-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px
}

.event-card__image--placeholder {
    display: grid;
    place-items: center;
    color: #1f2937;
    font-weight: 600;
    width: 100%;
    height: 100%
}

.event-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px #0000002e
}

.event-card__image {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    background: #e2e8f0
}

@media (max-width: 768px) {
    .event-card__image {
        height: 30vh
    }
}

.event-card__content {
    padding: 1rem 1.1rem 1.2rem
}

.event-card__title {
    margin: 0 0 .5rem;
    font-size: 1.1rem;
    color: #1f2937
}

.event-card__meta {
    margin: 0 0 .75rem;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-size: .95rem
}

.event-card__meta i {
    margin-right: .45rem;
    color: var(--event-primary)
}

.event-card__summary {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5
}

.event-pager {
    display: flex;
    gap: .35rem;
    margin-top: .65rem;
    flex-wrap: wrap
}

.event-pager__dot {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease
}

.event-pager__dot.is-active,
.event-pager__dot:hover {
    background: var(--event-primary);
    color: #fff;
    transform: translateY(-2px);
    border-color: var(--event-primary)
}

.event-archive-cta {
    margin-top: .75rem
}

.event-archive-cta__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border-radius: 10px;
    background: #111827;
    color: #fff;
    font-weight: 700
}

body[data-theme=light] .event-archive-cta__link {
    background: var(--text-primary)
}

.event-viewer .event-card--past {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 1rem;
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    padding: 0;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    background: var(--surface-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(148, 163, 184, .22);
    box-shadow: 0 16px 28px #00000024;
    color: var(--text-primary);
    cursor: default
}

.event-viewer .event-card--past::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: .7;
    z-index: 3
}

.event-viewer .event-card--past .event-card__media {
    min-height: 360px;
    height: 100%;
    display: grid;
    place-items: center;
    background: var(--page-bg);
    border-right: 1px solid rgba(148, 163, 184, .2)
}

.event-viewer .event-card--past .event-card__image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: var(--page-bg)
}

.event-viewer .event-card--past .event-card__image--placeholder {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0f172a, #1f2937);
    color: #e5e7eb;
    font-weight: 700;
    text-align: center;
    padding: 1rem
}

.event-viewer .event-card--past .event-card__content {
    position: static;
    background: transparent;
    color: inherit;
    padding: 1.25rem 1.1rem;
    display: grid;
    gap: .65rem
}

.event-viewer .event-card--past .event-card__status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: #d4edda;
    color: #155724;
    font-weight: 700;
    font-size: .9rem;
    width: fit-content;
    margin: 0
}

.event-viewer .event-card--past .event-card__title {
    margin: 0 0 .35rem;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.35
}

.event-viewer .event-card--past .event-card__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    color: var(--text-secondary);
    font-size: .95rem
}

.event-viewer .event-card--past .event-card__meta i {
    margin-right: .45rem;
    color: var(--event-primary)
}

.event-viewer .event-card--past .event-card__summary {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.55
}

.event-viewer .event-card--past:hover {
    transform: none;
    box-shadow: 0 16px 28px #00000024
}

.event-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    overflow-y: auto;
    max-height: 700px;
    padding-right: .25rem
}

.event-list__item {
    width: 100%;
    text-align: left;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: .85rem 1rem;
    background: #f8f9fa;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease
}

.event-list__item:hover {
    transform: translate(4px);
    box-shadow: 0 8px 16px #00000014
}

.event-list__title {
    font-weight: 700;
    color: #1f2937;
    margin-bottom: .4rem
}

.event-list__date,
.event-list__location {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: #6b7280;
    font-size: .95rem
}

.event-empty {
    padding: 1rem 1.1rem;
    border-radius: 10px;
    border: 1px dashed #cbd5e1;
    color: #6b7280;
    background: #f8fafc
}

.event-detail {
    position: relative;
    background: var(--surface-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(148, 163, 184, .24);
    border-radius: 20px;
    padding: 1rem 1.25rem 1.25rem;
    box-shadow: 0 18px 34px #0f172a33;
    display: none;
    overflow: hidden
}

.event-detail::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: .7
}

.event-viewer.is-viewing-detail .event-viewer__layout {
    display: none
}

.event-viewer.is-viewing-detail .event-detail {
    display: block
}

.event-detail__back {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: none;
    background: var(--event-primary);
    color: #fff;
    padding: .5rem .85rem;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 8px 18px #3498db47
}

.event-detail__grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start
}

.event-detail__media {
    width: 100%;
    min-height: 260px;
    max-height: 420px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--page-bg);
    display: grid;
    place-items: center;
    border: 1px solid rgba(148, 163, 184, .25)
}

.event-detail__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: transparent
}

.event-detail__body {
    display: flex;
    flex-direction: column;
    gap: .65rem
}

.event-detail__status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: #d4edda;
    color: #155724;
    font-weight: 700;
    margin: 0;
    width: fit-content
}

.event-detail__title {
    margin: 0;
    font-size: 1.4rem
}

.event-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1rem;
    color: var(--text-secondary)
}

.event-detail__description {
    margin: .35rem 0 0;
    color: #4b5563;
    line-height: 1.6
}

.event-detail-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: #0f172ad9;
    z-index: var(--z-modal)
}

.event-detail-modal[hidden] {
    display: none
}

.event-detail-modal .modal-content {
    position: relative;
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 20px;
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.event-detail-modal .modal-header {
    position: relative;
    background: #020617;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .5rem
}

.event-detail-modal .modal-image {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    background: transparent;
    margin: 0 auto
}

.event-image-gallery {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.event-image-gallery__viewport {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center
}

.event-image-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    touch-action: auto;
    cursor: grab;
    width: 100%;
    scroll-behavior: smooth
}

.event-image-track::-webkit-scrollbar {
    display: none
}

.event-image-track.is-dragging {
    cursor: grabbing;
    user-select: none
}

.event-image-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100%;
    border-radius: 12px;
    overflow: hidden
}

.event-image-slide img {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
    display: block
}

.event-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, .85);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: transform .2s ease, background .2s ease, color .2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3)
}

body[data-theme=light] .event-gallery-nav {
    background: rgba(255, 255, 255, .95);
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15)
}

.event-gallery-nav:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.1);
    background: rgba(15, 23, 42, .95);
    color: #fff
}

body[data-theme=light] .event-gallery-nav:hover:not(:disabled) {
    background: #0f172a;
    color: #fff
}

.event-gallery-nav:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px
}

body[data-theme=light] .event-gallery-nav:focus-visible {
    outline-color: #0f172a
}

.event-gallery-nav:disabled,
.event-gallery-nav[hidden] {
    opacity: 0;
    pointer-events: none
}

.event-gallery-nav svg,
.event-gallery-nav .icon-inline {
    width: 20px;
    height: 20px;
    color: currentColor
}

.event-gallery-nav--prev {
    left: 12px
}

.event-gallery-nav--next {
    right: 12px
}

.event-gallery-thumbs {
    width: 100%;
    overflow: hidden
}

.event-gallery-thumbs[hidden] {
    display: none
}

.event-gallery-thumbs__track {
    display: flex;
    gap: 8px;
    padding: 8px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch
}

.event-gallery-thumbs__track::-webkit-scrollbar {
    height: 4px
}

.event-gallery-thumbs__track::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, .5);
    border-radius: 999px
}

.event-gallery-thumb {
    flex: 0 0 64px;
    height: 48px;
    border-radius: 6px;
    border: 2px solid rgba(148, 163, 184, .4);
    background: rgba(15, 23, 42, .6);
    padding: 0;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, opacity .2s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

body[data-theme=light] .event-gallery-thumb {
    background: rgba(241, 245, 249, .8)
}

.event-gallery-thumb:hover {
    transform: scale(1.05);
    border-color: rgba(148, 163, 184, .7)
}

.event-gallery-thumb:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    border-color: transparent
}

.event-gallery-thumb.is-active {
    border-color: #fff;
    opacity: 1;
    transform: scale(1.08)
}

body[data-theme=light] .event-gallery-thumb.is-active {
    border-color: #0f172a
}

.event-gallery-thumb:not(.is-active) {
    opacity: .6
}

.event-gallery-thumb__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.event-image-dots {
    --dot-color: rgba(148, 163, 184, .55);
    --dot-active: var(--accent, #2563eb);
    display: flex;
    justify-content: center;
    gap: .4rem
}

.event-detail-modal .event-image-dots,
.activities-immersive__modal-header .event-image-dots {
    --dot-color: rgba(255, 255, 255, .45);
    --dot-active: #fff
}

.event-image-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    border: none;
    background: var(--dot-color);
    padding: 0;
    cursor: pointer
}

.event-image-dot.is-active {
    background: var(--dot-active)
}

.event-detail-panel__image {
    display: block;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
    border-radius: 12px
}

.event-detail-modal .close-btn {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    border: none;
    background: #0f172ab3;
    color: #e5e7eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer
}

.event-detail-modal .modal-body {
    padding: 1.5rem 1.75rem 1.75rem
}

.event-detail-modal .modal-title {
    margin: 0 0 1rem;
    font-size: 1.5rem
}

.event-detail-modal .modal-info {
    display: grid;
    gap: .5rem;
    margin-bottom: 1.25rem
}

.event-detail-modal .info-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--text-secondary);
    font-size: .95rem
}

.event-detail-modal .info-item i {
    width: 1rem;
    text-align: center;
    color: var(--event-primary)
}

.event-detail-modal .modal-description {
    margin: 0 0 1.25rem;
    line-height: 1.6;
    color: var(--text-secondary);
    white-space: pre-line
}

.event-detail-modal .recurrence {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: 10px;
    background: #0f172a2e;
    border: 1px dashed rgba(148, 163, 184, .5);
    font-size: .95rem
}

.event-detail-modal .recurrence i {
    color: #eab308
}

.activities-immersive {
    --ai-accent: var(--accent-alt, #38bdf8);
    --ai-accent-strong: #339af0;
    --ai-status-upcoming: #40c057;
    --ai-status-expired: #ef4444;
    --ai-border: rgba(148, 163, 184, .25);
    --ai-card-bg: rgba(16, 24, 40, .52);
    --ai-sidebar-bg: rgba(15, 23, 42, .5);
    --ai-text-primary: var(--text-primary);
    --ai-text-secondary: var(--text-secondary);
    --ai-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35);
    --ai-carousel-gutter: clamp(10px, 3vw, 24px);
    --ai-card-width: clamp(248px, 68vw, 340px);
    --ai-glass-highlight: rgba(255, 255, 255, .28);
    --ai-glass-edge: rgba(148, 163, 184, .4);
    --ai-shell-bg: linear-gradient(155deg, rgba(15, 23, 42, .7), rgba(15, 23, 42, .38));
    --ai-shell-shadow: 0 26px 58px -32px rgba(2, 8, 23, .85);
    --ai-backdrop: blur(18px) saturate(155%);
    padding: 1rem 0 3.5rem;
    position: relative;
    width: 100%;
    max-width: 100%;
    isolation: isolate;
}

body[data-theme=light] .activities-immersive {
    --ai-card-bg: rgba(255, 255, 255, .72);
    --ai-sidebar-bg: rgba(255, 255, 255, .75);
    --ai-border: rgba(148, 163, 184, .35);
    --ai-text-primary: #0f172a;
    --ai-text-secondary: rgba(30, 41, 59, .72);
    --ai-shadow: 0 18px 38px -20px rgba(15, 23, 42, .2);
    --ai-glass-highlight: rgba(255, 255, 255, .85);
    --ai-glass-edge: rgba(148, 163, 184, .45);
    --ai-shell-bg: linear-gradient(155deg, rgba(255, 255, 255, .8), rgba(241, 245, 249, .65));
    --ai-shell-shadow: 0 24px 52px -32px rgba(15, 23, 42, .38);
    --ai-backdrop: blur(20px) saturate(175%);
}

.activities-immersive__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
    gap: 28px;
    align-items: flex-start;
    width: 100%
}

.activities-immersive__main {
    width: 100%;
    min-width: 0
}

.activities-immersive__sidebar-area {
    width: 100%;
    min-width: 0
}

.activities-immersive__sidebar {
    position: relative;
    background: var(--ai-shell-bg);
    border-radius: 12px;
    padding: clamp(16px, 2.5vw, 22px);
    box-shadow: var(--ai-shell-shadow), inset 0 1px 0 var(--ai-glass-highlight);
    max-height: 820px;
    overflow-y: auto;
    border: 1px solid var(--ai-glass-edge);
    backdrop-filter: var(--ai-backdrop);
    -webkit-backdrop-filter: var(--ai-backdrop);
    min-width: 0
}

.activities-immersive__sidebar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: .7;
    z-index: 3
}

.activities-immersive__section-title {
    font-size: 1.35rem;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ai-accent);
    color: var(--ai-text-primary);
    display: flex;
    align-items: center;
    gap: 10px
}

.activities-immersive__section-title i,
.activities-immersive__section-title .icon-inline {
    color: var(--ai-accent)
}

.activities-immersive__carousel-shell {
    position: relative;
    overflow: hidden;
    padding: 12px 0 20px;
    margin: 0;
    max-width: 100%;
    min-width: 0;
}

.activities-immersive__nav-btn {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--ai-glass-edge) 82%, #fff 18%);
    background: linear-gradient(145deg, rgba(15, 23, 42, .8), rgba(15, 23, 42, .58));
    color: #f8fafc;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 16px 30px rgba(2, 8, 23, .38), inset 0 1px 0 rgba(255, 255, 255, .2);
    backdrop-filter: blur(10px) saturate(145%);
    -webkit-backdrop-filter: blur(10px) saturate(145%);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, opacity .2s ease;
}

body[data-theme=light] .activities-immersive__nav-btn {
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(241, 245, 249, .82));
    color: #0f172a;
}

.activities-immersive__nav-btn:hover:not(:disabled),
.activities-immersive__nav-btn:focus-visible:not(:disabled) {
    transform: translateY(-50%) scale(1.06);
    border-color: color-mix(in srgb, var(--ai-accent) 45%, #fff 20%);
    box-shadow: 0 20px 36px rgba(2, 8, 23, .45), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.activities-immersive__nav-btn:focus-visible {
    outline: 3px solid var(--ai-accent);
    outline-offset: 2px;
}

.activities-immersive__nav-btn:disabled {
    opacity: .4;
    cursor: default;
}

.activities-immersive__nav-btn--prev {
    left: 6px;
}

.activities-immersive__nav-btn--next {
    right: 6px;
}

.activities-immersive__nav-btn[hidden] {
    display: none !important;
}

.activities-immersive__carousel {
    display: flex;
    gap: clamp(14px, 2.4vw, 24px);
    padding: 6px var(--ai-carousel-gutter) 10px;
    transition: transform .45s ease;
    cursor: grab;
    touch-action: auto;
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    max-width: 100%;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--ai-carousel-gutter);
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable
}

.activities-immersive__carousel.is-pointer-down,
.activities-immersive__carousel.is-dragging {
    cursor: grabbing;
    transition: none;
    -webkit-user-select: none;
    user-select: none
}

.activities-immersive__carousel::-webkit-scrollbar {
    display: none
}

.activities-immersive__card {
    --ai-card-scale: 1;
    --ai-card-lift: 0px;
    flex: 0 0 var(--ai-card-width);
    max-width: 100%;
    background: var(--ai-card-bg);
    border-radius: 12px;
    box-shadow: var(--ai-shadow);
    overflow: hidden;
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease, opacity .3s ease, filter .3s ease;
    border: 1px solid var(--ai-glass-edge);
    color: var(--ai-text-primary);
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transform: translateY(var(--ai-card-lift)) scale(var(--ai-card-scale));
    transform-origin: left center;
    backdrop-filter: var(--ai-backdrop);
    -webkit-backdrop-filter: var(--ai-backdrop)
}

.activities-immersive__card:hover {
    --ai-card-lift: -8px;
    box-shadow: 0 18px 34px #00000052;
    border-color: color-mix(in srgb, var(--ai-accent) 35%, var(--ai-glass-edge))
}

.activities-immersive__card:focus-visible {
    outline: 3px solid var(--ai-accent);
    outline-offset: 4px;
    --ai-card-lift: -6px;
    border-color: color-mix(in srgb, var(--ai-accent) 45%, var(--ai-glass-edge));
    opacity: 1;
    filter: none
}

@media (min-width:900px) {
    .activities-immersive__carousel.has-active .activities-immersive__card {
        --ai-card-scale: .92;
        opacity: .62;
        filter: saturate(.75);
    }

    .activities-immersive__carousel.has-active .activities-immersive__card.is-active {
        --ai-card-scale: 1.05;
        --ai-card-lift: -2px;
        opacity: 1;
        filter: none;
        z-index: 2;
        border-color: rgba(56, 189, 248, .62);
        box-shadow: 0 22px 44px rgba(2, 8, 23, .46), inset 0 1px 0 rgba(255, 255, 255, .42);
    }

    .activities-immersive__carousel.has-active .activities-immersive__card.is-active:hover {
        --ai-card-lift: -6px;
    }
}

.activities-immersive__card-image {
    width: 100%;
    max-height: 240px;
    height: 240px;
    display: block;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none
}

.activities-immersive__card-content {
    padding: 18px;
    display: grid;
    gap: 10px;
    min-width: 0
}

.activities-immersive__card-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--ai-text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.activities-immersive__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ai-text-secondary);
    font-size: .95rem;
    flex-wrap: wrap
}

.activities-immersive__card-title,
.activities-immersive__meta,
.activities-immersive__expired-title,
.activities-immersive__expired-date,
.activities-immersive__expired-location,
.activities-immersive__modal-row,
.activities-immersive__modal-text {
    overflow-wrap: anywhere;
    word-break: break-word
}

.activities-immersive__meta span:not(.activities-immersive__badge),
.activities-immersive__expired-date span,
.activities-immersive__expired-location span,
.activities-immersive__modal-row span {
    min-width: 0
}

.activities-immersive__meta i {
    color: var(--ai-accent);
    width: 18px;
    text-align: center
}

.activities-immersive__badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 700;
    border: 1px solid transparent
}

.activities-immersive__badge--upcoming {
    background: #40c05729;
    color: var(--ai-status-upcoming);
    border-color: var(--ai-status-upcoming)
}

.activities-immersive__badge--past {
    background: #ef44442e;
    color: var(--ai-status-expired);
    border-color: var(--ai-status-expired)
}

.activities-immersive__badge--muted {
    background: #ffffff0f;
    color: var(--ai-text-primary);
    border-color: var(--ai-border)
}

body[data-theme=light] .activities-immersive__badge--muted {
    background: #94a3b81f;
    color: #0f172a
}

.activities-immersive__thumbs[hidden] {
    display: none !important
}

.activities-immersive__thumbs {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin: 12px var(--ai-carousel-gutter) 0;
    padding: 4px 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    cursor: grab
}

.activities-immersive__thumbs.is-pointer-down,
.activities-immersive__thumbs.is-dragging {
    cursor: grabbing;
    -webkit-user-select: none;
    user-select: none;
}

.activities-immersive__thumb {
    min-width: clamp(112px, 20vw, 156px);
    max-width: 180px;
    border: 1px solid var(--ai-glass-edge);
    background: color-mix(in srgb, var(--ai-card-bg) 95%, transparent);
    color: var(--ai-text-primary);
    border-radius: 12px;
    padding: 6px;
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 8px;
    align-items: center;
    text-align: left;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
    box-shadow: 0 6px 16px rgba(2, 8, 23, .22);
    backdrop-filter: blur(12px) saturate(145%);
    -webkit-backdrop-filter: blur(12px) saturate(145%);
}

.activities-immersive__thumb:hover,
.activities-immersive__thumb:focus-visible,
.activities-immersive__thumb.is-active {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ai-accent) 45%, #fff 6%);
    box-shadow: 0 12px 24px rgba(2, 8, 23, .32);
}

.activities-immersive__thumb:focus-visible {
    outline: 2px solid var(--ai-accent);
    outline-offset: 2px;
}

.activities-immersive__thumb:not(.is-active) {
    opacity: .78
}

.activities-immersive__thumb-image {
    width: 46px;
    height: 46px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    pointer-events: none
}

.activities-immersive__thumb-label {
    min-width: 0;
    display: grid;
    gap: 2px
}

.activities-immersive__thumb-title {
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.activities-immersive__thumb-date {
    font-size: .72rem;
    color: var(--ai-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.activities-immersive__expired-list {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.activities-immersive__expired {
    display: block;
    width: 100%;
    text-align: left;
    background: var(--ai-card-bg);
    border-radius: 10px;
    padding: 16px;
    border-left: 4px solid var(--ai-status-expired);
    transition: transform .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor: pointer;
    box-shadow: var(--ai-shadow), inset 0 1px 0 var(--ai-glass-highlight);
    border: 1px solid var(--ai-glass-edge);
    color: var(--ai-text-primary);
    min-width: 0;
    backdrop-filter: var(--ai-backdrop);
    -webkit-backdrop-filter: var(--ai-backdrop)
}

.activities-immersive__expired:hover {
    transform: translateX(4px);
    box-shadow: 0 10px 22px #0000003d;
    border-color: color-mix(in srgb, var(--ai-accent) 30%, var(--ai-glass-edge))
}

.activities-immersive__expired:focus-visible {
    outline: 3px solid var(--ai-accent);
    outline-offset: 3px
}

.activities-immersive__expired-title {
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--ai-text-primary);
    line-height: 1.4
}

.activities-immersive__expired-date,
.activities-immersive__expired-location {
    color: var(--ai-text-secondary);
    font-size: .95rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45
}

.activities-immersive__expired-date i,
.activities-immersive__expired-date .icon-inline,
.activities-immersive__expired-location i,
.activities-immersive__expired-location .icon-inline {
    color: var(--ai-accent)
}

.activities-immersive__empty {
    background: #ffffff0a;
    border: 1px dashed var(--ai-border);
    border-radius: 12px;
    padding: 18px;
    color: var(--ai-text-secondary)
}

body[data-theme=light] .activities-immersive__empty {
    background: #f8fafccc
}

.activities-immersive__modal {
    position: fixed;
    inset: 0;
    background: rgba(3, 7, 18, .93);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    padding: 20px;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: none
}

body[data-theme=light] .activities-immersive__modal {
    background: rgba(15, 23, 42, .65)
}

.activities-immersive__modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto
}

body.has-modal-open {
    overflow: hidden
}

.activities-immersive__modal-dialog {
    position: relative;
    background: rgba(9, 12, 27, .98);
    width: 100%;
    max-width: 760px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, .35);
    box-shadow: 0 22px 60px #01030abf;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    color: var(--ai-text-primary)
}

.activities-immersive__modal-dialog::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
    opacity: .7;
    z-index: 3
}

body[data-theme=light] .activities-immersive__modal-dialog {
    background: rgba(255, 255, 255, .98);
    border-color: rgba(148, 163, 184, .35);
    box-shadow: 0 25px 60px -20px rgba(15, 23, 42, .35)
}

.activities-immersive__modal-header {
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .25rem;
    padding: 12px
}

body[data-theme=light] .activities-immersive__modal-header {
    background: #fff
}

.activities-immersive__modal-body {
    padding-top: 12px;
    padding-bottom: 24px;
    overflow-y: auto
}

.activities-immersive__modal-header,
.activities-immersive__modal-body {
    padding-left: 5px;
    padding-right: 5px
}

.activities-immersive__image-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .6);
    backdrop-filter: blur(2px);
    transition: opacity .2s ease;
    z-index: 1
}

.activities-immersive__image-loader[hidden] {
    display: none
}

.activities-immersive__spinner {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    border: 3px solid rgba(255, 255, 255, .35);
    border-top-color: var(--accent-alt, #38bdf8);
    animation: activities-immersive__spin .9s linear infinite
}

@keyframes activities-immersive__spin {
    to {
        transform: rotate(360deg)
    }
}

.activities-immersive__modal-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 420px;
    object-fit: contain;
    display: block;
    background: #000;
    margin: 0 auto
}

body[data-theme=light] .activities-immersive__modal-image {
    background: #fff
}

.activities-immersive__close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #000000a6;
    color: #fff;
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: transform .2s ease, background .2s ease
}

.activities-immersive__close:hover {
    background: #000c;
    transform: scale(1.08)
}

body[data-theme=light] .activities-immersive__close {
    background: rgba(15, 23, 42, .85);
    color: #fff
}

body[data-theme=light] .activities-immersive__close:hover {
    background: rgba(15, 23, 42, .95)
}


.activities-immersive__modal-title {
    font-size: 1.7rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--ai-text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap
}

.activities-immersive__modal-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 22px
}

.activities-immersive__modal-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--ai-text-secondary);
    font-size: 1rem
}

.activities-immersive__modal-row i,
.activities-immersive__modal-row .icon-inline {
    color: var(--ai-accent);
    width: 18px;
    text-align: center
}

.activities-immersive__modal-text {
    margin-bottom: 22px;
    line-height: 1.6;
    font-size: 1rem;
    color: var(--ai-text-primary);
    font-family: Instrument Sans, ui-sans-serif, system-ui, sans-serif
}

.activities-immersive__modal-text p,
.activities-immersive__modal-text ul,
.activities-immersive__modal-text ol,
.activities-immersive__modal-text h1,
.activities-immersive__modal-text h2,
.activities-immersive__modal-text h3,
.activities-immersive__modal-text h4,
.activities-immersive__modal-text h5,
.activities-immersive__modal-text h6,
.activities-immersive__modal-text blockquote,
.activities-immersive__modal-text pre {
    margin: 0;
    padding: 0
}

.activities-immersive__modal-text ul,
.activities-immersive__modal-text ol {
    padding-left: 1.5rem
}

.activities-immersive__modal-text li {
    margin: 0
}

.activities-immersive__recurrence {
    background: #ffffff0a;
    padding: 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    border-left: 4px solid var(--ai-status-expired);
    color: var(--ai-text-primary);
    gap: 10px
}

body[data-theme=light] .activities-immersive__recurrence {
    background: #f8fafce6
}

.activities-immersive__recurrence i,
.activities-immersive__recurrence .icon-inline {
    color: var(--ai-status-expired)
}

@media (min-width:1025px) {
    .activities-immersive {
        --ai-carousel-gutter: clamp(18px, 3vw, 36px);
        --ai-card-width: 350px
    }

    .activities-immersive__carousel-shell {
        padding: 16px 0 20px
    }

    .activities-immersive__carousel {
        gap: clamp(22px, 2vw, 32px)
    }
}

@media (min-width:1024px) {
    .activities-immersive__modal-dialog {
        flex-direction: row;
        max-width: 980px;
        align-items: stretch
    }

    .activities-immersive__modal-header {
        flex: 0 0 45%;
        position: static
    }

    .activities-immersive__modal-image {
        height: auto;
        width: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain
    }

    .activities-immersive__modal-body {
        flex: 1;
        overflow-y: auto
    }

    .activities-immersive__close {
        position: absolute;
        top: 16px;
        right: 16px
    }
}

/* XL: Desktop breakpoint (1220px) - consolidated from 1100px */
@media (max-width:1220px) {
    .activities-immersive__layout {
        grid-template-columns: 1fr
    }

    .activities-immersive__sidebar-area {
        min-width: auto;
        width: 100%
    }

    .activities-immersive__sidebar {
        max-height: none;
        min-width: auto
    }
}

/* MD: Tablet breakpoint (768px) */
@media (max-width:768px) {
    .activities-immersive__modal {
        align-items: flex-start;
        padding: clamp(20px, 6vw, 56px) 8px
    }

    .activities-immersive__modal-dialog {
        max-height: none;
        margin-top: 0;
        max-width: calc(100vw - 16px)
    }

    .activities-immersive__modal-body {
        overflow: visible
    }

    .event-gallery-nav {
        width: 38px;
        height: 38px
    }

    .event-gallery-nav svg,
    .event-gallery-nav .icon-inline {
        width: 16px;
        height: 16px
    }

    .event-gallery-nav--prev {
        left: 8px
    }

    .event-gallery-nav--next {
        right: 8px
    }

    .event-gallery-thumb {
        flex: 0 0 52px;
        height: 40px
    }
}

/* LG: Small laptop breakpoint (1024px) - consolidated from 900px */
@media (max-width:1024px) {
    .activities-immersive__nav-btn {
        display: none !important;
    }
}

/* SM: Small phone breakpoint (640px) - consolidated from 540px */
@media (max-width:640px) {
    .activities-immersive__card {
        flex-basis: calc(100% - (var(--ai-carousel-gutter) * 2))
    }

    .activities-immersive__carousel {
        scroll-snap-type: x mandatory
    }

    .activities-immersive__modal-title {
        font-size: 1.5rem
    }
}

@media (max-width:420px) {
    .activities-immersive {
        --ai-carousel-gutter: .625rem;
    }

    .activities-immersive__thumb {
        min-width: 92px;
        max-width: 118px;
        grid-template-columns: 34px 1fr;
        gap: 5px;
    }

    .activities-immersive__thumb-image {
        width: 34px;
        height: 34px;
    }

    .activities-immersive__modal {
        padding-inline: 4px;
    }

    .activities-immersive__modal-dialog {
        max-width: calc(100vw - 8px)
    }

    .activities-immersive__modal-title {
        font-size: 1.3rem;
    }
}

/* XL: Desktop breakpoint (1220px) - consolidated from 1100px */
@media (max-width:1220px) {
    .event-viewer__layout {
        grid-template-columns: 1fr
    }

    .event-panel--sidebar {
        max-height: none
    }
}

/* LG: Small laptop breakpoint (1024px) - consolidated from 900px */
@media (max-width:1024px) {
    .event-track {
        gap: 1rem
    }

    .event-card {
        flex-basis: 280px
    }

    .event-viewer .event-card--past {
        grid-template-columns: 1fr
    }

    .event-viewer .event-card--past .event-card__media {
        border-right: 0;
        border-bottom: 1px solid rgba(148, 163, 184, .2)
    }
}

@media (max-width:768px) {
    .event-viewer__intro {
        flex-direction: column
    }

    .event-panel__header {
        flex-direction: column;
        align-items: flex-start
    }

    .event-panel__actions {
        align-self: flex-end
    }

    .admin-header {
        flex-direction: column;
        align-items: flex-start
    }

    .form-grid {
        grid-template-columns: 1fr
    }
}