/* Campaign Story Slider — Enfold Avia Layout Builder element
   Scoped to .campaign-slider so it cannot collide with Enfold styles. */

.campaign-slider {
	--cs-accent: #005b67;
	--cs-card: #ffffff;
	--cs-text: #10231B;
	--cs-heading-color: #10231B;
	--cs-intro-color: var(--cs-text);
	--cs-title-color: var(--cs-text);
	--cs-eyebrow-color: var(--cs-accent);
	--cs-image: 60%;
	--cs-textcol: 40%;
	--cs-minh: 520px;
	--cs-section-pad: 72px;
	--cs-heading-size: clamp(30px, 3.6vw, 50px);
	--cs-heading-size-mobile: clamp(30px, 8vw, 44px);
	--cs-title-size: clamp(28px, 3vw, 42px);
	--cs-title-size-mobile: clamp(24px, 6.5vw, 34px);
	--cs-heading-font: "noedisplay-black-webfont-2", "Instrument Serif", Georgia, "Times New Roman", serif;
	width: 100vw;
	max-width: none;
	margin-inline: calc(50% - 50vw);
	padding: var(--cs-section-pad) clamp(24px, 5vw, var(--cs-section-pad));
	box-sizing: border-box;
	background: var(--cs-card);
	font-family: inherit;
	color: var(--cs-text);
}

.campaign-slider--flush {
	margin-top: -50px;
}

.campaign-slider__inner {
	width: min(100%, 1600px);
	margin-inline: auto;
}

.campaign-slider__top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}

.campaign-slider__headings {
	flex: 1 1 auto;
	min-width: 0;
}

/* Keeps the heading and its paragraph inside the width of the photo below, so
   the headline never runs past the image. The arrows stay at the far edge. */
.campaign-slider--heading-image .campaign-slider__headings {
	max-width: var(--cs-image);
}

/* When the photo sits on the right, the heading follows it. */
.campaign-slider--flip.campaign-slider--heading-image .campaign-slider__top {
	flex-direction: row-reverse;
}

.campaign-slider .campaign-slider__heading {
	margin: 0;
	font-family: var(--cs-heading-font, "Instrument Serif", Georgia, "Times New Roman", serif) !important;
	font-weight: 400 !important;
	font-size: var(--cs-heading-size);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--cs-heading-color) !important;
	text-transform: none;
	overflow-wrap: break-word;
}

.campaign-slider .campaign-slider__intro {
	margin-top: 14px;
}

.campaign-slider .campaign-slider__intro,
.campaign-slider .campaign-slider__intro p {
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.65;
	color: var(--cs-intro-color);
	text-wrap: pretty;
}

.campaign-slider .campaign-slider__intro p {
	margin: 0;
}

.campaign-slider .campaign-slider__intro p + p {
	margin-top: 0.85em;
}

.campaign-slider__nav {
	display: flex;
	align-items: center;
	gap: 10px;
}

.campaign-slider__nav--below {
	margin-top: 18px;
	justify-content: flex-end;
}

.campaign-slider .campaign-slider__arrow {
	width: 50px;
	height: 50px;
	min-width: 50px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(16, 35, 27, 0.22);
	border-color: color-mix(in srgb, var(--cs-text) 24%, transparent);
	background: transparent;
	color: var(--cs-text);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	box-shadow: none;
	line-height: 1;
}

.campaign-slider .campaign-slider__arrow:hover,
.campaign-slider .campaign-slider__arrow:focus-visible {
	background: var(--cs-text);
	border-color: var(--cs-text);
	color: #fff;
	outline: none;
}

.campaign-slider__frame {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	overflow: hidden;
	background: var(--cs-card);
	min-height: var(--cs-minh);
	border-radius: 4px;
}

.campaign-slider--flip .campaign-slider__frame {
	flex-direction: row-reverse;
}

/* ---------- Media column ---------- */

.campaign-slider__media {
	position: relative;
	box-sizing: border-box;
	flex: 0 0 var(--cs-image);
	max-width: var(--cs-image);
	min-height: 340px;
	background: var(--cs-card);
	overflow: hidden;
}

.campaign-slider__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease;
	will-change: opacity;
}

.campaign-slider__slide.is-active {
	opacity: 1;
}

.campaign-slider .campaign-slider__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	/* No scale transform: keeps edges crisp during the crossfade. */
	transform: none;
}

.campaign-slider__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(11, 23, 18, 0.32), rgba(11, 23, 18, 0) 55%);
}

.campaign-slider--flip .campaign-slider__scrim {
	background: linear-gradient(270deg, rgba(11, 23, 18, 0.32), rgba(11, 23, 18, 0) 55%);
}

/* ---------- Text column ---------- */

.campaign-slider__card {
	box-sizing: border-box;
	flex: 1 1 var(--cs-textcol);
	min-width: 300px;
	position: relative;
	display: grid;
	padding: clamp(30px, 4vw, 64px);
	background: var(--cs-card);
}

.campaign-slider__panel {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	gap: 18px;
	align-content: start;
	opacity: 0;
	pointer-events: none;
	/* visibility, not just opacity: it keeps buttons on the hidden slides out
	   of the tab order instead of trapping keyboard focus on an invisible one. */
	visibility: hidden;
	transition: opacity 0.45s ease, visibility 0.45s ease;
}

.campaign-slider__panel.is-active {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

#top .campaign-slider .campaign-slider__eyebrow,
.campaign-slider .campaign-slider__eyebrow {
	font-size: 11px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--cs-eyebrow-color) !important;
	font-weight: 600;
}

#top .campaign-slider .campaign-slider__title,
.campaign-slider .campaign-slider__title {
	margin: 0;
	font-family: var(--cs-heading-font, "Instrument Serif", Georgia, "Times New Roman", serif) !important;
	font-weight: 400 !important;
	font-size: var(--cs-title-size);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--cs-title-color) !important;
	text-transform: none;
	overflow-wrap: break-word;
}

#top .campaign-slider .campaign-slider__body,
#top .campaign-slider .campaign-slider__body p,
.campaign-slider .campaign-slider__body,
.campaign-slider .campaign-slider__body p {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.72;
	color: rgba(16, 35, 27, 0.72) !important;
	color: color-mix(in srgb, var(--cs-text) 76%, transparent) !important;
	text-wrap: pretty;
}

.campaign-slider .campaign-slider__body p + p {
	margin-top: 0.9em;
}

#top .campaign-slider .campaign-slider__quote,
.campaign-slider .campaign-slider__quote {
	margin: 6px 0 0;
	font-family: inherit !important;
	font-style: italic;
	font-size: 18px;
	line-height: 1.45;
	color: var(--cs-text) !important;
}

/* ---------- Slide buttons ---------- */

.campaign-slider__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
}

.campaign-slider__buttons--center {
	justify-content: center;
}

.campaign-slider__buttons--right {
	justify-content: flex-end;
}

/* Enfold floats its buttons; inside the card they need to sit in a row. */
#top .campaign-slider__buttons .avia-button-wrap {
	display: inline-flex;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}

#top .campaign-slider__buttons .avia-button {
	margin: 0;
}

/* Markup pasted into the content fields keeps its section's colour. */

#top .campaign-slider__heading :where(span, strong, b, em, i, br, small, sup, sub),
#top .campaign-slider__title :where(span, strong, b, em, i, br, small, sup, sub),
#top .campaign-slider__eyebrow :where(span, strong, b, em, i, br, small, sup, sub),
#top .campaign-slider__intro :where(p, span, strong, b, em, i, li, small, sup, sub),
#top .campaign-slider__body :where(p, span, strong, b, em, i, li, h1, h2, h3, h4, h5, h6, small, sup, sub) {
	color: inherit;
}

#top .campaign-slider__intro a,
#top .campaign-slider__body a {
	color: var(--cs-accent);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.campaign-slider .campaign-slider__intro img,
.campaign-slider .campaign-slider__body img {
	max-width: 100%;
	height: auto;
}

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

.campaign-slider__dots {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
}

.campaign-slider .campaign-slider__dot {
	height: 4px;
	width: 16px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(16, 35, 27, 0.2);
	background: color-mix(in srgb, var(--cs-text) 22%, transparent);
	cursor: pointer;
	transition: width 0.45s ease, background-color 0.45s ease;
	box-shadow: none;
}

.campaign-slider .campaign-slider__dot.is-active {
	width: 42px;
	background: var(--cs-text);
}

/* ---------- Responsive ---------- */

@media only screen and (max-width: 989px) {
	.campaign-slider__media,
	.campaign-slider--flip .campaign-slider__media {
		flex: 1 1 100%;
		max-width: 100%;
		min-height: 320px;
	}

	.campaign-slider__card {
		flex: 1 1 100%;
	}

	.campaign-slider__frame {
		min-height: 0;
	}

	.campaign-slider--heading-image .campaign-slider__headings {
		max-width: 100%;
	}

	.campaign-slider--flip.campaign-slider--heading-image .campaign-slider__top {
		flex-direction: row;
	}
}

@media only screen and (max-width: 767px) {
	.campaign-slider {
		padding: 40px 20px;
	}

	.campaign-slider__media {
		min-height: 240px;
	}

	.campaign-slider__top {
		margin-bottom: 20px;
	}

	.campaign-slider .campaign-slider__heading {
		font-size: var(--cs-heading-size-mobile);
	}
}

@media (prefers-reduced-motion: reduce) {
	.campaign-slider__slide,
	.campaign-slider__panel {
		transition: none;
	}
}

/* ---------- Sizes chosen in the builder ----------

   Enfold sets heading and paragraph sizes with #top-prefixed selectors that
   outrank a plain class rule, so a size picked in the builder needs
   !important to land at all. It is applied ONLY through the --size- classes
   below, which the element adds when an editor has actually filled a size
   field in. Forcing the element's own default the same way would start
   overruling the theme on every page that never asked for a size, and change
   headings nobody touched.

   The -m variant covers the mobile rule: a desktop size given on its own still
   derives a mobile size, and that derived value has to outrank the desktop
   rule inside the media query. */

#top .campaign-slider--size-heading .campaign-slider__heading,
.campaign-slider--size-heading .campaign-slider__heading {
	font-size: var(--cs-heading-size) !important;
}

#top .campaign-slider--size-title .campaign-slider__title,
.campaign-slider--size-title .campaign-slider__title {
	font-size: var(--cs-title-size) !important;
}

@media (max-width: 767px) {
	#top .campaign-slider--size-heading-m .campaign-slider__heading,
	.campaign-slider--size-heading-m .campaign-slider__heading {
		font-size: var(--cs-heading-size-mobile) !important;
	}

	#top .campaign-slider--size-title-m .campaign-slider__title,
	.campaign-slider--size-title-m .campaign-slider__title {
		font-size: var(--cs-title-size-mobile) !important;
	}
}

/* ---------- Card text scales with its own column ----------

   The text column is a share of the frame (--cs-textcol), so its width tracks
   the screen. The type inside it was sized in vw, which tracks the viewport
   instead — two different rates, so the line breaks never stayed put. Widen
   the browser and the column grew while the headline hit its 42px ceiling and
   stopped; narrow it and the headline hit its floor while the column kept
   shrinking. That is why the wrap never looked proportional.

   cqw is 1% of the card's own width, so the characters per line stay roughly
   constant and the headline breaks in the same places at every screen size.
   The vw term inside min() is the governor for the stacked layout below
   990px, where the card becomes full width and cqw alone would run away.

   Wrapped in @supports so a browser without container queries keeps exactly
   the sizes it renders today, and excluded on --size-title so a size set in
   the builder still wins. */

@supports (container-type: inline-size) {

	.campaign-slider__card {
		container-type: inline-size;
	}

	#top .campaign-slider:not(.campaign-slider--size-title) .campaign-slider__title,
	.campaign-slider:not(.campaign-slider--size-title) .campaign-slider__title {
		font-size: calc(clamp(26px, min(10.5cqw, 4vw), 64px) * var(--cs-title-scale, 1));
	}

	#top .campaign-slider .campaign-slider__body,
	#top .campaign-slider .campaign-slider__body p,
	.campaign-slider .campaign-slider__body,
	.campaign-slider .campaign-slider__body p {
		font-size: clamp(14.5px, min(4cqw, 1.3vw), 19px);
	}
}

/* ---------- The whole photo on mobile ----------

   Below 990px the photo sits above the text in a band of fixed height and is
   cropped to fill it. The taller the screen is relative to that band, the more
   comes off: a 1920x1080 photo loses about 12% of its width at 375px, and 26%
   to 42% of its height between 768px and 989px, because the band is far wider
   than it is tall.

   Giving the band the photo's own shape removes the mismatch, so there is
   nothing to crop. object-fit stays contain rather than cover, so a photo that
   is not quite the chosen shape letterboxes against the section background
   instead of losing an edge - the point of the setting is that nothing is cut
   off, including the odd photo that does not match. */

@media only screen and (max-width: 989px) {
	#top .campaign-slider--mobile-image-whole .campaign-slider__media,
	.campaign-slider--mobile-image-whole .campaign-slider__media {
		/* Every slide in here is absolutely positioned, so the box has no
		   in-flow content and no height of its own - it lived entirely on
		   min-height. Two things have to be true before a ratio can replace
		   that, or the box computes to zero and the photo has nowhere to go:
		   the frame is align-items: stretch, which overrides a ratio-derived
		   height on a flex item, so this item opts out of the stretch; and the
		   floor stays non-zero, so a browser that ignores aspect-ratio shows a
		   short band rather than nothing at all. */
		align-self: flex-start;
		min-height: 160px;
		aspect-ratio: var(--cs-mobile-ratio, 16 / 9);
	}

	#top .campaign-slider--mobile-image-whole .campaign-slider__img,
	.campaign-slider--mobile-image-whole .campaign-slider__img {
		object-fit: contain;
	}

	/* The scrim is a left-edge gradient for text sitting over the photo. There
	   is no text over it in this layout, and it would only tint the letterbox. */
	.campaign-slider--mobile-image-whole .campaign-slider__scrim {
		display: none;
	}
}