/* ============================================================
   responsive-mobile.css
   Centralized mobile / responsive fixes for StartupAdvisory.ai.
   Loaded LAST on every in-scope page so it can correct issues
   in style.css, page CSS, and inline <style> blocks.

   Scope: mobile-first UI polish. The right-edge .side-rail is
   intentionally left in place per product direction; rules here
   only stop other elements from colliding with it.
   ============================================================ */

/* ------------------------------------------------------------
   1. Logo & Branding / Logo Design hero
      (body.page-logo-design  -> logo-design.html
                                 what-we-do/logo-and-branding.html)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Form was capped at (100vw - 32px - 52px) and centered, leaving
     ~22px of dead space on each side. Let it use the full hero width
     so it actually fills the available area. */
  body.page-logo-design .hero-visual-group.hero-form-cluster {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body.page-logo-design .hero-form-cluster .lead-form {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* The decorative floating logo cards sit at the right edge, where
     they collide with the kept side-rail and read as clipped white
     boxes. Remove them on phones for a clean hero; the brand is still
     carried by the header logo and the portfolio section below. */
  body.page-logo-design .mobile-logo-card {
    padding: 0 !important;
  }

  /* The desktop hero reserves clamp(72-104px) of right padding for the
     floating logo cards. Those cards are hidden on phones, which leaves
     a big empty gutter between the copy and the (already 40px) side-rail
     -> the banner reads cramped to the left. Drop the reservation to a
     small gutter that just clears the rail so the copy uses the width.
     Selector specificity (0,4,1) + !important + later load order are
     required to beat the inline `.has-top-promo-bar` rule it overrides. */
  body.has-top-promo-bar.page-logo-design .hero-inner--attach .hero-copy,
  body.has-top-promo-bar.page-logo-design .hero-copy,
  body.has-top-promo-bar.page-logo-design .hero-industries__stack {
    padding-right: 24px !important;
  }

  /* "Active … Running" badge used right:-64px and clipped off-screen.
     Must match the (0,3,1) specificity of the inline rule it overrides. */
  body.page-logo-design .lead-form .hero-float {
    right: 6px !important;
    left: auto !important;
    max-width: calc(100vw - 24px);
  }
}

/* ------------------------------------------------------------
   2. GLOBAL mobile polish (every in-scope page)
      Long / unbreakable headings must wrap instead of
      overflowing or being clipped. Alignment is NOT changed,
      so centered section headers stay centered.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
  }
}

/* ------------------------------------------------------------
   3. What-we-do heroes: force LEFT-aligned heading + sub on
      mobile. Desktop is already left-aligned, so this only
      enforces the intended look on small screens where the
      heading was reading as centered.

      page-logo-design  -> logo-design.html
                           what-we-do/logo-and-branding.html
      page-web-design   -> web-design-development.html
                           what-we-do/web-design-and-development.html
      motion-video-page -> video-animation.html
                           what-we-do/motion-video.html
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  body.page-logo-design .hero-copy,
  body.page-logo-design .hero-copy h1,
  body.page-logo-design .hero-h1-line,
  body.page-logo-design .hero-sub,
  body.page-web-design .hero-copy,
  body.page-web-design .hero-copy h1,
  body.page-web-design .hero-h1-line,
  body.page-web-design .hero-sub,
  body.motion-video-page .hero__left,
  body.motion-video-page .hero__left h1,
  body.motion-video-page .hero-h1-row,
  body.motion-video-page .hero__sub {
    text-align: left !important;
  }

  /* The hero h1 is a flex column on the logo/web pages; keep its
     lines pinned to the start so they read flush-left. */
  body.page-logo-design .hero-copy h1,
  body.page-web-design .hero-copy h1,
  body.motion-video-page .hero__left h1 {
    align-items: flex-start !important;
  }
}

/* ------------------------------------------------------------
   4. Testimonials cards must never exceed the viewport.
      index.html / about.html use a fixed 360px card width that
      overflows on the narrowest phones.
   ------------------------------------------------------------ */
@media (max-width: 420px) {
  .testi-card {
    max-width: calc(100vw - 32px);
  }
}

/* ------------------------------------------------------------
   5. hero-growth header is sized for the homepage assessment quiz
      (style.css forces height/min-height: 800px on mobile). On the
      pages that reuse it as a plain page header -- terms, privacy
      and growth-os -- it only holds a badge + title, so that forced
      height leaves a huge empty gap below the title. Let it collapse
      to its content. Among in-scope pages only those three use
      .hero-growth, so this is safe. !important + later load order
      beat the style.css `section.hero-growth` rule. */
@media (max-width: 768px) {
  section.hero-growth {
    height: auto !important;
    min-height: 0 !important;
    padding-bottom: 48px !important;
  }
}

.block-xs {
  display: none;
}

/* ------------------------------------------------------------
   6. About hero reads centered on mobile (its `.hero` is
      text-align:center for the desktop photo-mosaic layout). Match
      the other pages by left-aligning the heading, sub and CTA on
      phones. Desktop keeps the centered mosaic.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  body.page-about .hero {
    text-align: left;
  }

  body.page-about .hero .hero-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  h2 > br {
    display: none;
  }
  h2 > br.block,
  .block-xs {
    display: block;
  }
}