/* =========================================================
   LINEUP – AVATAR + PILL (MOBILE FIRST)
   Pill sits behind circle on the left, never clips, never overlaps.
   ========================================================= */

/* ---------- Base tokens ---------- */
:root{
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Mobile-first sizes */
  --avatar-size: 180px;
  --avatar-border: 10px;

  --name-pill-width: 220px;
  --name-pill-height: 56px;
  --name-font-size: 16px;

  --pill-offset: calc((var(--avatar-size) / 2.5) + var(--avatar-border));
  --card-width: calc(var(--pill-offset) + var(--name-pill-width));

  --gap-row: 36px;
  --gap-col: 24px;
}

/* ---------- Header ---------- */
.lineup-header {
  position: relative;

  /* Break out of the main-container width */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  height: 60vh;
  min-height: 360px;

  background-image: url("/static/images/artists/hero/lineup-hero-image.99ad24b2f873.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Sit behind navbar */
  margin-top: -100px;   /* match your nav height */
  padding-top: 100px;   /* match your nav height */

  display: flex;
  align-items: center;
  justify-content: center;

  color: #fff;
  text-align: center;
}

.lineup-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 1;
}

.lineup-header-inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 1.5rem;

  display: flex;
  flex-direction: column;
  gap: 0; /* ← single source of truth */
}

.lineup-header h1 {
  font-size: clamp(5.2rem, 5vw, 8.5rem);
  font-family: "Carter One", system-ui;
  font-weight: 400;
  font-style: normal;
  text-shadow: 2px 2px 16px #002c32;
  color: #ffcc37;
}

.lineup-header h2 {
  font-size: clamp(2.2rem, 5vw, 2.5rem);
  font-family: "Carter One", system-ui;
  font-weight: 400;
  font-style: normal;
  text-shadow: 2px 2px 16px #015966;
}

.lineup-meta {
  font-size: 1rem;
  opacity: 0.9;
}

.lineup-header h1,
.lineup-header h2,
.lineup-meta {
  margin: 0;
}


.lineup-date,
.lineup-location{
  display: inline-block;
  margin: 0 0.25rem;
}

/* ---------- Layout section ---------- */
.lineup-list{
  padding: 1rem 0 2.5rem;
}

/* ---------- Grid ----------
   Key rule: columns are at least --card-width.
   That guarantees NO overlap, ever.
*/
.lineup-grid{
  display: grid;
  grid-template-columns: 1fr;           /* mobile first */
  gap: var(--gap-row) var(--gap-col);
  padding: 3rem 0rem 0rem;

  justify-items: center;
  align-items: start;
}

/* ---------- Artist “card” ---------- */
.artist-panel{
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  width: var(--card-width);
  max-width: 100%;
}



/* Accent segment */
.artist-panel::after {
  content: "";
  position: absolute;

  /* LEFT EDGE segment */
  left: -2px;
  top: 0;

  width: 2px;
  height: 20%; /* ← 1/5 of the panel */

  background: #fff;

  border-radius: 2px;
}

/* IMPORTANT: wrapper is the full footprint width */
.artist-panel__image-link{
  position: relative;
  display: block;
  width: var(--card-width);
  max-width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Circle image */
.artist-panel__image{
  position: relative;
  z-index: 2;

  display: block;
  width: var(--avatar-size);
  height: var(--avatar-size);

  /* pushes circle down so pill overlaps nicely */
  margin-top: calc(var(--name-pill-height) / 2);

  border-radius: 50%;
  object-fit: cover;
  border: var(--avatar-border) solid #17304c;
  background: #17304c;
}

/* Pill */
.artist-panel__name-tag{
  position: absolute;
  top: 0;
  left: var(--pill-offset);

  width: var(--name-pill-width);
  height: var(--name-pill-height);

  display: flex;
  align-items: center;
  justify-content: center;

  background: #17304c;
  color: #fff;
  border-radius: 999px;

  font-family: "Permanent Marker", cursive;
  font-size: var(--name-font-size);
  line-height: 1;

  z-index: 1;
  overflow: hidden; /* fixed pill; clip overflow */
}

/* Text behavior: never behind image/border, wraps instead of hiding */
.artist-panel__name-text{
  display: block;

  /* Reserve the overlap area so text never renders under the circle */
  padding-left: calc(var(--pill-offset) + 10px);
  padding-right: 10px;

  /* Wrap long names */
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: center;

  max-width: 100%;
}

/* Optional bio hidden for this design */
.artist-panel__bio{
  display: none;
}

/* Focus */
.artist-panel__image-link:focus{
  outline: 3px solid #4ade80;
  outline-offset: 6px;
}

/* =========================================================
   Responsive sizing (keeps pill from clipping on small screens)
   ========================================================= */

/* Small phones: tighten footprint so it fits */
@media (max-width: 360px){
  :root{
    --avatar-size: 130px;
    --avatar-border: 9px;

    --name-pill-width: 200px;
    --name-pill-height: 56px;
    --name-font-size: 15px;

    --gap-row: 28px;
    --gap-col: 18px;
  }

  
}

/* Larger phones */
@media (min-width: 420px){
  :root{
    --avatar-size: 170px;
    --avatar-border: 11px;
    --name-pill-width: 240px;
    --name-pill-height: 56px;
    --name-font-size: 16px;
    --gap-col: 28px;
  }

  
}

@media (min-width: 760px){
  :root{
    --avatar-size: 190px;      /* reduced from 250 */
    --avatar-border: 12px;
    --name-pill-width: 260px;  /* reduced from 340 */
    --name-pill-height: 56px;
    --name-font-size: 17px;
    --gap-col: 40px;
    --gap-row: 44px;
  }

  .lineup-grid{
    padding: 5.5rem 4rem 2.5rem;
  }

  .lineup-header h1 {
    font-size: clamp(8.2rem, 5vw, 8.5rem);
  }
}

@media (min-width: 900px){
  .lineup-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    
  }
}

/* desktop: still 2 columns commonly, sometimes 3 */
@media (min-width: 1100px){
  :root{
    --avatar-size: 220px;
    --avatar-border: 13px;
    --name-pill-width: 300px;
    --name-pill-height: 52px;
    --name-font-size: 18px;
    --gap-col: 60px;
    --gap-row: 54px;
  }
  
}

@media (min-width: 1300px){
  .lineup-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* wide screens: 3 columns reliably */
@media (min-width: 1400px){
  :root{
    --avatar-size: 200px;
    --avatar-border: 10px;
    --name-pill-width: 340px;
    --name-pill-height: 56px;
    --name-font-size: 18px;
    --gap-col: 80px;
    --gap-row: 60px;
  }
  
}