/* ==========================================================================
   Subgenres — profile hero, Discover filter row, artist cards, settings.
   The main genre owns the colour. Every genre class exposes it as --gv-genre
   (fill colour) and --gv-genre-text (readable on dark). Subgenres only ever use
   these; they never get their own colours.
   ========================================================================== */
:root { --gv-genre: #c1fe01; --gv-genre-ink: #000; --gv-genre-text: #c1fe01; }
.genreDefault, .genreTechno { --gv-genre: #c1fe01; --gv-genre-ink: #000; --gv-genre-text: #c1fe01; }
.genreTrance     { --gv-genre: #FFF033; --gv-genre-ink: #000; --gv-genre-text: #FFF033; }
.genreHouse      { --gv-genre: #FBA419; --gv-genre-ink: #000; --gv-genre-text: #FBA419; }
.genreDrum       { --gv-genre: #7B50E2; --gv-genre-ink: #000; --gv-genre-text: #A98BF0; }
.genreDisco      { --gv-genre: #FB45C6; --gv-genre-ink: #000; --gv-genre-text: #FB6FD2; }
.genreHardcore   { --gv-genre: #FF5757; --gv-genre-ink: #000; --gv-genre-text: #FF7A7A; }
.genreGarage     { --gv-genre: #1885F2; --gv-genre-ink: #000; --gv-genre-text: #5AA7F5; }
.genreDance      { --gv-genre: #66CC90; --gv-genre-ink: #000; --gv-genre-text: #66CC90; }
.genreElectronic { --gv-genre: #E8488C; --gv-genre-ink: #000; --gv-genre-text: #EE70A5; }

/* ---------- Shared text links ---------- */
.gv-sub-line { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; font-size: 0.85rem; line-height: 1.4; min-width: 0; max-width: 100%; }
.gv-sub-line--right { justify-content: flex-end; }
.gv-sep { color: rgba(255, 255, 255, 0.6); padding: 0 0.45em; user-select: none; }
.gv-sub {
  color: #e8e8e8; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid transparent; transition: color .12s, border-color .12s;
}
.gv-sub:hover, .gv-sub:focus-visible { color: var(--gv-genre-text); border-bottom-color: var(--gv-genre-text); }
.gv-sub.is-primary { color: var(--gv-genre-text); font-weight: 700; border-bottom-color: var(--gv-genre-text); }
.gv-sub--lead { font-size: 1rem; }
.gv-sub-more {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7); border-bottom: 1px dotted rgba(255, 255, 255, 0.5); white-space: nowrap;
  text-transform: none; letter-spacing: normal; line-height: inherit; min-width: 0; border-radius: 0;
}
.gv-sub-more:hover { color: #fff; border-bottom-color: #fff; }
.gv-sub:focus-visible, .gv-sub-more:focus-visible, .gv-sub-tag:focus-visible, a.genre-chip:focus-visible, .gv-genre-pill:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gv-meta-label { font-size: 0.65rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }

/* ---------- Profile hero: identity slot (option A default) ---------- */
/* Sits on the cover photo, so a soft shadow keeps it legible on bright images. */
.gv-sub-line--identity {
  margin-top: 6px; margin-left: 3px; text-shadow: 0 1px 3px rgba(0, 0, 0, .85);
  font-family: "GigevateLight", "Poppins", sans-serif;
}
.gv-sound { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
.gv-tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.gv-sub-tag {
  display: inline-block; padding: 0.1em 1em; background: rgba(0, 0, 0, 0.55); color: #f8f8f8;
  font-size: 0.85rem; text-decoration: none; white-space: nowrap;
  clip-path: polygon(3% 0%, 100% 0%, 97% 100%, 0% 100%);
}
.gv-sub-tag.is-primary { background: var(--gv-genre); color: var(--gv-genre-ink); font-weight: 700; }
.gv-sub-tag:hover { background: rgba(255, 255, 255, 0.28); }
.gv-sub-tag.is-primary:hover { background: var(--gv-genre); }

/* ---------- Profile hero: genre slot ---------- */
.gv-genre-area {
  position: absolute; right: 0; top: 0; max-width: min(320px, 55%);
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 6px;
}
.gv-genre-area .profileGenre { position: static; text-decoration: none; }
.gv-genre-area .gv-sub-line, .gv-lead { text-shadow: 0 1px 3px rgba(0, 0, 0, .85); }
.gv-lead { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.gv-classify { width: 280px; max-width: 100%; text-align: left; }
.gv-classify-head {
  display: block; background: var(--gv-genre); color: var(--gv-genre-ink); text-decoration: none;
  padding: 6px 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%);
}
.gv-classify-body {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 10px;
  background: rgba(0, 0, 0, 0.65); border: 1px solid color-mix(in srgb, var(--gv-genre) 40%, transparent); border-top: 0;
}
.gv-classify-body .gv-sub--lead { align-self: flex-start; }
.gv-classify-body .gv-sub-line { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 6px; }

.gv-split { display: inline-flex; max-width: 100%; gap: 4px; }
.gv-split-genre {
  background: var(--gv-genre); color: var(--gv-genre-ink); text-decoration: none; white-space: nowrap;
  padding: 0.1em 1.3em; font-size: 0.95rem; clip-path: polygon(2% 0%, 100% 0%, 98% 100%, 0% 100%);
}
.gv-split-sub {
  color: #f8f8f8; background: rgba(0, 0, 0, .6); text-decoration: none; padding: 0.1em 1.3em;
  font-size: 0.95rem; min-width: 0; clip-path: polygon(4% 0%, 100% 0%, 96% 100%, 0% 100%);
}
.gv-split-sub:hover { color: var(--gv-genre-text); }

.gv-styles-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  padding: 10px 4px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}

@media (min-width: 960px) {
  .gv-split-genre, .gv-split-sub { font-size: 1.15rem; }
  .gv-sub-line--identity { font-size: 0.95rem; }
}
@media (max-width: 600px) {
  /* Mobile: no height clamp — it could hide "+N more". The collapsed list (primary + 3) stays short. */
  .gv-sub-line--identity { font-size: 0.85rem; }
  .gv-genre-area { max-width: 60%; }
  .gv-classify { width: 100%; }
}

/* ---------- Discover: genre + subgenre filter rows ----------
   Genre row reuses the home page pills (.genreLabels / .genreOne…); subgenre tags reuse the
   parallelogram .genre-chip language from event genre tags and Open Call. Nothing new here
   except spacing and the active states. */
.gv-discover { max-width: 1400px; margin: 0 auto; padding: 8px 16px 48px; }
.gv-discover .genreLabels { margin: 8px 0 18px; }
/* Cards fill their grid column; the fixed 185px card pushed the page sideways on phones. */
.gv-discover .sliderImage, .searchResults .sliderImage { width: 100%; height: auto; aspect-ratio: 1; }
.gv-genre-pill { text-decoration: none; display: inline-block; }
.gv-genre-pill.is-active { box-shadow: 0 0 0 2px #f8f8f8; }
.gv-subgenre-panel { margin: 0 0 22px; }
.gv-subgenre-panel-head { font-family: "GigevateLight", "Poppins", sans-serif; font-size: 1.1rem; color: #f8f8f8; margin-bottom: 10px; }
.gv-subgenre-panel-head span { color: #9a9a9a; font-family: "Poppins", sans-serif; font-size: 0.8rem; margin-left: 10px; }
.gv-filter-row { display: flex; flex-wrap: wrap; gap: 8px 6px; }
a.genre-chip { text-decoration: none; display: inline-block; white-space: nowrap; cursor: pointer; }
a.genre-chip.genre-chip--more:hover { background-color: rgba(255, 255, 255, 0.3) !important; }
/* Subgenre tags: solid in their genre's colour with black text — the same look as the TECHNO
   genre badge (theme .genre-chip.genreX). No tinted/muted variants. In pickers the selected
   tags get a white inner border; disabled ones fade. */
.genre-chip.gv-sub-chip { transition: filter .12s; }
.genre-chip.gv-sub-chip:hover { filter: brightness(1.08); }
button.genre-chip.gv-sub-chip.is-active,
button.genre-chip.gv-sub-chip[aria-pressed="true"],
a.genre-chip.gv-sub-chip.is-active { box-shadow: inset 0 0 0 2px #f8f8f8; font-weight: 800 !important; }
.genre-chip .gv-flag { font-weight: 400; font-size: 0.7em; margin-left: 6px; opacity: .75; }

.gv-filter-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 8px 0 16px; color: #9a9a9a; font-size: 0.85rem; }
.gv-results-note { color: #9a9a9a; font-size: 0.85rem; margin: 0 0 12px; }

/* ---------- Artist cards ---------- */
.gv-card-subs { font-size: 0.78rem; line-height: 1.35; color: #cfcfcf; margin-top: 2px; overflow-wrap: anywhere; }
.gv-card-subs b { color: var(--gv-genre-text); font-weight: 700; }
.gv-card-match { font-size: 0.75rem; color: #9a9a9a; margin-top: 2px; }
.gv-card-match.is-primary { color: var(--gv-genre-text); }

/* ---------- Settings: Genres & Subgenres ---------- */
.gv-settings-subgenres { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 12px; margin-top: 8px; }
.gv-settings-count { font-size: 0.8rem; color: #8a8a8a; margin-top: 4px; }
.gv-settings-count.is-full { color: #c1fe01; }

/* ---------- Admin taxonomy ---------- */
.gv-taxonomy-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.gv-taxonomy-table th, .gv-taxonomy-table td { padding: 8px 10px; border-bottom: 1px solid #262626; text-align: left; vertical-align: top; }
.gv-taxonomy-table th { font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase; color: #8a8a8a; font-weight: 500; }
.gv-taxonomy-table tr.is-inactive td { opacity: .5; }
.gv-taxonomy-wrap { overflow-x: auto; }

/* Screen-reader-only text (labels that are visually implied by placeholders). */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.gv-card-meta { margin-top: 2px; }

/* Settings tag pickers: buttons styled as genre tags. */
button.genre-chip.gv-sub-chip { cursor: pointer; font-family: inherit; font-size: 0.9rem; }
button.genre-chip.gv-sub-chip[disabled] { opacity: .3; cursor: not-allowed; }
.gv-settings-hint { color: #9a9a9a; font-size: 0.85rem; margin: 0 0 8px; }
button.genre-chip.gv-sub-chip { text-transform: none; letter-spacing: normal; }

/* "Also plays" from another genre: shown in that genre's own colour (profile line, tags, cards). */
.gv-sub.gv-sub--cross, .gv-card-subs .gv-sub--cross { color: var(--gv-genre-text); }
.gv-sub-tag.gv-sub--cross:not(.is-primary) { color: var(--gv-genre-text); }
.gv-settings-genre-group { margin-bottom: 10px; }
.gv-settings-genre-label { font-size: 0.8rem; color: #cfcfcf; margin-bottom: 6px; display: flex; gap: 10px; align-items: baseline; }
.gv-sub-item { white-space: nowrap; }

/* Admin taxonomy edit panel: dark like the rest of the app (MudPaper defaults to white). */
/* Dark panel for MudPaper/MudCard (MudBlazor's default surface is white). gv-dark-panel is the general name. */
.mud-paper.gv-admin-edit, .mud-paper.gv-dark-panel { background-color: #171717 !important; color: #f8f8f8; border: 1px solid #2a2a2a; }
.gv-admin-edit .mud-typography, .gv-admin-edit .mud-input, .gv-admin-edit input, .gv-admin-edit .mud-select-input,
.gv-admin-edit .mud-input-slot, .gv-admin-edit .mud-switch-label, .gv-admin-edit .mud-input-control-input-container,
.gv-dark-panel .mud-typography, .gv-dark-panel .mud-table-cell, .gv-dark-panel .mud-expand-panel-text { color: #f8f8f8 !important; }
.gv-admin-edit .mud-input-label, .gv-admin-edit .mud-input-helper-text, .gv-dark-panel .mud-text-secondary { color: #9a9a9a !important; }
.gv-admin-edit .mud-input.mud-input-underline:before { border-bottom-color: #3a3a3a; }
.gv-dark-panel .mud-table, .gv-dark-panel .mud-table-container { background-color: transparent !important; }
.gv-dark-panel .mud-table-cell { border-bottom-color: #2a2a2a !important; }
.gv-dark-panel .mud-expand-panel { background-color: #171717 !important; color: #f8f8f8; border: 1px solid #2a2a2a; }
.gv-dark-panel .mud-expand-panel .mud-icon-root { color: #f8f8f8; }

/* Event / Open Call page: preferred sounds + artist fit. */
.gv-event-sound { margin: 18px 0; }
.gv-fit { margin: 10px 0 0; font-size: 0.9rem; color: #cfcfcf; }
.gv-fit strong { color: #f8f8f8; }
.gv-fit--primary strong, .gv-fit--alsoplays strong { color: #c1fe01; }
.gv-fit--related strong, .gv-fit--genrematch strong { color: #fba419; }
/* Gig Manager applicant fit badge. */
.gv-fit-badge { display: inline-block; font-size: 0.72rem; padding: 1px 8px; margin-top: 4px; border-radius: 2px; background: #262626; color: #cfcfcf; }
.gv-fit-badge--primary, .gv-fit-badge--alsoplays { background: #c1fe01; color: #000; font-weight: 700; }
.gv-fit-badge--related, .gv-fit-badge--genrematch { background: rgba(251, 164, 25, .2); color: #fba419; }

/* Artist + organiser profile hero (.gv-profile-hero; settings banners keep the theme layout).
   Desktop: a big photo spans the banner height; the name sits top-left beside it and the
   subgenre tags sit bottom-right, in the same grid column so they can never overlap.
   The theme's fixed 28vh banner and absolutely-positioned name are replaced by normal flow,
   so the banner grows with a long name or expanded tags instead of spilling onto the tabs. */
@media only screen and (min-width: 993px) {
  .profileHeaderBackground:has(.gv-profile-hero) {
    height: auto;
    max-height: none;
    min-height: max(230px, 28vh);
    padding-bottom: 0;
  }
  .profileDetails.gv-profile-hero {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    /* 7px column gap: the name label sits right against the photo, as in the original hero */
    gap: 10px 7px;
    padding: 12px 16px 14px;
  }
  .gv-profile-hero .profileImg {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 190px;
    height: 190px;
  }
  .gv-profile-hero .profileDetailPrimary {
    grid-column: 2;
    grid-row: 1;
    position: static;
    min-width: 0;
    margin-top: 8px;
    /* keep clear of the genre badge in the top-right corner */
    padding-right: 150px;
  }
  .gv-profile-hero .profileTitle {
    max-width: 100%;
    overflow-wrap: anywhere;
    /* 56px from ~1280px wide; scales down a little on smaller desktops so long names stay readable */
    font-size: clamp(36px, 4.4vw, 56px);
  }
  .gv-profile-hero > .gv-tag-line {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    margin: 0;
  }
  .gv-profile-hero > .gv-tag-line .gv-tag-track { justify-content: flex-end; }
  /* extras stay behind "+N more" on desktop */
  .gv-tag-line .gv-tag-extra { display: none; }
}

/* Phones/tablets: the genre badge sits in the banner's top-right corner, so on narrow
   screens it collided with the artist name. Start the identity block just below it. */
@media only screen and (max-width: 992px) {
  .profileDetails:has(.gv-genre-area) .profileDetailPrimary { padding-top: 34px; }
}

/* Profile hero subgenre tags (default display). */
.gv-tag-line { margin-top: 8px; max-width: 100%; }
.gv-tag-track { display: flex; flex-wrap: wrap; gap: 6px 5px; }
.gv-tag-line .genre-chip { font-size: 0.8rem; line-height: 1.5 !important; }
.gv-tag-line .gv-tag-primary { text-transform: uppercase; font-weight: 800 !important; letter-spacing: .02em; }
button.gv-tag-more { cursor: pointer; font-family: inherit; font-size: 0.8rem; border: 0; text-transform: none; letter-spacing: normal; }
.genre-chip.gv-tag-more, button.genre-chip.gv-tag-more { background-color: #232323 !important; color: #f8f8f8 !important; }
@media only screen and (min-width: 993px) { .gv-tag-line .genre-chip, button.gv-tag-more { font-size: 0.9rem; } }

/* Hero weight hierarchy: the main genre label is bold; subgenre tags are regular weight.
   (Theme .genre-chip forces 700, so this needs the same !important.) */
.gv-tag-line .genre-chip.gv-sub-chip:not(.gv-tag-primary) { font-weight: 500 !important; }
.gv-genre-area .profileGenre, .gv-genre-area .gv-genre-badge { font-weight: 800; }

/* Phones/tablets: bigger photo, and every tag on ONE row under it. If the row is wider than
   the screen, gvTagMarquee (index.html) sets data-marquee + --gv-shift and the row slides to
   show the rest, then slides back. Touch/hover pauses it; reduced motion = swipeable row. */
@media only screen and (max-width: 992px) {
  .gv-profile-hero .profileImg { width: 112px; height: 112px; }
  .gv-profile-hero > .gv-tag-line { flex: 1 0 100%; margin-top: 2px; padding: 0 0 4px; overflow: hidden; }
  .gv-profile-hero > .gv-tag-line .gv-tag-track { flex-wrap: nowrap; width: max-content; gap: 4px; }
  /* Tags sit on the right, as on desktop. When the row is wider than the screen the auto
     margin collapses to 0, so the sliding row below starts from the left as before. */
  .gv-profile-hero > .gv-tag-line .gv-tag-track { margin-left: auto; }
  .gv-profile-hero > .gv-tag-line .genre-chip { font-size: 0.72rem; padding: 0.1em 0.85em !important; white-space: nowrap; }
  .gv-profile-hero > .gv-tag-line .gv-tag-more { display: none; }
  .gv-profile-hero > .gv-tag-line[data-marquee] {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent 100%);
  }
  .gv-profile-hero > .gv-tag-line[data-marquee] .gv-tag-track {
    animation: gv-tag-slide var(--gv-dur, 10s) ease-in-out infinite;
  }
  .gv-profile-hero > .gv-tag-line[data-marquee]:hover .gv-tag-track,
  .gv-profile-hero > .gv-tag-line[data-marquee]:active .gv-tag-track,
  .gv-profile-hero > .gv-tag-line[data-marquee]:focus-within .gv-tag-track { animation-play-state: paused; }
}
@keyframes gv-tag-slide {
  /* starts on the last tags and drifts right (left-to-right), then back */
  0%, 18% { transform: translateX(calc(-1 * var(--gv-shift, 0px))); }
  50%, 68% { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--gv-shift, 0px))); }
}

/* Organiser profile: the top-right badge is the kind of organiser (Promoter, Venue…). Each type
   has its own colour (OrganizerTypes.StyleFor) which the whole header takes; the genres they book
   run along the bottom like an artist's tags, each in its genre colour. */
.gv-org-type { white-space: nowrap; }
@media only screen and (min-width: 993px) {
  /* keep the name clear of the longest badge ("Independent Organiser") */
  .gv-profile-hero:has(.gv-org-type) .profileDetailPrimary { padding-right: 300px; }
}
/* Organiser cards in search results: their type as a small tag in the type's colour. */
.gv-card-type-row { margin-top: 4px; }
.genre-chip.gv-sub-chip.gv-card-type { font-size: .72rem; font-weight: 700 !important; padding: .1em .9em !important; }
/* All-organisers page: organiser type filter buttons under the title. */
.gv-type-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 4px 0 22px; }
.gv-type-filter button.genre-chip.gv-sub-chip { font-size: .85rem; }
.gv-type-filter.has-active button.genre-chip.gv-sub-chip:not(.is-active) { opacity: .55; }
.gv-type-filter.has-active button.genre-chip.gv-sub-chip:not(.is-active):hover,
.gv-type-filter.has-active button.genre-chip.gv-sub-chip:not(.is-active):focus-visible { opacity: .9; }
.gv-type-filter-clear { background: none; border: 0; padding: 2px 6px; color: #cfcfcf; font: inherit; font-size: .85rem; text-decoration: underline; text-transform: none; letter-spacing: normal; cursor: pointer; }
.gv-type-filter-clear:hover, .gv-type-filter-clear:focus-visible { color: #f8f8f8; }
/* Organiser About tab: sounds they book, above the social links. */
.gv-about-sounds { margin: 0 0 28px; }
.gv-about-sounds h2 { margin-bottom: 12px; }
.gv-about-sounds .genre-chip.gv-sub-chip { font-weight: 500 !important; text-decoration: none; }

/* Upcoming event cards: genre badges in the footer, just left of View Event.
   The actions column may shrink so that on narrow cards the badges wrap onto their own line
   above the button instead of pushing it out of the card. */
.uceActions:has(.uceViewRow) { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.uceActions .uceViewRow { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.uceActions .uceViewRow .uceGenreInline { gap: 4px !important; flex-wrap: wrap; justify-content: flex-end; margin: 0; min-width: 0; }
.uceActions .uceViewRow .uceViewBtn { flex: 0 0 auto; }
@media only screen and (max-width: 992px) and (prefers-reduced-motion: reduce) {
  .gv-profile-hero > .gv-tag-line { overflow-x: auto; scrollbar-width: none; }
  .gv-profile-hero > .gv-tag-line::-webkit-scrollbar { display: none; }
  .gv-profile-hero > .gv-tag-line[data-marquee] .gv-tag-track { animation: none; }
}
/* Solid tags don't need the text shadow the old plain-text line used. */
.gv-tag-line, .gv-tag-line .genre-chip { text-shadow: none !important; }
.gv-tag-line button.gv-tag-more { font-weight: 500 !important; }

/* Fan profile photo is an <img>, not a background: crop it instead of stretching at the bigger size. */
.gv-profile-hero .profileImg img.organizerProfileimg { object-fit: cover; display: block; }

/* Report / block at the foot of a profile (moved off the banner): quiet, out of the way. */
.profile-safety { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; margin-top: 32px; margin-bottom: 24px; padding-top: 16px; border-top: 1px solid #2a2a2a; color: #9a9a9a; font-size: 13px; }
.profile-safety > div { margin: 0 !important; }