/* ==========================================================================
   Mobile size-down pass — site-wide, additive.

   Loaded LAST (after styles.css, refresh.css, v2.css) on every customer-
   facing page, so these rules win the cascade without needing to touch the
   three existing stylesheets directly. Scope is deliberately narrow to what
   was actually asked for: images, headings/text, and "card" components are
   more compact on phones. Nothing about desktop/tablet layout changes here.

   Card, heading and hero-image class names below were inventoried across
   the real page templates (index, destinations, plans, how-it-works,
   country, plan-details, affiliate-programme, checkout, manage-esim) rather
   than guessed — see the session notes for the source list. `[class*="card"]`
   is used as a catch-all because nearly every page invented its own card
   class name (.pd-card, .aff-card, .step-card, .plan-header-card, ...) with
   no shared base class; the few non-container "card" classes that are
   actually buttons or QR codes are explicitly excluded below so this stays
   safe.
   ========================================================================== */

/* ---------- Images: never overflow, and rein in known large hero /
   illustration / background images specifically on phones. QR codes are
   deliberately left untouched — shrinking them hurts scannability. ---- */
img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 640px) {
    .phone-mockup,
    .hero-phone-stage {
        max-width: 240px;
        margin-left: auto;
        margin-right: auto;
    }
    .features-illustration img,
    .hiw-illustration img {
        max-width: 160px;
    }
    .trust-bg img,
    .v-photo-band-bg img {
        max-height: 240px;
        object-fit: cover;
    }
}

/* ---------- Headings: tighten the top of the type scale on phones.
   clamp() so it still flexes a little rather than jumping at the exact
   breakpoint; only caps sizes that are currently large, never forces
   anything bigger. ---------- */
@media (max-width: 480px) {
    h1,
    .hero-title,
    .pd-hero-title,
    .aff-hero h1 {
        font-size: clamp(24px, 7.2vw, 30px) !important;
        line-height: 1.2 !important;
    }
    .hero-subtitle,
    .pd-hero-sub {
        font-size: clamp(14px, 4vw, 16px) !important;
    }
    h2,
    .section-title,
    .pd-section-title,
    .pd-faq-title,
    .aff-h2,
    .aff-promo-headline,
    .summary-title,
    main .hero-kicker {
        font-size: clamp(19px, 5.6vw, 23px) !important;
    }
    h3 {
        font-size: clamp(16px, 4.8vw, 18px) !important;
    }
}

/* ---------- Cards: tighter padding + slightly smaller radius on phones.
   Buttons and QR-code containers that happen to have "card" in the class
   name are excluded — shrinking padding there would hurt tap targets /
   scannability, not just "make it more compact". ---------- */
@media (max-width: 480px) {
    /* Excludes bespoke hero/mockup compositions that rely on precise
       internal spacing or absolutely-positioned children (e.g. the
       affiliate page's animated earnings-dashboard mockup) — shrinking
       their padding blindly breaks that internal layout rather than just
       making them more compact. */
    [class*="card"]:not(.wallet-btn-card):not(.qr-code-display):not(button):not(.aff-earn-card) {
        padding: 16px !important;
        border-radius: 14px !important;
    }
    /* Card grids: tighter gaps so more fits without feeling sparse. */
    .aff-grid,
    .pd-card-grid,
    .countries-list,
    .dash-esim-cards,
    .topup-plan-cards {
        gap: 12px !important;
    }
}