/**
 * Latest Updates — a row of cards that scrolls sideways.
 *
 * Every value a control touches is a custom property set on `.wcu`, so
 * Elementor's generated CSS is one declaration per control rather than a
 * selector fighting this file for specificity.
 *
 * How many cards fit and how far apart they sit are Swiper's business, not
 * this file's: they change per breakpoint and Swiper writes the widths inline.
 * What is left here is the card itself and where the controls go.
 */

.wcu {
	--wcu-bg: transparent;

	--wcu-heading-color: #12261a;
	--wcu-head-align: center;
	--wcu-head-gap: 48px;
	--wcu-intro-color: #5a6660;
	--wcu-intro-w: 700px;

	--wcu-media-ratio: 85%;
	--wcu-media-radius: 0px;
	--wcu-media-gap: 22px;

	--wcu-title-color: #12261a;
	--wcu-title-color-hover: #2f6136;
	--wcu-meta-color: #8a948f;
	--wcu-excerpt-color: #5a6660;
	--wcu-link-color: #2f6136;
	--wcu-more-color: #2f6136;
	--wcu-title-lines: 2;

	--wcu-arrow-size: 40px;
	--wcu-arrow-color: #2f6136;
	--wcu-arrow-border: #2f6136;
	--wcu-arrow-color-hover: #fff;
	--wcu-arrow-bg-hover: #2f6136;

	--wcu-dot-color: #c9d2cc;
	--wcu-dot-color-active: #2f6136;

	background: var(--wcu-bg);
	padding: 80px 0;
}

.wcu__inner {
	width: 100%;
}

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

.wcu__head {
	margin-bottom: var(--wcu-head-gap);
	text-align: var(--wcu-head-align);
}

.wcu__heading {
	margin: 0;
	color: var(--wcu-heading-color);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.2;
}

/* Inline-block so the parent's `text-align` places it — see the note in
   wildcare-featured-projects.css, which does the same thing for the same
   reason. */
.wcu__intro {
	display: inline-block;
	max-width: var(--wcu-intro-w);
	margin: 18px 0 0;
	color: var(--wcu-intro-color);
	font-size: 16px;
	line-height: 1.6;
	text-align: inherit;
}

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

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

/* The stage ---------------------------------------------------------------- */

.wcu__stage {
	position: relative;
}

/**
 * Swiper is told to clip, not the browser.
 *
 * `overflow: hidden` here would also clip a card's focus ring and any shadow
 * the editor puts on it. Swiper's own container already hides what spills out
 * sideways, so this only has to let the arrows sit outside it.
 */
.wcu__carousel {
	width: 100%;
}

/**
 * Swiper stretches every slide in a row to the height of the tallest, and
 * `flex: 1 1 auto` on the body then pushes each card's own background down to
 * meet it — so a row of cards has one baseline however uneven the headlines
 * are. That only matters once the card has a surface, which is why the layout
 * lives here rather than in the card block below.
 */
.wcu__card {
	display: flex;
	flex-direction: column;
	height: auto;
	background: var(--wcu-card-bg, transparent);
}

.wcu__media {
	position: relative;
	display: block;
	width: 100%;
	padding-top: var(--wcu-media-ratio);
	margin-bottom: var(--wcu-media-gap);
	overflow: hidden;
	border-radius: var(--wcu-media-radius);
	background: rgba(0, 0, 0, 0.06);
}

.wcu__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.wcu--zoom .wcu__card:hover .wcu__media img,
.wcu--zoom .wcu__card:focus-within .wcu__media img {
	transform: scale(1.06);
}

/**
 * A flex column, not just a block, so `.wcu__more` can be pinned to the
 * bottom with `margin-top: auto` below — the same trick the Press Features
 * listing uses to keep its "Continue reading" line on one baseline however
 * short a card's headline or excerpt is.
 */
.wcu__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

/* The card surface --------------------------------------------------------- */

/**
 * `wcu--card` turns the reference site's bare image-and-caption into a card:
 * a panel the photograph sits flush inside, with the text padded within the
 * same surface. Dropping the class gives the flat layout back — the reference
 * has no card, and on a page that is already busy the flat version is quieter.
 *
 * These four values are defined here rather than up in the `.wcu` block on
 * purpose. A card has a background and a border; a flat caption has neither,
 * and the same tokens would have to be blanked out again to get there.
 * Undefined in flat mode, `var(…, transparent)` in the rules below reads as
 * "nothing", which is exactly right. Elementor's own generated CSS carries a
 * higher specificity than a single class, so a control still wins over both.
 */
.wcu--card {
	--wcu-card-bg: #ffffff;
	--wcu-card-radius: 10px;
	--wcu-card-border: #e6eae7;
	--wcu-card-border-w: 1px;
}

/**
 * `overflow: hidden` clips the photograph to the card's rounded corners.
 *
 * Simpler than giving the media its own radius and keeping the two in step:
 * with a border in play the inner curve is tighter than the outer one, so the
 * two radii have to be told about each other. Clipping happens at the padding
 * box, which *is* the border's inner curve, so they cannot drift apart.
 *
 * The usual objection to clipping — that it cuts the focus ring off whatever
 * is inside — does not apply here. The link around the photograph is
 * `tabindex="-1"` and `aria-hidden`, so it is never focused, and the headline
 * that is focusable sits behind the body's padding.
 */
.wcu--card .wcu__card {
	border: var(--wcu-card-border-w) solid var(--wcu-card-border);
	border-radius: var(--wcu-card-radius);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.wcu--card .wcu__media {
	margin-bottom: 0;
	border-radius: 0;
}

.wcu--card .wcu__body {
	padding: 24px 22px 26px;
}

/**
 * The lift is on the card, not the image.
 *
 * `focus-within` is there so the same thing happens for a keyboard: the
 * headline inside is a link, and a card that only responds to a mouse leaves
 * the person tabbing through it with no idea which one they are on.
 */
.wcu--lift .wcu__card:hover,
.wcu--lift .wcu__card:focus-within {
	transform: translateY(var(--wcu-card-lift, -4px));
}

.wcu__meta {
	margin: 0 0 8px;
	color: var(--wcu-meta-color);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wcu__title {
	margin: 0;
	color: var(--wcu-title-color);
	font-size: 18px;
	font-weight: 500;
	line-height: 1.35;
}

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

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

/**
 * Clamp long headlines so a row of cards keeps one baseline.
 *
 * Only applied when the editor asks for it: cutting a headline mid-sentence
 * costs the visitor information, and it is only worth it once the titles are
 * uneven enough to make the row look broken.
 */
.wcu--clamp .wcu__title {
	display: -webkit-box;
	-webkit-line-clamp: var(--wcu-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.wcu__excerpt {
	margin: 12px 0 0;
	color: var(--wcu-excerpt-color);
	line-height: 1.6;
}

/**
 * The bottom-pinning lives on this invisible sibling, not on `.wcu__more`
 * itself. A `flex: 1 1 auto` item with nothing in it absorbs whatever room
 * is left in the column, which is what lines every card's "Continue
 * reading" up on one baseline — but putting `margin-top: auto` on
 * `.wcu__more` directly did the same job only when something separated it
 * from the title, and collapsed to zero gap (the divider line landing flush
 * against the title) on the excerpt-off default, where it followed the
 * title with nothing in between.
 */
.wcu__spacer {
	flex: 1 1 auto;
}

/**
 * A span, not a second anchor — the headline above already links the card,
 * so a second link here would only give a screen reader two routes to the
 * same post, the second one named "Continue reading".
 *
 * The margin and the padding are both fixed (not `auto`) so the gap around
 * the divider line never collapses; `.wcu__spacer` above is what does the
 * bottom-pinning instead.
 */
.wcu__more {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--wcu-card-border, #e6eae7);
	color: var(--wcu-more-color);
	font-size: 14px;
	font-weight: 600;
}

.wcu__more svg {
	width: 14px;
	height: 14px;
	transition: transform 0.25s ease;
}

.wcu__card:hover .wcu__more svg,
.wcu__card:focus-within .wcu__more svg {
	transform: translate(2px, -2px);
}

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

.wcu__arrows {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wcu--arrows-top-right .wcu__arrows,
.wcu--arrows-top-left .wcu__arrows {
	margin-bottom: 24px;
}

.wcu--arrows-top-right .wcu__arrows {
	justify-content: flex-end;
}

.wcu--arrows-top-left .wcu__arrows {
	justify-content: flex-start;
}

.wcu--arrows-bottom .wcu__arrows {
	justify-content: center;
	margin-top: 32px;
}

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

.wcu__arrow svg {
	width: 40%;
	height: 40%;
}

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

/**
 * At the end of a row that does not wrap, the arrow is disabled rather than
 * hidden — a control that vanishes moves the one next to it under the cursor.
 */
.wcu__arrow.is-disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.wcu__arrow.is-locked {
	display: none;
}

/**
 * Either side of the row.
 *
 * The buttons are centred on the stage rather than on the photographs, because
 * how tall a photograph is depends on how wide a card is, and how wide a card
 * is depends on the breakpoint Swiper picked — none of which CSS can read. In
 * practice a card is mostly photograph, so the stage's midpoint lands inside
 * it; the `--wcu-arrows-offset` property is there for nudging when it does not.
 */
.wcu--arrows-sides .wcu__arrows {
	position: static;
}

.wcu--arrows-sides .wcu__arrow {
	position: absolute;
	top: calc(50% + var(--wcu-arrows-offset, 0px));
	transform: translateY(-50%);
	z-index: 2;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.wcu--arrows-sides .wcu__arrow--prev {
	left: 0;
	margin-left: calc(var(--wcu-arrow-size) / -2);
}

.wcu--arrows-sides .wcu__arrow--next {
	right: 0;
	margin-right: calc(var(--wcu-arrow-size) / -2);
}

/* Dots --------------------------------------------------------------------- */

.wcu__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin-top: 28px;
}

.wcu__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wcu-dot-color);
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.wcu__dot.is-active {
	background: var(--wcu-dot-color-active);
	transform: scale(1.35);
}

/* "View all" --------------------------------------------------------------- */

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

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

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

.wcu__all-link:hover svg {
	transform: translateX(4px);
}

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

.wcu--empty {
	padding: 40px 24px;
	border: 1px dashed #c3c4c7;
	background: #f6f7f7;
	color: #50575e;
	text-align: center;
}

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

@media (max-width: 991px) {
	.wcu__heading {
		font-size: 32px;
	}
}

@media (max-width: 767px) {
	.wcu__heading {
		font-size: 27px;
	}

	/**
	 * On a phone the row is dragged, not clicked.
	 *
	 * Side arrows would sit over the cards themselves at this width, and the
	 * peeking next card already says the row scrolls.
	 */
	.wcu--arrows-sides .wcu__arrows {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wcu .swiper-wrapper {
		transition-duration: 1ms !important;
	}

	.wcu__media img,
	.wcu__arrow,
	.wcu__dot,
	.wcu__title a,
	.wcu__all-link svg,
	.wcu__more svg,
	.wcu--card .wcu__card {
		transition: none;
	}

	/**
	 * The shadow still deepens and the title still changes colour, so a card
	 * under the cursor is still marked — it just stops moving.
	 */
	.wcu--zoom .wcu__card:hover .wcu__media img,
	.wcu--zoom .wcu__card:focus-within .wcu__media img,
	.wcu--lift .wcu__card:hover,
	.wcu--lift .wcu__card:focus-within,
	.wcu__card:hover .wcu__more svg,
	.wcu__card:focus-within .wcu__more svg {
		transform: none;
	}
}