/* =========================================================
   SLDS — slds-desktop.css
   Applies from 901px up. Loaded after slds-base.css.

   Desktop is the wide-canvas case: the hero runs as two
   columns and the pledge section sits side by side.
   ========================================================= */

@media (min-width: 901px) {

  /* ---------- FIRST FOLD ---------- */
  /* Counter left, banner key visual right. */
  .hero-counter {
    font-size: clamp(3.2rem, 6vw, 6rem);
  }

  .hero-counter-label {
    font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  }

  .hero-counter-sub,
  .hero-counter-cta {
    max-width: 460px;
  }

  /* ---------- THIRD FOLD ---------- */
  /* Form on the left, live certificate on the right. */
  .pledge-grid {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: 2.5rem;
    max-width: 1240px;   /* resets the mobile-first 560px cap */
  }

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

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

  /* The V2 "I Stand By" creative is 1080 x 1690 - a tall portrait,
     where the old certificate was almost square. Left uncapped, the
     preview rendered ~1200px tall beside a ~460px form and the row
     looked broken. Capping the width keeps the two columns balanced.
     This constrains the preview box only; the exported PNG is always
     full 1080 x 1690. */
  .pledge-cert-frame {
    width: 100%;
    max-width: 430px;
    margin-inline: auto;
  }
}