/**
 * Featured Videos — the coloured band, one video at a time.
 *
 * The Featured Projects band with a player in the big slot and the preview
 * column moved to the right. Every value a control touches is a custom property
 * set on `.wcfv`, so Elementor's generated CSS is one declaration per control
 * rather than a selector fighting this file for specificity.
 *
 * The layout is a three-cell grid rather than two flex columns: the preview
 * strip has to sit at the top of the narrow column and the arrows at the bottom
 * of it, with the video on show spanning both rows beside them, and a grid says
 * that in four lines. Which side the narrow column lands on is then two
 * `grid-column` values, which is the whole of the difference from the projects
 * band. On a narrow screen the same grid collapses to one column and the arrows
 * move under the slide, which is why they are a sibling of the strip and not a
 * child of it.
 */

/*
 * White, with the Latest Updates palette on top of it.
 *
 * The band lands directly under the Featured Projects one, which is `#2f6136`,
 * and a second dark section there read as the same colour mixed wrong rather
 * than as a different section. White is the clean break — and rather than
 * inventing a set of dark colours for it, every value below is lifted from
 * `wildcare-updates.css`, the band on white two sections down. Two light
 * sections on one page reading identically is the point.
 *
 * The player keeps its own colours. The play button and the box behind it sit
 * on a photograph, not on the band, so they are unaffected by what colour the
 * band is.
 */
.wcfv {
	--wcfv-bg: #fff;
	--wcfv-inner-w: 100%;

	--wcfv-heading-color: #12261a;
	--wcfv-heading-align: center;
	--wcfv-heading-gap: 48px;
	--wcfv-intro-color: #5a6660;
	--wcfv-intro-w: 720px;

	--wcfv-aside-w: 320px;
	--wcfv-aside-gap: 30px;
	--wcfv-aside-label-color: #8a948f;
	--wcfv-thumb-ratio: 56.25%;
	--wcfv-thumb-title-color: #5a6660;

	--wcfv-media-ratio: 56.25%;
	--wcfv-media-radius: 0px;
	--wcfv-media-gap: 24px;

	--wcfv-play-size: 88px;
	--wcfv-play-bg: rgba(0, 0, 0, 0.62);
	--wcfv-play-bg-hover: #cc0000;
	--wcfv-play-color: #fff;

	--wcfv-title-color: #12261a;
	--wcfv-title-color-hover: #2f6136;
	--wcfv-excerpt-color: #5a6660;
	--wcfv-link-color: #2f6136;

	--wcfv-arrow-size: 44px;
	--wcfv-arrow-color: #2f6136;
	--wcfv-arrow-border: #2f6136;
	/* The chevron once the arrow fills — the fill's colour, inverted. */
	--wcfv-arrow-color-hover: #fff;
	--wcfv-arrow-bg-hover: #2f6136;

	position: relative;
	background: var(--wcfv-bg);
	padding: 80px 0;
}

/**
 * Run the colour past the container the widget sits in.
 *
 * The band is meant to be edge to edge while its text stays lined up with the
 * rest of the page. A full-width Elementor section does that on its own; this
 * is the escape hatch for when the widget is inside a boxed one instead.
 * `50vw` is measured from the element's own centre, so it only lands correctly
 * on a centred container — which is the only place this is worth switching on.
 */
.wcfv--bleed::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	background: var(--wcfv-bg);
	z-index: 0;
}

.wcfv__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wcfv-inner-w);
	margin: 0 auto;
}

/* Heading ------------------------------------------------------------------ */

.wcfv__head {
	margin-bottom: var(--wcfv-heading-gap);
	text-align: var(--wcfv-heading-align);
}

.wcfv__heading {
	margin: 0;
	color: var(--wcfv-heading-color);
	font-size: 48px;
	font-weight: 700;
	line-height: 1.2;
}

/**
 * The standfirst is an inline block so that it lines up with the heading.
 *
 * A block with `margin-inline: auto` would stay centred when the heading was
 * moved left or right; an inline-block is placed by the parent's `text-align`,
 * which is the same custom property the heading already answers to, so the two
 * can never disagree.
 */
.wcfv__intro {
	display: inline-block;
	max-width: var(--wcfv-intro-w);
	margin: 16px 0 0;
	color: var(--wcfv-intro-color);
	text-align: inherit;
}

.wcfv__intro p {
	margin: 0 0 0.75em;
}

.wcfv__intro p:last-child {
	margin-bottom: 0;
}

/* Layout ------------------------------------------------------------------- */

.wcfv__grid {
	display: grid;
	grid-template-rows: auto 1fr;
	column-gap: var(--wcfv-aside-gap);
	align-items: start;
}

/**
 * The narrow column on the right, which is the one thing this band does
 * differently from the projects band it is otherwise a copy of.
 *
 * Stated as explicit `grid-column` values rather than as `direction: rtl` or an
 * `order` on the flex children: the arrows and the strip have to land in
 * specific cells of the same two-row grid, and both of those tricks move a
 * whole row at a time.
 */
.wcfv--side-right .wcfv__grid {
	grid-template-columns: minmax(0, 1fr) var(--wcfv-aside-w);
}

.wcfv--side-right .wcfv__aside,
.wcfv--side-right .wcfv__controls {
	grid-column: 2;
}

.wcfv--side-right .wcfv__main {
	grid-column: 1;
}

.wcfv--side-left .wcfv__grid {
	grid-template-columns: var(--wcfv-aside-w) minmax(0, 1fr);
}

.wcfv--side-left .wcfv__aside,
.wcfv--side-left .wcfv__controls {
	grid-column: 1;
}

.wcfv--side-left .wcfv__main {
	grid-column: 2;
}

.wcfv--aside-none .wcfv__grid {
	grid-template-columns: minmax(0, 1fr);
}

.wcfv__aside {
	grid-row: 1;
	min-width: 0;
}

/**
 * The width here is not belt-and-braces — without it the layout runs away.
 *
 * Swiper's own `.swiper` rule sets `margin-left: auto; margin-right: auto`, and
 * auto margins on a grid item switch off `justify-self: stretch`: the item
 * stops taking the track's width and sizes itself to its content instead. Its
 * content is `.swiper-wrapper` at `width: 100%` holding slides at `width: 100%`
 * that are told not to shrink, so each pass of layout multiplied the last one
 * and the container ended up hundreds of thousands of pixels wide.
 *
 * Zeroing the margins is what actually breaks the cycle; the explicit width
 * says the same thing a second way, and survives anyone reinstating them.
 */
.wcfv__main {
	grid-row: 1 / span 2;
	width: 100%;
	min-width: 0;
	margin-left: 0;
	margin-right: 0;
}

/**
 * With no preview column the slide stops spanning both rows.
 *
 * Row 2 is where the arrows live. Left spanning, the slide would sit on top of
 * them in the same cell and they would be unclickable.
 */
.wcfv--aside-none .wcfv__main,
.wcfv--aside-none.wcfv--side-right .wcfv__main,
.wcfv--aside-none.wcfv--side-left .wcfv__main {
	grid-column: 1;
	grid-row: 1;
}

.wcfv__controls {
	grid-row: 2;
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 32px;
}

.wcfv--aside-none .wcfv__controls,
.wcfv--aside-none.wcfv--side-right .wcfv__controls,
.wcfv--aside-none.wcfv--side-left .wcfv__controls {
	grid-column: 1;
	grid-row: 2;
	justify-content: center;
	padding-top: 36px;
}

/* The player --------------------------------------------------------------- */

.wcfv__media {
	position: relative;
	width: 100%;
	padding-top: var(--wcfv-media-ratio);
	margin-bottom: var(--wcfv-media-gap);
	overflow: hidden;
	border-radius: var(--wcfv-media-radius);

	/* Behind a still that has not arrived yet, and behind YouTube's own
	   letterboxing on a 4:3 thumbnail. */
	background: #000;
}

.wcfv__facade,
.wcfv__still,
.wcfv__media iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.wcfv__facade {
	padding: 0;
	margin: 0;
	background: transparent;
	color: var(--wcfv-play-color);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/**
 * `hqdefault` is 480x360 — a 4:3 still of a 16:9 video, with black bars baked
 * into the top and bottom. `cover` crops those away, which is exactly what
 * YouTube's own player does with the same file.
 */
.wcfv__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease, opacity 0.3s ease;
}

.wcfv__facade:hover img,
.wcfv__facade:focus-visible img {
	transform: scale(1.03);
	opacity: 0.9;
}

.wcfv__play {
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wcfv-play-size);
	height: calc(var(--wcfv-play-size) * 0.7);
	transform: translate(-50%, -50%);
	border-radius: calc(var(--wcfv-play-size) * 0.16);
	background: var(--wcfv-play-bg);
	transition: background-color 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.wcfv__facade:hover .wcfv__play,
.wcfv__facade:focus-visible .wcfv__play {
	background: var(--wcfv-play-bg-hover);
	transform: translate(-50%, -50%) scale(1.06);
}

.wcfv__play-icon {
	width: 38%;
	height: 38%;
	/* The triangle's own bounding box is wider than the shape inside it, so it
	   reads as sitting left of centre unless it is nudged back. */
	margin-left: 4%;
}

.wcfv__facade:focus-visible {
	outline: 2px solid var(--wcfv-play-bg-hover);
	outline-offset: -4px;
}

/* The slide ---------------------------------------------------------------- */

.wcfv__body {
	min-width: 0;
}

.wcfv__title {
	margin: 0;
	color: var(--wcfv-title-color);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

.wcfv__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.wcfv__title a:hover,
.wcfv__title a:focus-visible {
	color: var(--wcfv-title-color-hover);
}

.wcfv__excerpt {
	margin: 14px 0 0;
	color: var(--wcfv-excerpt-color);
	font-size: 16px;
	line-height: 1.55;
}

.wcfv__more,
.wcfv__all-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wcfv-link-color);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.wcfv__more {
	margin-top: 18px;
}

.wcfv__more svg,
.wcfv__all-link svg {
	width: 14px;
	height: 14px;
	transition: transform 0.25s ease;
}

.wcfv__more:hover svg,
.wcfv__all-link:hover svg {
	transform: translateX(4px);
}

.wcfv__all {
	margin: 40px 0 0;
	text-align: center;
}

/* The preview strip -------------------------------------------------------- */

.wcfv__aside-label {
	margin: 0 0 12px;
	color: var(--wcfv-aside-label-color);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/**
 * The strip is not a carousel, even though the site this design comes from
 * built it as one.
 *
 * It shows exactly one card and never scrolls, so what it needs is a way to
 * swap that card — and a second Swiper is a bad way to get one. Swiper's
 * stylesheet gives `.swiper-wrapper` and `.swiper-slide` `height: 100%`, which
 * terminates fine in a horizontal carousel because a flex *row* takes its
 * height from the slides. Turn the wrapper into a flex *column*, as
 * `direction: vertical` does, and nothing at the top of the chain is definite:
 * the container's height comes from the wrapper, the wrapper's from the stacked
 * slides, and every slide asks the container for its height back. Each pass of
 * layout multiplies the last by the slide count. See the same note in
 * `wildcare-featured-projects.css`, where it cost a day.
 *
 * So the cards are simply stacked in one grid cell and cross-faded, which is
 * about fifteen lines and cannot get into an argument with itself. The grid row
 * is as tall as the longest title, so the column also holds still instead of
 * resizing under the reader as videos change.
 */
.wcfv__thumbs {
	display: grid;
	width: 100%;
}

/**
 * With no JavaScript, the first video and nothing else.
 *
 * The alternative fallback is all six stacked one under the other in a column
 * meant to hold one.
 */
.wcfv__thumb + .wcfv__thumb {
	display: none;
}

.wcfv__thumbs.is-live .wcfv__thumb {
	display: block;
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}

.wcfv__thumbs.is-live .wcfv__thumb.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.wcfv__thumb-media {
	position: relative;
	width: 100%;
	padding-top: var(--wcfv-thumb-ratio);
	overflow: hidden;
	border-radius: var(--wcfv-media-radius);
	background: rgba(18, 38, 26, 0.07);
}

.wcfv__thumb-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wcfv__thumb-title {
	margin: 16px 0 0;
	color: var(--wcfv-thumb-title-color);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

/* Arrows ------------------------------------------------------------------- */

.wcfv__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wcfv-arrow-size);
	height: var(--wcfv-arrow-size);
	padding: 0;
	border: 2px solid var(--wcfv-arrow-border);
	border-radius: 50%;
	background: transparent;
	color: var(--wcfv-arrow-color);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wcfv__arrow svg {
	width: 42%;
	height: 42%;
}

.wcfv__arrow:hover,
.wcfv__arrow:focus-visible {
	background: var(--wcfv-arrow-bg-hover);
	border-color: var(--wcfv-arrow-bg-hover);
	color: var(--wcfv-arrow-color-hover);
}

.wcfv__counter {
	margin: 0 0 0 6px;
	color: var(--wcfv-thumb-title-color);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.wcfv__counter-sep {
	margin: 0 4px;
	opacity: 0.6;
}

/**
 * Visible to a screen reader, invisible on screen.
 *
 * The play button's only visible content is a triangle, so this is the whole of
 * its name.
 */
.wcfv__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The editor's stand-in when nothing matches ------------------------------- */

.wcfv--empty {
	padding: 40px 24px;
	border: 1px dashed rgba(18, 38, 26, 0.25);
	color: #12261a;
	text-align: center;
}

/* Narrow screens ----------------------------------------------------------- */

/**
 * These rules move things; they do not resize text.
 *
 * Every font size and the play button's size are Elementor controls, and
 * Elementor writes their values at a four-class specificity that no media query
 * in this file can outrank. So the tablet and mobile sizes are set on the
 * controls themselves — see the note on `heading_typography` in the widget —
 * and what is left here is the layout, which Elementor knows nothing about.
 */
@media (max-width: 991px) {
	.wcfv--side-right .wcfv__grid,
	.wcfv--side-left .wcfv__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto;
	}

	/**
	 * The strip goes rather than moving.
	 *
	 * Stacked under the slide it would be a second copy of a video the visitor
	 * is about to see anyway, on the screen with the least room for one. The
	 * arrows stay, so nothing becomes unreachable.
	 */
	.wcfv__aside {
		display: none;
	}

	.wcfv__main,
	.wcfv--side-right .wcfv__main,
	.wcfv--side-left .wcfv__main {
		grid-column: 1;
		grid-row: 1;
	}

	.wcfv__controls,
	.wcfv--side-right .wcfv__controls,
	.wcfv--side-left .wcfv__controls {
		grid-column: 1;
		grid-row: 2;
		justify-content: center;
		padding-top: 28px;
	}
}

/**
 * Anyone who has asked for less motion gets the transitions off.
 *
 * The autoplay timer is already skipped in JavaScript; this covers the change
 * itself, which still happens when they press an arrow.
 */
@media (prefers-reduced-motion: reduce) {
	.wcfv .swiper-wrapper {
		transition-duration: 1ms !important;
	}

	.wcfv__arrow,
	.wcfv__title a,
	.wcfv__media img,
	.wcfv__play,
	.wcfv__more svg,
	.wcfv__all-link svg {
		transition: none;
	}

	.wcfv__facade:hover img,
	.wcfv__facade:focus-visible img {
		transform: none;
	}

	.wcfv__facade:hover .wcfv__play,
	.wcfv__facade:focus-visible .wcfv__play {
		transform: translate(-50%, -50%);
	}

	/* The card still has to swap — it just does it without sliding up. */
	.wcfv__thumbs.is-live .wcfv__thumb {
		transition: none;
		transform: none;
	}
}