/* ============================================================
   Support Crew - section-level polish (#support only)
   TOP POLISH: compact header, connected dashboard row.
   ============================================================ */

#support {
  position: relative;
  overflow: hidden;
}

/* Pull content up — kill the dead black slab */
#support.live-section {
  padding-top: clamp(1rem, 2vw, 1.65rem) !important;
  padding-bottom: clamp(2rem, 4vw, 3.25rem) !important;
}

#support::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90% 38% at 50% -5%, rgba(243, 237, 40, .11) 0%, transparent 62%),
    repeating-linear-gradient(
      -11deg,
      transparent,
      transparent 52px,
      rgba(243, 237, 40, .024) 52px,
      rgba(243, 237, 40, .024) 53px
    );
}

#support > * {
  position: relative;
  z-index: 1;
}

/* One designed header + dashboard unit */
#support .support-dashboard-top {
  display: grid;
  gap: clamp(.35rem, .75vw, .5rem);
  padding: clamp(.5rem, 1.1vw, .75rem) clamp(.75rem, 1.6vw, 1rem) clamp(.6rem, 1.2vw, .8rem);
  border: 1px solid rgba(243, 237, 40, .18);
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%);
  overflow: hidden;
}

#support .support-dashboard-top::after {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(.75rem, 1.6vw, 1rem);
  right: clamp(.75rem, 1.6vw, 1rem);
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(90deg, var(--yellow) 0%, rgba(243, 237, 40, .28) 50%, transparent 100%);
}

/* Two-column intro — balances left copy vs right empty black space */
#support .support-intro-zone {
  display: grid;
  gap: clamp(.75rem, 2vw, 1.25rem);
  align-items: stretch;
  padding-bottom: clamp(.4rem, .9vw, .55rem);
  border-bottom: 1px solid rgba(243, 237, 40, .12);
}

#support .support-intro-copy {
  display: grid;
  gap: .4rem;
  align-content: center;
  min-width: 0;
}

#support .support-intro-copy h2 {
  max-width: none;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.95rem, 5.2vw, 3.45rem);
  line-height: .94;
  letter-spacing: -.012em;
  text-transform: uppercase;
  color: #fff;
}

#support .support-intro-caption {
  margin: .1rem 0 0;
  max-width: 38rem;
  color: #aeb8b4;
  font-size: clamp(.78rem, 1.8vw, .88rem);
  line-height: 1.45;
}

#support .support-crew-badge {
  justify-content: flex-start;
  margin: 0 0 .4rem;
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .2em;
}

#support .support-crew-badge::before,
#support .support-crew-badge::after {
  content: "—";
  color: var(--yellow);
  font-weight: 400;
  letter-spacing: 0;
}

#support .support-crew-badge span {
  display: inline-block;
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 2px rgba(243, 237, 40, .3);
}

#support .support-intro-copy .sound-toggle {
  display: inline-flex;
  width: fit-content;
  min-height: 32px;
  align-items: center;
  gap: .35rem;
  margin-top: .25rem;
  border: 1px solid rgba(243, 237, 40, .22);
  border-radius: 999px;
  padding: .38rem .65rem;
  background: rgba(255, 255, 255, .04);
  color: #c8d0cc;
  font-size: .6rem;
  letter-spacing: .04em;
  line-height: 1;
  cursor: pointer;
}

#support .support-intro-copy .sound-toggle span[aria-hidden="true"] {
  font-size: .82rem;
}

/* Right-side campaign cue — fills the empty black column */
#support .support-intro-cue {
  display: grid;
  gap: .35rem;
  align-content: center;
  justify-items: start;
  min-width: 0;
  padding: clamp(.8rem, 1.6vw, 1.05rem);
  border: 1px solid rgba(243, 237, 40, .24);
  border-radius: .85rem;
  background:
    linear-gradient(145deg, rgba(243, 237, 40, .12) 0%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .02) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

#support .support-intro-cue-mile {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.8vw, 1.65rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--yellow);
}

#support .support-intro-cue-kicker {
  margin: 0;
  color: #dce2df;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#support .support-intro-cue-charity {
  margin: .15rem 0 0;
  color: #aeb8b4;
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .08em;
}

#support .support-intro-cue-list {
  display: grid;
  gap: .22rem;
  margin: .35rem 0 0;
  padding: .45rem 0 0;
  border-top: 1px solid rgba(243, 237, 40, .16);
  list-style: none;
}

#support .support-intro-cue-list li {
  color: #aeb8b4;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.3;
  text-transform: uppercase;
}

#support .support-intro-cue-list li::before {
  content: "";
  display: inline-block;
  width: .35rem;
  height: .35rem;
  margin-right: .4rem;
  border-radius: 50%;
  background: var(--yellow);
  vertical-align: middle;
  transform: translateY(-1px);
}

/* Unified dashboard tray — cards feel paired, not separate widgets */
#support .support-act-bar {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 400px);
  gap: 0;
  align-items: stretch;
  border: 2px solid rgba(243, 237, 40, .22);
  border-radius: .85rem;
  overflow: hidden;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .26);
}

#support .cheer-panel,
#support .donation-panel {
  border-radius: 0 !important;
  overflow: hidden;
  height: 100%;
  min-height: 0;
  box-shadow: none !important;
}

#support .cheer-panel {
  display: flex;
  flex-direction: column;
  background: var(--paper) !important;
  color: var(--ink);
  border-right: 2px solid rgba(17, 20, 21, .1);
}

#support .donation-panel {
  display: flex;
  flex-direction: column;
  background: var(--yellow) !important;
}

@media (min-width: 900px) {
  #support .support-intro-zone {
    grid-template-columns: minmax(0, 1.15fr) minmax(240px, 320px);
    gap: clamp(1rem, 2.2vw, 1.75rem);
    align-items: center;
  }

  #support .support-act-bar {
    min-height: clamp(380px, 46vh, 480px);
  }
}

@media (min-width: 768px) {
  #support .support-dashboard-top {
    padding: clamp(.55rem, 1.2vw, .8rem) clamp(.8rem, 1.7vw, 1.05rem) clamp(.65rem, 1.3vw, .85rem);
  }

  #support .support-intro-zone {
    grid-template-columns: minmax(0, 1fr) minmax(210px, 300px);
  }
}

@media (max-width: 899px) {
  #support .support-act-bar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: none;
    box-shadow: none;
    gap: clamp(.65rem, 2vw, .85rem);
    overflow: visible;
  }

  #support .cheer-panel {
    display: contents;
    border-right: none;
  }

  #support .cheer-panel .feed-title,
  #support .quick-boost-panel,
  #support .cheer-action-heading,
  #support .donation-panel {
    border: 2px solid rgba(243, 237, 40, .18);
    border-radius: .85rem !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
    overflow: hidden;
  }

  #support .cheer-panel .cheer-form {
    flex: 0 0 auto;
    overflow: visible;
    border: 2px solid rgba(243, 237, 40, .18);
    border-radius: .85rem !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
  }

  #support .cheer-panel .feed-title { order: 1; }
  #support .quick-boost-panel { order: 1; }
  #support .cheer-action-heading { order: 2; }
  #support .cheer-form { order: 3; }
  #support .donation-panel { order: 4; width: 100%; max-width: none; }
}

@media (max-width: 767px) {
  #support.live-section {
    padding-top: clamp(1rem, 3.5vw, 1.45rem) !important;
  }

  #support .support-intro-copy h2 {
    font-size: clamp(1.75rem, 8.5vw, 2.45rem);
  }

  #support .support-intro-caption {
    font-size: .76rem;
  }

  #support .support-intro-cue {
    justify-items: center;
    text-align: center;
  }

  #support .support-intro-cue-list {
    justify-items: center;
  }

  #support .support-intro-copy .sound-toggle {
    margin-top: .15rem;
  }
}

/* ============================================================
   DASHBOARD ROW — internal margins only (intro zone untouched)
   ============================================================ */

#support .support-act-bar {
  margin: 0 clamp(.35rem, 1.35vw, .85rem) clamp(.3rem, .75vw, .5rem);
}

@media (min-width: 900px) {
  #support .support-act-bar {
    margin-inline: clamp(.55rem, 1.75vw, 1.05rem);
  }
}

/* ============================================================
   DASHBOARD ALIGNMENT FIX — action row margins (#support)
   ============================================================ */

#support .support-act-bar {
  margin: 0 clamp(.55rem, 1.5vw, 1rem) clamp(.45rem, 1vw, .65rem);
}

@media (min-width: 900px) {
  #support .support-act-bar {
    margin-inline: clamp(.75rem, 2vw, 1.25rem);
  }

  #support .donation-panel {
    align-self: stretch;
  }
}

/* Lower closing-bar CTA — preserve the yellow-bar contrast. */
#support > .support-close-strip.support-crew-live-footer .support-close-link {
  background: var(--ink);
  color: #f3ed28 !important;
}

#support > .support-close-strip.support-crew-live-footer .support-close-link:hover,
#support > .support-close-strip.support-crew-live-footer .support-close-link:focus-visible,
#support > .support-close-strip.support-crew-live-footer .support-close-link:active {
  background: var(--ink);
  color: #f3ed28 !important;
}

/* Live-total / fundraising strip Support Kris — dark on the yellow bar. */
.fundraising-strip .button-dark.jg-cta,
.fundraising-strip .button-dark.jg-cta:hover,
.fundraising-strip .button-dark.jg-cta:focus-visible,
.fundraising-strip .button-dark.jg-cta:active {
  background: var(--ink, #111415) !important;
  color: var(--yellow, #f3ed28) !important;
}