/* =========================================================
   Responsive adjustments
   Breakpoint ladder: 320 → 420 → 680 → 780 → 980 → 1280 → 1600 → 1920+
   ========================================================= */

/* ---- ultra-wide & large desktop: contain content, don't let it stretch thin ---- */
@media (min-width: 1600px){
  .container, .builder, .letter-layout, .features, .how, .cta-band,
  .donate-grid, .why-section, .support-form, .supporters-wall{ max-width: 1400px; }
  .hero-inner{ max-width: 1400px; }
}
@media (min-width: 2200px){
  html{ font-size: 118%; } /* keep type readable, not tiny, on 4K/ultra-wide */
  .container, .builder, .letter-layout, .hero-inner{ max-width: 1600px; }
}

/* ---- laptops / small desktops ---- */
@media (max-width: 1280px){
  .builder, .letter-layout{ gap: 24px; }
}

@media (max-width: 980px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-copy .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-cta{ justify-content:center; }
  .hero-visual{ order:-1; margin-bottom: 12px; }

  .builder{ grid-template-columns: 1fr; }
  .stage-wrap{ position:static; order:-1; }

  .letter-layout{ grid-template-columns: 1fr; }
  .letter-preview-wrap{ position:static; order:-1; }

  .preview-shell{ padding: 24px 16px 60px; }
}

/* ---- tablets / iPad portrait ---- */
@media (min-width: 681px) and (max-width: 980px){
  .feature-grid{ grid-template-columns: repeat(2, 1fr); }
  .flower-grid, .option-grid, .bg-picker{ grid-template-columns: repeat(4, 1fr); }
}

/* ---- landscape phones & short viewports ---- */
@media (max-height: 480px) and (orientation: landscape){
  .hero{ min-height: auto; padding: 24px 0; }
  .reveal-stage, .letter-stage{ min-height: 420px; }
  .site-nav{ padding: 10px 16px; }
  .nav-links{ padding-top: 70px; }
}

@media (max-width: 680px){
  .site-nav{ padding: 14px 16px; }
  .nav-links{ gap: 12px; }
  .nav-links a{ font-size: 0.8rem; }
  .brand{ font-size:1.2rem; }

  .hero{ min-height: auto; padding: 40px 0 20px; }
  .features, .how{ padding-left:16px; padding-right:16px; }

  .footer-grid{ flex-direction:column; gap:26px; }

  .flower-grid, .deco-toggle-grid, .option-grid, .bg-picker{ grid-template-columns: repeat(2,1fr); }

  .step-tabs{ overflow-x:auto; flex-wrap:nowrap; }

  .share-icons{ grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 420px){
  .hero-title{ font-size: 2.2rem; }
  .flower-grid, .deco-toggle-grid, .option-grid, .bg-picker{ grid-template-columns: repeat(2,1fr); }
}

/* ---- smallest supported phones (iPhone SE and similar, 320px+) ---- */
@media (max-width: 360px){
  .container, .builder, .letter-layout{ padding-left: 14px; padding-right: 14px; }
  .hero-title{ font-size: 1.9rem; }
  .btn{ padding: 12px 22px; font-size: 0.88rem; }
  .modal-box{ padding: 24px 18px; }
  .qr-box img{ width: 110px; height: 110px; }
}