/* ==========================================================================
   EXPERIMENT: "hero-xl" banner for very wide screens (>= 1400px)

   Below 1400px nothing here applies, the banner is exactly the template's.
   From 1400px the photo is no longer stretched over the whole viewport:
     - the sharp photo covers the container (1304px) plus a soft fade zone on
       each side, and the fade lies OUTSIDE the container (it never reaches
       into it, and it shrinks when the viewport is only a bit wider);
     - behind it, the same photo fills the full width, blurred.

   How it is wired (so it can be switched off or removed):
     - `css/hero-xl.css` is linked on the pages with a photo banner (HoReCa,
       Producer, Services, Our story, Legal notice, Privacy policy, both
       languages), not on Home or Contact;
     - the <section id="subheader"> has the class `tarin-hero-xl` and one
       extra child `<div class="tarin-hero-xl-bg" style="background-image:…; background-position:…">`
       (same image and crop as the section's own data-bgimage).
   To disable: remove the <link>. To tune: --hero-fade-max and --hero-blur.
   ========================================================================== */

.tarin-hero-xl-bg {
  display: none;
  background-position: center 50%; /* default; each page sets its own inline */
}

@media (min-width: 1400px) {
  #subheader.tarin-hero-xl {
    /* The template paints the photo inline on the section (data-bgimage);
       the two layers below replace it. */
    background: none !important;
    isolation: isolate;
    --hero-container: 1304px;
    --hero-fade-max: 180px;
    --hero-blur: 28px;
    /* Fade width: the free space beside the container, minus a margin for the
       scrollbar, capped. Never wider than that space, so the mask cannot
       enter the container. */
    --hero-fade: min(var(--hero-fade-max), max(0px, calc((100vw - var(--hero-container) - 20px) / 2)));
  }

  #subheader.tarin-hero-xl .tarin-hero-xl-bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* The element only carries the image URL (inline style); its own paint
       is hidden, the two pseudo-elements inherit the URL and draw it. */
    background-size: 0 0 !important;
  }

  #subheader.tarin-hero-xl .tarin-hero-xl-bg::before,
  #subheader.tarin-hero-xl .tarin-hero-xl-bg::after {
    content: "";
    position: absolute;
    background-image: inherit;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: inherit;
  }

  /* Blurred copy across the full width (oversized so the blur has no edges). */
  #subheader.tarin-hero-xl .tarin-hero-xl-bg::before {
    inset: -60px;
    filter: blur(var(--hero-blur));
  }

  /* Sharp copy: container + a fade zone on each side, masked at both edges. */
  #subheader.tarin-hero-xl .tarin-hero-xl-bg::after {
    top: 0;
    bottom: 0;
    left: 50%;
    width: calc(var(--hero-container) + 2 * var(--hero-fade));
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--hero-fade), #000 calc(100% - var(--hero-fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 var(--hero-fade), #000 calc(100% - var(--hero-fade)), transparent 100%);
  }
}