@import '_content/SharedUI/SharedUI.fxdxixwovn.bundle.scp.css';

/* /Components/Events/EventCard.razor.rz.scp.css */
/* Event card. Tokens only — no hex, no magic numbers. */

.event-card[b-xt55ak5eyp] {
    height: 100%;
}

.event-card-link[b-xt55ak5eyp] {
    color: inherit;
    display: block;
    height: 100%;
    text-decoration: none;
}

.event-card-link[aria-disabled="true"][b-xt55ak5eyp] {
    cursor: default;
    pointer-events: none;
}

.event-card-link:focus-visible[b-xt55ak5eyp] {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
}

/* Holds the placeholder look itself, at the image's own ratio, so a 404 leaves a neutral box of
   the right size instead of a broken-image icon. */
.event-card-media[b-xt55ak5eyp] {
    aspect-ratio: 16 / 10;
    background: var(--bs-color-surface-subtle);
    border-radius: var(--bs-radius-lg);
    overflow: hidden;
}

/* width/height are set on the element too; aspect-ratio keeps the box reserved while loading
   so the grid does not shift (CLS). */
.event-card-image[b-xt55ak5eyp],
.event-card-image-placeholder[b-xt55ak5eyp] {
    aspect-ratio: 16 / 10;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.event-card-image-placeholder[b-xt55ak5eyp] {
    background: var(--bs-color-surface-subtle);
}

.event-card-body[b-xt55ak5eyp] {
    display: flex;
    gap: var(--bs-space-3);
    padding-top: var(--bs-space-3);
}

/* Date block: large day over a small uppercase month/year. */
.event-card-date[b-xt55ak5eyp] {
    flex: 0 0 auto;
    line-height: 1;
    text-align: center;
}

.event-card-day[b-xt55ak5eyp] {
    color: var(--bs-color-text-primary);
    display: block;
    font-size: 1.875rem;
    font-weight: 800;
}

.event-card-month[b-xt55ak5eyp] {
    color: var(--bs-color-text-primary);
    display: block;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-top: var(--bs-space-1);
}

.event-card-text[b-xt55ak5eyp] {
    min-width: 0;
}

.event-card-title[b-xt55ak5eyp] {
    color: var(--bs-color-text-primary);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-card-location[b-xt55ak5eyp] {
    align-items: center;
    color: var(--bs-color-text-secondary);
    display: flex;
    font-size: 0.875rem;
    gap: var(--bs-space-1);
    margin: var(--bs-space-1) 0 0;
    min-width: 0;
}

.event-card-pin[b-xt55ak5eyp] {
    flex: 0 0 auto;
}

.event-card-location span[b-xt55ak5eyp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Events/EventDetailsGallery.razor.rz.scp.css */
/* Event detail gallery — main image plus optional thumbnail strip (RCP-B2-S3). */

.event-landing-gallery[b-88s7q842he] {
    display: flex;
    flex-direction: column;
    gap: var(--bs-space-3);
}

[b-88s7q842he] .event-landing-gallery-main {
    border-radius: var(--bs-radius-lg);
    overflow: hidden;
}

[b-88s7q842he] .event-landing-gallery-image {
    aspect-ratio: 16 / 10;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.event-landing-gallery-thumbs[b-88s7q842he] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bs-space-2);
}

.event-landing-gallery-thumb[b-88s7q842he] {
    background: var(--bs-color-surface-default);
    border: 2px solid transparent;
    border-radius: var(--bs-radius-md);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: border-color 120ms ease;
    width: 72px;
}

.event-landing-gallery-thumb img[b-88s7q842he] {
    aspect-ratio: 4 / 3;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.event-landing-gallery-thumb.is-selected[b-88s7q842he] {
    border-color: var(--bs-color-action-primary);
}

.event-landing-gallery-thumb:focus-visible[b-88s7q842he] {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
}
/* /Components/Frontpage/HomeCategoryTiles.razor.rz.scp.css */
/* Category shortcut tiles: white card, category-tinted icon square.
   Category colours are supporting colours — brand blue and green remain the site identity. */

.home-categories[b-rl80ckje9c] {
    width: min(91%, 1120px);
    margin: var(--home-section-gap) auto 0;
}

/* .home-section-header/-title/-link are defined once in web.css — the copies that used to sit
   here are what made this section's heading a different size from the others. */

[b-rl80ckje9c] .home-category-grid {
    display: grid;
    gap: var(--bs-space-3);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

[b-rl80ckje9c] .home-category-tile {
    align-items: center;
    /* 5:4 — the tile height follows the column width the grid hands it. */
    aspect-ratio: 5 / 4;
    background: var(--bs-color-surface-default);
    border: 0.5px solid var(--bs-color-border-subtle);
    border-radius: var(--bs-radius-md);
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--bs-space-2);
    justify-content: center;
    padding: var(--bs-space-4) var(--bs-space-2);
    text-align: center;
    text-decoration: none;
    /* Cheap, compositor-only transition — no layout or paint thrash on hover. */
    transition: border-color 120ms ease;
}

[b-rl80ckje9c] .home-category-tile:hover {
    border-color: var(--bs-color-border-default);
}

[b-rl80ckje9c] .home-category-tile:focus-visible {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
}

[b-rl80ckje9c] .home-category-icon {
    align-items: center;
    border-radius: var(--bs-radius-md);
    display: inline-flex;
    height: 54px;
    justify-content: center;
    width: 54px;
}

/* Surface + icon pairs from BilletsalgTokens.Color.Category. */
[b-rl80ckje9c] .home-category-icon--concert {
    background: var(--bs-color-category-concert-surface);
    color: var(--bs-color-category-concert-icon);
}

[b-rl80ckje9c] .home-category-icon--sport {
    background: var(--bs-color-category-sport-surface);
    color: var(--bs-color-category-sport-icon);
}

[b-rl80ckje9c] .home-category-icon--experience {
    background: var(--bs-color-category-experience-surface);
    color: var(--bs-color-category-experience-icon);
}

[b-rl80ckje9c] .home-category-icon--festival {
    background: var(--bs-color-category-festival-surface);
    color: var(--bs-color-category-festival-icon);
}

[b-rl80ckje9c] .home-category-icon--comedy {
    background: var(--bs-color-category-comedy-surface);
    color: var(--bs-color-category-comedy-icon);
}

[b-rl80ckje9c] .home-category-icon--family {
    background: var(--bs-color-category-family-surface);
    color: var(--bs-color-category-family-icon);
}

/* MudIcon renders an SVG with fill="currentColor", so the tint above flows through. */
[b-rl80ckje9c] .home-category-icon .mud-icon-root {
    height: 25px;
    width: 25px;
}

[b-rl80ckje9c] .home-category-label {
    color: var(--bs-color-text-primary);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* Three across on tablet, two on phones — never a horizontal scrollbar. */
@media (max-width: 959px) {
    [b-rl80ckje9c] .home-category-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    [b-rl80ckje9c] .home-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* /Components/Frontpage/HomeCityCards.razor.rz.scp.css */
/* City cards on accent surfaces, in a native scroll-snap carousel.
   Tokens only. Swiping is CSS; the arrows are progressive enhancement. */

.home-city-section[b-dg2euvg3a8] {
    width: min(91%, 1120px);
    margin: var(--home-section-gap) auto 0;
}

/* .home-section-header/-title are defined once in web.css. */

/* Arrows appear only once home-carousel.js has wired them up. */
.home-carousel-controls[b-dg2euvg3a8] {
    display: none;
    flex: 0 0 auto;
    gap: var(--bs-space-2);
}

.home-carousel--ready .home-carousel-controls[b-dg2euvg3a8] {
    display: flex;
}

.home-carousel-button[b-dg2euvg3a8] {
    align-items: center;
    background: var(--bs-color-surface-default);
    border: 1px solid var(--bs-color-border-default);
    border-radius: var(--bs-radius-pill);
    color: var(--bs-color-text-primary);
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    transition: border-color 120ms ease, opacity 120ms ease;
    width: 40px;
}

.home-carousel-button:hover:not(:disabled)[b-dg2euvg3a8] {
    border-color: var(--bs-color-border-strong);
}

.home-carousel-button:disabled[b-dg2euvg3a8] {
    color: var(--bs-color-text-disabled);
    cursor: default;
    opacity: 0.5;
}

.home-carousel-button:focus-visible[b-dg2euvg3a8] {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
}

.home-city-scroller[b-dg2euvg3a8] {
    display: grid;
    gap: var(--bs-space-4);
    grid-auto-columns: minmax(260px, 1fr);
    grid-auto-flow: column;
    list-style: none;
    margin: 0;
    overflow-x: auto;
    padding: 0 0 var(--bs-space-2);
    scroll-snap-type: x mandatory;
    /* Hide the native scrollbar; the arrows and swipe are the affordance. */
    scrollbar-width: none;
}

.home-city-scroller[b-dg2euvg3a8]::-webkit-scrollbar {
    display: none;
}

/* Four across on wide screens, matching the reference. */
@media (min-width: 1100px) {
    .home-city-scroller[b-dg2euvg3a8] {
        grid-auto-columns: minmax(0, calc((100% - (3 * var(--bs-space-4))) / 4));
    }
}

.home-city-card[b-dg2euvg3a8] {
    border-radius: var(--bs-radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--bs-space-2);
    padding: var(--bs-space-4);
    scroll-snap-align: start;
}

.home-city-card--green[b-dg2euvg3a8] {
    background: var(--bs-color-accent-surface-green);
}

.home-city-card--blue[b-dg2euvg3a8] {
    background: var(--bs-color-accent-surface-blue);
}

.home-city-card--cream[b-dg2euvg3a8] {
    background: var(--bs-color-accent-surface-cream);
}

.home-city-image[b-dg2euvg3a8],
.home-city-image-placeholder[b-dg2euvg3a8] {
    aspect-ratio: 16 / 9;
    border-radius: var(--bs-radius-md);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.home-city-image-placeholder[b-dg2euvg3a8] {
    background: var(--bs-color-surface-default);
    opacity: 0.5;
}

.home-city-title[b-dg2euvg3a8] {
    color: var(--bs-color-text-primary);
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
}

.home-city-body[b-dg2euvg3a8] {
    color: color-mix(in srgb, var(--bs-color-text-primary) 75%, transparent);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.2;
    margin: 0;
}

.home-city-link[b-dg2euvg3a8] {
    align-items: center;
    align-self: flex-end;
    color: var(--bs-color-text-primary);
    display: inline-flex;
    font-weight: 600;
    gap: var(--bs-space-1);
    margin-top: auto;
}

.home-city-link:focus-visible[b-dg2euvg3a8] {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
}

/* Respect reduced-motion: no smooth scrolling for users who ask not to have it. */
@media (prefers-reduced-motion: reduce) {
    .home-city-scroller[b-dg2euvg3a8] {
        scroll-behavior: auto;
    }
}
/* /Components/Frontpage/HomeFeaturedPromo.razor.rz.scp.css */
/* Highlighted event: image and copy side by side on desktop, stacked on phones. */

.home-promo[b-ujqtt6c8ev] {
    width: min(91%, 1120px);
    margin: var(--home-section-gap) auto 0;
    display: grid;
    gap: var(--bs-space-6);
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    /* stretch, not start: the copy column takes the row's full height so the CTA can sit on the
       image's bottom edge. The image keeps its own height via align-self below. */
    align-items: stretch;
}

/* Carries the placeholder look itself, so a missing image reveals it rather than a broken-image
   icon. Same aspect ratio as the image, so the panel keeps its height either way. */
[b-ujqtt6c8ev] .home-promo-media {
    /* Keeps its 16:10 box instead of being stretched by the row. */
    align-self: start;
    aspect-ratio: 16 / 10;
    background: var(--bs-color-surface-subtle);
    border-radius: var(--bs-radius-lg);
    overflow: hidden;
    position: relative;
}

[b-ujqtt6c8ev] .home-promo-content {
    display: flex;
    flex-direction: column;
}

[b-ujqtt6c8ev] .home-promo-image,
[b-ujqtt6c8ev] .home-promo-image-placeholder {
    aspect-ratio: 16 / 10;
    border-radius: var(--bs-radius-lg);
    display: block;
    object-fit: cover;
    width: 100%;
}

[b-ujqtt6c8ev] .home-promo-image-placeholder {
    background: var(--bs-color-surface-subtle);
}

/* Availability badge, top-left of the image. */
[b-ujqtt6c8ev] .home-promo-badge {
    background: var(--bs-color-accent-surface-cream);
    border-radius: var(--bs-radius-pill);
    color: var(--bs-color-text-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    left: var(--bs-space-3);
    padding: var(--bs-space-1) var(--bs-space-3);
    position: absolute;
    top: var(--bs-space-3);
}

[b-ujqtt6c8ev] .home-promo-title {
    color: var(--bs-color-text-primary);
    font-weight: 800;
}

[b-ujqtt6c8ev] .home-promo-meta {
    color: var(--bs-color-text-primary);
    font-weight: 700;
    margin-top: var(--bs-space-1);
}

/* Three lines, then an ellipsis. Legacy organiser copy runs to any length, and the full text lives
   on the event page — the promo only needs enough to sell the click. -webkit-box is what makes
   line-clamp work; it costs the flex `gap`, so the paragraph spacing is a margin instead. */
[b-ujqtt6c8ev] .home-promo-teaser {
    color: var(--bs-color-text-secondary);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin-top: var(--bs-space-4);
    max-width: 60ch;
}

[b-ujqtt6c8ev] .home-promo-teaser .mud-typography + .mud-typography {
    margin-top: var(--bs-space-2);
}

/* auto pushes the button to the foot of the copy column, which the grid has stretched to the
   image's height — so it lines up with the bottom of the image. align-self keeps it at its natural
   width: as a flex item it would otherwise stretch across the whole column. */
[b-ujqtt6c8ev] .home-promo-cta {
    align-self: flex-start;
    margin-top: auto;
    border-radius: var(--bs-radius-md);
    font-weight: 700;
}

@media (max-width: 899px) {
    .home-promo[b-ujqtt6c8ev] {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Stacked, there is no leftover height for `auto` to absorb, so the button would sit flush
       against the copy — put the spacing back. */
    [b-ujqtt6c8ev] .home-promo-cta {
        align-self: stretch;
        margin-top: var(--bs-space-6);
        width: 100%;
    }
}
/* /Components/Frontpage/HomeHeroCarousel.razor.rz.scp.css */
/* Hero carousel. Tokens only — no hex outside the white-on-photo overlay treatment.
   Slides are stacked and cross-fade with a plain CSS opacity transition: the browser handles it
   on the compositor, and there is no JS animation loop. */

.home-hero[b-wky5bhhajq] {
    /* Shared by the preview circle and the dots, so the dots can centre on the circle. */
    --hero-edge-inset: clamp(var(--bs-space-4), 3vw, 2.5rem);
    --hero-preview-size: 88px;
    position: relative;
    width: 100%;
    height: clamp(420px, 70vh, 760px);
    overflow: hidden;
    border: none;
    border-bottom-left-radius: var(--bs-radius-2xl);
    border-bottom-right-radius: var(--bs-radius-2xl);
    contain: paint;
}

.home-hero-stage[b-wky5bhhajq] {
    height: 100%;
    position: relative;
}

.home-hero-slide[b-wky5bhhajq] {
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Subtle and unobtrusive — long enough to read as a fade, short enough not to feel slow. */
    transition: opacity 700ms ease-in-out;
    /* Inactive slides must not intercept clicks. Kept visible (not display:none) so the
       cross-fade has something to fade between; screen readers use aria-hidden instead. */
    pointer-events: none;
}

.home-hero-slide.is-active[b-wky5bhhajq] {
    opacity: 1;
    pointer-events: auto;
    z-index: 1;
}

/* Without JavaScript only the first slide shows — a plain, working hero. */
.home-hero:not(.home-hero--ready) .home-hero-slide:first-child[b-wky5bhhajq] {
    opacity: 1;
    pointer-events: auto;
}

.home-hero-image[b-wky5bhhajq],
.home-hero-image-placeholder[b-wky5bhhajq] {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.home-hero-image-placeholder[b-wky5bhhajq] {
    background: var(--bs-color-surface-subtle);
}

/* Flat 20% black over the whole photo — keeps the white text popping without a fade. */
.home-hero-overlay[b-wky5bhhajq] {
    align-items: flex-end;
    background: rgb(0 0 0 / 30%);
    display: flex;
    inset: 0;
    position: absolute;
}

.home-hero-overlay-content[b-wky5bhhajq] {
    color: #fff;
    padding: var(--bs-space-8) clamp(var(--bs-space-4), 5vw, 4.5rem) clamp(4.5rem, 9vh, 7rem);
    width: min(100%, 900px);
}

/* Inter bold at the sizes from the design; the clamp only scales them down on narrow screens.
   No text-shadow — the flat 30% overlay above carries the contrast. */
.home-hero-meta[b-wky5bhhajq] {
    font-family: var(--bs-font-family-sans);
    font-size: clamp(1rem, 2.2vw, 18px);
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: 0 0 var(--bs-space-2);
}

.home-hero-title[b-wky5bhhajq] {
    font-family: var(--bs-font-family-sans);
    font-size: clamp(2rem, 5.6vw, 54px);
    font-weight: 800;
    line-height: 1.05;
    margin: 0 0 var(--bs-space-6);
}

.home-hero-cta[b-wky5bhhajq] {
    border: 2px solid #fff;
    border-radius: var(--bs-radius-sm);
    color: #fff;
    display: inline-block;
    font-size: 1rem;
    font-weight: 700;
    padding: var(--bs-space-3) var(--bs-space-8);
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
}

.home-hero-cta:hover[b-wky5bhhajq] {
    background: #fff;
    color: var(--bs-color-text-primary);
}

.home-hero-cta:focus-visible[b-wky5bhhajq] {
    outline: var(--bs-focus-ring-width) solid #fff;
    outline-offset: var(--bs-focus-ring-offset);
}

/* ── Circular preview of the next event ─────────────────────────── */
/* Sits above the slides and stays put through transitions; only its image changes. */

.home-hero-preview[b-wky5bhhajq] {
    background: none;
    border: 1.5px solid #fafafa;
    border-radius: var(--bs-radius-pill);
    box-shadow: 0 4px 16px rgb(0 0 0 / 28%);
    cursor: pointer;
    display: none;
    height: var(--hero-preview-size);
    overflow: hidden;
    padding: 0;
    position: absolute;
    right: var(--hero-edge-inset);
    top: clamp(var(--bs-space-3), 2vw, 1.5rem);
    transition: transform 180ms ease;
    width: var(--hero-preview-size);
    z-index: 3;
}

.home-hero--ready .home-hero-preview[b-wky5bhhajq] {
    display: block;
}

.home-hero-preview:hover[b-wky5bhhajq] {
    transform: scale(1.06);
}

.home-hero-preview:focus-visible[b-wky5bhhajq] {
    outline: var(--bs-focus-ring-width) solid #fff;
    outline-offset: var(--bs-focus-ring-offset);
}

.home-hero-preview-image[b-wky5bhhajq] {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
    /* Matches the slide fade so the swap never reads as a hard cut. */
    transition: opacity 300ms ease;
}

/* ── Dot indicator ──────────────────────────────────────────────── */

.home-hero-dots[b-wky5bhhajq] {
    align-items: center;
    display: none;
    gap: var(--bs-space-2);
    bottom: clamp(4.75rem, 9.5vh, 7.25rem);
    position: absolute;
    /* Centred on the preview circle above: its centre, then pulled back by half the row. */
    right: calc(var(--hero-edge-inset) + var(--hero-preview-size) / 2);
    transform: translateX(50%);
    z-index: 3;
}

.home-hero--ready .home-hero-dots[b-wky5bhhajq] {
    display: flex;
}

.home-hero-dot[b-wky5bhhajq] {
    background: rgb(255 255 255 / 45%);
    border: 0;
    border-radius: var(--bs-radius-pill);
    cursor: pointer;
    height: 7px;
    padding: 0;
    transition: background-color 200ms ease, width 200ms ease;
    width: 7px;
}

.home-hero-dot.is-active[b-wky5bhhajq] {
    background: #fff;
    /* Slight elongation makes the active dot readable without enlarging the control. */
    width: 18px;
}

.home-hero-dot:focus-visible[b-wky5bhhajq] {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 599px) {
    .home-hero[b-wky5bhhajq] {
        --hero-preview-size: 64px;
    }

    .home-hero-dots[b-wky5bhhajq] {
        bottom: clamp(3.5rem, 7vh, 5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-slide[b-wky5bhhajq],
    .home-hero-preview[b-wky5bhhajq],
    .home-hero-preview-image[b-wky5bhhajq],
    .home-hero-dot[b-wky5bhhajq],
    .home-hero-cta[b-wky5bhhajq] {
        transition: none;
    }
}
/* /Components/Frontpage/HomeMarketingSection.razor.rz.scp.css */
/* Homepage marketing section: organizer CTA panel + three information cards.
   Widths and radii mirror .home-featured-section / .home-featured-card in web.css.
   All colours derive from theme tokens — no brand hex values are repeated here.
   MudBlazor renders these elements, so descendants need ::deep. */

.home-marketing-section[b-rbwckwo4g7] {
    /* One gap value drives both the CTA-to-cards distance and the gaps between the cards. */
    --home-marketing-gap: var(--bs-space-6);

    display: grid;
    gap: var(--home-marketing-gap);
    width: min(91%, 1120px);
    margin: var(--home-section-gap) auto 0;
}

/* --- CTA panel --- */

[b-rbwckwo4g7] .home-marketing-cta {
    background: var(--bs-color-surface-subtle);
    border-radius: var(--bs-radius-md);
    padding: clamp(1.75rem, 4vw, 3.5rem);
}

[b-rbwckwo4g7] .home-marketing-cta-title {
    color: var(--bs-color-text-primary);
    font-weight: 800;
    margin-bottom: 1.25rem;
}

/* Wide enough that the first sentence fits on one line, so the two sentences read as two lines
   rather than wrapping to three. */
[b-rbwckwo4g7] .home-marketing-cta-copy {
    max-width: 72ch;
}

[b-rbwckwo4g7] .home-marketing-cta-copy .mud-typography {
    color: var(--bs-color-text-secondary);
    font-weight: 600;
}

[b-rbwckwo4g7] .home-marketing-cta-actions {
    margin-top: 2rem;
}

[b-rbwckwo4g7] .home-marketing-cta-primary {
    border-radius: var(--bs-radius-md);
    font-weight: 700;
    padding-left: 2rem;
    padding-right: 2rem;
    text-transform: none;
}

[b-rbwckwo4g7] .home-marketing-cta-secondary {
    font-weight: 700;
    text-transform: none;
}

/* --- Information cards --- */

.home-marketing-cards[b-rbwckwo4g7] {
    display: grid;
    gap: var(--home-marketing-gap);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

[b-rbwckwo4g7] .home-marketing-card {
    border-radius: 18px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: 100%;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Editorial accent surfaces — these carry no state meaning. They previously derived from
   --mud-palette-secondary/primary/warning; the cream in particular borrowed the Warning status
   colour, which would have shifted the moment status colours were branded. The accent tokens
   hold the exact same rendered values, so this migration is pixel-neutral. */

[b-rbwckwo4g7] .home-marketing-card-green {
    background: var(--bs-color-accent-surface-green);
}

[b-rbwckwo4g7] .home-marketing-card-blue {
    background: var(--bs-color-accent-surface-blue);
}

[b-rbwckwo4g7] .home-marketing-card-cream {
    background: var(--bs-color-accent-surface-cream);
}

[b-rbwckwo4g7] .home-marketing-card-title {
    color: var(--bs-color-text-primary);
    font-weight: 700;
}

[b-rbwckwo4g7] .home-marketing-card-body {
    color: var(--bs-color-text-secondary);
}

[b-rbwckwo4g7] .home-marketing-card-link {
    align-items: center;
    align-self: flex-end;
    color: var(--bs-color-text-primary);
    display: inline-flex;
    font-weight: 600;
    gap: 0.25rem;
    margin-top: auto;
}

/* Placeholder affordance while the destination route is undecided. */
[b-rbwckwo4g7] .home-marketing-card-link-pending {
    cursor: default;
}

/* Column counts match the xs=12 / sm=6 / md=4 breakpoints the MudGrid used. */
@media (max-width: 959px) {
    .home-marketing-cards[b-rbwckwo4g7] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 599px) {
    .home-marketing-cards[b-rbwckwo4g7] {
        grid-template-columns: minmax(0, 1fr);
    }

    [b-rbwckwo4g7] .home-marketing-cta-actions {
        align-items: stretch;
        flex-direction: column;
    }

    [b-rbwckwo4g7] .home-marketing-cta-primary,
    [b-rbwckwo4g7] .home-marketing-cta-secondary {
        width: 100%;
    }
}
/* /Components/Layout/SiteHeader.razor.rz.scp.css */
/* Public site header. Every colour, space and radius resolves to a --bs-* token. */

.site-header[b-poju2ebcn6] {
    /* Mirrors MudBlazor's own responsive appbar height (56 / 48 / 64px) so MudMainContent's
       padding-top keeps matching the header exactly. The three rules below repeat MudBlazor's
       breakpoints in the same order, which is why the landscape rule precedes the 600px one. */
    --site-header-height: calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 8);
    --site-header-logo-height: 2.25rem;
    --site-header-gap: var(--bs-space-4);

    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--mud-zindex-appbar, 1100);
    color: var(--bs-color-action-secondary);
    background-color: var(--bs-color-surface-default);
    border-bottom: 1px solid var(--bs-color-border-subtle);
}

@media (min-width: 0px) and (orientation: landscape) {
    .site-header[b-poju2ebcn6] {
        --site-header-height: calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 4);
    }
}

@media (min-width: 600px) {
    .site-header[b-poju2ebcn6] {
        --site-header-height: var(--mud-appbar-height, 64px);
        --site-header-logo-height: 2.5rem;
    }
}

.site-header__inner[b-poju2ebcn6] {
    display: flex;
    align-items: center;
    gap: var(--site-header-gap);
    height: var(--site-header-height);
    padding-inline: var(--bs-space-4);
}

/* ── Brand ─────────────────────────────────────────────────────── */

.site-header__brand[b-poju2ebcn6] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    text-decoration: none;
}

.site-header__logo[b-poju2ebcn6] {
    display: block;
    width: auto;
    max-width: 12rem;
    height: var(--site-header-logo-height);
    max-height: var(--site-header-logo-height);
    object-fit: contain;
}

/* ── Navigation ────────────────────────────────────────────────── */
/* Desktop: a row pushed to the right of the logo. Mobile: a panel under the header, toggled
   by the burger. One list serves both, so the links exist once in the DOM. */

.site-header__nav[b-poju2ebcn6] {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    max-height: calc(100vh - var(--site-header-height));
    overflow-y: auto;
    background-color: var(--bs-color-surface-default);
    border-bottom: 1px solid var(--bs-color-border-subtle);
}

.site-header__nav[data-open="true"][b-poju2ebcn6] {
    display: block;
}

.site-header__links[b-poju2ebcn6] {
    display: flex;
    flex-direction: column;
    gap: var(--bs-space-1);
    margin: 0;
    padding: var(--bs-space-2) var(--bs-space-4) var(--bs-space-4);
    list-style: none;
}

.site-header__item[b-poju2ebcn6] {
    display: flex;
}

.site-header__link[b-poju2ebcn6] {
    display: inline-flex;
    align-items: center;
    padding: var(--bs-space-3) 0;
    color: inherit;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-decoration: none;
    border-radius: var(--bs-radius-sm);
}

/* "Log ud" is an action, so it is a <button>; strip the UA chrome to match its siblings. */
.site-header__link--action[b-poju2ebcn6] {
    background: none;
    border: 0;
    cursor: pointer;
}

.site-header__link:hover[b-poju2ebcn6] {
    color: var(--bs-color-action-secondary-hover);
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

.site-header__link:active[b-poju2ebcn6] {
    color: var(--bs-color-action-secondary-pressed);
}

.site-header__link:focus-visible[b-poju2ebcn6] {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
}

/* ── Actions: language, search, cart ───────────────────────────── */

.site-header__actions[b-poju2ebcn6] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--bs-space-2);
    margin-left: auto;
}

.site-header__language[b-poju2ebcn6] {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--bs-space-2);
}

.site-header__flag[b-poju2ebcn6] {
    display: block;
    width: 1.5rem;
    height: auto;
    border-radius: 2px;
}

/* ── Mobile toggle ─────────────────────────────────────────────── */

.site-header__burger[b-poju2ebcn6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: inherit;
    background: none;
    border: 0;
    border-radius: var(--bs-radius-pill);
    cursor: pointer;
}

.site-header__burger:focus-visible[b-poju2ebcn6] {
    outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
    outline-offset: var(--bs-focus-ring-offset);
}

/* ── Desktop ───────────────────────────────────────────────────── */
/* Matches the MudBlazor md breakpoint the previous header switched on. */

@media (min-width: 960px) {
    .site-header[b-poju2ebcn6] {
        --site-header-logo-height: 3rem;
        --site-header-gap: var(--bs-space-8);
    }

    .site-header__inner[b-poju2ebcn6] {
        padding-inline: var(--bs-space-6);
    }

    .site-header__nav[b-poju2ebcn6] {
        position: static;
        display: block;
        max-height: none;
        overflow: visible;
        margin-left: auto;
        border-bottom: 0;
    }

    .site-header__links[b-poju2ebcn6] {
        flex-direction: row;
        align-items: center;
        gap: var(--bs-space-6);
        padding: 0;
    }

    .site-header__link[b-poju2ebcn6] {
        padding: var(--bs-space-2) 0;
    }

    .site-header__actions[b-poju2ebcn6] {
        margin-left: 0;
    }

    .site-header__burger[b-poju2ebcn6] {
        display: none;
    }
}
/* /Pages/Events/EventDetails.razor.rz.scp.css */
/* Event detail page layout polish (RCP-B2-S3). */

.event-landing-page[b-rgr9hk93u6] {
    background-color: var(--bs-color-surface-default);
}

[b-rgr9hk93u6] .event-landing-title {
    color: var(--bs-color-text-primary);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
}

[b-rgr9hk93u6] .event-landing-content-stack {
    gap: var(--bs-space-4);
}

[b-rgr9hk93u6] .event-landing-sidebar-card {
    border-radius: var(--bs-radius-lg);
}

[b-rgr9hk93u6] .event-landing-primary-cta {
    background-color: var(--bs-color-action-primary) !important;
    border-radius: var(--bs-radius-pill);
    color: var(--bs-color-text-on-action-primary, #fff) !important;
    font-weight: 700;
    text-transform: none;
}

[b-rgr9hk93u6] .event-landing-from-price {
    color: var(--bs-color-text-primary);
    font-weight: 800;
}