/* ================================================================
   StageConnect Asia — style.css
   Responsive overrides for join.html
   Breakpoints:
     ≥1441px  TV / large desktop
     1025–1440 Desktop   (base, already well-designed)
     769–1024  Tablet
     481–768   Large phone
     ≤480      Mobile
================================================================ */

/* ── TV / Large Desktop (≥1441px) ──────────────────────────── */
@media (min-width: 1441px) {

  .wrap { max-width: 1400px; }

  /* Hero: let the big font breathe more */
  .hero-h1 { font-size: clamp(90px, 7vw, 130px); }
  .hero-sub { font-size: 18px; max-width: 600px; }

  /* Section spacing */
  .sect   { padding: 100px 0; }
  .pricing-section { padding: 100px 0; }
  .process-sect    { padding: 100px 0; }

  /* Pricing cards — slightly larger on big screens */
  .plan-card { border-radius: 24px; }
  .pricing-grid { gap: 28px; margin-top: 64px; }

  /* Form */
  .form-reveal-title { font-size: 32px; }
  .field-input, .field-select { font-size: 15px; padding: 13px 16px; }
}

/* ── Tablet (769px–1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {

  /* Hero: stack left/right columns */
  .join-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 48px;
    padding: 64px 0 56px;
  }
  .hero-h1 { font-size: clamp(44px, 8vw, 80px); }
  .hero-sub { max-width: 100%; }
  .scroll-hint { display: none; }

  /* Benefits: tighten up on tablet */
  .benefit-row { padding: 18px 0; gap: 16px; }

  /* Pricing: single column, centred */
  .pricing-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Featured card: no upscale — it breaks single-col layout */
  .plan-card.featured { transform: none; margin: 0; }
  .plan-card:hover   { transform: scale(1.02); }

  /* Process: 2 columns */
  .process-steps { grid-template-columns: 1fr 1fr; }
  .process-step:nth-child(2) .ps-arrow { display: none; }

  /* What-sect grid: 1 col */
  .what-grid { grid-template-columns: 1fr; }

  /* Preview: stack */
  .preview-inner { grid-template-columns: 1fr; gap: 40px; }
  .plan-grid     { grid-template-columns: 1fr; }

  /* Form rows: single column */
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .cols-2   { grid-template-columns: 1fr !important; }
  .cols-3   { grid-template-columns: 1fr !important; }
}

/* ── Large phone (481px–768px) ──────────────────────────────── */
@media (max-width: 768px) {

  /* Tighter wrap padding */
  .wrap { padding: 0 18px; }

  /* Hero */
  .join-hero  { padding: 52px 0 44px; gap: 36px; }
  .hero-h1    { font-size: clamp(38px, 11vw, 68px); line-height: .95; }
  .hero-sub   { font-size: 14px; margin-bottom: 28px; }
  .hero-cta   { font-size: 14px; padding: 12px 22px; }

  /* Sections */
  .sect            { padding: 60px 0; }
  .pricing-section { padding: 64px 0; }
  .process-sect    { padding: 64px 0; }

  /* Pricing toggle: smaller pill */
  .pt-btn { font-size: 12px; padding: 5px 14px; }

  /* Pricing cards: full width */
  .pricing-grid { max-width: 100%; }
  .plan-card-inner { padding: 24px 22px; }
  .plan-desc    { padding: 4px 22px 18px; }
  .plan-features { padding: 18px 22px 8px; gap: 10px; }

  /* Apply Free / Coming Soon buttons */
  .plan-cta,
  .plan-cta-soon { margin: 8px 22px 22px; padding: 12px; font-size: 13px; }

  /* Process: single column */
  .process-steps { grid-template-columns: 1fr; }
  .ps-arrow { display: none !important; }

  /* Form */
  .form-reveal         { margin-top: 32px; padding-top: 32px; }
  .form-reveal-title   { font-size: 22px; }
  .form-reveal-sub     { font-size: 12px; margin-bottom: 24px; }

  /* Form rows: all single column */
  .form-row,
  .cols-2,
  .cols-3 { grid-template-columns: 1fr !important; gap: 0 !important; }
  .form-group { margin-bottom: 18px; }

  /* Phone row */
  .phone-row { flex-direction: row; } /* keep side by side — it's ok at 768 */

  /* Success box */
  #scaSuccessBox { padding: 36px 20px 28px; }
}

/* ── Mobile (≤480px) ────────────────────────────────────────── */
@media (max-width: 480px) {

  /* Tightest wrap */
  .wrap { padding: 0 14px; }

  /* Hero */
  .join-hero  { padding: 44px 0 36px; gap: 28px; }
  .hero-h1    { font-size: clamp(32px, 13vw, 54px); line-height: .95; margin-bottom: 18px; }
  .hero-sub   { font-size: 13px; margin-bottom: 24px; line-height: 1.7; }
  .hero-cta   { font-size: 13px; padding: 11px 20px; width: 100%; justify-content: center; }

  /* Eyebrow + headings */
  .s-eye { font-size: 10px; }
  .s-h   { font-size: clamp(26px, 9vw, 42px); }
  .s-sub { font-size: 13px; }

  /* Sections */
  .sect            { padding: 48px 0; }
  .pricing-section { padding: 52px 0; }
  .process-sect    { padding: 52px 0; }

  /* Benefits */
  .benefit-row    { gap: 12px; padding: 16px 0; }
  .benefit-title  { font-size: 13px; }
  .benefit-desc   { font-size: 12px; }
  .b-ico          { width: 34px; height: 34px; flex-shrink: 0; }

  /* Pricing toggle */
  .pricing-toggle-row { margin-bottom: -18px; }
  .pt-btn             { font-size: 12px; padding: 5px 12px; }

  /* Pricing cards */
  .pricing-grid     { margin-top: 44px; }
  .plan-card-inner  { padding: 20px 18px; }
  .plan-desc        { padding: 4px 18px 16px; font-size: 12px; }
  .plan-features    { padding: 14px 18px 6px; gap: 9px; font-size: 12px; }
  .plan-cta,
  .plan-cta-soon    { margin: 6px 18px 18px; padding: 11px; font-size: 13px; }

  /* Process steps */
  .process-step { padding: 24px 18px; }
  .ps-num       { font-size: 8px; }

  /* Form reveal */
  .form-reveal       { margin-top: 28px; padding-top: 28px; }
  .form-reveal-title { font-size: 20px; }
  .form-reveal-sub   { font-size: 12px; }
  .plan-badge-show   { font-size: 9px; }

  /* Form fields */
  .form-group   { margin-bottom: 16px; }
  .form-label   { font-size: 9px; margin-bottom: 7px; }
  .field-input,
  .field-select { font-size: 13px; padding: 11px 14px; }

  /* Phone row: keep inline but shrink prefix */
  .phone-prefix   { min-width: 90px; }

  /* Checkboxes / event types grid */
  .event-types-grid { grid-template-columns: 1fr 1fr !important; }

  /* Submit button */
  .form-submit { padding: 13px; font-size: 13px; }

  /* Success box */
  #scaSuccessBox    { padding: 28px 16px 24px; margin: 0 4px; }
  .sca-success-id   { font-size: 18px; }
}

/* ── Very small (≤360px — old/budget phones) ────────────────── */
@media (max-width: 360px) {
  .wrap   { padding: 0 12px; }
  .hero-h1 { font-size: clamp(28px, 14vw, 48px); }
  .hero-cta { font-size: 12px; padding: 10px 16px; }
  .plan-card-inner { padding: 16px 14px; }
  .event-types-grid { grid-template-columns: 1fr !important; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv2       { transition: none; opacity: 1; transform: none; }
  .scroll-dot,
  .live-dot,
  .pb-dot         { animation: none; }
  .plan-card,
  .plan-card:hover { transform: none; transition: none; }
}