/* ============================================================================
   Aurelia Luxe — v3.39
   Loads last, after v338.

   REQUEST — Mobile hero: instead of a black gradient washing over the whole
   photo to keep the tagline readable (the desktop treatment), keep the
   overlay light and lean on text-shadow for legibility instead — reads on
   any photo without darkening the rest of the banner. Also sit the text
   lower and a little smaller on mobile.

   (A blurred glow panel behind the text was tried first but didn't read
   strongly enough in testing, so it was removed in favor of text-shadow.)

   Approach:
   1. Mobile overlay gradient is pulled way back — just a faint base tint
      near the very bottom, not the contrast-carrying element anymore.
   2. Layered text-shadow on the eyebrow/title/subtitle carries legibility
      on its own, on any background.
   3. The text block is pulled down further (tighter gaps, smaller bottom
      padding) and the type scale is nudged down another notch.
============================================================================ */

@media (max-width: 900px) {

  /* 1. Much lighter base tint — just enough ambient depth, not a contrast
        crutch. The glow behind the text now does that job. */
  .hl-hero__overlay {
    background: linear-gradient(
      to bottom,
      rgba(10, 7, 5, 0) 0%,
      rgba(10, 7, 5, 0) 55%,
      rgba(10, 7, 5, 0.18) 78%,
      rgba(10, 7, 5, 0.32) 100%
    ) !important;
  }

  /* 2. Blurred glow behind the text was tried and dropped — didn't read
        strongly enough. Legibility now rests on the text-shadow below. */

  /* 3. Layered text-shadow carries legibility on its own now. */
  .hl-hero__eyebrow {
    text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 2px 18px rgba(0,0,0,0.65) !important;
  }
  .hl-hero__title {
    text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 4px 30px rgba(0,0,0,0.7) !important;
  }
  .hl-hero__subtitle {
    text-shadow: 0 1px 5px rgba(0,0,0,0.85), 0 2px 20px rgba(0,0,0,0.65) !important;
  }

  /* 4. Pull the whole text block lower and tighter, and trim the type
        scale a notch further. */
  .hl-hero__content {
    padding-bottom: 0.65rem !important;
    gap: 0.1rem;
  }
  .hl-hero__eyebrow {
    font-size: 0.56rem !important;
    margin-bottom: 0.3rem !important;
  }
  .hl-hero__title {
    font-size: clamp(1.15rem, 6.4vw, 1.65rem) !important;
    margin-bottom: 0.3rem !important;
    white-space: nowrap !important;
  }
  .hl-hero__subtitle {
    font-size: 0.72rem !important;
    margin-bottom: 0.7rem !important;
  }
}