/* ====================================================================
 * DevBreak — global mobile overrides
 * Loaded after every page's own CSS so these rules win cascade ties.
 *
 * Problems this fixes:
 *  - H1/H2 overflowing horizontally on narrow viewports
 *  - Hero sections leaving huge blank space before the headline
 *  - Stat / pricing / feature grids causing horizontal scroll
 *  - Long English words (HighconvertingLandingPage) not breaking
 *  - Body/html allowing horizontal scroll even when content fits
 * ==================================================================== */

/* --- Phones (anything narrower than the iPad portrait) --- */
@media (max-width: 768px) {

  /* Kill any horizontal scroll across the whole site */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    -webkit-text-size-adjust: 100%;
  }

  /* Force containers (but NOT fixed widgets) to stay within viewport.
     The chat button and panel are position:fixed and should keep their
     own widths. */
  body main,
  body section,
  body header,
  body footer,
  body .container,
  body .wrap,
  body .page-wrap,
  body .sec-wrap {
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  /* Break long heading words instead of overflowing */
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }

  /* Headlines: scale down so they fit on a 360px phone.
     Extra-specific selectors so we beat inline <style> blocks
     that use higher clamp() minimums.
     Pure vw sizing — no clamp min — so the headline can shrink
     all the way down to fit any width. */
  html body h1,
  html body .hero h1,
  html body section h1 {
    font-size: 7vw !important;
    line-height: 1.15 !important;
    letter-spacing: -0.01em !important;
    word-break: normal;
    overflow-wrap: anywhere !important;
    hyphens: auto;
    max-width: 100% !important;
    width: 100%;
  }
  html body h2,
  html body section h2,
  html body .section-title {
    font-size: 6vw !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }
  html body h3,
  html body section h3 { font-size: 4.8vw !important; }

  /* Long brand words like "DevBreak Software" — let them shrink to fit.
     overflow-wrap: anywhere lets the browser break inside a word if
     the whole word would otherwise overflow. */
  h1, h2, h3,
  h1 .gradient-text,
  h1 span,
  h2 span {
    overflow-wrap: anywhere !important;
    word-break: normal;
  }

  /* Hero sections often use 100vh + 120px+ padding — too tall on phones.
     Pull them down so the headline is visible without scrolling.
     Also reduce side padding so headlines have more breathing room. */
  .hero,
  .header,
  header.hero,
  section.hero,
  [class*="hero-section"] {
    min-height: auto !important;
    padding-top: 80px !important;
    padding-bottom: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Containers, wrappers, grids — never wider than the viewport */
  .container,
  .nav-inner,
  .sec-wrap,
  .page-wrap,
  .wrap,
  .footer-inner {
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Section side padding — reduce so content has room */
  section {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Media elements: never break out */
  img, video, iframe, picture, canvas, svg.responsive {
    max-width: 100% !important;
    height: auto;
  }

  /* Tables overflow on phones — let them scroll horizontally inside */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Grids that may try to fit 3+ columns — drop to 1 column on phones */
  .services-grid,
  .portfolio-grid,
  .feature-grid,
  .pricing-grid,
  .tier-grid,
  .testimonials-grid,
  .hero-stats,
  .stats,
  .stats-row,
  .footer-links,
  .mock-stat-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Some pages use 2-col feature lists — keep those at 2 if room allows */
  .includes,
  .feature-row-2 {
    grid-template-columns: 1fr !important;
  }

  /* Hero CTAs — stack vertically with full width */
  .hero-ctas,
  .hero-buttons,
  .cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .hero-ctas > *,
  .hero-buttons > *,
  .cta-row > * {
    width: 100% !important;
    justify-content: center;
  }

  /* Navigation: tighter on phones, hide desktop link lists.
     The landing nav has 5 inline links + a CTA which together push
     the page wider than the viewport, making headlines look cropped.
     We collapse it to logo + lang toggle + CTA on mobile. */
  nav {
    padding-left: 16px !important;
    padding-right: 16px !important;
    flex-wrap: wrap;
  }
  /* Hide desktop link groups on phones (Corvyn/Elevate already have
     hamburger replacements, landing does not — so we just hide them) */
  body nav .nav-links,
  body nav .nav-right > .nav-back,
  body nav .nav-course-link,
  body nav .nav-contact {
    display: none !important;
  }
  /* Keep logo, lang toggle, and primary CTA on the bar */
  body nav .nav-logo,
  body nav .start-project-btn,
  body nav .nav-cta,
  body nav .lang-toggle,
  body nav .nav-hamburger,
  body nav .hamburger {
    display: flex !important;
  }
  /* Logo text smaller so brand name fits */
  body nav .nav-logo,
  body nav .nav-brand {
    font-size: 14px !important;
  }

  /* Long URLs / code samples shouldn't push layout */
  code, a, .mono, .url-block {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Touch targets — Apple HIG / Material recommend ≥44px tap zone.
     Apply to interactive elements that are likely too small on phone.
     We bump min-height; existing layout (padding) keeps visual size,
     this just guarantees the hit area is comfortable. */
  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .cta,
  .nav-cta,
  .nav-course-link,
  .lang-toggle,
  .chk,
  .footer-links a,
  nav a[href],
  .mobile-menu a {
    min-height: 44px;
  }

  /* Inline anchors inside paragraphs/lists shouldn't get the min-height —
     only standalone link blocks. Use a heuristic: links inside <p>/<li>/<span>
     are usually inline and don't need the tap zone bump. */
  p a, li a, span a, td a {
    min-height: 0;
  }

  /* Form fields — comfortable height + 16px font to prevent iOS Safari
     zoom on focus. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }
  textarea {
    min-height: 96px;
  }
}

/* --- Smaller phones (iPhone SE, older Android) --- */
@media (max-width: 420px) {
  html body h1,
  html body .hero h1,
  html body section h1 {
    font-size: 6.5vw !important;
  }
  html body h2,
  html body section h2 {
    font-size: 5.6vw !important;
  }
  .hero,
  section.hero,
  header.hero {
    padding-top: 70px !important;
    padding-bottom: 36px !important;
  }
  .container,
  .nav-inner,
  .sec-wrap,
  .page-wrap,
  .wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Pricing badges, tags — wrap nicely */
  .pricing-badge,
  .stat-num,
  .price-new {
    font-size: clamp(28px, 9vw, 44px) !important;
  }
}

/* --- Reduce reveal-animation travel on tiny screens so nothing
       jumps in from outside the page --- */
@media (max-width: 768px) {
  .reveal {
    transform: translate3d(0, 12px, 0) !important;
  }
  .reveal.visible {
    transform: translate3d(0, 0, 0) !important;
  }
  /* Disable parallax entirely on mobile — it tends to make content
     visibly drift away from where the user expects it */
  [data-parallax] {
    transform: none !important;
  }
}