/* Code 3 / WashCommand — home page hero video.
   Loaded only when a hero video is switched on, so none of this can affect
   the image layout.

   A NOTE ON ALL THE !important
   ----------------------------
   site.css carries a whole parallel set of hero rules under
   body.c3-managed-page, every one of them !important:

     body.c3-managed-page .c3-home-hero-media{min-height:640px!important}
     @media(max-width:1280px){ …grid-template-columns:…!important;min-height:590px!important }
     @media(max-width:980px){  …grid-template-columns:1fr!important;min-height:430px!important }
     @media(max-width:700px){  …min-height:300px!important }

   The live site has that class on <body>. RC50.24 set its desktop sizes
   politely and was silently overruled, which is why the hero came out 640px
   tall whatever the setting said, and why the portrait column stopped
   narrowing below 1280px — the same trap that caught the services grid in
   RC50.12. These rules match that specificity and answer in kind.

   PHONE SIZING IS DELIBERATELY NOT TOUCHED. The 980px and 700px rules above
   already produce the right thing for a vertical clip on a phone, which is
   the one width where 9:16 is the native shape. Everything below only
   applies above 980px. */

body.c3-has-hero-video {
	/* Standard — the Size setting swaps these two. */
	--c3hv-col: .78fr;
	--c3hv-h: 540px;
	--c3hv-h-md: 520px;
}

body.c3-has-hero-video.c3-hv-size-compact {
	--c3hv-col: .62fr;
	--c3hv-h: 470px;
	--c3hv-h-md: 460px;
}

/* Tall reproduces exactly what RC50.24 shipped, for going back. */
body.c3-has-hero-video.c3-hv-size-tall {
	--c3hv-col: 1fr;
	--c3hv-h: 640px;
	--c3hv-h-md: 590px;
}

/* ---------------------------------------------------------------
 * Desktop height. Nothing here reaches below 981px.
 * --------------------------------------------------------------- */

@media (min-width: 981px) {
	body.c3-has-hero-video .c3-home-hero {
		min-height: var(--c3hv-h) !important;
	}

	body.c3-has-hero-video .c3-home-hero > .c3-home-hero-media {
		min-height: var(--c3hv-h) !important;
		background: #0b1016 !important;
	}
}

@media (min-width: 981px) and (max-width: 1280px) {
	body.c3-has-hero-video .c3-home-hero {
		min-height: var(--c3hv-h-md) !important;
	}
	body.c3-has-hero-video .c3-home-hero > .c3-home-hero-media {
		min-height: var(--c3hv-h-md) !important;
	}
}

/* ---------------------------------------------------------------
 * PORTRAIT — the layout bends to the video instead of cropping it.
 *
 * The media column is normally 1.48fr against 0.92fr of copy, which at
 * desktop widths is a landscape box. A 9:16 clip in there loses most of
 * itself. Giving the column less width makes the box taller than it is
 * wide, so a vertical clip very nearly fits, and the source is no longer
 * being blown up to cover a span three times its own width.
 *
 * Below 981px the site stacks to a single column, which is correct — a
 * vertical video wants the whole width of a phone — so this stops there.
 * --------------------------------------------------------------- */

@media (min-width: 981px) {
	body.c3-hero-video-mode-portrait .c3-home-hero {
		grid-template-columns: minmax(380px, 1.55fr) minmax(280px, var(--c3hv-col)) !important;
	}
}

@media (min-width: 981px) and (max-width: 1280px) {
	body.c3-hero-video-mode-portrait .c3-home-hero {
		grid-template-columns: minmax(340px, 1.5fr) minmax(260px, var(--c3hv-col)) !important;
	}
}

/* ---------------------------------------------------------------
 * The video element itself
 * --------------------------------------------------------------- */

.c3-hero-video {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: inherit;
	overflow: hidden;
	background: #0b1016;
}

.c3-hero-video-el {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

/* WHOLE FRAME — letterboxed over a blurred still. */
.c3-hero-video--contain .c3-hero-video-el {
	object-fit: contain;
}

.c3-hero-video-backdrop {
	position: absolute;
	inset: -6%;
	z-index: 0;
	background-size: cover;
	background-position: center;
	filter: blur(28px) saturate(1.25) brightness(.55);
	transform: scale(1.12);
}

/* ---------------------------------------------------------------
 * Play button — only ever revealed by the script, when autoplay was
 * refused or motion is unwelcome.
 * --------------------------------------------------------------- */

.c3-hero-video-play {
	position: absolute;
	z-index: 4;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 74px;
	height: 74px;
	border: 0;
	border-radius: 50%;
	background: rgba(217, 38, 50, .94);
	color: #fff;
	font-size: 26px;
	line-height: 74px;
	padding: 0 0 0 5px;
	cursor: pointer;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .45);
}

.c3-hero-video-play[hidden] { display: none; }
.c3-hero-video-play:hover { background: #b51f29; }

/* The gradient scrim the image hero uses sits above the video too, so the
   headline edge keeps its contrast. */
body.c3-has-hero-video .c3-home-hero-media:after { z-index: 3; }

.c3-hero-video-fallback { display: none; }

@media (max-width: 760px) {
	.c3-hero-video--desktop-only { display: none; }
	.c3-hero-video--desktop-only + .c3-hero-video-fallback { display: block; height: 100%; }
	.c3-hero-video-fallback img { width: 100%; height: 100%; object-fit: cover; display: block; }
}

@media (prefers-reduced-motion: reduce) {
	.c3-hero-video-el { animation: none !important; }
}

@media print {
	.c3-hero-video { display: none !important; }
	.c3-hero-video-fallback { display: block !important; }
}