/* Top Host responsive refinements — mobile/tablet only. Desktop remains unchanged. */

@media (max-width: 920px) {
  .wrap { width: min(100% - 32px, 1120px); }

  /* Keep the mobile header useful instead of hiding most navigation. */
  .nav { min-height: 68px; gap: 14px; }
  .navlinks {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 6px 0;
    max-width: 68vw;
  }
  .navlinks::-webkit-scrollbar { display: none; }
  .navlinks a,
  .navlinks a:not(:last-child) {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 6px 10px;
    border: 1px solid rgba(245,234,220,.2);
    border-radius: 999px;
    text-decoration: none;
  }

  /* Tablet keeps the desktop relationship: campaign visual first, copy second, just tighter. */
  .hero-grid {
    grid-template-columns: minmax(260px,36vw) minmax(0,1fr);
    gap: 30px;
    align-items: center;
  }
  .hero .visual.carousel { max-width: 360px; }
  .carousel-stage { height: auto; aspect-ratio: 1 / 1; }
  .hero .actions { gap: 10px; }
  .hero .actions .button { padding-inline: 18px; }

  .steps { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .steps .step:last-child { grid-column: 1 / -1; }
  .two { grid-template-columns: 1fr; gap: 32px; }

  .notes-layout { grid-template-columns: 1fr; gap: 34px; }

  /* Spotlight keeps its desktop/editorial composition on tablets. */
  #supporters .spotlight { min-height: 230px; padding: 30px 32px; }
  .spotlight-portrait { width: 132px; height: 132px; margin-right: 26px; }

  /* Let larger names breathe without overrunning the viewport. */
  .supporter-cloud { gap: 9px 16px; }
  .supporter-cloud-name { max-width: 100%; }
  .supporter-cloud-name.tier-5 { font-size: clamp(2.8rem,8vw,4.2rem); }
  .supporter-cloud-name.tier-4 { font-size: clamp(2.15rem,6.5vw,3rem); }

  /* Better schedule fit before we drop to cards. */
  .schedule th,.schedule td { padding: 12px 8px; }
}

@media (max-width: 680px) {
  .wrap { width: min(100% - 28px,1120px); }
  body { line-height: 1.58; }
  section.content { padding: 46px 0; }

  /* Hero mirrors desktop hierarchy: campaign visual first, then campaign message. */
  .hero { padding: 34px 0 44px; }
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-grid .visual,
  .hero-grid .visual.carousel { order: 0; width: 100%; max-width: 420px; justify-self: center; }
  .carousel-stage { width: 100%; height: auto; aspect-ratio: 1 / 1; }
  h1 { font-size: clamp(2.55rem,12vw,4rem); }
  h2 { font-size: clamp(2rem,9vw,2.8rem); }
  .lead { font-size: 1.05rem; }

  /* Primary CTA owns the row; secondary actions stay balanced two-up. */
  .hero .actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .hero .actions .button:first-child { grid-column: 1 / -1; width: 100%; }
  .hero .actions .button.secondary { width: 100%; min-width: 0; padding-inline: 14px; text-align: center; }
  .status { display: grid; gap: 10px; }

  /* Three desktop columns become clean mobile cards, not loose text blocks. */
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .steps .step:last-child { grid-column: auto; }
  .step {
    border: 1px solid var(--line);
    border-top: 3px solid var(--rust);
    border-radius: 14px;
    padding: 20px;
    background: rgba(255,250,243,.72);
  }
  .step h3 { font-size: 1.65rem; }

  /* Campaign videos: one featured card, then a true mobile feed. */
  .campaign-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; }
  .campaign-card,
  .campaign-card:first-child { grid-column: auto; grid-row: auto; aspect-ratio: 16 / 10; min-height: 0; }
  .campaign-card:first-child { aspect-ratio: 16 / 11; }
  .campaign-overlay { padding: 16px; }
  .campaign-overlay h3,
  .campaign-card:first-child h3 { font-size: 1rem; }

  /* Notes stay full-width and easy to tap/read. */
  .notes-layout { gap: 30px; }
  .notes-form input,.notes-form textarea { font-size: 16px; }
  .notes-form textarea { min-height: 138px; }

  /* Supporter spotlight keeps image + identity together, then copy below. */
  #supporters .supporter-intro { margin-bottom: 22px; }
  #supporters .spotlight { padding: 24px 20px; border-radius: 18px; }
  .spotlight-portrait { float: none; width: 108px; height: 108px; margin: 0 auto 18px; display: block; }
  #supporters .spotlight .tag,
  #supporters .spotlight h3,
  #supporters .spotlight-role { text-align: center; }
  #supporters .spotlight h3 { font-size: 1.85rem; }
  #supporters .spotlight-thanks { text-align: left; margin-top: 14px; }
  .spotlight-links { justify-content: center; gap: 12px; }
  .supporter-controls { padding-inline: 0; }
  .supporter-controls #supporter-pause { margin-left: auto; }

  /* Wall remains dynamic but long grouped names wrap instead of overflowing. */
  .supporter-cloud-wrap { margin-top: 28px; padding-top: 22px; }
  .supporter-cloud { gap: 8px 11px; padding-bottom: 8px; }
  .supporter-cloud-name { white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }
  .supporter-cloud-name.tier-5 { font-size: clamp(2.35rem,12vw,3.25rem); }
  .supporter-cloud-name.tier-4 { font-size: clamp(1.8rem,9.5vw,2.5rem); }
  .supporter-cloud-name.tier-3 { font-size: clamp(1.45rem,7.5vw,2rem); }
  .supporter-cloud-name.tier-2 { font-size: clamp(1.18rem,6vw,1.55rem); }
  .supporter-cloud-name.tier-1 { font-size: clamp(1rem,5vw,1.25rem); }

  /* Schedule becomes readable cards instead of a sideways table. */
  .tablewrap { overflow: visible; }
  .schedule { display: block; }
  .schedule caption { display: block; }
  .schedule thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .schedule tbody { display: grid; gap: 10px; }
  .schedule tr {
    display: grid;
    grid-template-columns: minmax(82px,.7fr) 1fr;
    gap: 7px 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.45);
  }
  .schedule td { display: block; border: 0; padding: 0; font-size: .9rem; }
  .schedule td:first-child { grid-row: 1 / 3; font-weight: 800; color: var(--rust); }
  .schedule td:nth-child(2)::before { content: "Ends · "; font-weight: 800; color: var(--muted); }
  .schedule td:nth-child(3)::before { content: "Advances · "; font-weight: 800; color: var(--muted); }

  .share .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .share .actions .button:first-child { grid-column: 1 / -1; }

  /* Respect modern phone safe areas for the sticky vote button. */
  .mobile-vote { padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
}

@media (max-width: 430px) {
  .wrap { width: min(100% - 24px,1120px); }
  .brand { font-size: 1rem; }
  .navlinks { max-width: 62vw; font-size: .72rem; }
  .navlinks a,.navlinks a:not(:last-child) { padding-inline: 8px; }
  .hero .actions { grid-template-columns: 1fr; }
  .hero .actions .button:first-child { grid-column: auto; }
  .share .actions { grid-template-columns: 1fr; }
  .share .actions .button:first-child { grid-column: auto; }
  .supporter-controls { gap: 7px; }
  .supporter-controls #supporter-pause { padding-inline: 10px; }
  .supporter-cloud-name.tier-5 { font-size: clamp(2.05rem,11.5vw,2.85rem); }
  .supporter-cloud-name.tier-4 { font-size: clamp(1.65rem,8.8vw,2.25rem); }
  .schedule tr { grid-template-columns: 1fr; }
  .schedule td:first-child { grid-row: auto; }
}