/**
 * Sponsored site takeover — background art in the page gutters.
 *
 * Renders the supplied artwork (Fury of Anubis, sky cropped so the gutters
 * show the obelisks / skull-pharaohs / fire) as a heavily stylised backdrop
 * that is only visible in the empty side gutters either side of the 1220px
 * boxed content column.
 *
 * Two surfaces carry the art so it frames the whole page consistently:
 *   - <main> (full-width, normally a flat grey-light fill) paints it into
 *     its own gutters for the content area.
 *   - .wp-site-blocks::before is a fixed backdrop behind everything, which
 *     shows through the gutters of any content-width element that sits
 *     directly under the root — chiefly the hero blocks, which live ABOVE
 *     <main> as siblings (so main's background can't reach them).
 * Both use identical fixed positioning/sizing so the art lines up
 * seamlessly down the gutters from the hero through the content.
 *
 * A horizontal grey-light veil masks the centre so the art never sits
 * behind text and fades it out as it approaches the content edge; a flat
 * veil keeps the overall opacity low so it reads as a subtle tint.
 *
 * Hero / header blocks are `align:full` (WordPress forces `max-width:none`
 * on full-aligned children via the constrained-layout rule). At takeover
 * widths we re-cap them to the content width so the gutters open up and the
 * backdrop frames them — matching the boxed content below. (`alignwide`
 * variants already cap at the 1220px wide size, so they need no override.)
 *
 * Best-practice constraints:
 *  - hidden on mobile / narrow viewports (no gutters to fill)
 *  - only shown once the gutters are wide enough to be worth it (>=1540px)
 *  - never intercepts pointer events, never on print
 *  - below 1540px nothing changes (no regression)
 */

:root {
  /* Half of theme.json contentSize (1220px) — the content column edge. */
  --takeover-content-half: 610px;
  /* Width of the fade band in the gutter, ending at the content edge. */
  --takeover-fade: 110px;
  /* Higher = more subtle art. 0.72 ≈ 28% image strength in the gutters. */
  --takeover-veil: 0.72;
  /* Match <main>'s grey-light fill (#FAFAFC) so the mask is seamless. */
  --takeover-surface: 250, 250, 252;
}

@media (min-width: 1540px) {
  main,
  .wp-site-blocks::before {
    /* Fallback for browsers without image-set(). */
    background-image:
      linear-gradient(
        to right,
        rgba(var(--takeover-surface), 0) 0,
        rgba(var(--takeover-surface), 0) calc(50% - var(--takeover-content-half) - var(--takeover-fade)),
        rgba(var(--takeover-surface), 1) calc(50% - var(--takeover-content-half)),
        rgba(var(--takeover-surface), 1) calc(50% + var(--takeover-content-half)),
        rgba(var(--takeover-surface), 0) calc(50% + var(--takeover-content-half) + var(--takeover-fade)),
        rgba(var(--takeover-surface), 0) 100%
      ),
      linear-gradient(
        rgba(var(--takeover-surface), var(--takeover-veil)),
        rgba(var(--takeover-surface), var(--takeover-veil))
      ),
      url("../../../assets/images/jpg/fury-of-anubis-bg.jpg");

    /* Modern browsers: WebP with JPG fallback. */
    background-image:
      linear-gradient(
        to right,
        rgba(var(--takeover-surface), 0) 0,
        rgba(var(--takeover-surface), 0) calc(50% - var(--takeover-content-half) - var(--takeover-fade)),
        rgba(var(--takeover-surface), 1) calc(50% - var(--takeover-content-half)),
        rgba(var(--takeover-surface), 1) calc(50% + var(--takeover-content-half)),
        rgba(var(--takeover-surface), 0) calc(50% + var(--takeover-content-half) + var(--takeover-fade)),
        rgba(var(--takeover-surface), 0) 100%
      ),
      linear-gradient(
        rgba(var(--takeover-surface), var(--takeover-veil)),
        rgba(var(--takeover-surface), var(--takeover-veil))
      ),
      image-set(
        url("../../../assets/images/jpg/fury-of-anubis-bg.webp") type("image/webp"),
        url("../../../assets/images/jpg/fury-of-anubis-bg.jpg") type("image/jpeg")
      );

    /* Fixed = still backdrop, sized/positioned against the viewport so the
       centre mask aligns with the centred content column. */
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  /* Root-level fixed backdrop, behind all content. Revealed in the gutters
     of content-width siblings of <main> (the hero blocks). */
  .wp-site-blocks::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  /* Re-cap full-aligned hero / header blocks to the content width so their
     gutters open up and the backdrop frames them. Higher specificity than
     WP's `.is-layout-constrained > .alignfull { max-width: none }`; margin
     auto also cancels the root-padding breakout margins. */
  .wp-site-blocks .wp-block-betupmedia-calendar-hero-slider.alignfull,
  .wp-site-blocks .wp-block-betupmedia-hero-header.alignfull,
  .wp-site-blocks .wp-block-betupmedia-hero-banner.alignfull {
    max-width: var(--wp--style--global--content-size, 1220px);
    margin-left: auto;
    margin-right: auto;
  }

  /* The hero band wrapper (`.header-bg-pattern`) is a full-width white fill
     with decorative side vectors that cover the gutters around the hero
     (which is itself already capped to the content width). Drop its fill at
     takeover widths so the backdrop frames the hero; the hero keeps its own
     background. Below 1540px the white band + vectors are untouched. */
  .wp-site-blocks .header-bg-pattern {
    background-image: none;
    background-color: transparent;
  }

  /* Top-level divider bars under the hero (the quick-links bar on review
     templates) are `layout:constrained` groups, so the element is full-width
     and its bottom border / shadow runs edge-to-edge — now a full-width line
     across the gutter art. Cap them to the content width so the rule stays
     within the column. Covers both the `.border-b` (slots) and inline-border
     (casinos) variants. */
  .wp-site-blocks .wp-block-group:has(> .wp-block-betupmedia-quick-links) {
    max-width: var(--wp--style--global--content-size, 1220px);
    margin-left: auto;
    margin-right: auto;
  }
}

@media print {
  main {
    background-image: none;
  }
  .wp-site-blocks::before {
    display: none;
  }
}