/* Budget the complete first screen while leaving the archive scrollable. */
.exa-events-hero {
 --events-nav-height: 0px;
 --events-title-height: 0px;
 --events-side-inset: clamp(.75rem, 3vw, 2.5rem);
 --events-admin-height: 0px;
 --events-viewport-height: 100vh;
 --events-top-offset: calc(var(--events-nav-height) + var(--events-title-height) + var(--events-admin-height));
 box-sizing: border-box;
 padding-bottom: calc(clamp(1rem, 5svh, 3rem) + env(safe-area-inset-bottom, 0px));
 display: grid;
 grid-template-rows: minmax(0,1fr) auto;
 row-gap: clamp(.625rem, 2svh, 1.25rem);
 height: max(0px, calc(var(--events-viewport-height) - var(--events-top-offset)));
 min-height: 0;
}
@supports (height: 100svh) {
 .exa-events-hero { --events-viewport-height: 100svh; }
}
.exa-events-stage {
 position: relative;
 container-type: size;
 padding-inline: var(--events-side-inset);
 box-sizing: border-box;
 height: 100%;
 padding-block: 3px;
 min-height: 0;
 /* Native transitions cannot overlap the separate information row. */
 overflow: clip;
}
.exa-events-stage > sr7-module { position: relative; z-index: 1; width: 100%; height: 100% !important; overflow: visible !important; }
.exa-events-stage :is(sr7-content, sr7-carousel) { overflow: visible !important; }
/* Mask the final composited slide, including video, glass and corner layers. */
.exa-events-stage sr7-slide {
 border-radius: 12px !important;
 overflow: hidden !important;
 clip-path: inset(0 round 12px) !important;
 mask:
  radial-gradient(circle at 12px 12px, #000 11.5px, transparent 12px) top left / 24px 24px no-repeat,
  radial-gradient(circle at 12px 12px, #000 11.5px, transparent 12px) top right / 24px 24px no-repeat,
  radial-gradient(circle at 12px 12px, #000 11.5px, transparent 12px) bottom right / 24px 24px no-repeat,
  radial-gradient(circle at 12px 12px, #000 11.5px, transparent 12px) bottom left / 24px 24px no-repeat,
  linear-gradient(#000 0 0) center / calc(100% - 24px) 100% no-repeat,
  linear-gradient(#000 0 0) center / 100% calc(100% - 24px) no-repeat;
}
.exa-events-stage .exa-events-arrow { z-index: 80; display: flex; align-items: center; justify-content: center; opacity: .9; pointer-events: auto; }
.exa-events-stage .exa-events-arrow--prev { left: calc(max(var(--events-side-inset), (100% - var(--events-slide-width, 100%)) / 2) - var(--events-slide-gap, 15px) / 2 - 24px); }
.exa-events-stage .exa-events-arrow--next { right: calc(max(var(--events-side-inset), (100% - var(--events-slide-width, 100%)) / 2) - var(--events-slide-gap, 15px) / 2 - 24px); }
.exa-events-stage .exa-events-toggle { position: absolute; z-index: 80; top: 15px; right: calc(max(var(--events-side-inset), (100% - var(--events-slide-width, 100%)) / 2) + 12px); }
.exa-events-stage :is(.exa-events-arrow, .exa-events-toggle) { border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); color: #fff; opacity: 1; touch-action: manipulation; }
.exa-events-stage :is(.exa-events-arrow, .exa-events-toggle):is(:hover,:focus-visible) { background: rgba(255,255,255,.26); }
.exa-events-toggle::before { content: none; }
.exa-events-toggle svg { width: 1.125rem; height: 1.125rem; }
/* The text's entire rectangle sits below the triangle diagonal (x/w + y/h > 1). */
.exa-events-hero .exa-event-date-badge { padding: 0; }
.exa-events-hero .exa-event-date-badge > span { position: absolute; left: 42%; right: 6%; bottom: 20%; height: 18%; max-width: none; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; line-height: 1.6; white-space: nowrap; overflow-wrap: normal; }
.exa-events-hero[data-lang="ja"] .exa-event-date-badge > span { left: 47%; right: 3%; bottom: 17%; height: 25%; justify-content: center; text-align: center; line-height: 1.1; }
.exa-events-hero[data-lang="ja"] .exa-event-date-badge > span[data-events-date-wide] { left: 45%; right: 3%; bottom: 13%; height: 58%; justify-content: center; align-items: flex-end; text-align: center; white-space: normal; overflow-wrap: anywhere; line-height: 1.04; }
/* Cover crops uniformly; it never stretches the intrinsic media aspect ratio. */
.exa-events-stage sr7-media video { object-fit: cover !important; object-position: center; }

/* Clip neighboring carousel cards on phones; the active card fills its frame. */
@media (max-width: 48rem) {
 .exa-events-stage sr7-module { clip-path: inset(-3px); }
 /* Use the exA-Arcadia Games glass control style on small viewports. */
 .exa-events-stage .exa-events-arrow { display: inline-flex; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.16); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); color: rgba(255,255,255,.82); opacity: 1; touch-action: manipulation; transition: background-color .25s ease, color .25s ease, transform .35s cubic-bezier(.4,0,.2,1); }
 .exa-events-stage .exa-events-arrow:is(:hover,:focus-visible) { background: rgba(255,255,255,.26); color: #fff; transform: translateY(-50%) scale(1.06); }
 .exa-events-stage .exa-events-arrow:active { transform: translateY(-50%) scale(.96); }
 .exa-events-stage .exa-events-arrow svg { width: 24px; height: 24px; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
}

/* Keep Japanese mobile dates on one line inside the shared corner geometry. */
@media (max-width: 48rem), (max-width: 64rem) and (orientation: landscape) and (max-height: 35rem) {
 .exa-events-hero[data-lang="ja"] .exa-event-date-badge > span,
 .exa-events-hero[data-lang="ja"] .exa-event-date-badge > span[data-events-date-wide] { left: 24%; right: 3%; bottom: 8%; height: 20%; align-items: center; white-space: nowrap; overflow-wrap: normal; }
}