/* The landing-page event carousel (EventCarousel.razor) and the /events grid card (EventCard.razor).

   Operator 2026-10-04, picked from CoreDesign/samples/carousel-card-panel.htm:
   - a darker inset panel (panel B) inside the Surface slide, so each slide reads as a framed tile;
   - the event title in a stacked extrude (option 3 of carousel-title-depth.htm): three 1px steps
     of deepening emerald down-right plus a soft shadow - a game-title feel.
   The description under the title is module-owned; each discipline colours its own
   *-event-card-description class in its stylesheet. */

.hax-carousel-panel {
    width: 100%;
    height: 100%;
    padding: 16px 24px;
    border-radius: 8px;
    background-color: #032219;   /* between Background #01211A and Surface #053D2E - panel B */
}

.hax-carousel-title {
    /* The markup's font-weight-bold loses to MudBlazor's .mud-typography-h4 weight; this sheet
       loads after MudBlazor, so the same-specificity rule here wins (operator 2026-10-04: bold). */
    font-weight: 700;
    text-shadow:
        1px 1px 0 #0A6B50,
        2px 2px 0 #08573F,
        3px 3px 0 #064531,
        4px 4px 6px rgba(0, 0, 0, 0.5);
}

@media (max-width: 959.98px) {
    /* Phone / tablet: the content stacks (icon above text), so give it the room back. */
    .hax-carousel-panel {
        padding: 12px;
    }

    /* One size step down on the stacked layout (operator 2026-10-04, iPhone 16 Pro Max view): the
       icon 110 -> 88px and the title Typo.h4 -> Typo.h5, so the name stops wrapping word by word. */
    .hax-carousel-icon {
        width: 88px;
        height: 88px;
    }

    .hax-carousel-title {
        font-size: 1.5rem;
        line-height: 1.334;
    }
}

/* The /events grid card (EventCard.razor) - the same look applied to what is there (operator
   2026-10-04): icon, name and description on the inset panel, the action button left on the
   outer Surface. flex-grow keeps cards in a row the same height. */

.hax-event-card-panel {
    width: 100%;
    flex-grow: 1;
    padding: 16px;
    border-radius: 8px;
    background-color: #032219;   /* same panel B as the carousel */
}

.hax-event-card-title {
    font-weight: 700;
    color: #F8FAFC;
    /* The carousel's extrude scaled to the smaller h6: two 1px steps, not three. */
    text-shadow:
        1px 1px 0 #0A6B50,
        2px 2px 0 #08573F,
        3px 3px 5px rgba(0, 0, 0, 0.5);
}

/* "Current Games" over the carousel frame (operator 2026-10-04). Positioned over the slides so it
   does not move with them; pointer-events off so a click still lands on the slide beneath. */

.hax-carousel-frame {
    position: relative;
}

.hax-carousel-label {
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    z-index: 2;
    text-align: center;
    pointer-events: none;
    font-size: 1.5rem;           /* MudBlazor Typo.h5 */
    font-weight: 700;
    line-height: 1.334;
    color: #F8FAFC;
    text-shadow:
        1px 1px 0 #0A6B50,
        2px 2px 0 #08573F,
        3px 3px 5px rgba(0, 0, 0, 0.5);
}