/* ============================================================================
   Home — sleek redesign. Replaces the tall stacked "bands" with tighter,
   multi-column sections so the page reads in one or two scrolls. Uses the site
   tokens from main.css (black base, pink/cyan/purple, Heebo + Poppins).
   ============================================================================ */

/* Tight vertical rhythm — keep sections close so more content stays in view and
   nothing reads as empty space between blocks. */
.hp-section { max-width: 1100px; margin: 0 auto; padding: clamp(1.1rem, 2.4vw, 1.8rem) 1.4rem; }
/* The first VISIBLE section under the hero sits closer still — the hero has padding.
   News/Events carry the `hidden` attribute until populated, so skip past those. */
.hp-hero + .hp-section,
.hp-hero + .hp-section[hidden] + .hp-section,
.hp-hero + .hp-section[hidden] + .hp-section[hidden] + .hp-section {
  padding-top: clamp(.4rem, 1.2vw, .8rem);
}
.hp-eyebrow { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin: 0 0 .9rem; }
.hp-sec-title { font-family: 'Heebo', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 .95rem; }

/* staggered entrance */
@keyframes hpUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hp-anim { opacity: 0; animation: hpUp .65s cubic-bezier(.2,.7,.2,1) forwards; }
.hp-d1 { animation-delay: .05s; } .hp-d2 { animation-delay: .14s; }
.hp-d3 { animation-delay: .23s; } .hp-d4 { animation-delay: .32s; } .hp-d5 { animation-delay: .42s; }
@media (prefers-reduced-motion: reduce) { .hp-anim { opacity: 1; animation: none; } }

/* ---- Hero ---------------------------------------------------------------- */
/* No photo — atmosphere comes from two soft neon glows (brand pink + cyan) over
   black, with the bold type + a CSS broadcast emblem carrying the composition. */
.hp-hero { position: relative; overflow: hidden; }
.hp-donate-hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 90% at 88% 18%, rgba(46,228,234,.16), transparent 60%),
    radial-gradient(70% 100% at 8% 8%, rgba(255,82,168,.16), transparent 55%);
}
/* Full-width, centered, focused donate message — no image, no side column. */
.hp-hero-inner {
  position: relative; z-index: 1; max-width: 1100px; margin: 0 auto;
  padding: clamp(2rem, 4.5vw, 3.4rem) 1.4rem clamp(1.1rem, 2vw, 1.6rem);
  text-align: center;
}
.hp-hero-copy { max-width: 760px; margin: 0 auto; }
.hp-title { font-family: 'Heebo', sans-serif; font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.07; letter-spacing: -.02em; margin: 0 0 1.1rem; }
.hp-lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.65; color: #dadae3; margin: 0 auto 1.7rem; max-width: 60ch; }
.hp-lead .a-pink { color: var(--pink); font-weight: 600; }
.hp-lead .a-cyan { color: var(--cyan); font-weight: 600; }
.hp-lead .a-purple { color: #bda4ff; font-weight: 600; }
.hp-cta { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.hp-cta .pill-ghost { background: transparent; border: 1px solid rgba(255,255,255,.28); color: var(--white); }
.hp-cta .pill-ghost:hover { border-color: var(--cyan); color: var(--cyan); filter: none; }


/* ---- Pillars (the three things we are) ----------------------------------- */
.hp-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pillar {
  display: block; text-decoration: none; color: var(--white);
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 1.5rem 1.4rem; transition: transform .18s, border-color .18s, background .18s;
}
.pillar:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.055); }
/* colored top accent instead of an icon — cleaner, on-brand, not "AI" */
.pillar { position: relative; overflow: hidden; }
.pillar::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; }
.pillar.p1::before { background: linear-gradient(90deg, #ff7ac0, #e32b87); }
.pillar.p2::before { background: linear-gradient(90deg, #6df0f5, #2ee4ea); }
.pillar.p3::before { background: linear-gradient(90deg, #9a72e6, #6a3fb5); }
.pillar h3 { font-family: 'Poppins', sans-serif; font-size: 1.12rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--white); margin: .2rem 0 .5rem; }
.pillar p { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
.pillar .more { display: inline-block; margin-top: .9rem; font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--cyan); }

/* slim lit-logo divider */
.hp-strip { max-width: 1100px; margin: 0 auto; padding: 0 1.4rem; }
.hp-strip img { width: 100%; border-radius: 14px; display: block; opacity: .92; }

/* ---- Feature (YouTube) --------------------------------------------------- */
.hp-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.hp-feature-media img { width: 100%; display: block; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.hp-feature p { color: var(--muted); font-size: 1rem; line-height: 1.65; margin: 0 0 1.5rem; }

/* ---- About + Mission (two tight columns) --------------------------------- */
.hp-about { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); }
.hp-about .col h3 { font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); margin: 0 0 .8rem; }
.hp-about .col p { margin: 0; color: #cfcfd8; font-size: .98rem; line-height: 1.7; }
.hp-about .col p + p { margin-top: .9rem; }

/* ---- Get involved (compact CTA cards) ------------------------------------ */
.hp-involve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.involve {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--white);
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  padding: 1.5rem 1.4rem 1.4rem; overflow: hidden; transition: transform .18s, border-color .18s;
}
.involve::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; }
.involve.i1::before { background: linear-gradient(90deg, var(--pink), var(--pink-deep)); }
.involve.i2::before { background: linear-gradient(90deg, var(--cyan), var(--teal)); }
.involve.i3::before { background: linear-gradient(90deg, #9a72e6, var(--purple)); }
.involve:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
.involve h3 { font-family: 'Poppins', sans-serif; font-size: 1.08rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--white); margin: 0 0 .45rem; }
.involve p { margin: 0 0 1.2rem; color: var(--muted); font-size: .9rem; line-height: 1.55; flex: 1; }
.involve .pill { align-self: flex-start; padding: .6rem 1.4rem; font-size: 13px; }

/* ---- Newsletter (compact panel) ------------------------------------------ */
.hp-news {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
  background: linear-gradient(120deg, #1c0f22 0%, #0c1320 100%);
  border: 1px solid rgba(255,255,255,.08); border-radius: 20px; padding: clamp(1.6rem, 3vw, 2.4rem);
}
.hp-news .hp-sec-title { margin-bottom: .5rem; }
.hp-news .sub { color: var(--muted); margin: 0; font-size: .95rem; }
.hp-news form { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.hp-news label { display: block; font-size: .78rem; color: var(--muted); }
.hp-news label.full { grid-column: 1 / -1; }
.hp-news input { display: block; width: 100%; margin-top: .3rem; padding: .75rem .85rem; background: #0c0c10; border: 1px solid #2c2c34; border-radius: 9px; color: var(--white); font-size: 1rem; font-family: inherit; }
.hp-news input:focus { outline: none; border-color: var(--pink); }
.hp-news .req { color: var(--pink); }
.hp-news button { grid-column: 1 / -1; width: 100%; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 860px) {
  .hp-pillars, .hp-involve { grid-template-columns: 1fr; }
  .hp-feature, .hp-about, .hp-news { grid-template-columns: 1fr; }
  .hp-feature-media { order: -1; }
}

/* ---- Bigger hero CTAs (Donate Today / Volunteer) ------------------------- */
.pill-lg { padding: 1.05rem 2.5rem; font-size: 18px; text-transform: none; letter-spacing: 0; }
/* Cyan pill — matches the player bar's DONATE button (cyan with dark text) */
.pill-cyan { background: var(--cyan); color: #06121a; font-weight: 700; }
.pill-cyan:hover { filter: brightness(1.06); }

/* Brand accent words, usable anywhere (not just inside .hp-lead) */
.a-pink { color: var(--pink); font-weight: 600; }
.a-cyan { color: var(--cyan); font-weight: 600; }
.a-purple { color: #bda4ff; font-weight: 600; }

/* ---- Intro / "what we are" (moved below the donate hero) ------------------ */
.hp-intro .hp-sec-title { max-width: 22ch; }
.hp-intro .hp-lead { max-width: 52ch; }

/* ---- Section heads with a "see all" link --------------------------------- */
.hp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.hp-sec-head .hp-eyebrow { margin-bottom: .5rem; }
.hp-sec-head .hp-sec-title { margin: 0; }
.hp-sec-link { flex: 0 0 auto; color: var(--cyan); font-weight: 700; font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.hp-sec-link:hover { color: var(--white); }

/* ---- News cards (homepage; section hidden until posts exist) -------------- */
.hp-news-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 720px) { .hp-news-grid { grid-template-columns: repeat(3, 1fr); } }
.hp-news-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--white); overflow: hidden;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  transition: transform .18s, border-color .18s;
}
.hp-news-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
.hp-news-media { aspect-ratio: 16 / 9; background: #15151b; overflow: hidden; }
.hp-news-media img { width: 100%; height: 100%; object-fit: cover; }
.hp-news-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.hp-news-meta { font-family: 'Poppins', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cyan); margin-bottom: .5rem; }
.hp-news-title { font-family: 'Poppins', sans-serif; font-size: 1.12rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--white); margin: 0 0 .5rem; line-height: 1.3; }
.hp-news-excerpt { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; line-height: 1.55; flex: 1; }
.hp-news-more { font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--pink); }

/* ---- Event cards (homepage) ---------------------------------------------- */
.hp-event-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 720px) { .hp-event-grid { grid-template-columns: repeat(3, 1fr); } }
.hp-event-card {
  display: flex; flex-direction: column; text-decoration: none; color: var(--white); overflow: hidden;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  transition: transform .18s, border-color .18s;
}
.hp-event-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.22); }
.hp-event-media { background: #15151b; }
.hp-event-media img { width: 100%; height: auto; display: block; }
.hp-event-body { padding: 1rem 1.2rem 1.25rem; display: flex; flex-direction: column; gap: .3rem; }
.hp-event-when { color: var(--pink); font-size: .82rem; font-weight: 700; }
.hp-event-name { font-family: 'Poppins', sans-serif; font-size: 1.08rem; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--white); margin: 0; line-height: 1.3; }
.hp-event-where { color: var(--muted); font-size: .85rem; }

/* Filler "ways to take part" cards — used to complete a short events row. No media,
   so they center their copy and carry a soft brand-tinted wash + accent bar. */
.hp-event-cta { justify-content: center; position: relative; overflow: hidden; }
.hp-event-cta .hp-event-body { justify-content: center; gap: .45rem; padding: 1.3rem 1.3rem; min-height: 150px; }
.hp-event-cta::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; }
.hp-event-cta.cta-a { background: linear-gradient(160deg, rgba(255,82,168,.10), rgba(255,255,255,.02)); }
.hp-event-cta.cta-a::before { background: linear-gradient(90deg, var(--pink), var(--pink-deep)); }
.hp-event-cta.cta-b { background: linear-gradient(160deg, rgba(46,228,234,.10), rgba(255,255,255,.02)); }
.hp-event-cta.cta-b::before { background: linear-gradient(90deg, var(--cyan), var(--teal)); }
.hp-event-cta.cta-c { background: linear-gradient(160deg, rgba(154,114,230,.12), rgba(255,255,255,.02)); }
.hp-event-cta.cta-c::before { background: linear-gradient(90deg, #9a72e6, var(--purple)); }
.hp-event-cta .cta-kicker { font-family: 'Poppins', sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.hp-event-cta.cta-a .cta-kicker { color: var(--pink); }
.hp-event-cta.cta-c .cta-kicker { color: #bda4ff; }
.hp-event-cta .hp-event-where { color: #d7d7df; }

/* ---- Shows (homepage; section hidden until shows exist) ------------------ */
.hp-shows { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 720px) { .hp-shows { grid-template-columns: repeat(2, 1fr); } }
.hp-show { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 1rem 1.1rem; }
.hp-show-logo { width: 60px; height: 60px; object-fit: cover; border-radius: 12px; background: #111; flex: 0 0 auto; }
.hp-show-logo.ph { background: linear-gradient(135deg, rgba(255,82,168,.3), rgba(46,228,234,.25)); }
.hp-show-body { min-width: 0; }
.hp-show-title { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.05rem; }
.hp-show-slot { color: var(--cyan); font-size: .85rem; font-weight: 600; margin-top: 2px; }
.hp-show-dj { color: var(--muted); font-size: .85rem; margin-top: 1px; }
.hp-show-desc { color: var(--muted); font-size: .9rem; line-height: 1.5; margin: .5rem 0 0; }