/* ============================================================
   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;
  }
}

/* ------------------------------------------------------------
   7. Social Media Marketing — Deliverables (#add-ons) cards
      On mobile the image must fill the full card width edge-to-edge.
      Loaded last so these rules beat style.css + inline page styles.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  body.page-social-media #add-ons .team-card {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  body.page-social-media #add-ons .team-content {
    padding: 16px !important;
  }

  body.page-social-media #add-ons .team-media {
    order: -1 !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    height: 220px !important;
    min-height: 220px !important;
    margin: 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background: #f8f7fc !important;
    overflow: hidden !important;
  }

  body.page-social-media #add-ons .team-media img,
  body.page-social-media #add-ons .team-media img.is-visible {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 1 !important;
    transform: scale(1.1) !important;
    transform-origin: center center !important;
  }

  body.page-social-media #add-ons .team-media::after {
    display: none !important;
  }

  body.page-social-media #add-ons .team-bullets {
    min-height: 0 !important;
  }
}

/* ------------------------------------------------------------
   8. iPad Pro / laptop — promo badge must not clip on the left
      Centered offer row + contact links can overflow past the inner
      padding; body { overflow-x: hidden } then cuts off "L" in
      "Limited time offer". Loaded last on what-we-do pages.
   ------------------------------------------------------------ */
@media screen and (min-width: 1024px) and (max-width: 1536px) {
  body.has-top-promo-bar .top-promo-bar__inner {
    padding-left: 20px !important;
    padding-right: 16px !important;
    gap: 8px;
  }

  body.has-top-promo-bar .top-promo-bar__offer {
    justify-content: flex-start !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  body.has-top-promo-bar .top-promo-bar__badge {
    flex-shrink: 0;
  }

  body.has-top-promo-bar .top-promo-bar__text:not(.top-promo-bar__text--mobile) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.has-top-promo-bar .top-promo-bar__contact {
    flex-shrink: 0;
    gap: 8px;
  }

  body.has-top-promo-bar .top-promo-bar__link {
    font-size: 10px;
    gap: 4px;
  }
}

/* ------------------------------------------------------------
   9. iPad Pro / laptop — hero benefit badges in a 2×2 grid
      (matches email-marketing reference: fit-content pills, not
      full-width stretch). Works for flat .hero-industries and
      stack/.hero-industries__row markup.
   ------------------------------------------------------------ */
@media screen and (min-width: 1024px) and (max-width: 1536px) {
  .hero .hero-industries.hero__banner,
  .hero .hero-industries:not(.hero-industries__stack),
  .hero .hero-industries__stack,
  .hero [class$="-hero__tags"] {
    display: grid !important;
    grid-template-columns: repeat(2, auto) !important;
    gap: 8px !important;
    width: fit-content !important;
    max-width: 100% !important;
    align-items: start;
    justify-items: start;
  }

  .hero .hero-industries__stack .hero-industries__row,
  .hero [class$="-hero__tags"] .hero-industries__row {
    display: contents !important;
  }

  .hero .hero-industries .ind-tag,
  .hero .hero-industries__stack .ind-tag,
  .hero [class$="-hero__tags"] .ind-tag {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    flex: 0 0 auto !important;
    white-space: normal !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    text-align: center !important;
    justify-content: center !important;
    box-sizing: border-box;
  }

  /* Hero form "Active …" badge — nudge left so it is not clipped on the right */
  .hero .lead-form .hero-float,
  .hero .lead-form.lead-form--hero-v2 .hero-float {
    right: 10px !important;
    left: auto !important;
    transform: none !important;
    max-width: calc(100% - 20px);
  }
}