/**
 * Stories hero — interim.
 *
 * Makes the pre-refresh hero markup look like the design the featured-story
 * block draws, on an install that does not have that block yet. Delete this
 * file and its enqueue once the block ships; it carries its own scrim and wash.
 *
 * Scoped to .wyp-stories-hero, a class the hero migration adds to that one
 * cover. The obvious hook, .ignore-inner-container, is on every story hero --
 * 32 posts -- so styling that would restyle all of them.
 */

/* The wash below is an image sized 2880x1260, and the block sizes the hero to
   match so it maps one to one. A cover block writes a fixed min-height instead,
   which crops the wash and drags its colour through the middle of the picture.
   !important because the cover writes aspect-ratio: unset inline. */
.wyp-stories-hero {
	aspect-ratio: 2880 / 1260 !important;
	min-height: 0 !important;
}

/* Any cover nested inside must not reimpose its own height. */
.wyp-stories-hero .wp-block-cover {
	min-height: 0 !important;
	aspect-ratio: unset !important;
	height: 100%;
}

/* Replaces the overlay the block markup carries rather than layering over it,
   so the two never double up. Same values as featured-story.css. */
.wyp-stories-hero > .wp-block-cover__background {
	background: linear-gradient(90.05deg, rgba(22, 34, 36, 0.7) 0.56%, rgba(22, 34, 36, 0) 70.23%) !important;
}

/* The corner wash: an image with a real alpha channel, so it overlays directly
   rather than blending. */
.wyp-stories-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: image-set(
		url("../images/stories-hero-gradient.avif") type("image/avif"),
		url("../images/stories-hero-gradient.png") type("image/png")
	);
	background-size: cover;
	background-position: center;
	pointer-events: none;
}

/* The headline and button sit above both layers. */
.wyp-stories-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
}

/**
 * A story hero whose mobile field holds the landscape cut.
 *
 * The block ships two videos, a wide one for desktop and a 9:16 one for phones.
 * Where only the wide cut exists the mobile field falls back to it, and the
 * theme sizes the iframe 100% x 100%, so Vimeo letterboxes it -- grey bands
 * above and below on a tall phone hero.
 *
 * Scale it to cover instead, cropping the sides. Scoped to .wyp-landscape-hero,
 * a class added to that one cover: the four stories that do have portrait cuts
 * would be wrecked by this, since it applies landscape maths.
 *
 * Delete once a portrait cut exists for the story; then the fallback is not in
 * play and the theme's own sizing is correct again.
 */
.wyp-landscape-hero .vimeo__player.--BG {
	container-type: size;
	overflow: hidden;
}

.wyp-landscape-hero .vimeo__player.--BG iframe {
	width: max(100cqw, 177.7778cqh) !important;
	height: max(100cqh, 56.25cqw) !important;
	max-width: none !important;

	/* The theme centres the oversized iframe, which on a phone crops to the
	   middle of the frame -- the empty room to her right. She sits left of
	   centre, so move the visible window there.
	
	   The shift is the smaller of 10% of the iframe and half the horizontal
	   overflow, because on a wide viewport the iframe is exactly the container's
	   width and there is nothing to spare: a flat 10% would slide it inwards and
	   leave a gap down the left. Percentages in a transform are a share of the
	   element, so 100% is the iframe and 100cqw the hero. Phones get the full
	   10% and land the window on 40% across; desktop resolves to 0 and stays
	   centred. Vertically centred throughout. */
	top: 50% !important;
	left: 50% !important;
	transform: translate(calc(-50% + min(10%, (100% - 100cqw) / 2)), -50%) !important;
}

/**
 * The eye, on the hero's own button.
 *
 * The story heroes use is-style-video-trigger, which brings the eye with it.
 * This one is is-style-outline, because it navigates rather than playing, so it
 * arrives without one. Same glyph, same inversion on hover -- #f5f5f5 at rest
 * against the photograph, dark once the pill fills on hover, which is what
 * is-style-outline does to its text.
 *
 * The mask is the same data URI global.css uses, so the two icons cannot drift.
 */
.wyp-stories-hero .wp-block-button__link::after {
	content: "";
	display: inline-block;
	flex: 0 0 auto;
	width: 24px;
	height: 17px;
	margin-left: 10px;
	background-color: #f5f5f5;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='17' viewBox='0 0 24 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1420_3122)'%3E%3Cpath d='M24 8.60054C16.9445-1.87644 8.45808-3.68377-3.8147e-06 8.24046C5.07202 16.9101 14.1747 22.4291 24 8.60054ZM21.4286 8.52437C15.4357 17.5541 8.32349 17.5403 2.4085 8.49668C8.43683-0.546909 15.4711-0.533059 21.4286 8.52437Z' fill='%23000'/%3E%3Cpath d='M11.8299 3.67005C14.4651 3.69082 16.6823 5.85131 16.739 8.44113 16.7956 11.1833 14.4934 13.4684 11.6953 13.4407 9.04593 13.413 6.82869 11.2664 6.77202 8.66272 6.70827 5.93441 9.03176 3.64235 11.837 3.67005H11.8299ZM11.7236 10.7678C12.9916 10.7817 14.0329 9.74988 14.0046 8.50345 13.9834 7.32626 12.9775 6.34988 11.7803 6.34296 10.5123 6.32911 9.46388 7.36781 9.48513 8.60732 9.51346 9.78451 10.5123 10.7609 11.7165 10.7678H11.7236Z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1420_3122'%3E%3Crect width='24' height='17' fill='white' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='24' height='17' viewBox='0 0 24 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_1420_3122)'%3E%3Cpath d='M24 8.60054C16.9445-1.87644 8.45808-3.68377-3.8147e-06 8.24046C5.07202 16.9101 14.1747 22.4291 24 8.60054ZM21.4286 8.52437C15.4357 17.5541 8.32349 17.5403 2.4085 8.49668C8.43683-0.546909 15.4711-0.533059 21.4286 8.52437Z' fill='%23000'/%3E%3Cpath d='M11.8299 3.67005C14.4651 3.69082 16.6823 5.85131 16.739 8.44113 16.7956 11.1833 14.4934 13.4684 11.6953 13.4407 9.04593 13.413 6.82869 11.2664 6.77202 8.66272 6.70827 5.93441 9.03176 3.64235 11.837 3.67005H11.8299ZM11.7236 10.7678C12.9916 10.7817 14.0329 9.74988 14.0046 8.50345 13.9834 7.32626 12.9775 6.34988 11.7803 6.34296 10.5123 6.32911 9.46388 7.36781 9.48513 8.60732 9.51346 9.78451 10.5123 10.7609 11.7165 10.7678H11.7236Z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_1420_3122'%3E%3Crect width='24' height='17' fill='white' transform='matrix(-1 0 0 1 24 0)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	transition: background-color 0.3s;
}

.wyp-stories-hero .wp-block-button__link:hover::after,
.wyp-stories-hero .wp-block-button__link:active::after {
	background-color: #162224;
}