/* ==========================================================================
   GigGuide artist profile (design lane, 18 Oct 2026)
   The top of every artist and tour page as one card: a big photo, the act's
   name, genre and home chips, the tour at a glance, then a band with the next
   show as a ticket and the act's official links as buttons.
   Loaded on the artist views, after act-pages.css and photos.css.
   ========================================================================== */

.artist-profile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
  grid-template-areas:
    "main media"
    "band band";
  column-gap: 48px;
  margin: 0 0 32px;
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius-lg);
  background: var(--gg-surface);
  color: var(--gg-text);
}

/* No photo: one column, with a soft concert-blue glow so the card isn't flat. */
.artist-profile:not(.has-photo) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "main"
    "band";
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--gg-cat-concerts) 26%, transparent), transparent 60%),
    var(--gg-surface);
}

/* The photo, blurred, washes the whole card. A gradient keeps the text side calm. */
.artist-profile-wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  overflow: hidden;
  pointer-events: none;
}

.artist-profile-wash > img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: blur(48px) saturate(1.3);
  transform: scale(1.3);
  opacity: 0.55;
}

.artist-profile-wash::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gg-surface) 96%, transparent) 0%,
    color-mix(in srgb, var(--gg-surface) 82%, transparent) 42%,
    color-mix(in srgb, var(--gg-surface) 35%, transparent) 100%);
}

/* ---- Name, chips and the tour at a glance ---- */

.artist-profile-main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  min-width: 0;
  padding: 40px 0 40px 40px;
}

.artist-profile:not(.has-photo) .artist-profile-main {
  padding-right: 40px;
}

.artist-profile .eyebrow {
  margin: 0;
}

.artist-profile h1 {
  max-width: 18ch;
  margin: 0;
  color: var(--gg-text);
  font: 700 clamp(36px, 4.4vw, 60px)/1.02 var(--gg-font-display);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.artist-profile .act-title-suffix {
  display: block;
  margin-top: 10px;
  color: var(--gg-text-2);
  font: 500 clamp(18px, 1.9vw, 24px)/1.25 var(--gg-font-display);
  letter-spacing: 0;
}

.artist-profile .tribute-targets,
.artist-profile .tour-line {
  max-width: 60ch;
  margin: 0;
  color: var(--gg-text-2);
  font-size: var(--gg-fs-lead);
  line-height: 1.55;
}

.artist-profile-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.artist-profile-tags > li {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid var(--gg-border-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gg-bg) 45%, transparent);
  color: var(--gg-text-1);
  font: 600 13.5px/1.2 var(--gg-font-body);
}

.artist-profile-tags > .artist-profile-from {
  gap: 6px;
  padding-inline: 4px;
  border-color: transparent;
  background: none;
  color: var(--gg-text-2);
  font-weight: 500;
}

.artist-profile-tags .ui-icon {
  flex: none;
  color: var(--gg-text-3);
}

/* The tour at a glance as three tiles. The fact text itself stays as it is. */
.artist-profile .act-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

.artist-profile .act-facts p {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius);
  background: color-mix(in srgb, var(--gg-bg) 55%, transparent);
  color: var(--gg-text);
  font: 600 15px/1.3 var(--gg-font-display);
}

.artist-profile .act-facts p + p {
  padding-left: 16px;
  border-left: 1px solid var(--gg-border);
}

.artist-profile .act-facts .ui-icon {
  flex: none;
  color: var(--gg-text-3);
}

.artist-profile .act-dates-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  min-height: 44px;
  margin: 8px 0 0;
  padding: 0 18px;
  border: 1px solid var(--gg-primary);
  border-radius: var(--gg-radius);
  background: var(--gg-primary);
  color: var(--gg-on-light);
  font: 600 14px/1 var(--gg-font-body);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .artist-profile .act-dates-link:hover {
    border-color: var(--gg-primary-hover);
    background: var(--gg-primary-hover);
  }
}

/* ---- The photo: always the whole photo ---- */

.artist-profile .artist-profile-media {
  grid-area: media;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 40px 40px 40px 0;
  container-type: inline-size;
}

body #main .artist-profile .artist-profile-media > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: contain;
  border-radius: var(--gg-radius);
  background: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Square and tall photos are sized by height, capped by the column width, so
   the box always matches the photo. */
body #main .artist-profile .artist-profile-media:is(.photo-square, .photo-portrait) > img {
  width: auto;
  height: 440px;
}

body #main .artist-profile .artist-profile-media.photo-square > img {
  height: min(440px, 87cqw);
}

body #main .artist-profile .artist-profile-media.photo-portrait > img {
  height: min(440px, 111cqw);
}

.artist-profile .artist-profile-media > figcaption {
  max-width: 100%;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: var(--gg-radius-xs);
  background: color-mix(in srgb, var(--gg-bg) 85%, transparent);
  color: var(--gg-text-2);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.artist-profile .artist-profile-media > figcaption a {
  color: var(--gg-text-1);
}

/* ---- The band: next show and official links ---- */

.artist-profile-band {
  grid-area: band;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  border-top: 1px solid var(--gg-border);
  background: color-mix(in srgb, var(--gg-bg) 72%, transparent);
}

.artist-profile-band-single {
  grid-template-columns: minmax(0, 1fr);
}

.artist-profile-next,
.artist-profile-links {
  min-width: 0;
  padding: 24px 40px 28px;
}

.artist-profile-next + .artist-profile-links {
  border-left: 1px solid var(--gg-border);
}

.artist-profile-label {
  margin: 0 0 12px;
  color: var(--gg-text-3);
  font: 600 13px/1.2 var(--gg-font-body);
}

.artist-profile-ticket {
  display: flex;
  align-items: center;
  gap: 20px;
}

.artist-profile-date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 76px;
  min-height: 84px;
  border: 1px solid var(--gg-border-strong);
  border-radius: var(--gg-radius);
  background: var(--gg-surface-2);
  color: var(--gg-text-2);
  font: 600 12.5px/1.1 var(--gg-font-body);
}

.artist-profile-date strong {
  color: var(--gg-text);
  font: 700 32px/1 var(--gg-font-display);
}

.artist-profile-where {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  color: var(--gg-text-2);
  font-size: 14px;
  line-height: 1.4;
}

.artist-profile-where strong {
  color: var(--gg-text);
  font: 700 21px/1.2 var(--gg-font-display);
  overflow-wrap: anywhere;
}

.artist-profile-where > span {
  overflow-wrap: anywhere;
}

.artist-profile-actions {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.artist-profile .artist-profile-actions .ticket-button {
  min-height: 44px;
  padding: 8px 18px;
  border: 1px solid var(--gg-orange, #ff7a1a);
  background: var(--gg-orange, #ff7a1a);
  color: var(--gg-bg);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  --gg-ticket-hover: #ff8a34;
  --gg-ticket-pressed: #ec6810;
  --gg-ticket-text: var(--gg-bg);
}

.artist-profile-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  color: var(--gg-link);
  font-size: 14px;
  font-weight: 600;
}

/* No ticket link for the next show: "Show details" becomes the button. */
.artist-profile-actions > .artist-profile-more:only-child {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--gg-border-strong);
  border-radius: var(--gg-radius);
  background: var(--gg-surface-2);
  color: var(--gg-text);
  text-decoration: none;
}

.artist-profile-links ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.artist-profile-links a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--gg-border);
  border-radius: var(--gg-radius);
  background: color-mix(in srgb, var(--gg-surface-2) 70%, transparent);
  color: var(--gg-text);
  font: 600 14px/1.25 var(--gg-font-body);
  text-decoration: none;
}

.artist-profile-links a > .ui-icon {
  flex: none;
  box-sizing: content-box;
  padding: 7px;
  border-radius: 50%;
  background: var(--gg-surface-4);
  color: var(--gg-text-1);
}

.artist-profile-links a > span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.artist-profile-links small {
  overflow: hidden;
  color: var(--gg-text-3);
  font-size: 12.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  .artist-profile-links a:hover {
    border-color: var(--gg-text-4);
    background: var(--gg-surface-3);
  }

  .artist-profile-more:hover {
    text-decoration: underline;
  }
}

.artist-profile a:focus-visible {
  outline: 2px solid var(--gg-link);
  outline-offset: 3px;
}

/* A tour news story sits as a full-width row under the band's two halves. */
.artist-profile-band > .tour-news-link {
  grid-column: 1 / -1;
}

#main .artist-profile-band > .tour-news-link {
  margin: 0;
  border-width: 1px 0 0;
  border-left: 3px solid var(--news-kind);
  border-radius: 0;
  padding-inline: 37px 40px;
}

/* No photo but a next show: on computers the ticket fills the right-hand side. */
@media (min-width: 1000px) {
  .artist-profile:not(.has-photo):has(.artist-profile-next) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    grid-template-areas:
      "main next"
      "band band";
  }

  .artist-profile:not(.has-photo):has(.artist-profile-next) .artist-profile-band {
    display: contents;
  }

  .artist-profile:not(.has-photo):has(.artist-profile-next) .artist-profile-next {
    grid-area: next;
    align-self: center;
    margin: 40px 40px 40px 0;
    padding: 20px 24px 24px;
    border: 1px solid var(--gg-border-strong);
    border-radius: var(--gg-radius-lg);
    background: color-mix(in srgb, var(--gg-bg) 60%, transparent);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  }

  .artist-profile:not(.has-photo):has(.artist-profile-next) .artist-profile-ticket {
    flex-wrap: wrap;
  }

  .artist-profile:not(.has-photo):has(.artist-profile-next) .artist-profile-actions {
    flex: 1 1 100%;
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .artist-profile:not(.has-photo):has(.artist-profile-next) .artist-profile-actions .ticket-button {
    flex: 1 1 auto;
  }

  .artist-profile:not(.has-photo):has(.artist-profile-next) :is(.artist-profile-links, .artist-profile-band > .tour-news-link) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--gg-border);
    border-left: 0;
    background: color-mix(in srgb, var(--gg-bg) 72%, transparent);
  }

  .artist-profile:not(.has-photo):has(.artist-profile-next) .artist-profile-links ul {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* ---- Computers up to 1199px and tablets ---- */

@media (max-width: 1199px) {
  .artist-profile {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    column-gap: 32px;
  }

  .artist-profile-band {
    grid-template-columns: minmax(0, 1fr);
  }

  .artist-profile-next + .artist-profile-links {
    border-top: 1px solid var(--gg-border);
    border-left: 0;
  }

  .artist-profile-links ul {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  }
}

/* ---- Tablets and phones: the photo goes on top, full width ---- */

@media (max-width: 999px) {
  .artist-profile,
  .artist-profile:not(.has-photo) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "media"
      "main"
      "band";
  }

  .artist-profile-wash::after {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--gg-surface) 20%, transparent) 0%,
      color-mix(in srgb, var(--gg-surface) 85%, transparent) 42%,
      var(--gg-surface) 70%);
  }

  .artist-profile-main,
  .artist-profile:not(.has-photo) .artist-profile-main {
    padding: 24px 28px 28px;
  }

  .artist-profile .artist-profile-media {
    align-items: center;
    padding: 0;
  }

  /* The whole photo on its blurred copy, as big as the screen allows. */
  body #main .artist-profile .artist-profile-media > img,
  body #main .artist-profile .artist-profile-media:is(.photo-square, .photo-portrait) > img {
    width: 100%;
    height: auto;
    max-height: min(62vh, 520px);
    border-radius: 0;
    box-shadow: none;
  }

  .artist-profile .artist-profile-media > figcaption {
    margin: 8px 28px 0;
    text-align: center;
  }

  .artist-profile-next,
  .artist-profile-links {
    padding: 20px 28px 24px;
  }

  .artist-profile-links ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #main .artist-profile-band > .tour-news-link {
    padding-inline: 25px 28px;
  }

  /* act-pages.css reorders the old heading on small screens. Keep this one in reading order. */
  .artist-profile-main > * {
    order: 0;
  }
}

/* ---- Phones: edge to edge ---- */

@media (max-width: 759px) {
  .artist-profile,
  .artist-profile:not(.has-photo) {
    margin-inline: calc(50% - 50vw);
    border-width: 1px 0;
    border-radius: 0;
  }

  /* site-redesign.css zeroes the side margins of everything directly inside #main on
     phones (artist pages have no .act-page wrapper), so this needs the doubled id. */
  body #main#main > .artist-profile {
    margin-inline: calc(50% - 50vw);
  }

  .artist-profile-main,
  .artist-profile:not(.has-photo) .artist-profile-main {
    gap: 14px;
    padding: 20px var(--gg-gutter, 16px) 24px;
  }

  .artist-profile h1 {
    font-size: clamp(32px, 9vw, 40px);
  }

  .artist-profile .act-title-suffix {
    margin-top: 6px;
    font-size: 20px;
  }

  .artist-profile .artist-profile-media > figcaption {
    margin: 8px var(--gg-gutter, 16px) 0;
  }

  /* Two tiles side by side; the date range gets the full width. */
  .artist-profile .act-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 4px;
  }

  .artist-profile .act-facts p {
    gap: 8px;
    padding: 10px;
    font-size: 14px;
  }

  .artist-profile .act-facts p + p {
    padding-left: 10px;
  }

  .artist-profile .act-facts p:nth-child(3):last-child {
    grid-column: 1 / -1;
  }

  .artist-profile .act-dates-link {
    align-self: stretch;
    justify-content: center;
    min-height: 48px;
  }

  .artist-profile-next,
  .artist-profile-links {
    padding: 20px var(--gg-gutter, 16px) 24px;
  }

  .artist-profile-ticket {
    flex-wrap: wrap;
    gap: 14px 16px;
  }

  .artist-profile-date {
    width: 68px;
    min-height: 76px;
  }

  .artist-profile-date strong {
    font-size: 28px;
  }

  .artist-profile-where {
    flex-basis: calc(100% - 84px);
  }

  .artist-profile-actions {
    flex: 1 1 100%;
  }

  .artist-profile .artist-profile-actions .ticket-button {
    min-height: 48px;
  }

  .artist-profile-links a {
    gap: 10px;
    padding: 8px 10px;
  }

  #main .artist-profile-band > .tour-news-link {
    flex-wrap: wrap;
    padding-inline: calc(var(--gg-gutter, 16px) - 3px) var(--gg-gutter, 16px);
  }
}

/* Small phones (iPhone SE, 320 to 379px): one link per row, so labels never wrap. */
@media (max-width: 379px) {
  .artist-profile-links ul {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (forced-colors: active) {
  .artist-profile,
  .artist-profile-band,
  .artist-profile .act-facts p,
  .artist-profile-tags > li,
  .artist-profile-date,
  .artist-profile-links a {
    border: 1px solid CanvasText;
  }
}

/* ---- Bands Australia booking panel: the last row of the profile band ----
   Premium and clearly Bands Australia's own offer, kept apart from the act's
   official links so it never reads as the act's own management. */

.artist-profile-book {
  --bands-gold: #d8bd75;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 28px;
  padding: 24px 40px 26px;
  border-top: 1px solid color-mix(in srgb, var(--bands-gold) 45%, transparent);
  background:
    radial-gradient(circle at 0% 50%, color-mix(in srgb, var(--bands-gold) 14%, transparent), transparent 42%),
    linear-gradient(135deg, hsl(220 15% 8%), hsl(220 24% 12%) 65%, #1f1b32);
}

.artist-profile-book-logo {
  display: block;
  width: 112px;
  height: auto;
}

.artist-profile-book-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.artist-profile-book-title {
  margin: 0;
  color: var(--gg-text);
  font: 700 21px/1.2 var(--gg-font-display);
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.artist-profile-book-text {
  max-width: 62ch;
  margin: 0;
  color: var(--gg-text-2);
  font-size: 14px;
  line-height: 1.5;
}

.artist-profile-book-note {
  margin: 4px 0 0;
  color: var(--bands-gold);
  font: 600 12.5px/1.4 var(--gg-font-body);
}

.artist-profile-book-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--bands-gold);
  border-radius: var(--gg-radius);
  background: var(--bands-gold);
  color: #14120c;
  font: 700 14px/1 var(--gg-font-body);
  text-decoration: none;
  white-space: nowrap;
}

.artist-profile-book-action .ui-icon {
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .artist-profile-book-action:hover {
    border-color: #e6cf93;
    background: #e6cf93;
    color: #14120c;
  }
}

.artist-profile-book-action:focus-visible {
  outline: 2px solid var(--bands-gold);
  outline-offset: 3px;
}

/* No photo on a computer: the band's rows sit straight in the card grid. */
@media (min-width: 1000px) {
  .artist-profile:not(.has-photo):has(.artist-profile-next) .artist-profile-book {
    grid-column: 1 / -1;
  }
}

/* Tablets: the button goes under the words, so the words get the full width. */
@media (max-width: 999px) {
  .artist-profile-book {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px 20px;
    padding: 20px 28px 24px;
  }

  .artist-profile-book-action {
    grid-column: 2;
    justify-self: start;
  }

  .artist-profile-book-logo {
    width: 96px;
  }
}

/* Phones: logo and question side by side, then the words, then a full-width button. */
@media (max-width: 759px) {
  .artist-profile-book {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px 14px;
    padding: 20px var(--gg-gutter, 16px) 24px;
  }

  .artist-profile-book-logo {
    width: 72px;
  }

  .artist-profile-book-title {
    font-size: 19px;
  }

  .artist-profile-book-copy {
    display: contents;
  }

  .artist-profile-book-title {
    grid-column: 2;
    align-self: center;
  }

  .artist-profile-book-text,
  .artist-profile-book-note,
  .artist-profile-book-action {
    grid-column: 1 / -1;
  }

  .artist-profile-book-action {
    justify-self: stretch;
    min-height: 48px;
    white-space: normal;
  }
}

@media (forced-colors: active) {
  .artist-profile-book,
  .artist-profile-book-action {
    border: 1px solid CanvasText;
  }
}