/* Discover Shows page + Create Show dialog.
   Namespaced with .show- to avoid collisions; loaded globally via App.razor (scoped .razor.css
   does not load for WASM-client components in this app).

   Design intent mirrors the admin-statistics (.ps-) and endorsement-dialog (.end-) quality bar:
   calm hairline-bordered surfaces with a soft shadow, color reserved for meaning, dot+rule section
   headers, and selectable tiles. All colors come from --mud-palette-* so light and dark both work,
   with one deliberate exception: the hero is a fixed dark brand band in both themes, so its text is
   explicit white for guaranteed contrast (same approach as .show-thumb-placeholder). */

/* ============================================================ Hero band ===== */
.show-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 34px 34px 30px;
    margin-bottom: 24px;
    color: #fff;
    /* Brand glows (teal + blue, from the dark-theme palette) over a deep navy base. */
    background:
        radial-gradient(130% 150% at 88% -25%, rgba(45, 233, 219, 0.42) 0%, rgba(45, 233, 219, 0) 55%),
        radial-gradient(120% 150% at -10% 125%, rgba(59, 130, 246, 0.40) 0%, rgba(59, 130, 246, 0) 52%),
        linear-gradient(135deg, #2b3150 0%, #191d31 100%);
}

.show-hero__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.show-hero__title {
    font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.2rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.01em;
}

.show-hero__sub {
    margin-top: 8px;
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.80);
    max-width: 54ch;
}

.show-hero__count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 16px;
    padding: 4px 13px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
}

.show-hero__count-dot {
    /* Fixed teal accent: the hero band is a fixed dark gradient in both themes. */
    color: #2de9db;
    line-height: 0;
    font-size: 0.6rem;
}

/* White CTA that pops on the dark hero; overrides MudButton filled styling.
   Target .mud-button-root (always present) so it is robust across MudBlazor versions. */
.show-hero__cta.mud-button-root {
    background-color: #fff !important;
    color: #191d31 !important;
    box-shadow: none;
}

.show-hero__cta.mud-button-root:hover {
    background-color: rgba(255, 255, 255, 0.88) !important;
}

/* ====================================================== Filter toolbar ===== */
.show-toolbar {
    padding: 14px 16px 16px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    margin-bottom: 8px;
}

.show-toolbar__row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.show-toolbar__search {
    flex: 1 1 280px;
    min-width: 0;
}

.show-toolbar__sort {
    flex: 0 0 auto;
    width: 180px;
    max-width: 100%;
}

.show-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 0 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.show-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    scroll-snap-align: start;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.show-chip:hover {
    border-color: var(--mud-palette-lines-inputs);
    color: var(--mud-palette-text-primary);
}

.show-chip:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.show-chip--active {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    font-weight: 600;
}

.show-when {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.show-when__label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-right: 2px;
}

/* ====================================================== Section header ===== */
.show-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 26px 0 14px;
}

.show-section--first {
    margin-top: 8px;
}

.show-section--tight {
    margin: 18px 0 10px;
}

.show-section__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--mud-palette-text-secondary);
    opacity: 0.45;
}

.show-section__icon {
    display: inline-flex;
    flex: 0 0 auto;
    line-height: 0;
    color: var(--mud-palette-warning);
}

.show-section__title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.show-section__rule {
    height: 1px;
    flex: 1 1 auto;
    background: var(--mud-palette-lines-default);
}

.show-section__count {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ============================================================ Grid card ===== */
.show-card {
    cursor: pointer;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.show-card:hover,
.show-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--mud-palette-lines-inputs);
    box-shadow: 0 8px 22px rgba(16, 24, 40, 0.12);
}

/* Distinct keyboard focus ring (the card is role="button" tabindex="0"), matching .show-chip. */
.show-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* The loading skeleton borrows .show-card for layout but is not interactive: no pointer or lift. */
.show-card--skeleton,
.show-card--skeleton:hover {
    cursor: default;
    transform: none;
    border-color: var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.show-thumb-wrap {
    position: relative;
    overflow: hidden;
}

/* Top scrim so the white category pill stays legible over any thumbnail. */
.show-thumb-wrap::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 58px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(16, 24, 40, 0.38) 0%, rgba(16, 24, 40, 0) 100%);
}

.show-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    background: var(--mud-palette-background-grey);
    transition: transform 0.45s ease;
}

/* Gentle Ken Burns zoom on hover (clipped by .show-thumb-wrap overflow). */
.show-card:hover .show-thumb {
    transform: scale(1.06);
}

/* Play affordance centred on a real video thumbnail. */
.show-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #fff;
    background: rgba(16, 24, 40, 0.52);
    border: 1.5px solid rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    pointer-events: none;
    transition: transform 0.15s ease, background 0.15s ease;
}

.show-card:hover .show-thumb-play {
    transform: translate(-50%, -50%) scale(1.08);
    background: rgba(16, 24, 40, 0.68);
}

.show-thumb-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    color: #fff;
}

/* Deterministic placeholder hues (picked by FireworkShowId) so a grid of video-less shows is not a
   wall of identical gradients. Deep/rich so the white icon stays legible in light and dark. */
.show-thumb-placeholder--0 { background: linear-gradient(135deg, #23304d 0%, #2563eb 100%); }
.show-thumb-placeholder--1 { background: linear-gradient(135deg, #312e81 0%, #7c3aed 100%); }
.show-thumb-placeholder--2 { background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%); }
.show-thumb-placeholder--3 { background: linear-gradient(135deg, #9d174d 0%, #6d28d9 100%); }
.show-thumb-placeholder--4 { background: linear-gradient(135deg, #1e3a8a 0%, #15d9cd 100%); }
.show-thumb-placeholder--5 { background: linear-gradient(135deg, #4a1d4f 0%, #be185d 100%); }

.show-thumb-placeholder .mud-icon-root {
    opacity: 0.92;
    filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.25));
}

/* Skeleton thumb reserves the same 16:9 space as the real image (no hydration shift). */
.show-skel-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.show-skel-thumb .mud-skeleton {
    height: 100%;
}

/* Category pill overlaid on the thumbnail; readable over any image. */
.show-chip-overlay {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    background: rgba(16, 24, 40, 0.62);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.show-creator-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.show-creator-fallback {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-size: 0.75rem;
    flex: 0 0 auto;
}

.show-title-text {
    font-weight: 700;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.show-snippet-text {
    color: var(--mud-palette-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.show-card__foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
    padding-top: 8px;
}

.show-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--mud-palette-text-secondary);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* ====================================================== Trending strip ===== */
.trending-strip {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.trending-strip > div {
    flex: 0 0 280px;
    max-width: 280px;
    scroll-snap-align: start;
}

/* ================================================ Empty / error states ===== */
.show-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 48px 24px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.show-state__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    margin-bottom: 4px;
}

.show-state__icon--empty {
    color: var(--mud-palette-tertiary);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-tertiary) 12%, transparent);
}

.show-state__icon--error {
    color: var(--mud-palette-error);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
}

.show-state__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.show-state__sub {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    max-width: 44ch;
}

.show-state__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

/* ===================================================== Create dialog ======= */
/* Header */
.show-dlg-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.show-dlg-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.show-dlg-head__title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.show-dlg-head__sub {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

/* Videos */
.show-dlg-videos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.show-dlg-video {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

.show-dlg-video__title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.show-dlg-embed {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    background: var(--mud-palette-background);
}

.show-dlg-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 10px;
}

.show-dlg-empty {
    text-align: center;
    padding: 28px 20px;
    border-radius: 12px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
    border: 1px dashed var(--mud-palette-lines-default);
}

.show-dlg-addvideo {
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 12px;
}

/* Visibility tiles (mirror .end-type) */
.show-vis {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.show-vis__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    border-radius: 14px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.show-vis__tile:hover {
    border-color: var(--mud-palette-lines-inputs);
    box-shadow: 0 3px 10px rgba(16, 24, 40, 0.07);
}

.show-vis__tile:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.show-vis__tile--selected {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-surface));
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.show-vis__top {
    display: flex;
    align-items: center;
    gap: 9px;
}

.show-vis__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: var(--mud-palette-primary);
    background: var(--mud-palette-action-default-hover); /* fallback if color-mix unsupported */
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.show-vis__name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.show-vis__desc {
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--mud-palette-text-secondary);
}

.show-vis__check {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--mud-palette-primary);
    line-height: 0;
}

/* ============================================================ Responsive ===== */
@media (max-width: 600px) {
    .show-hero {
        padding: 24px 20px 22px;
    }

    .show-hero__cta {
        width: 100%;
    }

    .show-toolbar__sort {
        width: 100%;
    }

    /* Meet the house 44px touch-target minimum on mobile (cf. LikeButton, CommentPanel). */
    .show-chip {
        min-height: 44px;
    }

    .show-vis {
        grid-template-columns: 1fr;
    }
}

/* ============================================= Public show detail (theater) ===== */
/* The /shows/{id} page. Video-first: the primary video plays large up top, then a title / creator /
   Spark bar, meta chips, description, and the secondary videos / crew / discussion sections. The
   content grids reuse the .fsc-videos / .fsc-video / .fsc-people / .fsc-person / .fsc-empty classes
   from firework-show.css and the .show-section / .show-state patterns above. */

.show-detail__back {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

/* Primary video frame (crisp 16:9 embed) and its no-video branded fallback. */
.show-detail__hero {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
    background: #000;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
}

.show-detail__hero iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.show-detail__hero--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background:
        radial-gradient(130% 150% at 88% -25%, rgba(45, 233, 219, 0.42) 0%, rgba(45, 233, 219, 0) 55%),
        radial-gradient(120% 150% at -10% 125%, rgba(59, 130, 246, 0.40) 0%, rgba(59, 130, 246, 0) 52%),
        linear-gradient(135deg, #2b3150 0%, #191d31 100%);
}

.show-detail__hero--empty .mud-icon-root {
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3));
}

/* No-video hero falls back to the show's first photo (clickable to open the lightbox). */
.show-detail__hero--photo {
    display: block;
    padding: 0;
    cursor: pointer;
}

.show-detail__hero--photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Title + Spark bar. */
.show-detail__bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.show-detail__headings {
    min-width: 0;
    flex: 1 1 320px;
}

.show-detail__title {
    margin: 0;
    font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.05rem);
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: var(--mud-palette-text-primary);
}

.show-detail__spark {
    flex: 0 0 auto;
}

/* Creator attribution row (links to the creator's profile). */
.show-detail__creator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    text-decoration: none;
    color: inherit;
    width: fit-content;
}

.show-detail__avatar,
.show-detail__avatar-fallback {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex: 0 0 auto;
    object-fit: cover;
}

.show-detail__avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 700;
    font-size: 0.85rem;
}

.show-detail__creator-name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--mud-palette-text-primary);
}

.show-detail__creator:hover .show-detail__creator-name {
    color: var(--mud-palette-primary);
}

.show-detail__creator-sub {
    font-size: 0.78rem;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
}

/* Meta chips (date / category / counts). */
.show-detail__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.show-detail__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
}

.show-detail__desc {
    margin: 4px 0 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Loading skeleton: matches the hero + bar so going interactive does not shift the layout. */
.show-detail__skel-hero {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 16px;
}

.show-detail__skel-hero .mud-skeleton {
    height: 100%;
}

@media (max-width: 600px) {
    .show-detail__spark {
        width: 100%;
    }
}