/* ============================================================
   Fabrixa hero blocks — Option B (2026-05-06)

   Converts inline `background: linear-gradient(...), url(...)` heroes
   into <img srcset> + ::before overlay. Three SEO/perf wins:
     1. <img> with descriptive alt is indexable by Google Images.
     2. <img fetchpriority="high"> is discoverable by the HTML
        pre-parser — no need to wait for CSS to resolve url(...).
     3. srcset means mobile downloads ~30 KB instead of ~280 KB,
        which shaves 0.4-0.8s off LCP on 3G/slow-4G.

   The dark gradient overlay (decorative, kept in CSS) preserves
   the existing visual treatment so converted heroes look identical.

   Class catalogue:
     .fbx-hero-img-section  → wrapper <section>, position:relative,
                              padding controls hero height.
     .fbx-hero-img          → absolute-positioned <img> behind text.
                              z-index:0.
     .fbx-hero-img-section::before  → gradient overlay,
                                      z-index:1 (sits above img,
                                      below content).
     .fbx-hero-img-content  → text wrapper, position:relative,
                              z-index:2.

   Usage pattern in templates:
     <section class="fbx-section fbx-hero-img-section" style="padding:140px 24px 120px;">
         <img class="fbx-hero-img"
              src="hero-1200.jpg"
              srcset="hero-400.jpg 400w, hero-800.jpg 800w, hero-1200.jpg 1200w, hero-1920.jpg 1920w"
              sizes="100vw"
              alt="Descriptive alt for SEO"
              fetchpriority="high"
              decoding="async">
         <div class="fbx-hero-img-content fbx-container" style="max-width:1200px;">
             ...heading + copy...
         </div>
     </section>

   Tunable per-page: override `--fbx-hero-overlay-top` / `--fbx-hero-overlay-bottom`
   (rgba values) on the section style attr to brighten/darken the overlay.
   Default is the same 0.78/0.92 gradient used on the legacy heroes.
   ============================================================ */

.fbx-hero-img-section {
    position: relative;
    overflow: hidden;
    background-color: #18202D;
    /* Default overlay tones — override per-section via inline style */
    --fbx-hero-overlay-top: rgba(24, 32, 45, 0.78);
    --fbx-hero-overlay-bottom: rgba(24, 32, 45, 0.92);
}

.fbx-hero-img-section > .fbx-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    /* No animation/transform — keep it simple for LCP */
}

.fbx-hero-img-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        var(--fbx-hero-overlay-top),
        var(--fbx-hero-overlay-bottom)
    );
    z-index: 1;
    pointer-events: none;
}

.fbx-hero-img-section > .fbx-hero-img-content {
    position: relative;
    z-index: 2;
}

/* Direct children that aren't the hero img / content wrapper still render
   above the overlay — useful for pages that have a coral-rule decoration
   or tag inside the hero. */
.fbx-hero-img-section > *:not(.fbx-hero-img):not(::before) {
    position: relative;
    z-index: 2;
}