/*
 * Home hero slider: one markup, four presentations by root modifier class
 * (--gradient, --card, --split, --classic).
 *
 * The first rules repeat Swiper's layout CSS on purpose, so a static first-post
 * hero survives if Swiper's stylesheet stops loading.
 */

.iges-hero {
	--iges-hero-h: 620px;
	--iges-hero-pad: clamp( 24px, 5vw, 80px );
	--iges-hero-navy: #334375;

	position: relative;
	width: 100%;
	height: var( --iges-hero-h );
	overflow: hidden;

	/* White, not black: some featured images are transparent PNGs. */
	background-color: #ffffff;
}

.iges-hero .swiper {
	position: relative;
	height: 100%;
	overflow: hidden;
}

.iges-hero .swiper-wrapper {
	display: flex;
	height: 100%;
}

.iges-hero-slide {
	position: relative;
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

/* THE IMAGE. Two classes to outrank Elementor's
 * `.elementor img { height: auto }` at (0,1,1), which leaves a band under the
 * split image. */

.iges-hero .iges-hero-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}

/* THE SCRIM. Each presentation darkens only where the words land. */

.iges-hero-slide::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* THE CAPTION -- shared type, positioned per presentation further down. */

.iges-hero-body {
	position: absolute;
	z-index: 2;
	display: block;
	text-decoration: none;
}

.iges-hero-body:hover,
.iges-hero-body:focus {
	text-decoration: none;
}

.iges-hero-body:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 4px;
}

.iges-hero-kicker {
	margin: 0 0 14px;
	font-family: Gordita, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1;
}

.iges-hero-cat + .iges-hero-date::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	margin: 0 10px 3px;
	border-radius: 50%;
	background-color: currentColor;
	opacity: 0.6;
	vertical-align: middle;
}

.iges-hero-title {
	margin: 0;
	padding: 0;
	color: inherit;
	font-family: Gordita, sans-serif;
	font-size: clamp( 24px, 2.5vw, 38px );
	font-weight: 500;
	line-height: 1.22;
	letter-spacing: -0.015em;
	/* Clamped visually; the full title remains the link's accessible name. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.iges-hero-more {
	display: inline-block;
	margin-top: 18px;
	font-family: Gordita, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.06em;
}

.iges-hero-more::after {
	content: " \2192";
	display: inline-block;
	transition: transform 0.25s ease;
}

.iges-hero-body:hover .iges-hero-more::after {
	transform: translateX( 4px );
}

/* GRADIENT (default) */

.iges-hero--gradient .iges-hero-slide::after {
	background: linear-gradient(
		to top,
		rgba( 10, 10, 12, 0.92 ) 0%,
		rgba( 10, 10, 12, 0.72 ) 22%,
		rgba( 10, 10, 12, 0.28 ) 46%,
		rgba( 10, 10, 12, 0 ) 68%
	);
}

.iges-hero--gradient .iges-hero-body {
	right: var( --iges-hero-pad );
	bottom: clamp( 28px, 3.4vw, 52px );
	left: var( --iges-hero-pad );
	max-width: 52ch;
	color: #ffffff;
}

.iges-hero--gradient .iges-hero-kicker {
	color: rgba( 255, 255, 255, 0.82 );
}

.iges-hero--gradient .iges-hero-more {
	color: rgba( 255, 255, 255, 0.9 );
}

/* CARD */

.iges-hero--card .iges-hero-slide::after {
	background: linear-gradient( to right, rgba( 10, 10, 12, 0.34 ) 0%, rgba( 10, 10, 12, 0 ) 58% );
}

.iges-hero--card .iges-hero-body {
	bottom: clamp( 24px, 3.4vw, 52px );
	left: var( --iges-hero-pad );
	width: min( 560px, 64% );
	padding: clamp( 22px, 2.2vw, 32px );
	border-left: 4px solid var( --iges-hero-navy );
	background-color: #ffffff;
	color: #111111;
}

.iges-hero--card .iges-hero-kicker,
.iges-hero--card .iges-hero-more {
	color: var( --iges-hero-navy );
}

.iges-hero--card .iges-hero-title {
	font-size: clamp( 22px, 2vw, 30px );
}

/* SPLIT */

.iges-hero.iges-hero--split .iges-hero-img {
	left: 42%;
	width: 58%;
}

.iges-hero--split .iges-hero-slide::after {
	display: none;
}

.iges-hero--split .iges-hero-body {
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	width: 42%;
	flex-direction: column;
	justify-content: center;
	padding: var( --iges-hero-pad );
	background-color: var( --iges-hero-navy );
	color: #ffffff;
}

.iges-hero--split .iges-hero-kicker {
	color: rgba( 255, 255, 255, 0.78 );
}

.iges-hero--split .iges-hero-title {
	-webkit-line-clamp: 4;
}

.iges-hero.iges-hero--split .iges-hero-bullets,
.iges-hero.iges-hero--split .iges-hero-bullets.swiper-pagination-horizontal {
	right: auto;
	left: var( --iges-hero-pad );
}

/* CLASSIC */

.iges-hero--classic .iges-hero-slide::after {
	background-color: rgba( 0, 0, 0, 0.5 );
}

.iges-hero--classic .iges-hero-body {
	left: 50%;
	bottom: 110px;
	box-sizing: border-box;
	width: 92%;
	transform: translateX( -50% );
	padding: 15px;
	background-color: #0c0c0c;
	color: #ffffff;
	text-align: center;
}

.iges-hero--classic .iges-hero-kicker,
.iges-hero--classic .iges-hero-more {
	display: none;
}

.iges-hero--classic .iges-hero-title {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 36px;
	letter-spacing: 0;
	-webkit-line-clamp: none;
	display: block;
	overflow: visible;
}

/* THE DOTS. Scoped to beat Swiper's .swiper-pagination-horizontal, which pins
 * `left: 0; width: 100%` at (0,2,0). */

.iges-hero .iges-hero-bullets,
.iges-hero .iges-hero-bullets.swiper-pagination-horizontal {
	position: absolute;
	right: var( --iges-hero-pad );
	bottom: clamp( 20px, 2vw, 28px );
	left: auto;
	z-index: 3;
	display: flex;
	width: auto;
	gap: 7px;
}

.iges-hero-bullets .swiper-pagination-bullet {
	position: relative;
	width: 12px;
	height: 12px;
	margin: 0;
	overflow: hidden;
	border-radius: 50%;
	background-color: transparent;
	box-shadow: inset 0 0 0 2px #ffffff;
	opacity: 1;
	transition: background-color 0.3s ease;
}

.iges-hero-bullets .swiper-pagination-bullet:hover {
	background-color: rgba( 255, 255, 255, 0.25 );
}

.iges-hero-bullets .swiper-pagination-bullet::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background-color: #ffffff;
	transition: height 0.3s ease;
}

.iges-hero-bullets .swiper-pagination-bullet-active::after {
	height: 100%;
}

.iges-hero--card .iges-hero-bullets .swiper-pagination-bullet {
	box-shadow: inset 0 0 0 2px #ffffff;
}

/* MOTION. Gated on .is-live, added by hero-slider.js after Swiper initialises,
 * so a page where Swiper fails still shows a captioned first post. Also gated
 * on prefers-reduced-motion; hero-slider.js stops autoplay under it. */

@media ( prefers-reduced-motion: no-preference ) {

	.iges-hero.is-live .iges-hero-img {
		transition: filter 1s ease;
	}

	.iges-hero.is-live .swiper-slide:not( .swiper-slide-active ) .iges-hero-img {
		filter: grayscale( 1 );
	}

	.iges-hero.is-live .iges-hero-body {
		opacity: 0;
		transform: translateY( 28px );
	}

	.iges-hero.is-live .swiper-slide-active .iges-hero-body {
		opacity: 1;
		transform: translateY( 0 );
		transition: opacity 0.7s cubic-bezier( 0.65, 0, 0.35, 1 ) 0.3s,
		            transform 0.7s cubic-bezier( 0.65, 0, 0.35, 1 ) 0.3s;
	}

	/* The classic bar is centred by transform; keep -50% or it jumps left. */
	.iges-hero--classic.is-live .iges-hero-body {
		transform: translate( -50%, 28px );
	}

	.iges-hero--classic.is-live .swiper-slide-active .iges-hero-body {
		transform: translate( -50%, 0 );
	}

	/* The split panel stays put; only its contents move. */
	.iges-hero--split.is-live .iges-hero-body {
		opacity: 1;
		transform: none;
	}

	.iges-hero--split.is-live .iges-hero-body > * {
		opacity: 0;
		transform: translateY( 24px );
	}

	.iges-hero--split.is-live .swiper-slide-active .iges-hero-body > * {
		opacity: 1;
		transform: translateY( 0 );
		transition: opacity 0.6s cubic-bezier( 0.65, 0, 0.35, 1 ) 0.25s,
		            transform 0.6s cubic-bezier( 0.65, 0, 0.35, 1 ) 0.25s;
	}

	.iges-hero.is-live .swiper-slide-active .iges-hero-img {
		animation: iges-hero-kenburns 10s linear forwards;
	}

	@keyframes iges-hero-kenburns {
		from { transform: scale( 1.08 ); }
		to   { transform: scale( 1 ); }
	}
}

/* SIZE. 620px, not 720: the header and nav bar take ~160px of the fold. */

@media ( max-width: 1024px ) {

	.iges-hero { --iges-hero-h: 520px; }

	.iges-hero.iges-hero--split .iges-hero-img { left: 38%; width: 62%; }
	.iges-hero--split .iges-hero-body { width: 38%; }

	.iges-hero--classic .iges-hero-title { font-size: 24px; line-height: 30px; }
	.iges-hero--classic .iges-hero-body { bottom: 90px; }
}

@media ( max-width: 767px ) {

	.iges-hero { --iges-hero-h: 460px; }

	.iges-hero-title { -webkit-line-clamp: 3; }

	/* The split panel goes under the picture. */
	.iges-hero.iges-hero--split .iges-hero-img { top: 0; left: 0; width: 100%; height: 52%; }
	.iges-hero--split .iges-hero-body { top: 52%; width: 100%; justify-content: flex-start; }
	.iges-hero.iges-hero--split .iges-hero-bullets { bottom: auto; top: calc( 52% - 32px ); right: var( --iges-hero-pad ); left: auto; }

	.iges-hero--card .iges-hero-body { right: var( --iges-hero-pad ); width: auto; }

	.iges-hero--classic .iges-hero-body { bottom: 70px; padding: 12px; }
	.iges-hero--classic .iges-hero-title { font-size: 18px; line-height: 24px; }
}