@import url('../grip-tape.css');

.artist-page { background: var(--cream); }
.artist-detail-hero {
  background: var(--pink);
  border-bottom: 3px solid var(--ink);
  padding: clamp(56px, 8vw, 96px) 0 clamp(54px, 7vw, 86px);
}
.artist-detail-grid {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
}
.artist-portrait {
  width: 190px;
  aspect-ratio: 1;
  border: 4px solid var(--ink);
  border-radius: 50%;
  box-shadow: 8px 8px 0 var(--ink);
  background-image: url('artist-portraits.svg');
  background-repeat: no-repeat;
  background-size: 700% 200%;
  background-color: var(--card);
}
.p01 { background-position: 0% 0%; }
.p02 { background-position: 16.6667% 0%; }
.p03 { background-position: 33.3333% 0%; }
.p04 { background-position: 50% 0%; }
.p05 { background-position: 66.6667% 0%; }
.p06 { background-position: 83.3333% 0%; }
.p07 { background-position: 100% 0%; }
.p08 { background-position: 0% 100%; }
.p09 { background-position: 16.6667% 100%; }
.p10 { background-position: 33.3333% 100%; }
.p11 { background-position: 50% 100%; }
.p12 { background-position: 66.6667% 100%; }
.p13 { background-position: 83.3333% 100%; }
.p14 { background-position: 100% 100%; }
.artist-kicker { margin-bottom: 10px; }
.artist-title { font-size: clamp(3rem, 8vw, 6.4rem); max-width: 1000px; }
.artist-handle { margin-top: 16px; font-size: 1.05rem; font-weight: 900; }
.artist-handle a { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.artist-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.artist-tags span {
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  padding: 5px 10px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.artist-body { padding: clamp(58px, 8vw, 95px) 0; }
.artist-content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: clamp(34px, 6vw, 72px);
  align-items: start;
}
.artist-copy h2, .artist-side h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: 22px; }
.artist-copy p { max-width: 760px; font-size: 1.06rem; }
.artist-side { display: grid; gap: 22px; }
.info-card {
  border: 3px solid var(--ink);
  background: var(--card);
  padding: 22px;
  box-shadow: var(--shadow);
}
.info-card.lime { background: var(--lime); }
.info-card.orange { background: var(--orange); }
.info-card h3 { font-size: 1.25rem; margin-bottom: 12px; }
.info-card p:last-child { margin-bottom: 0; }
.artist-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.artist-wall-state {
  margin-top: 58px;
  border: 3px solid var(--ink);
  background: var(--ink);
  color: var(--cream);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: 8px 8px 0 var(--pink);
}
.artist-wall-state h2 { color: var(--lime); font-size: clamp(2rem, 4vw, 3.3rem); margin-bottom: 14px; }
.artist-wall-state > p { max-width: 760px; }
.artist-assigned-wall {
  display: grid;
  grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
  gap: 24px;
  align-items: center;
  margin-top: 22px;
  border: 3px solid var(--cream);
  background: var(--card);
  color: var(--ink);
  box-shadow: 6px 6px 0 var(--pink);
  overflow: hidden;
}
.artist-assigned-wall img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  border-right: 3px solid var(--ink);
}
.artist-assigned-wall-copy { padding: 24px; }
.artist-assigned-wall-copy h2 { color: var(--ink); margin-bottom: 12px; }
.artist-assigned-wall-copy p { margin-bottom: 8px; }
.artist-assigned-wall-copy .artist-links { margin-top: 18px; }
.artist-nav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 42px;
}
.artist-nav a { font-weight: 900; text-transform: uppercase; font-size: .78rem; }
.artist-index-hero { padding: 78px 0 54px; background: var(--pink); border-bottom: 3px solid var(--ink); }
.artist-index-hero h1 { font-size: clamp(3rem, 8vw, 6.2rem); }
.artist-index { padding: 72px 0 100px; }
.artist-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.artist-index-card {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: center;
  border: 3px solid var(--ink);
  background: var(--card);
  padding: 16px;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease;
}
.artist-index-card:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }
.artist-index-card .artist-portrait { width: 82px; box-shadow: 4px 4px 0 var(--ink); border-width: 3px; }
.artist-index-card h2 { font-size: 1.2rem; margin-bottom: 6px; }
.artist-index-card p { margin: 0; font-size: .78rem; font-weight: 800; }

/* Full-size public artist photography. The roster sprite remains the fallback if a remote image is unavailable. */
.artist-portrait {
  background-size: cover;
  background-position: center;
}
.p01 { background-image: url('https://galerie.rosenheim.de/fileadmin/Bilder_und_Dokumente/Bilder/transit_art_artists/Case_Maclaim.jpg'); }
.p02 { background-image: url('https://images.squarespace-cdn.com/content/v1/69e65d0a1dcd562823d159d1/d645d51a-512c-4bb6-9973-07bbf00dd6af/IMG_0999.jpg'); }
.p03 { background-image: url('https://images.squarespace-cdn.com/content/v1/5bde9d69f793922ca1f5e96a/1589886081198-UFD5ZF50NC1HTSUOTFQ7/Artist_Profile_Tom.jpg'); }
.p04 { background-image: url('../../assets/team/shane.png'); }
.p05 { background-image: url('https://www.street-artwork.com/uploads/artist/avatar/avatar-d13c40b3-69e658d46bde6282185710.jpg'); }
.p06 { background-image: url('https://sslarts.org/images/econa-article-images/218/full/1400/nomi-resized.jpeg'); }
.p07 { background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/38/2022_Street_Artist_Tymon_de_Laat_Creates_a_painting_Inside_the_Straat_Museum_for_Street_Art_and_Graffiti_-_Amsterdam%2C_Netherlands.jpg/500px-2022_Street_Artist_Tymon_de_Laat_Creates_a_painting_Inside_the_Straat_Museum_for_Street_Art_and_Graffiti_-_Amsterdam%2C_Netherlands.jpg'); }
.p08 { background-image: url('https://images.squarespace-cdn.com/content/v1/61006d661a1e037270a9411f/b986db0a-b655-4853-af58-474a0f4e2a72/Damin%2BLujan.jpg'); }
.p09 { background-image: url('https://therooster.com/wp-content/uploads/2021/09/wingchowartist1.jpg'); }
.p10 { background-image: url('https://storage.googleapis.com/beautify_assets/production/user_1816/img_1622592424236_thmb.PNG'); }
.p11 { background-image: url('https://bkompleted.com/jtv1web.jpg'); }
.p12 { background-image: url('https://i0.wp.com/whitneyholbourn.com/wp-content/uploads/2024/03/wh_fk-portrait.jpeg?fit=1440%2C1800&ssl=1'); }
.p13 { background-image: url('https://cdn.shoutouthtx.com/wp-content/uploads/2022/10/c-PersonalFloydMendoza__3B828552F2DD414E99A26B8D1D03CAA3_1665374697434.jpeg'); }
.p14 { background-image: url('https://freight.cargo.site/t/original/i/ad93533abdedd5d4a2088e4a9066b8e589da2080562864785c06cf0e87d0bc16/IMG_3823.jpeg'); }

@media (max-width: 760px) {
  .artist-detail-grid, .artist-content-grid, .artist-assigned-wall { grid-template-columns: 1fr; }
  .artist-detail-grid { align-items: start; }
  .artist-portrait { width: 150px; }
  .artist-side { order: 2; }
  .artist-assigned-wall img { min-height: 200px; border-right: 0; border-bottom: 3px solid var(--ink); }
}