/**
 * Port Hero Slider — front end.
 *
 * Override any token from your theme, e.g.
 * .polb-hero-wrap { --polb-hero-offset: clamp(20px, 10vw, 320px); }
 *
 * Slide height, header offset and minimum height are set per slider in
 * Slider settings > Slide height.
 *
 * Typography expects "DIN Next LT Pro" (500, 600, 700). If your site doesn't already
 * load it, see assets/fonts/README.txt.
 */

.polb-hero-wrap {
	--polb-hero-font: "DIN Next LT Pro", "DIN Next", "Helvetica Neue", Arial, sans-serif;
	--polb-hero-navy: #0e1a5c;
	--polb-hero-navy-deep: #07204a;
	--polb-hero-teal: #00aebc;
	--polb-hero-accent: #ffa400;
	--polb-hero-accent-hover: #f09000;
	--polb-hero-label-bg: #03adbb;
	--polb-hero-label-gap: 32px;
	--polb-hero-white: #fff;
	--polb-hero-content-width: 800px;
	--polb-hero-gutter: clamp(20px, 4vw, 40px);
	/* Distance from the left edge to the text; grows with screen width. */
	--polb-hero-offset: clamp(var(--polb-hero-gutter), 13vw, 400px);
	/* Logos: the height set in the admin is the size on a 1440px-wide screen. */
	--polb-hero-logo-ref: 1440;
	--polb-hero-logo-min: 1;
	--polb-hero-logo-max: 1.6;
	/* Phones: logos spread across the full width, capped at this multiple of their height. */
	--polb-hero-logo-mobile-max: 1.3;
	--polb-hero-logo-gap-mobile: clamp(12px, 3.5vw, 28px);
	--polb-hero-fade: 700ms;

	font-family: var(--polb-hero-font);
}

.polb-hero {
	position: relative;
	overflow: hidden;
	background-color: var(--polb-hero-navy-deep);
	color: var(--polb-hero-white);
}

.polb-hero *,
.polb-hero *::before,
.polb-hero *::after,
.polb-hero-bar * {
	box-sizing: border-box;
}

/* Slides stack in one grid cell so the carousel takes the tallest slide's height. */
.polb-hero__viewport {
	display: grid;
}

.polb-hero__slide {
	grid-area: 1 / 1;
	position: relative;
	display: flex;
	align-items: center;
	/* Screen height minus the site header, never below the minimum. Content
	   taller than that makes the slide taller, so nothing is clipped. svh keeps
	   mobile browser toolbars from pushing content below the fold. */
	min-height: var(--polb-hero-min-height, 900px);
	min-height: max(var(--polb-hero-min-height, 900px), calc(100vh - var(--polb-hero-header-offset, 0px)));
	min-height: max(var(--polb-hero-min-height, 900px), calc(100svh - var(--polb-hero-header-offset, 0px)));
	opacity: 0;
	visibility: hidden;
	z-index: 0;
	transition: none;
}

/* The new slide fades in on top of the previous one, which stays fully
   visible underneath until the fade is done. Nothing shows through. */
.polb-hero__slide.is-leaving {
	opacity: 1;
	visibility: visible;
	z-index: 0;
}

.polb-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition: opacity var(--polb-hero-fade) ease;
}

/* Background */
.polb-hero__bg {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	margin: 0;
}

.polb-hero .polb-hero__bg-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: var(--polb-hero-pos, center center);
	transform-origin: var(--polb-hero-pos, center center);
	border-radius: 0;
}


/* Content */
.polb-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: 72px var(--polb-hero-gutter) 104px var(--polb-hero-offset);
}

.polb-hero__content {
	max-width: var(--polb-hero-content-width);
}

/* Logos — each logo after the first gets the teal divider. */
/* One row that may extend past the text column; logos shrink rather than wrap. */
.polb-hero .polb-hero__logos {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	width: max-content;
	max-width: calc(100vw - var(--polb-hero-offset) - var(--polb-hero-gutter));
	margin: 0 0 clamp(24px, 2vw, 40px);
	padding: 0;
	list-style: none;
}

.polb-hero .polb-hero__logo {
	--polb-logo-n: var(--polb-logo-h, var(--polb-hero-logo-height, 110));
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.polb-hero .polb-hero__logo + .polb-hero__logo {
	margin-left: clamp(24px, 2.2vw, 56px);
	padding-left: clamp(24px, 2.2vw, 56px);
	border-left: 1px solid var(--polb-hero-teal);
}

.polb-hero .polb-hero__logo::before,
.polb-hero .polb-hero__logo::marker {
	content: none;
}

.polb-hero .polb-hero__logo a {
	display: block;
	line-height: 0;
}

.polb-hero .polb-hero__logo-img {
	display: block;
	width: auto;
	/* Admin height up to 1440px wide, then grows with the screen to 1.6×. */
	height: clamp(
		calc(var(--polb-logo-n) * var(--polb-hero-logo-min) * 1px),
		calc(var(--polb-logo-n) * 100vw / var(--polb-hero-logo-ref)),
		calc(var(--polb-logo-n) * var(--polb-hero-logo-max) * 1px)
	);
	max-width: 100%;
	object-fit: contain;
}

.polb-hero .polb-hero__label {
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0 0 var(--polb-hero-label-gap);
	padding: 4px 10px;
	border-radius: 6px;
	background-color: var(--polb-hero-label-bg);
	color: var(--polb-hero-white);
	font-family: var(--polb-hero-font);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 21px;
	letter-spacing: 0;
	text-transform: none;
}

.polb-hero .polb-hero__title {
	margin: 0;
	color: inherit;
	font-family: var(--polb-hero-font);
	font-size: 48px;
	font-style: normal;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: 0;
	text-transform: none;
}

.polb-hero .polb-hero__text {
	margin-top: 16px;
	font-family: var(--polb-hero-font);
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 30px;
}

.polb-hero .polb-hero__text p {
	margin: 0 0 0.75em;
	color: inherit;
}

.polb-hero .polb-hero__text p:last-child {
	margin-bottom: 0;
}

.polb-hero .polb-hero__text a {
	color: inherit;
	text-decoration: underline;
}

.polb-hero .polb-hero__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: 34px;
	margin-top: 32px;
	padding: 2px 22px;
	border: 0;
	border-radius: 999px;
	background-color: var(--polb-hero-accent);
	color: var(--polb-hero-white);
	font-family: var(--polb-hero-font);
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: 30px;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 150ms ease;
}

/*
 * Button text vs. arrow alignment.
 * DIN Next LT Pro sits high in its line box, so centered text looks raised next
 * to the arrow. Browsers that support text-box trim the text to its capital
 * letters, which centers exactly. Others get a small downward nudge.
 */
.polb-hero-wrap .polb-hero__btn-label {
	display: block;
	transform: translateY(var(--polb-hero-btn-nudge, 0.11em));
}

@supports (text-box: trim-both cap alphabetic) {
	.polb-hero-wrap .polb-hero__btn-label {
		transform: none;
		text-box: trim-both cap alphabetic;
	}
}

.polb-hero-wrap .polb-hero__button-icon,
.polb-hero-bar__link svg {
	flex: none;
	display: block;
}

.polb-hero .polb-hero__button:hover {
	background-color: var(--polb-hero-accent-hover);
	color: var(--polb-hero-white);
}

/* Controls — shared button reset so theme button styles don't leak in. */
.polb-hero .polb-hero__dot,
.polb-hero .polb-hero__arrow,
.polb-hero .polb-hero__pause {
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
	color: inherit;
	font: inherit;
	line-height: 0;
	cursor: pointer;
}

.polb-hero__dots {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: 34px;
	display: flex;
	align-items: center;
	transform: translateX(-50%);
}

/* 24px hit area, 8px visual dot. */
.polb-hero .polb-hero__dot {
	position: relative;
	width: 16px;
	height: 24px;
}

.polb-hero .polb-hero__dot::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	border-radius: 50%;
	background-color: var(--polb-hero-white);
	transition: background-color 150ms ease, transform 150ms ease;
}

.polb-hero .polb-hero__dot:hover::before {
	transform: scale(1.25);
}

.polb-hero .polb-hero__dot.is-active::before {
	background-color: var(--polb-hero-accent);
}

.polb-hero .polb-hero__pause {
	position: absolute;
	right: 100%;
	top: 50%;
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin: -12px 10px 0 0;
	border-radius: 50%;
	color: var(--polb-hero-white);
	opacity: 0.75;
	transition: opacity 150ms ease;
}

.polb-hero .polb-hero__pause:hover {
	opacity: 1;
}

.polb-hero__icon-play,
.polb-hero.is-paused .polb-hero__icon-pause {
	display: none;
}

.polb-hero.is-paused .polb-hero__icon-play {
	display: block;
}

.polb-hero__arrows {
	position: absolute;
	z-index: 2;
	right: clamp(16px, 3.33vw, 48px);
	bottom: 30px;
	display: flex;
}

.polb-hero .polb-hero__arrow {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	transition: background-color 150ms ease, color 150ms ease;
}

.polb-hero .polb-hero__arrow--prev {
	background-color: var(--polb-hero-navy);
	color: var(--polb-hero-white);
}

.polb-hero .polb-hero__arrow--next {
	background-color: var(--polb-hero-white);
	color: var(--polb-hero-teal);
}

.polb-hero .polb-hero__arrow:hover {
	background-color: var(--polb-hero-teal);
	color: var(--polb-hero-white);
}

.polb-hero a:focus-visible,
.polb-hero button:focus-visible {
	outline: 2px solid var(--polb-hero-accent);
	outline-offset: 3px;
}

/* News bar */
.polb-hero-bar {
	font-family: var(--polb-hero-font);
	background-color: var(--polb-hero-teal);
	color: var(--polb-hero-white);
}

.polb-hero-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	min-height: 60px;
	padding: 12px var(--polb-hero-offset);
}

.polb-hero-bar .polb-hero-bar__text {
	margin: 0;
	color: inherit;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.polb-hero-bar .polb-hero-bar__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: 30px;
	margin-left: auto;
	padding: 7px 30px;
	border: 1.5px solid currentColor;
	border-radius: 999px;
	color: var(--polb-hero-white);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color 150ms ease, color 150ms ease;
}

.polb-hero-bar .polb-hero-bar__link:hover {
	background-color: var(--polb-hero-white);
	color: var(--polb-hero-teal);
	border-color: var(--polb-hero-white);
}

.polb-hero-bar .polb-hero-bar__link:focus-visible {
	outline: 2px solid var(--polb-hero-white);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * Animations (Slider settings > Animation)
 *
 * Keyframes restart whenever a slide becomes active. Each effect's resting
 * transform equals its final frame, so nothing jumps when a slide leaves.
 * ------------------------------------------------------------------------ */

@keyframes polb-hero-zoom-out {
	from { transform: scale(1.15); }
	to   { transform: scale(1); }
}

@keyframes polb-hero-zoom-in {
	from { transform: scale(1); }
	to   { transform: scale(1.15); }
}

@keyframes polb-hero-pan-left {
	from { transform: scale(1.12) translateX(3%); }
	to   { transform: scale(1.12) translateX(-3%); }
}

@keyframes polb-hero-pan-right {
	from { transform: scale(1.12) translateX(-3%); }
	to   { transform: scale(1.12) translateX(3%); }
}

@keyframes polb-hero-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: none; }
}

@keyframes polb-hero-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.polb-hero[class*="polb-hero--bg-"] .polb-hero__bg-img {
	will-change: transform;
}

.polb-hero--bg-zoom-in .polb-hero__bg-img   { transform: scale(1.15); }

/* Pans move sideways, so they zoom from the horizontal center (keeping edges
   covered) while still honoring the focal point's top/bottom. */
.polb-hero.polb-hero--bg-pan-left .polb-hero__bg-img,
.polb-hero.polb-hero--bg-pan-right .polb-hero__bg-img {
	transform-origin: center var(--polb-hero-pos-y, center);
}
.polb-hero--bg-pan-left .polb-hero__bg-img  { transform: scale(1.12) translateX(-3%); }
.polb-hero--bg-pan-right .polb-hero__bg-img { transform: scale(1.12) translateX(3%); }

.polb-hero--bg-zoom-out :is(.is-active, .is-leaving) .polb-hero__bg-img {
	animation: polb-hero-zoom-out var(--polb-hero-anim-duration, 8s) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.polb-hero--bg-zoom-in :is(.is-active, .is-leaving) .polb-hero__bg-img {
	animation: polb-hero-zoom-in var(--polb-hero-anim-duration, 8s) cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

.polb-hero--bg-pan-left :is(.is-active, .is-leaving) .polb-hero__bg-img {
	animation: polb-hero-pan-left var(--polb-hero-anim-duration, 8s) linear both;
}

.polb-hero--bg-pan-right :is(.is-active, .is-leaving) .polb-hero__bg-img {
	animation: polb-hero-pan-right var(--polb-hero-anim-duration, 8s) linear both;
}

/* Content: logos, title, description and button come in one after another. */
.polb-hero--text-fade-up .is-active .polb-hero__content > * {
	animation: polb-hero-fade-up 800ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.polb-hero--text-fade-in .is-active .polb-hero__content > * {
	animation: polb-hero-fade-in 900ms ease both;
}

.polb-hero .is-active .polb-hero__content > :nth-child(1) { animation-delay: 150ms; }
.polb-hero .is-active .polb-hero__content > :nth-child(2) { animation-delay: 270ms; }
.polb-hero .is-active .polb-hero__content > :nth-child(3) { animation-delay: 390ms; }
.polb-hero .is-active .polb-hero__content > :nth-child(4) { animation-delay: 510ms; }
.polb-hero .is-active .polb-hero__content > :nth-child(5) { animation-delay: 630ms; }

/* Tablet */
@media (max-width: 1024px) {
	.polb-hero .polb-hero__title {
		font-size: 40px;
		line-height: 42px;
	}

	.polb-hero .polb-hero__text {
		font-size: 20px;
		line-height: 27px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	.polb-hero-wrap {
		--polb-hero-offset: var(--polb-hero-gutter);
	}

	.polb-hero__slide {
		align-items: flex-end;
	}

	/* Per-slide "Content position on mobile". */
	.polb-hero__slide--m-middle {
		align-items: center;
	}

	.polb-hero__slide--m-top {
		align-items: flex-start;
	}

	.polb-hero__slide {
		min-height: var(--polb-hero-min-height-mobile, 600px);
		min-height: max(var(--polb-hero-min-height-mobile, 600px), calc(100vh - var(--polb-hero-header-offset-mobile, 0px)));
		min-height: max(var(--polb-hero-min-height-mobile, 600px), calc(100svh - var(--polb-hero-header-offset-mobile, 0px)));
	}

	.polb-hero .polb-hero__bg-img {
		object-position: var(--polb-hero-pos-mobile, center center);
		transform-origin: var(--polb-hero-pos-mobile, center center);
	}

	.polb-hero.polb-hero--bg-pan-left .polb-hero__bg-img,
	.polb-hero.polb-hero--bg-pan-right .polb-hero__bg-img {
		transform-origin: center var(--polb-hero-pos-y-mobile, center);
	}


	.polb-hero__inner {
		padding-top: 48px;
		padding-bottom: 88px;
	}

	.polb-hero .polb-hero__logos {
		margin-bottom: 24px;
	}

	/* Logos spread across the full width of the screen. Each logo's share of the
	   row follows its shape (width ÷ height) and its height setting, so they all
	   end up the same visual height. A cap stops one or two logos getting huge. */
	.polb-hero .polb-hero__logos {
		width: 100%;
		max-width: 100%;
	}

	.polb-hero .polb-hero__logo {
		--polb-logo-share: calc(var(--polb-logo-ratio, 2) * var(--polb-logo-n));
		flex-grow: var(--polb-logo-share);
		flex-shrink: 1;
		flex-basis: 0%;
		max-width: calc(var(--polb-logo-share) * var(--polb-hero-logo-mobile-max) * 1px);
	}

	.polb-hero .polb-hero__logo + .polb-hero__logo {
		margin-left: var(--polb-hero-logo-gap-mobile);
		padding-left: var(--polb-hero-logo-gap-mobile);
		max-width: calc(var(--polb-logo-share) * var(--polb-hero-logo-mobile-max) * 1px + var(--polb-hero-logo-gap-mobile) + 1px);
	}

	.polb-hero .polb-hero__logo a {
		width: 100%;
	}

	.polb-hero .polb-hero__logo-img {
		width: 100%;
		height: auto;
		aspect-ratio: var(--polb-logo-ratio, 2);
	}

	.polb-hero .polb-hero__text {
		font-size: 18px;
		line-height: 24px;
	}

	.polb-hero .polb-hero__title {
		font-size: 32px;
		line-height: 34px;
	}

	.polb-hero .polb-hero__button {
		margin-top: 24px;
	}

	.polb-hero__dots {
		left: var(--polb-hero-gutter);
		bottom: 28px;
		transform: none;
		margin-left: -4px;
	}

	/* Pause sits inline on mobile so it doesn't hang off the left edge. */
	.polb-hero .polb-hero__pause {
		position: static;
		margin: 0 6px 0 0;
		order: -1;
	}

	.polb-hero__arrows {
		right: var(--polb-hero-gutter);
		bottom: 24px;
	}

	.polb-hero-bar__inner {
		padding-top: 16px;
		padding-bottom: 16px;
	}

	.polb-hero-bar .polb-hero-bar__link {
		margin-left: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.polb-hero-wrap {
		--polb-hero-fade: 1ms;
	}

	.polb-hero .polb-hero__button,
	.polb-hero .polb-hero__dot::before,
	.polb-hero .polb-hero__arrow {
		transition: none;
	}

	.polb-hero .polb-hero__bg-img,
	.polb-hero .polb-hero__content > * {
		animation: none !important;
	}
}