/* ANC unified mobile hero — matches the approved About mobile composition */
@media (max-width: 768px) {
  body[data-mobile-hero="about"]    { --mobile-hero-image: url('../images/mobile-heroes/about.jpg'); }
  body[data-mobile-hero="services"] { --mobile-hero-image: url('../images/mobile-heroes/services.jpg'); }
  body[data-mobile-hero="projects"] { --mobile-hero-image: url('../images/mobile-heroes/projects.jpg'); }
  body[data-mobile-hero="products"] { --mobile-hero-image: url('../images/mobile-heroes/products.jpg'); }
  body[data-mobile-hero="blog"]     { --mobile-hero-image: url('../images/mobile-heroes/blog.jpg'); }
  body[data-mobile-hero="contact"]  { --mobile-hero-image: url('../images/mobile-heroes/contact.jpg'); }

  body[data-mobile-hero] :is(.ab-hero,.pj-hero,.bl-hero,.ct-hero,section.hero,header.hero) {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background-image: var(--mobile-hero-image) !important;
    background-size: 100% auto !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-color: #080405 !important;
  }

  /* The supplied mobile banners already contain the dark/red gradient. */
  body[data-mobile-hero] :is(.ab-hero,.pj-hero,.bl-hero,.ct-hero,section.hero,header.hero)::before,
  body[data-mobile-hero] :is(.ab-hero,.pj-hero,.bl-hero,.ct-hero,section.hero,header.hero)::after {
    pointer-events: none !important;
  }

  body[data-mobile-hero] :is(.ab-hero,.pj-hero,.bl-hero,.ct-hero) > img.bg,
  body[data-mobile-hero="products"] section.hero .hero-visual {
    display: none !important;
  }

  body[data-mobile-hero="about"] .ab-hero-inner,
  body[data-mobile-hero="projects"] .pj-hero-inner,
  body[data-mobile-hero="blog"] .bl-hero-inner,
  body[data-mobile-hero="contact"] .ct-hero-inner,
  body[data-mobile-hero="products"] section.hero .hero-grid,
  body[data-mobile-hero="services"] header.hero .section-wrap {
    position: relative !important;
    z-index: 3 !important;
    width: 100% !important;
    max-width: 430px !important;
    min-height: 0 !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding: 84vw 20px 28px !important;
  }

  body[data-mobile-hero="about"] .ab-hero-inner .wide,
  body[data-mobile-hero="projects"] .pj-hero-inner .wide,
  body[data-mobile-hero="blog"] .bl-hero-inner .wide,
  body[data-mobile-hero="contact"] .ct-hero-inner .wide,
  body[data-mobile-hero="products"] section.hero .hero-content,
  body[data-mobile-hero="services"] header.hero .section-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
  }

  body[data-mobile-hero="contact"] .ct-grid,
  body[data-mobile-hero="products"] section.hero .hero-grid {
    display: block !important;
  }

  /* Keep the approved About-style hierarchy on every main page. */
  body[data-mobile-hero] :is(.hero-eyebrow-u,.hero-badge,.mono,.crumb) {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  body[data-mobile-hero] :is(h1,.ab-hero h1,.pj-hero h1,.bl-hero h1,.ct-hero h1,section.hero h1,header.hero h1) {
    color: #fff !important;
    font-size: 2.05rem !important;
    line-height: 1.24 !important;
    margin: 0 0 14px !important;
    max-width: 100% !important;
  }

  body[data-mobile-hero] .ab-hero .lead-title {
    color: #fff !important;
    font-size: 1.48rem !important;
    line-height: 1.55 !important;
    margin: 0 0 16px !important;
    max-width: 100% !important;
  }

  body[data-mobile-hero] :is(.ab-hero p,.pj-hero p,.bl-hero p,.ct-hero p,section.hero p,header.hero p) {
    color: rgba(255,255,255,.84) !important;
    font-size: .93rem !important;
    line-height: 1.9 !important;
    max-width: 100% !important;
    margin: 0 0 22px !important;
  }

  /* Arabic = right, English = left, exactly like the approved About layout. */
  html[lang="ar"] body[data-mobile-hero] :is(.ab-hero-inner .wide,.pj-hero-inner .wide,.bl-hero-inner .wide,.ct-hero-inner .wide,section.hero .hero-content,header.hero .section-wrap) {
    direction: rtl !important;
    text-align: right !important;
  }
  html[lang="ar"] body[data-mobile-hero] :is(.hero-eyebrow-u,.hero-badge,.crumb) { justify-content: flex-start !important; text-align: right !important; }
  html[lang="ar"] body[data-mobile-hero] :is(h1,.lead-title,p) { text-align: right !important; }

  html[lang="en"] body[data-mobile-hero] :is(.ab-hero-inner .wide,.pj-hero-inner .wide,.bl-hero-inner .wide,.ct-hero-inner .wide,section.hero .hero-content,header.hero .section-wrap) {
    direction: ltr !important;
    text-align: left !important;
  }
  html[lang="en"] body[data-mobile-hero] :is(.hero-eyebrow-u,.hero-badge,.crumb) { justify-content: flex-start !important; text-align: left !important; }
  html[lang="en"] body[data-mobile-hero] :is(h1,.lead-title,p) { text-align: left !important; }

  /* Approved full-width stacked CTAs. */
  body[data-mobile-hero] :is(.hero-cta,.hero-buttons,.hero-actions,.ct-hero-ctas) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 340px !important;
    margin: 24px auto 0 !important;
  }
  body[data-mobile-hero] :is(.hero-cta,.hero-buttons,.hero-actions,.ct-hero-ctas) :is(a,.btn) {
    width: 100% !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* Keep non-About extras from stretching the hero and creating empty black space. */
  body[data-mobile-hero="products"] section.hero .hero-stats,
  body[data-mobile-hero="services"] header.hero .hero-stats,
  body[data-mobile-hero="contact"] .ct-hero .hero-stats,
  body[data-mobile-hero="projects"] .pj-hero .hero-badges {
    display: none !important;
  }

  body[data-mobile-hero="blog"] .bl-hero .search-bar {
    width: 100% !important;
    max-width: 340px !important;
    margin: 22px auto 0 !important;
  }

  body[data-mobile-hero="projects"] .pj-hero .btn {
    width: 100% !important;
    max-width: 340px !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 4px auto 0 !important;
  }

  /* Remove the previous forced viewport-height black tail. */
  body[data-mobile-hero] main,
  body[data-mobile-hero] :is(.ab-hero,.pj-hero,.bl-hero,.ct-hero,section.hero,header.hero) {
    min-height: 0 !important;
  }
}

@media (max-width: 430px) {
  body[data-mobile-hero="about"] .ab-hero-inner,
  body[data-mobile-hero="projects"] .pj-hero-inner,
  body[data-mobile-hero="blog"] .bl-hero-inner,
  body[data-mobile-hero="contact"] .ct-hero-inner,
  body[data-mobile-hero="products"] section.hero .hero-grid,
  body[data-mobile-hero="services"] header.hero .section-wrap {
    padding-top: 84vw !important;
  }
}

@media (max-width: 375px) {
  body[data-mobile-hero="about"] .ab-hero-inner,
  body[data-mobile-hero="projects"] .pj-hero-inner,
  body[data-mobile-hero="blog"] .bl-hero-inner,
  body[data-mobile-hero="contact"] .ct-hero-inner,
  body[data-mobile-hero="products"] section.hero .hero-grid,
  body[data-mobile-hero="services"] header.hero .section-wrap {
    padding-top: 82vw !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}