/* Organiser profile additions: the "Founded 2018" line under the location and "Read more" on long About texts. */

/* "Founded 2018" under the location, in the header's colour pill. */
.profileSince { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }

/* Long About text: first few lines, then "Read more". */
.gv-op-bio--clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.gv-op-readmore { background: none; border: 0; padding: 6px 0; min-height: 44px; color: #C1FE01; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; cursor: pointer; }

/* Artist circles: "Our artists" (About) and "Artists who've played here" (Experience).
   The ring takes the organiser type's colour, like the profile photo ring. */
.gv-op { --op-accent: #C1FE01; margin-bottom: 2rem; }
.gv-op.genreTrance { --op-accent: #FFF033; }
.gv-op.genreHouse { --op-accent: #FBA419; }
.gv-op.genreDrum { --op-accent: #7B50E2; }
.gv-op.genreDisco { --op-accent: #FB45C6; }
.gv-op.genreHardcore { --op-accent: #FF5757; }
.gv-op.genreGarage { --op-accent: #1885F2; }
.gv-op.genreDance { --op-accent: #66CC90; }

/* One row that scrolls sideways: four across, the fifth peeks in so it's clear there's more. */
.gv-circles-row { position: relative; display: flex; align-items: flex-start; gap: 8px; }
.gv-circles { list-style: none; margin: 0; padding: 4px 2px 10px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; flex: 1 1 auto; min-width: 0; -webkit-overflow-scrolling: touch; }
.gv-circles::-webkit-scrollbar { height: 4px; }
.gv-circles::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 4px; }
.gv-circle { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; flex: 0 0 calc((100% - 48px) / 4.35); min-width: 0; scroll-snap-align: start; }
.gv-circles__arrow { flex: none; align-self: center; margin-top: -28px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: #1b1b1a; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.gv-circles__arrow:hover, .gv-circles__arrow:focus-visible { border-color: var(--op-accent); color: var(--op-accent); }
/* VIEW ALL: everyone on more rows, four across. */
.gv-circles__bar { display: flex; justify-content: flex-end; margin: -6px 0 4px; }
.gv-circles__all { background: none; border: 0; padding: 6px 0; min-height: 32px; cursor: pointer; color: var(--op-accent); font-size: .75rem; font-weight: 700; letter-spacing: .06em; }
.gv-circles-row--all .gv-circles { flex-wrap: wrap; overflow: visible; row-gap: 20px; }
.gv-circles-row--all .gv-circle { flex-basis: calc((100% - 48px) / 4); }
.gv-circle__link { display: flex; flex-direction: column; align-items: center; gap: 8px; color: inherit; text-decoration: none; min-width: 0; max-width: 100%; }
a.gv-circle__link:hover .gv-circle__photo, a.gv-circle__link:focus-visible .gv-circle__photo { transform: scale(1.04); }
a.gv-circle__link:focus-visible { outline: none; }
a.gv-circle__link:focus-visible .gv-circle__photo { box-shadow: 0 0 0 3px #121212, 0 0 0 5px var(--op-accent); }
.gv-circle__photo { width: min(100%, 150px); height: auto; aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid var(--op-accent); overflow: hidden; display: flex; align-items: center; justify-content: center; background: #222; transition: transform .15s ease; flex: none; }
.gv-circle__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gv-circle__initials { font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.6rem); color: rgba(255,255,255,.85); letter-spacing: .02em; }
.gv-circle--ext .gv-circle__photo { border-style: dashed; border-color: rgba(255,255,255,.45); }
.gv-circle--pending .gv-circle__photo { opacity: .55; border-style: dashed; }
.gv-circle__name { font-size: .85rem; font-weight: 600; line-height: 1.25; max-width: 100%; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gv-circle__note { font-size: .72rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .05em; }
.gv-circle__action { background: none; border: 1px solid var(--op-accent); color: var(--op-accent); border-radius: 999px; padding: 2px 12px; min-height: 32px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.gv-circle__action--quiet { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.7); }
.gv-circle__action[disabled] { opacity: .5; cursor: default; }

.gv-roster__add { margin-top: 16px; max-width: 420px; }
.gv-roster__option small { color: rgba(255,255,255,.6); }
.gv-roster__hint { font-size: .85rem; color: rgba(255,255,255,.6); margin: 10px 0 0; }
.gv-roster__hint a { color: var(--op-accent); }

/* Artist profile: collectives and labels they're part of, and invitations to answer. */
.gv-memberships { margin: 0 0 2rem; }
.gv-memberships__invite { border: 1px solid #C1FE01; border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.gv-memberships__invite p { margin: 0 0 10px; }
.gv-memberships__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.gv-memberships__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.gv-memberships__list li { display: inline-flex; align-items: center; gap: 8px; }

@media (max-width: 600px) {
  /* Phones: no arrows (swipe), four across with the fifth peeking in. */
  .gv-circles__arrow { display: none; }
  .gv-circles { gap: 10px; }
  .gv-circle { flex-basis: calc((100% - 30px) / 4.35); }
  .gv-circles-row--all .gv-circle { flex-basis: calc((100% - 30px) / 4); }
  .gv-circle__photo { width: 64px; }
  .gv-circle__name { font-size: .75rem; }
}

/* Bookings tab: Booking information was phone-sized on desktop too. Desktop: as wide as the
   calendar, bigger text, details in two columns. */
@media (min-width: 769px) {
  #organizerProfileBookingsWrapper .org-booking-info { max-width: 880px; width: 100%; margin: 28px auto 32px; padding: 28px 32px; }
  #organizerProfileBookingsWrapper .org-booking-info .gp-panel__title { font-size: 1.4rem; margin-bottom: 12px; }
  #organizerProfileBookingsWrapper .org-booking-info .gp-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  #organizerProfileBookingsWrapper .org-booking-info .gp-row { padding: 14px 0; }
  #organizerProfileBookingsWrapper .org-booking-info .gp-row:last-child { border-bottom: 1px solid var(--gp-line, rgba(255,255,255,.12)); }
  #organizerProfileBookingsWrapper .org-booking-info .gp-row dt,
  #organizerProfileBookingsWrapper .org-booking-info .gp-row dd { font-size: 1.05rem; }
}

/* Bookings tab for visitors: the calendar sits behind "View availability", centred under Booking information. */
#organizerProfileBookingsWrapper .org-availability { text-align: center; margin: 8px 0 32px; }
#organizerProfileBookingsWrapper .org-availability > button { min-height: 44px; }
#organizerProfileBookingsWrapper .org-availability .profile-calendar-wrapper { text-align: left; }