/* =====================================================
   39 NORTH - INDEX (HOME PAGE) ONLY STYLES
   Requires css/styles.css to be loaded first
   ===================================================== */

/* ===== HERO =====
   The photo comes from js/images-data.js (sets --hero-image and --hero-pos).
   The fallbacks after the commas are used only if that file is missing. */
.hero{
  min-height:100vh;min-height:100svh;
  position:relative;
  display:flex;align-items:flex-end;
  background-image:
    linear-gradient(180deg, rgba(12,11,10,.55) 0%, rgba(12,11,10,.55) 40%, rgba(12,11,10,.97) 100%),
    var(--hero-image, url('/images/hero-bg.jpg'));
  background-position:center, var(--hero-pos, center 22%);
  background-size:cover;
  background-repeat:no-repeat;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(transparent, transparent 118px, rgba(196,30,58,.05) 119px, transparent 120px);
  pointer-events:none;
}
.hero-inner{width:100%;padding-bottom:76px;position:relative;z-index:2;}
.hero h1{
  font-size:clamp(64px,13vw,150px);
  line-height:.86;
  letter-spacing:-.01em;
}
.hero h1 em{font-style:normal;color:var(--red-bright);}
.hero-sub{
  font-size:clamp(16px,2vw,20px);
  color:var(--paper-dim);
  max-width:560px;margin-top:22px;font-weight:400;
}
.hero-ctas{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}

/* ===== NEXT SHOW STRIP (filled by js/index.js from js/shows-data.js) ===== */
.strip{
  background:var(--red);
  padding:18px 0;
  overflow:hidden;
  position:relative;
}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.strip-label{
  font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.strip-info{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;letter-spacing:.02em;text-transform:uppercase;
  color:#fff;display:flex;gap:18px;flex-wrap:wrap;align-items:center;
}
.strip-info .sep{opacity:.6;font-weight:400;}
.strip a.btn-outline{border-color:rgba(255,255,255,.7);color:#fff;padding:9px 18px;font-size:13.5px;}
.strip a.btn-outline:hover{border-color:#fff;transform:none;background:rgba(255,255,255,.12);}

/* ===== ABOUT ===== */
.about-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:70px;align-items:start;}
.about-text p{color:var(--paper-dim);font-size:18px;margin-bottom:18px;max-width:520px;}
.about-text p:first-of-type{font-size:21px;color:var(--paper);font-weight:500;}
.stat-row{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap;}
.stat b{display:block;font-family:'Anton',sans-serif;font-size:36px;color:var(--red-bright);font-weight:400;}
.stat span{font-family:'Barlow Condensed',sans-serif;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}

/* ===== THE SET (filterable grid) ===== */
.set-section{background:var(--bg-alt);}
.genre-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px;}
.genre-pill{
  font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14.5px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--line);padding:9px 18px;border-radius:100px;color:var(--paper-dim);
  cursor:pointer;transition:all .2s;background:transparent;
}
.genre-pill.active,.genre-pill:hover{border-color:var(--red);color:#fff;background:var(--red-deep);}
.song-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);}
.song-cell{background:var(--bg-alt);padding:14px 18px;font-size:15px;color:var(--paper-dim);display:none;}
.song-cell.show{display:block;}
.song-cell b{color:var(--paper);font-weight:500;display:block;}
.song-cell span{display:block;}
.set-more{
  margin-top:28px;font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:14.5px;
  color:var(--red-bright);cursor:pointer;display:inline-flex;align-items:center;gap:8px;background:none;border:none;
}
.set-note{margin-top:36px;color:var(--muted);font-size:15px;max-width:560px;border-left:2px solid var(--red);padding-left:18px;}

/* ===== SHOWS (data-driven, see js/shows-data.js) ===== */
.show-list{border-top:1px solid var(--line);}
.show-row{
  display:grid;grid-template-columns:110px 1fr auto;gap:28px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line);
}
.show-date{font-family:'Space Mono',monospace;}
.show-date .mon{font-size:13px;color:var(--red-bright);letter-spacing:.1em;text-transform:uppercase;}
.show-date .day{font-family:'Anton',sans-serif;font-size:38px;line-height:1;margin-top:2px;}
.show-venue b{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:21px;letter-spacing:.01em;text-transform:uppercase;}
.show-venue .loc{color:var(--muted);font-size:14.5px;margin-top:4px;}
.show-venue .tag{
  display:inline-block;margin-top:8px;font-family:'Space Mono',monospace;font-size:11px;
  color:var(--red-bright);border:1px solid var(--red-deep);padding:3px 9px;border-radius:100px;letter-spacing:.05em;
}
.show-links{display:flex;gap:10px;font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;}
.show-links a{color:var(--paper-dim);border-bottom:1px solid var(--line);padding-bottom:2px;}
.show-links a:hover{color:var(--paper);border-color:var(--paper);}
.show-empty{padding:44px 0;max-width:620px;}
.show-empty h3{font-size:32px;line-height:1.05;margin-bottom:12px;}
.show-empty p{color:var(--paper-dim);font-size:17px;}
.show-empty a{color:var(--paper);border-bottom:1px solid var(--red-bright);}
.show-empty a:hover{color:var(--red-bright);}

/* ===== index.html-specific responsive tweaks ===== */
@media (max-width:900px){
  .about-grid{grid-template-columns:1fr;gap:44px;}
  .members{max-width:420px;}
  .song-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
  .show-row{grid-template-columns:64px 1fr;grid-template-areas:"date venue" "date links";}
  .show-date{grid-area:date;} .show-venue{grid-area:venue;} .show-links{grid-area:links;margin-top:10px;gap:18px;}
  .strip .wrap{flex-direction:column;align-items:flex-start;gap:8px;}
  .strip-info{gap:8px 14px;font-size:17px;}
  .strip-info .sep{display:none;}
  .strip-info > *{flex:0 0 auto;}
}
@media (max-width:560px){
  .song-grid{grid-template-columns:1fr;}
  .genre-row{gap:8px;}
  .genre-pill{padding:9px 14px;font-size:13.5px;}
}
@media (max-width:480px){
  .hero-inner{padding-bottom:56px;}
  .stat-row{gap:26px;}
}