/* ============================================================
   Mobile responsive tuning — additive layer
   Applied AFTER tokens.css / base.css / blocks.css.
   Goals:
   - Reduce excessive paddings on small screens
   - Add intermediate breakpoints (statsGrid, offerCard, mustReadList)
   - Prevent horizontal overflow
   - Improve tap targets and typography below 575px
   - Tune images for low-bandwidth/mobile
   ============================================================ */

/* ===== Global mobile safety ===== */
html, body { overflow-x: hidden; }
img, svg, video, iframe { max-width: 100%; }

/* break long URLs/words in article bodies and tables */
.block-articleBody .articleBody-inner,
.block-textBlock,
.block-leadIntro,
.block-articleCard,
.footer {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.block-articleBody .articleBody-inner pre {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Tablet — between 768px and 991px
   ============================================================ */
@media (max-width: 991px) {
  /* StatsGrid: from 5 to 3 columns (was jumping to 2) */
  .block-statsGrid .statsGrid-inner { grid-template-columns: repeat(3, 1fr); }

  /* OfferCardGrid: 3 -> 2 columns intermediate (was jumping straight to 1) */
  .block-offerCardGrid .offerCardGrid-inner { grid-template-columns: repeat(2, 1fr); }
  .block-offerCard.is-variant-featured { grid-column: 1 / -1; max-width: 540px; margin-inline: auto; width: 100%; }

  /* Reduce 2xl spacing on tablet */
  :root { --sp-2xl: 80px; }
}

/* ============================================================
   Phablet — 768px and below
   ============================================================ */
@media (max-width: 767px) {
  /* OfferCardGrid: single column from this breakpoint */
  .block-offerCardGrid .offerCardGrid-inner { grid-template-columns: 1fr; }
  .block-offerCard.is-variant-featured { max-width: none; }

  /* Hero compact on phablet */
  .block-hero { padding-block: clamp(40px, 7vw, 64px); }
  .block-hero .hero-inner { gap: var(--sp-md); }
  .block-hero .hero-cta { justify-content: flex-start; }

  /* DownloadCta stacks (already covered but tune padding) */
  .block-downloadCta .downloadCta-row { padding: var(--sp-md); gap: var(--sp-md); }

  /* CtaBanner reduced padding */
  .block-ctaBanner { padding-block: var(--sp-lg); }

  /* ArticleHeader cover height cap */
  .block-articleHeader .articleHeader-cover img { max-height: 320px; }

  /* ArticleHeader meta: align share at start instead of right-pushed */
  .block-articleHeader .articleHeader-share-label { margin-left: 0; }
  .block-articleHeader .articleHeader-meta { gap: var(--sp-sm); }

  .block-articleBody .articleBody-inner { font-size: var(--fs-base); line-height: 1.7; }
  .block-articleBody .articleBody-inner h2 { margin-top: var(--sp-lg); }
  .block-articleBody .articleBody-inner img { margin: var(--sp-sm) auto; }
  .block-articleBody .articleBody-inner blockquote {
    padding: var(--sp-sm) var(--sp-md);
    font-size: var(--fs-base);
  }

  /* Stat counters slightly smaller */
  .block-statsGrid .pricing h3 { font-size: clamp(28px, 7vw, 38px); }
  .block-statsGrid { padding-block: var(--sp-lg); }

  /* TestimonialCard: reduce big quote and padding */
  .block-testimonialCard { padding-block: var(--sp-lg); }
  .block-testimonialCard .testimonialCard-row { padding: var(--sp-md); border-radius: var(--radius-lg); }
  .block-testimonialCard .testimonialCard-row::before { font-size: 180px; top: -28px; }
  .block-testimonialCard .testimonialCard-quote { font-size: clamp(17px, 4vw + 8px, 22px); }

  /* RelatedArticles spacing */
  .block-relatedArticles { padding-block: var(--sp-lg); }
  .block-relatedArticles .relatedArticles-title { margin-bottom: var(--sp-md); }

  /* Newsletter: stack input + button full-width */
  .block-newsletterBlock .newsletterBlock-inner { padding: var(--sp-md); }
  .block-newsletterBlock .newsletterBlock-form input[type=email] {
    min-width: 0;
    width: 100%;
  }
  .block-newsletterBlock .newsletterBlock-form button { width: 100%; }

  /* SocialLinks: ensure tap targets */
  .block-socialLinks .socialLinks-list a { padding: 12px 16px; }

  /* Footer collapsing */
  .footer { padding-top: var(--sp-lg); padding-bottom: var(--sp-md); margin-top: var(--sp-lg); }
  .footer-cols, .footer-grid, .footer-lists { gap: var(--sp-md); }

  /* Reduce sp-xl & sp-2xl tokens on phablet */
  :root { --sp-xl: 48px; --sp-2xl: 64px; }
}

/* ============================================================
   Small phones — 575px and below
   ============================================================ */
@media (max-width: 575px) {
  /* Container side padding floor */
  :root { --container-padding: 16px; }

  /* StatsGrid: single column with right-sized cards */
  .block-statsGrid .statsGrid-inner { grid-template-columns: 1fr; gap: var(--sp-sm); }
  .block-statsGrid .pricing { padding: var(--sp-sm); }

  /* Hero compact */
  .block-hero { padding-block: 40px; }
  .block-hero::after { display: none; } /* remove decorative blur, avoids overflow */
  .block-hero .hero-title { font-size: clamp(28px, 8vw + 6px, 38px); line-height: 1.1; }
  .block-hero .hero-lead { font-size: var(--fs-base); }
  .block-hero .hero-eyebrow, .block-hero .hero-kicker { font-size: 11px; padding: 5px 10px; }

  /* Article header cover smaller */
  .block-articleHeader .articleHeader-cover img { max-height: 220px; }
  .block-articleHeader .articleHeader-title { font-size: clamp(24px, 7vw + 4px, 32px); }
  .block-articleHeader .articleHeader-meta { font-size: var(--fs-xs); padding: 12px 0; }

  /* Section title spacing */
  .block-leadIntro { padding-block: var(--sp-sm) var(--sp-xs); }
  .block-leadIntro .leadIntro-title { font-size: clamp(26px, 7vw, 34px); }
  .block-sectionTitle .sectionTitle-title { font-size: clamp(22px, 6vw, 30px); }

  /* OfferCard slightly tighter */
  .block-offerCard .pricing { padding: 32px 20px 24px; }
  .block-offerCard.is-variant-featured .pricing::after { top: 12px; right: 12px; }

  /* PersonaGrid list: full width single column tap-friendly */
  .block-personaGrid .personaGrid-row { gap: var(--sp-md); }
  .block-personaGrid .personaGrid-list { grid-template-columns: 1fr; }
  .block-personaGrid .personaGrid-list a { padding: 14px 16px; font-size: var(--fs-base); }

  /* MustReadList: ensure single column with bigger tap area */
  .block-mustReadList .mustReadList-list { grid-template-columns: 1fr; gap: 8px; }
  .block-mustReadList .mustReadList-list a { padding: 12px 14px; font-size: var(--fs-base); }

  /* ArticleMeta on small screens */
  .block-articleMeta .articleMeta-inner { gap: var(--sp-sm); }
  .block-articleMeta .articleMeta-share,
  .block-articleMeta .articleMeta-tags { width: 100%; }

  /* Article body inside lists */
  .block-articleBody .articleBody-inner ol li,
  .block-articleBody .articleBody-inner ul li { padding-left: 24px; }

  /* DownloadCta stack image first for visual rhythm */
  .block-downloadCta .downloadCta-row {
    grid-template-columns: 1fr;
    padding: var(--sp-md);
  }
  .block-downloadCta .downloadCta-image { order: -1; max-width: 240px; margin-inline: auto; }

  /* Footer titles tighter */
  .footer-block-title { font-size: var(--fs-sm); }
  .footer .footer-baseline { padding: var(--sp-md); }

  /* Buttons: full-width on very small screens for clearer CTA */
  .hero-cta .btn, .ctaBanner-cta .btn, .downloadCta-text .btn { width: 100%; justify-content: center; }
  .btn { padding: 14px 24px; }

  /* Navbar: tighten the open menu */
  .navbar > .container { padding-top: 10px; padding-bottom: 10px; }
  .navbar .menu.nav > li > a { padding: 14px 0; font-size: var(--fs-base); }
  .navbar .logo img { height: 32px; }

  /* Reduce 2xl/xl tokens on very small screens */
  :root { --sp-xl: 40px; --sp-2xl: 56px; }
}

/* ============================================================
   Tiny phones — 380px and below (iPhone SE, older Androids)
   ============================================================ */
@media (max-width: 380px) {
  :root { --container-padding: 14px; }
  .block-articleHeader .articleHeader-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  .block-articleHeader .articleHeader-share-label { margin-left: 0; }
  .block-statsGrid .pricing { padding: 12px; }
}

/* ============================================================
   Touch-only enhancements (no hover capability)
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover-driven transforms that don't apply to touch */
  .block-offerCard .pricing:hover,
  .block-articleCard:hover,
  .block-personaGrid .personaGrid-list a:hover,
  .block-caseStudyEnjeux .caseStudyEnjeux-list li:hover,
  .block-caseStudyResults .caseStudyResults-list li:hover,
  .block-statsGrid .pricing:hover,
  .block-mustReadList .mustReadList-list a:hover { transform: none; }

  /* Ensure dropdown menus on hover devices are not stuck open by tap */
  .navbar .menu.nav .dropdown-menu { transition: none; }

  /* Larger tap-zones for share icons */
  .block-articleHeader .articleHeader-share a,
  .block-articleMeta .articleMeta-share-list a { width: 40px; height: 40px; }
}

/* ============================================================
   High-DPI tweaks
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  /* Slightly thicker text-decoration for crispness on retina */
  .block-articleBody .articleBody-inner a { background-size: 100% 1.5px; }
}

/* ============================================================
   Landscape phones — small height
   ============================================================ */
@media (max-height: 480px) and (orientation: landscape) {
  .block-hero { padding-block: 24px; }
  .navbar { position: static; } /* avoid stealing vertical real-estate */
}

/* ============================================================
   Safe-area for notched devices (iPhone X+)
   ============================================================ */
@supports (padding: max(0px)) {
  .container { padding-inline: max(var(--container-padding), env(safe-area-inset-left)); }
  .footer { padding-bottom: max(var(--sp-md), env(safe-area-inset-bottom)); }
}