/* ==========================================================================
   Brand lock: homepage hero background + pillars "MESTRO" watermark.

   The hero photo (MestroMsThemePlugin::HERO_IMAGE_PATH) and the watermark text
   (templates/frontend/components/homePillars.tpl) are set in code. These rules
   are !important inside a cascade layer declared before every other
   stylesheet, so they outrank !important rules from Website → Appearance →
   Journal style sheet or <style> tags in custom HTML. The layer is anonymous:
   a named layer could be re-opened by later CSS (`@layer <name> { … }`) with
   more specific selectors; an anonymous one cannot be referenced at all.
   Colours are literal so overriding --mestro-* variables cannot change the
   locked layers either. The watermark element repeats its key properties as
   inline !important styles (homePillars.tpl), which outrank every stylesheet.
   This file must stay the first theme stylesheet.
   ========================================================================== */

@layer {
  body .mestro-hero.mestro-hero--photo {
    background: color-mix(in oklab, #202b9e 78%, black) !important;
  }

  body .mestro-hero--photo .mestro-hero__photo {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    content: normal !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
    mask: none !important;
    mix-blend-mode: normal !important;
  }

  body .mestro-hero--photo .mestro-hero__scrim {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    mix-blend-mode: normal !important;
    background:
      linear-gradient(
        105deg,
        color-mix(in oklab, color-mix(in oklab, #202b9e 78%, black) 88%, transparent) 0%,
        color-mix(in oklab, #202b9e 62%, transparent) 42%,
        color-mix(in oklab, #0a1028 48%, transparent) 100%
      ),
      linear-gradient(
        180deg,
        color-mix(in oklab, color-mix(in oklab, #202b9e 78%, black) 35%, transparent) 0%,
        transparent 28%,
        color-mix(in oklab, color-mix(in oklab, #202b9e 78%, black) 55%, transparent) 100%
      ) !important;
  }

  body .mestro-hero--photo .mestro-hero__canvas {
    background: none !important;
    backdrop-filter: none !important;
  }

  body .mestro-hero--photo .mestro-hero__mist--a {
    background: radial-gradient(
      circle at 40% 40%,
      color-mix(in oklab, #202b9e 28%, transparent),
      transparent 68%
    ) !important;
  }

  body .mestro-hero--photo .mestro-hero__mist--b {
    background: radial-gradient(
      circle at 50% 45%,
      color-mix(in oklab, #ff7f00 22%, transparent),
      transparent 70%
    ) !important;
  }

  body .mestro-hero--photo .mestro-hero__grain {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E") !important;
    background-color: transparent !important;
  }

  body .mestro-hero--photo .mestro-hero__layout {
    background: none !important;
    backdrop-filter: none !important;
  }

  body .mestro-hero--photo::before,
  body .mestro-hero--photo::after,
  body .mestro-hero--photo .mestro-hero__scrim::before,
  body .mestro-hero--photo .mestro-hero__scrim::after,
  body .mestro-hero--photo .mestro-hero__canvas::before,
  body .mestro-hero--photo .mestro-hero__canvas::after,
  body .mestro-hero--photo .mestro-hero__canvas > *::before,
  body .mestro-hero--photo .mestro-hero__canvas > *::after,
  body .mestro-hero--photo .mestro-hero__layout::before,
  body .mestro-hero--photo .mestro-hero__layout::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  /* —— Pillars "MESTRO" watermark —— */
  body .mestro-pillars {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  body .mestro-pillars .mestro-pillars__grid {
    position: relative !important;
    z-index: 1 !important;
    background: none !important;
  }

  body .mestro-pillars .mestro-pillars__watermark {
    display: block !important;
    position: absolute !important;
    inset: 50% auto auto 50% !important;
    z-index: 0 !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: translate(-50%, -50%) !important;
    font-family: "Barlow", system-ui, sans-serif !important;
    font-size: clamp(96px, 21vw, 256px) !important;
    font-style: normal !important;
    font-weight: 800 !important;
    letter-spacing: -0.07em !important;
    line-height: 0.8 !important;
    text-align: center !important;
    text-indent: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    color: color-mix(in oklab, #202b9e 6%, transparent) !important;
    -webkit-text-fill-color: color-mix(in oklab, #202b9e 6%, transparent) !important;
    -webkit-text-stroke: 0 !important;
    background: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    content: normal !important;
    filter: none !important;
    clip-path: none !important;
    mask: none !important;
    mix-blend-mode: normal !important;
    pointer-events: none !important;
    user-select: none !important;
  }

  body .mestro-pillars .mestro-pillars__watermark::first-line,
  body .mestro-pillars .mestro-pillars__watermark::first-letter {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    text-shadow: none !important;
    background: none !important;
  }

  /* Pillar content sits above the watermark: it must not paint over it. */
  body .mestro-pillars .mestro-pillar,
  body .mestro-pillars .mestro-pillar > h3,
  body .mestro-pillars .mestro-pillar > p {
    background: none !important;
    box-shadow: none !important;
    border-image: none !important;
    outline-style: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body .mestro-pillars .mestro-pillar__ico {
    width: 3.1rem !important;
    height: 3.1rem !important;
    box-shadow: none !important;
    outline-style: none !important;
    transform: none !important;
    filter: none !important;
    backdrop-filter: none !important;
  }

  body .mestro-pillars::before,
  body .mestro-pillars::after,
  body .mestro-pillars .mestro-pillar::before,
  body .mestro-pillars .mestro-pillar::after,
  body .mestro-pillars .mestro-pillar > *::before,
  body .mestro-pillars .mestro-pillar > *::after,
  body .mestro-pillars .mestro-pillars__watermark::before,
  body .mestro-pillars .mestro-pillars__watermark::after,
  body .mestro-pillars .mestro-pillars__grid::before,
  body .mestro-pillars .mestro-pillars__grid::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }
}