/*
 * EC-MOBILE-OPT-001: Mobile optimization for narrow portrait screens
 * (e.g. 1080x1920 ≈ 360px CSS width). Everything is scoped to max-width:767px
 * so it stops exactly where Tailwind's `md:` breakpoint (768px) takes over —
 * the desktop/tablet design is left completely untouched. !important is used
 * because the bundled Tailwind utilities are single-class (low specificity,
 * not !important), so these rules win regardless of stylesheet order.
 */
@media (max-width: 767px) {

  /* ---- Stop horizontal scrolling -------------------------------------- */
  /* Oversized display type and decorative offset cards can push past the
     viewport edge; clip any residual horizontal overflow page-wide. */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  /* ---- Fluidly scale down the large display headings ------------------- */
  /* The hero headings (up to text-8xl/9xl = 96–128px) overflow a phone with
     long words like "Architect". clamp() keeps them bold and airy while
     guaranteeing they fit the available width. Upper bounds stay below the
     original sizes so the transition into the md: breakpoint is smooth. */
  .text-9xl { font-size: clamp(3rem, 15vw, 4.5rem) !important; line-height: 1.05 !important; }
  .text-8xl { font-size: clamp(2.75rem, 13.5vw, 4rem) !important; line-height: 1.05 !important; }
  .text-7xl { font-size: clamp(2.5rem, 12vw, 3.5rem) !important; line-height: 1.08 !important; }
  .text-6xl { font-size: clamp(2.25rem, 10.5vw, 3.25rem) !important; line-height: 1.1 !important; }

  /* ---- Let forced single-line display text wrap ----------------------- */
  /* e.g. the homepage hero "of the Soul" span. CTA buttons use font-sans +
     whitespace-nowrap and are intentionally NOT matched here, so they stay
     on one line. */
  .font-display .whitespace-nowrap,
  h1 .whitespace-nowrap,
  h2 .whitespace-nowrap {
    white-space: normal !important;
  }

  /* ---- Media safety --------------------------------------------------- */
  img,
  video {
    max-width: 100% !important;
    height: auto;
  }

  /* ---- Homepage gift section: "3 Tracks / 3 Days / ∞ Change" ----------- */
  /* On mobile the three stats sit in a centered row of their own, with the
     CTA button centered beneath them, instead of a ragged left-aligned stack. */
  .wpc-gift-actions {
    align-items: center !important;
  }

  /* ---- Testimonials stat band (4 / Millions / 500+) ------------------- */
  /* Keep all three stats on one clean row by tightening the gap and scaling
     the numbers so the longest label ("Millions") never wraps. */
  .wpc-stat-band {
    gap: 0.75rem !important;
  }
  .wpc-stat-band .font-display {
    font-size: clamp(1.2rem, 5.6vw, 1.65rem) !important;
    line-height: 1.1 !important;
  }
}

/* ---- Homepage gift stat cluster wrapper -------------------------------- */
/* Below 640px the three stat blocks form a centered flex row; at >=640px the
   wrapper becomes display:contents so its children fall back into the original
   flex-row of [stat, stat, stat, button] — desktop is unchanged. */
.wpc-stats-wrap {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .wpc-stats-wrap {
    display: contents;
  }
}