/* Above-the-fold artwork for the multi-product operator review header
   (page-templates/review-multi.php).

   Same three-layer construction as the homepage hero in hero.css: the section
   gradient underneath, the photograph over it, a darkening scrim on top, and
   the content above all three on z-index 1. The photograph is the theme's own
   licensed stadium shot, images/hero-bg.webp — the same file the homepage
   uses, so the two pages read as one site and no new asset has to be shipped,
   licensed or version-controlled. The crop is different from the homepage's,
   which is what stops it looking like the same picture twice.

   THE MASK IS DOING THE REAL WORK. A photograph laid across a shallow band
   sits underneath the logo, the operator name and the fact cards, and no
   amount of scrim fixes that without also killing the picture. So the image
   layer carries its own mask-image gradient: on desktop it fades out to the
   left, clearing the column the text lives in; on mobile it fades out towards
   the bottom, so the stacked fact cards sit on flat colour. The scrim then
   only has to handle contrast, not composition.

   MOBILE vs DESKTOP. Mobile stacks the fact strip, so the header is tall and
   narrow: the crop is pulled to 70% 12% (the floodlight side of the shot) and
   the mask fades downwards. From 768px the header is a shallow full-bleed
   strip, the crop moves to the top of the frame, and the mask fades sideways.

   The previous version of this file drew the artwork as an inline SVG rather
   than using a photograph. If that is ever wanted back, it is intact in commit
   03f3551 — the layering and the breakpoints here are unchanged from it. */
.review-header { position: relative; overflow: hidden; }
.review-header::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url("../images/hero-bg.webp"); background-repeat: no-repeat; background-position: 70% 12%; background-size: cover; opacity: 0.58; -webkit-mask-image: linear-gradient(180deg, #000 38%, rgba(0, 0, 0, 0.25) 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 38%, rgba(0, 0, 0, 0.25) 72%, transparent 100%); }
.review-header::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(13, 27, 42, 0.2) 0%, rgba(13, 27, 42, 0.55) 40%, rgba(13, 27, 42, 0.9) 76%, #0d1b2a 100%); }
.review-header > .container { position: relative; z-index: 1; }
@media (min-width: 768px) {
  .review-header::before { background-position: center 10%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.15) 22%, rgba(0, 0, 0, 0.75) 55%, #000 78%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.15) 22%, rgba(0, 0, 0, 0.75) 55%, #000 78%); }
  .review-header::after { background: linear-gradient(180deg, rgba(13, 27, 42, 0) 38%, rgba(13, 27, 42, 0.5) 100%), linear-gradient(90deg, #0d1b2a 0%, rgba(13, 27, 42, 0.85) 26%, rgba(13, 27, 42, 0.45) 56%, rgba(13, 27, 42, 0.15) 100%); }
}