/* Artists — cards, profiles, forms */

@layer components {
  .artist-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
  }

  .artist-card__photo {
    width: 100%;
    height: 10rem;
    object-fit: cover;
    display: block;
  }

  .artist-card__photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in oklch, var(--color-link) 10%, var(--color-surface));
    color: var(--color-link);
    font-size: 1.5rem;
    font-weight: 700;
  }

  .artist-card__body {
    padding: var(--block-space) var(--inline-space-l);

    & h3 { margin: 0 0 0.25rem; }
  }

  .artist-card__actions {
    display: flex;
    gap: var(--inline-space-s);
    margin-block-start: var(--block-space-s);
  }

  .artist-form__photo-preview {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-block-end: var(--block-space-s);
  }

  /* ── Artist profile ── */

  .artist-profile {}

  /* ── Hero ── */

  .artist-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-block-end: var(--block-space-l);
    min-height: 14rem;
    display: flex;
    align-items: flex-end;
  }

  .artist-hero__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .artist-hero__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg,
      color-mix(in oklch, oklch(var(--lch-uv)) 25%, var(--color-surface)),
      color-mix(in oklch, oklch(var(--lch-flare)) 20%, var(--color-surface)));
    font-size: 4rem;
    font-weight: 700;
    color: color-mix(in oklch, var(--color-ink) 50%, transparent);
  }

  .artist-hero__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--color-canvas) 0%, oklch(0% 0 0 / 0.6) 40%, transparent 100%);
  }

  .artist-hero__content {
    position: relative;
    z-index: 1;
    padding: var(--block-space-l) var(--inline-space-l);
    width: 100%;
  }

  .artist-hero__name {
    font-size: 2rem;
    font-weight: 800;
    color: oklch(98% 0 0);
    margin: 0;
    text-shadow: 0 2px 12px oklch(0% 0 0 / 0.5);
    line-height: 1.2;
  }

  .artist-hero__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-block-start: 0.5rem;
  }

  .artist-hero__tag {
    display: inline-block;
    padding: 0.1875rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .artist-hero__tag:nth-child(5n+1) { background: color-mix(in oklch, oklch(var(--lch-flare))  25%, transparent); color: oklch(var(--lch-flare)); }
  .artist-hero__tag:nth-child(5n+2) { background: color-mix(in oklch, oklch(var(--lch-golden)) 25%, transparent); color: oklch(var(--lch-golden)); }
  .artist-hero__tag:nth-child(5n+3) { background: color-mix(in oklch, oklch(var(--lch-uv))     25%, transparent); color: oklch(var(--lch-uv)); }
  .artist-hero__tag:nth-child(5n+4) { background: color-mix(in oklch, oklch(var(--lch-laser))  25%, transparent); color: oklch(var(--lch-laser)); }
  .artist-hero__tag:nth-child(5n+5) { background: color-mix(in oklch, oklch(var(--lch-sky))    25%, transparent); color: oklch(var(--lch-sky)); }

  /* ── Social links — icon buttons ── */

  .artist-socials {
    display: flex;
    gap: 0.625rem;
    margin-block-end: var(--block-space-l);
  }

  .artist-social {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    transition: scale 150ms ease, box-shadow 150ms ease;

    & svg {
      width: 1.125rem;
      height: 1.125rem;
    }

    &:hover {
      scale: 1.1;
    }
  }

  .artist-social--spotify {
    background: oklch(63% 0.19 152);
    color: oklch(0% 0 0);

    &:hover { box-shadow: 0 0 12px oklch(63% 0.19 152 / 0.5); }
  }

  .artist-social--instagram {
    background: linear-gradient(135deg, oklch(65% 0.2 50), oklch(55% 0.25 330), oklch(50% 0.2 290));
    color: oklch(100% 0 0);

    &:hover { box-shadow: 0 0 12px oklch(55% 0.25 330 / 0.5); }
  }

  .artist-social--youtube {
    background: oklch(55% 0.24 27);
    color: oklch(100% 0 0);

    &:hover { box-shadow: 0 0 12px oklch(55% 0.24 27 / 0.5); }
  }

  .artist-social--bandcamp {
    background: oklch(48% 0.17 230);
    color: oklch(100% 0 0);

    &:hover { box-shadow: 0 0 12px oklch(48% 0.17 230 / 0.5); }
  }

  .artist-social--soundcloud {
    background: oklch(65% 0.2 50);
    color: oklch(100% 0 0);

    &:hover { box-shadow: 0 0 12px oklch(65% 0.2 50 / 0.5); }
  }

  /* ── Listen button ── */

  .artist-listen {
    display: inline-flex;
    align-items: center;
    gap: 0.5ch;
    padding: 0.625rem 1.25rem;
    background: linear-gradient(135deg, oklch(var(--lch-flare)), oklch(var(--lch-golden)));
    color: oklch(100% 0 0);
    border: none;
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: scale 150ms ease, box-shadow 150ms ease;

    & svg {
      width: 1.125rem;
      height: 1.125rem;
    }

    &:hover {
      scale: 1.03;
      box-shadow: 0 4px 16px color-mix(in oklch, oklch(var(--lch-flare)) 40%, transparent);
    }
  }

  /* ── Bio section ── */

  .artist-bio {
    margin-block-end: var(--block-space-l);
    line-height: 1.7;
    color: var(--color-ink-muted);
    max-width: 50rem;
  }

  /* ── Schedule section ── */

  .artist-schedule {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--block-space-l) var(--inline-space-l);
    margin-block-end: var(--block-space-l);
  }

  .artist-schedule__header {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
    margin-block-end: var(--block-space);
    padding-block-end: var(--block-space);
    border-block-end: 1px solid var(--color-border);

    & svg {
      width: 1.25rem;
      height: 1.25rem;
      color: oklch(var(--lch-flare));
      flex-shrink: 0;
    }
  }

  .artist-schedule__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink);
    margin: 0;
  }

  .artist-schedule .slot-card {
    border-block-end-color: color-mix(in oklch, var(--color-border) 50%, transparent);

    &:last-child { border-block-end: none; }
  }

  /* ── Group interest ── */

  .artist-group-interest {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--block-space-l) var(--inline-space-l);
    margin-block-end: var(--block-space-l);
  }

  /* ── Media player (override for artist page) ── */

  .artist-profile .media-player {
    margin-block: var(--block-space);
    border-color: color-mix(in oklch, var(--color-border) 60%, transparent);
  }

  /* ── Responsive ── */

  @media (max-width: 600px) {
    .artist-hero {
      min-height: 12rem;
      border-radius: 0;
    }

    .artist-hero__name {
      font-size: 1.5rem;
    }
  }
}