/*
 * Wilder Labs Studio - LCP hero backgrounds (wls-hero.css)
 * Opt-in: add the class wls-hero-lcp plus one variant class (for example wls-hero-lcp--copyleft-tall-klein) to the hero
 * section (copyleft, copycentre) or to the image column (split). Use it only on the one hero that is the page LCP;
 * every other hero takes its per-breakpoint background image in Divi as usual.
 * Files: the 72 starter WebP heroes, uploaded unchanged to /wp-content/uploads/wls-heroes/ (keep the file names).
 * Bands follow the Divi 5 defaults: desktop and up use the desktop cut, 980px and below the tablet cut,
 * 767px and below the phone cut. Here image-set() serves true 1x/2x; in Divi fields use 2x at tablet and below.
 */
.wls-hero-lcp { background-color: var(--wls-midnight); background-repeat: no-repeat; background-size: cover; }
.wls-hero-lcp[class*="-klein"] { background-color: var(--wls-klein); }
.wls-hero-lcp[class*="--copyleft-"] { background-position: right center; }
.wls-hero-lcp[class*="--copycentre-"], .wls-hero-lcp[class*="--split-"] { background-position: center center; }
.wls-hero-lcp--copyleft-medium-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-klein-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-klein-desktop-2x.webp") 2x); }
.wls-hero-lcp--copyleft-medium-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-midnight-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-midnight-desktop-2x.webp") 2x); }
.wls-hero-lcp--copyleft-tall-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-klein-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-klein-desktop-2x.webp") 2x); }
.wls-hero-lcp--copyleft-tall-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-midnight-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-midnight-desktop-2x.webp") 2x); }
.wls-hero-lcp--copycentre-medium-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-klein-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-klein-desktop-2x.webp") 2x); }
.wls-hero-lcp--copycentre-medium-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-midnight-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-midnight-desktop-2x.webp") 2x); }
.wls-hero-lcp--copycentre-tall-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-klein-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-klein-desktop-2x.webp") 2x); }
.wls-hero-lcp--copycentre-tall-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-midnight-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-midnight-desktop-2x.webp") 2x); }
.wls-hero-lcp--split-medium-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-klein-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-klein-desktop-2x.webp") 2x); }
.wls-hero-lcp--split-medium-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-midnight-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-midnight-desktop-2x.webp") 2x); }
.wls-hero-lcp--split-tall-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-klein-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-klein-desktop-2x.webp") 2x); }
.wls-hero-lcp--split-tall-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-midnight-desktop-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-midnight-desktop-2x.webp") 2x); }
@media (max-width: 980px) {
  .wls-hero-lcp--copyleft-medium-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-klein-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-klein-tablet-2x.webp") 2x); }
  .wls-hero-lcp--copyleft-medium-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-midnight-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-midnight-tablet-2x.webp") 2x); }
  .wls-hero-lcp--copyleft-tall-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-klein-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-klein-tablet-2x.webp") 2x); }
  .wls-hero-lcp--copyleft-tall-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-midnight-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-midnight-tablet-2x.webp") 2x); }
  .wls-hero-lcp--copycentre-medium-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-klein-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-klein-tablet-2x.webp") 2x); }
  .wls-hero-lcp--copycentre-medium-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-midnight-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-midnight-tablet-2x.webp") 2x); }
  .wls-hero-lcp--copycentre-tall-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-klein-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-klein-tablet-2x.webp") 2x); }
  .wls-hero-lcp--copycentre-tall-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-midnight-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-midnight-tablet-2x.webp") 2x); }
  .wls-hero-lcp--split-medium-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-klein-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-klein-tablet-2x.webp") 2x); }
  .wls-hero-lcp--split-medium-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-midnight-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-midnight-tablet-2x.webp") 2x); }
  .wls-hero-lcp--split-tall-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-klein-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-klein-tablet-2x.webp") 2x); }
  .wls-hero-lcp--split-tall-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-midnight-tablet-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-midnight-tablet-2x.webp") 2x); }
}
@media (max-width: 767px) {
  .wls-hero-lcp--copyleft-medium-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-klein-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-klein-phone-2x.webp") 2x); }
  .wls-hero-lcp--copyleft-medium-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-midnight-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-medium-midnight-phone-2x.webp") 2x); }
  .wls-hero-lcp--copyleft-tall-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-klein-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-klein-phone-2x.webp") 2x); }
  .wls-hero-lcp--copyleft-tall-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-midnight-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copyleft-tall-midnight-phone-2x.webp") 2x); }
  .wls-hero-lcp--copycentre-medium-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-klein-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-klein-phone-2x.webp") 2x); }
  .wls-hero-lcp--copycentre-medium-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-midnight-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-medium-midnight-phone-2x.webp") 2x); }
  .wls-hero-lcp--copycentre-tall-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-klein-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-klein-phone-2x.webp") 2x); }
  .wls-hero-lcp--copycentre-tall-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-midnight-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-copycentre-tall-midnight-phone-2x.webp") 2x); }
  .wls-hero-lcp--split-medium-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-klein-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-klein-phone-2x.webp") 2x); }
  .wls-hero-lcp--split-medium-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-midnight-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-medium-midnight-phone-2x.webp") 2x); }
  .wls-hero-lcp--split-tall-klein { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-klein-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-klein-phone-2x.webp") 2x); }
  .wls-hero-lcp--split-tall-midnight { background-image: image-set(url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-midnight-phone-1x.webp") 1x, url("/wp-content/uploads/wls-heroes/wls-hero-split-tall-midnight-phone-2x.webp") 2x); }
}

/* ---------- Coming soon page (.wls-cs) on very wide screens ----------
 * The page itself is styled inline in its WordPress content. Past 1920px wide, its text, logo, footer note
 * and big W kept hugging the far edges of the window. Here everything stays inside a centred 1920px stage
 * and the dark fade behind the text follows it, so a 3440px ultrawide looks like a 1920px screen with
 * more background on both sides. The extra .wls-cs in each selector beats the page's inline styles. */
@media (min-width: 1921px) {
	.wls-cs { --wls-stage: calc((100vw - 1920px) / 2); }
	.wls-cs > .wls-cs__top { margin-inline: var(--wls-stage); }
	.wls-cs > .wls-cs__body { margin-left: var(--wls-stage); }
	.wls-cs > .wls-cs__foot { right: calc(var(--wls-stage) + 72px); }
	.wls-cs > .wls-cs__mark { right: calc(var(--wls-stage) - 115px); }
	.wls-cs.wls-cs::before {
		background:
			linear-gradient(90deg, rgba(7, 3, 26, .94) 0, rgba(7, 3, 26, .94) var(--wls-stage), rgba(7, 3, 26, .78) calc(var(--wls-stage) + 730px), rgba(18, 10, 46, .25) calc(var(--wls-stage) + 1344px), rgba(18, 10, 46, 0) calc(var(--wls-stage) + 1920px)),
			linear-gradient(0deg, rgba(7, 3, 26, .85) 0%, rgba(7, 3, 26, 0) 45%);
	}
}