/* =========================================================
   SLDS — slds-mobile.css
   Applies up to 900px. Loaded LAST so it wins.

   This file also carries the small-screen bug fixes:
     1. The ₹1 lockup was hard-coded to 300px wide, which
        forced the hero column to a 318px minimum and pushed
        content off-screen on any handset under ~370px.
     2. Sub-380px screens had no padding step of their own, so
        the hero gutters never tightened.

   The sticky pledge bar is NOT touched here - it already has its
   own rules at 768px and 480px in styles.css, and they work.
   ========================================================= */

/* ─────────────  TABLET AND BELOW  (<= 900px)  ───────────── */
@media (max-width: 900px) {

  /* ---------- FIRST FOLD ---------- */
  /* The existing 768px rule in styles.css collapses .hero-inner
     to one column. Centre the counter column to match. */
  .hero-counter-sub,
  .hero-counter-cta {
    max-width: 100%;
  }

  /* FIX 1 — the ₹1 lockup must be fluid, not a fixed 300px.
     styles.css sets width:300px; height:75px on .rupee-icon,
     which cannot shrink and so defines the column's minimum
     width. Overriding to a fluid box lets the hero reflow. */
  .hero-pledge {
    margin-left: 0;
    max-width: 100%;
  }

  .hero-pledge .rupee-icon {
    width: min(300px, 100%);
    height: auto;
    max-width: 100%;
  }

  .hero-pledge .rupee-icon img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  /* ---------- THIRD FOLD ---------- */
  .pledge-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 560px;
    margin-inline: auto;
  }

  /* Reward before the ask: the certificate leads when stacked. */
  /*.pledge-cert {*/
  /*  order: -1;*/
  /*}*/

  .pledge-form {
    padding: 1.75rem 1.35rem;
  }

  /* The V2 creative is a tall 1080 x 1690 portrait. Stacked, it sits
     above the form, so an uncapped preview pushed the form ~880px down
     the page on tablets. Capping the preview keeps the form reachable.
     The exported PNG is unaffected - always full 1080 x 1690. */
  .pledge-cert-frame {
    width: 100%;
    max-width: 380px;
    margin-inline: auto;
  }
}

/* ─────────────  HANDSET  (<= 560px)  ───────────── */
@media (max-width: 560px) {

  .pledge-form {
    padding: 1.5rem 1.15rem;
    border-radius: 14px;
  }

  /* 16px minimum stops iOS Safari auto-zooming on focus. */
  .pledge-field input[type="text"],
  .pledge-field input[type="tel"] {
    font-size: 16px;
  }

  .pledge-actions {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  /* Comfortable thumb targets. */
  .pledge-btn {
    min-height: 48px;
  }

  .pledge-consent input {
    width: 20px;
    height: 20px;
  }
}

/* ─────────────  SMALL HANDSET  (<= 380px)  ───────────── */
@media (max-width: 380px) {

  /* FIX 2 — tighten the gutters so 320-360px devices stop clipping. */
  .hero-inner {
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero-counter {
    font-size: 2.5rem;
    letter-spacing: -1px;
  }

  .hero-counter-label {
    font-size: 1rem;
  }

  .hero-counter-sub,
  .hero-counter-cta {
    font-size: 0.86rem;
  }

  .pledge-form {
    padding: 1.25rem 1rem;
  }

  .pledge-consent label,
  .pledge-note {
    font-size: 0.72rem;
  }
}



/* ─────────────  NOT A BUG — READ BEFORE "FIXING"  ─────────────

   styles.css line ~1511 deliberately zooms the hero banner on
   small screens:

       @media (max-width: 768px) {
         .hero-kv-inner img { transform: scale(1.22); }
       }

   .hero-kv has overflow:hidden, so that 22% zoom crops roughly
   9% off each side of the artwork below 768px.

   It is intentional - it makes the pack read larger on a handset.
   But it does clip the "^Applicable on all ALL OUT Machine Packs"
   qualifier baked into the artwork's bottom-right corner, and the
   ₹1 seal on the left edge.

   Since the ₹1 claim carries that qualifier, this is a compliance
   call rather than a styling one. If the whole banner must stay
   visible on mobile, uncomment the block below.

@media (max-width: 768px) {
  .hero-visual .hero-kv-inner img {
    transform: none;
  }
}

   ───────────────────────────────────────────────────────────── */