/* ==========================================================================
   B.E Security — Mobile hero composition (max-width: 991px; matches the header's mobile breakpoint)
   Desktop / large-tablet layout is untouched: every rule lives in the media query.

   Strategy
   - The hero image is the SAME file (hero-guard-hd.jpg). It is not edited.
   - On mobile it is sized from the viewport width (so the guard scales
     consistently from 320px to 768px) and positioned so the guard's back,
     including the "B.E SECURITY" shirt print, sits in the horizontal centre.
   - The headline/content is pushed below the shirt print, so it never covers
     the branding, and a dark gradient takes over for readability.
   ========================================================================== */
@media (max-width: 991px) {

  #top {
    /* Image height: scales with screen width, capped for big phones/small tablets */
    --hero-h: min(107vw, 660px);
    /* Source image aspect ratio 1080 / 1108 (hero-guard-hd.jpeg) */
    --hero-w: calc(var(--hero-h) * 0.9747);
    /* Space reserved for the fixed header (header min-height is 80px) */
    --hero-top: 5rem;
    /* Horizontal focus point (fraction of image width) = guard's back / shirt print.
       Guard body centre ≈ 0.50, "B.E SECURITY" print centre ≈ 0.51 */
    --guard-x: 0.505;
    --deep-rgb: oklch(12.8% 0 0);

    align-items: flex-start;
    min-height: 0;
  }

  /* --- Background image: mobile-specific positioning (image file unchanged) --- */
  #top > img.absolute {
    inset: auto !important;
    top: var(--hero-top) !important;
    left: calc(50% - var(--hero-w) * var(--guard-x)) !important;
    width: var(--hero-w) !important;
    height: var(--hero-h) !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center top;
  }

  /* --- Overlay: light over the guard, strong dark from the belt downward,
         plus a dark left edge to keep the headline readable --- */
  #top .hero-overlay {
    background:
      /* soft blend under the fixed header */
      linear-gradient(180deg,
        var(--deep) calc(var(--hero-top) - 0.5rem),
        transparent calc(var(--hero-top) + var(--hero-h) * 0.07)),
      /* dark left edge for headline legibility */
      linear-gradient(90deg,
        oklch(12.8% 0 0 / .7) 0%,
        oklch(12.8% 0 0 / .25) 18%,
        transparent 34%),
      /* strong dark fade below the shirt print so content sits on a dark base */
      linear-gradient(180deg,
        transparent calc(var(--hero-top) + var(--hero-h) * 0.60),
        oklch(12.8% 0 0 / .78) calc(var(--hero-top) + var(--hero-h) * 0.78),
        var(--deep) calc(var(--hero-top) + var(--hero-h) * 0.96)) !important;
  }

  /* --- Content sits below the shirt print so "B.E SECURITY" stays unobstructed --- */
  #top > .container-x {
    padding-top: calc(var(--hero-h) * 0.70 + 0.5rem) !important;
    padding-bottom: 3.5rem !important;
  }

  /* Subtle text shadow keeps white/gold text crisp where it meets the guard */
  #top h1,
  #top .eyebrow,
  #top .hero-lead {
    text-shadow: 0 2px 14px oklch(12.8% 0 0 / .85);
  }
}

/* Very small phones (320px) */
@media (max-width: 359px) {
  #top { --hero-top: 7.25rem; } /* header wraps to 2 rows on tiny screens */
  #top h1 { font-size: 2rem; }
}

/* Tablets: the image (capped at 660px tall) is narrower than the screen, so fade its side edges into the dark background */
@media (min-width: 620px) and (max-width: 991px) {
  #top > img.absolute {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  }
}