/**
 * Homepage slider.
 *
 * Replaces RevSlider's 38 KB settings.css.
 *
 * Structure:
 *   .infinum-hero                    full-width band
 *     .infinum-hero__slide           background image + tint, fixed height
 *       .infinum-hero__container     centred, max-width, matches the page grid
 *         .infinum-hero__grid        two columns, vertically centred
 *
 * Heights come from the admin settings and arrive as custom properties on
 * :root, printed by the renderer. The fallbacks here are the shipped defaults.
 *
 * SPECIFICITY NOTE. OwlCarousel's stylesheet contains
 *     .owl-carousel .owl-item img { display: block; width: 100% }
 * at (0,2,1). Anything targeting an img inside the carousel has to beat that,
 * which is why the image rules carry the extra qualifiers. Do not simplify them
 * without checking owl.carousel.css first.
 *
 * @package Infinum_Core
 */

/*
 * Full-bleed. The homepage template renders this inside its container, but the
 * background is meant to run the whole width of the browser, so the band breaks
 * out of whatever wraps it. The content inside stays in its own container, so
 * it still lines up with the rest of the page.
 *
 * max-width guards against the horizontal scrollbar that 100vw can otherwise
 * introduce when a vertical scrollbar is present.
 */
.infinum-hero {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	overflow: hidden;
}

/*
 * 100vw counts the vertical scrollbar, the document width does not, so the
 * break-out above overflows by the scrollbar width and the browser adds a
 * horizontal scrollbar. Clip it on the body, but only on pages that actually
 * contain a slider.
 *
 * `clip` rather than `hidden`: hidden turns the body into a scroll container,
 * which breaks position: sticky elsewhere on the page. clip does not.
 */
body:has( .infinum-hero ) {
	overflow-x: clip;
}

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

.infinum-hero__slide {
	position: relative;
	width: 100%;
	height: var( --infinum-hero-h, 520px );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	align-items: center;
	overflow: hidden;
	box-sizing: border-box;
}

/* The tint sits between the background and the content. */
.infinum-hero__tint {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	display: block;
	pointer-events: none;
}

/* Whole-slide link, used only when the slide has no button of its own. */
.infinum-hero__slidelink {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	display: block;
	text-indent: -9999px;
}

/* ------------------------------------------------------------ container -- */

/*
 * Content is constrained and centred, so it lines up with the rest of the page
 * while the background runs the full width of the browser.
 */
.infinum-hero__container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1170px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.infinum-hero__grid {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.infinum-hero__col {
	min-width: 0;
}

/* Two columns: share the width, vertically centred against each other. */
.infinum-hero__slide.is-two-col .infinum-hero__col {
	flex: 1 1 50%;
}

/*
 * One column. Text and image stack, one after the other, and the whole block is
 * capped so long lines stay readable.
 */
.infinum-hero__slide.is-one-col .infinum-hero__grid {
	flex-direction: column;
	gap: 20px;
}

.infinum-hero__slide.is-one-col .infinum-hero__col {
	flex: 0 1 auto;
	width: 100%;
	max-width: 860px;
}

/*
 * Optional swap, on whichever axis the slide is using: side to side in two
 * columns, top to bottom in one. The one-column case used to be missing, so the
 * checkbox did nothing on those slides.
 */
.infinum-hero__slide.is-two-col.is-reversed .infinum-hero__grid {
	flex-direction: row-reverse;
}

.infinum-hero__slide.is-one-col.is-reversed .infinum-hero__grid {
	flex-direction: column-reverse;
}

/* ------------------------------------------------------------- alignment -- */

/*
 * Alignment moves the whole block within the container and sets the text
 * alignment with it, so a right-aligned slide reads as one right-aligned unit
 * rather than left-aligned text pushed to the right.
 */
.infinum-hero__slide.align-left .infinum-hero__grid    { justify-content: flex-start; align-items: center; }
.infinum-hero__slide.align-center .infinum-hero__grid  { justify-content: center; }
.infinum-hero__slide.align-right .infinum-hero__grid   { justify-content: flex-end; }

.infinum-hero__slide.align-left    { text-align: left; }
.infinum-hero__slide.align-center  { text-align: center; }
.infinum-hero__slide.align-right   { text-align: right; }

/* In one column the block itself has to move, not just its text. */
.infinum-hero__slide.is-one-col.align-left .infinum-hero__grid   { align-items: flex-start; }
.infinum-hero__slide.is-one-col.align-center .infinum-hero__grid  { align-items: center; }
.infinum-hero__slide.is-one-col.align-right .infinum-hero__grid   { align-items: flex-end; }

/* Images follow the alignment rather than always sitting centred. */
.infinum-hero__slide.align-left .owl-item img.infinum-hero__image,
.infinum-hero__slide.align-left img.infinum-hero__image     { margin-left: 0; margin-right: auto; }
.infinum-hero__slide.align-right .owl-item img.infinum-hero__image,
.infinum-hero__slide.align-right img.infinum-hero__image    { margin-left: auto; margin-right: 0; }

/* ----------------------------------------------------------------- text -- */

.infinum-hero__heading {
	margin: 0 0 16px;
	font-size: 38px;
	line-height: 1.2;
	font-weight: 700;
	color: inherit;
}

.infinum-hero__subheading {
	margin: 0 0 22px;
	font-size: 19px;
	line-height: 1.5;
	color: inherit;
}

.infinum-hero__actions {
	margin: 0;
}

.infinum-hero__button {
	display: inline-block;
	padding: 11px 26px;
	border-radius: 3px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}

/*
 * Text colour is set per slide as an inline `color` on the slide; the heading,
 * subheading and button all inherit it, so one picker drives the whole slide.
 *
 * The button is outlined rather than filled: an outline in currentColor is
 * readable against any tint, where a filled button would need a second colour
 * choice to guarantee contrast with its own label.
 */
.infinum-hero__heading,
.infinum-hero__subheading {
	color: inherit;
}

.infinum-hero__button {
	background: transparent;
	color: inherit;
	border: 2px solid currentColor;
}

/*
 * Hover fills with the brand green and sets the label white.
 *
 * It used to fill with currentColor and invert the label with a filter, which
 * was clever but failed exactly where it mattered: on a slide whose text colour
 * is white the fill went white too, and an inverted white label on white was
 * invisible. A fixed pair is predictable on every tint and every text colour.
 */
.infinum-hero__button:hover,
.infinum-hero__button:focus {
	background: #12a37f;
	border-color: #12a37f;
	color: #fff;
}

.infinum-hero__button:hover .infinum-hero__button-label,
.infinum-hero__button:focus .infinum-hero__button-label {
	color: #fff;
}

.infinum-hero__button.is-static {
	cursor: default;
}

/* ---------------------------------------------------------------- image -- */

/*
 * Beats .owl-carousel .owl-item img (0,2,1). The image is contained rather than
 * stretched, and capped to the slide height so it can never force the slide
 * taller than its siblings.
 */
.infinum-hero .owl-item img.infinum-hero__image,
.infinum-hero img.infinum-hero__image {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: calc( var( --infinum-hero-h, 520px ) - 80px );
	height: auto;
	margin: 0 auto;
	object-fit: contain;
}

/* Desktop and mobile variants: only one shows at a time. */
.infinum-hero .owl-item img.infinum-hero__image.is-mobile,
.infinum-hero img.infinum-hero__image.is-mobile {
	display: none;
}

/* ----------------------------------------------------------- navigation -- */

.infinum-hero .owl-nav {
	margin: 0;
}

/*
 * The OwlCarousel bundled with this theme renders <div class="owl-prev">, not
 * the <button> that Owl 2.3 emits, and ships its own sizing for them. These
 * selectors match either element and carry !important on the box metrics
 * because the theme's owl.theme.default.css sets them too.
 */
.infinum-hero .owl-nav .owl-prev,
.infinum-hero .owl-nav .owl-next {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 5;
	width: 44px !important;
	height: 44px !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .82 );
	color: #12212c;
	font-size: 26px;
	line-height: 40px !important;
	text-align: center;
	border: 0;
	opacity: 1;
	transition: background-color .18s ease;
}

.infinum-hero .owl-nav .owl-prev:hover,
.infinum-hero .owl-nav .owl-next:hover {
	background: #fff;
	color: #000;
}

/*
 * Inset far enough to clear the theme's fixed social rail on the right edge,
 * and kept symmetrical so the pair looks balanced.
 */
.infinum-hero .owl-nav .owl-prev { left: 56px; }
.infinum-hero .owl-nav .owl-next { right: 56px; }

/*
 * Keep the text clear of the arrows.
 *
 * The container is capped at 1170px and centred, so above roughly 1378px there
 * is room for a 44px arrow inset 56px from the edge and the content still
 * starts further in. Below that the container reaches the viewport edge and the
 * arrows end up sitting on top of the heading — which is what happened on
 * laptop widths. Under that threshold the arrows move in to 16px and the
 * container takes enough padding that the text always starts clear of them.
 */
@media ( max-width: 1378px ) {
	.infinum-hero .owl-nav .owl-prev { left: 16px; }
	.infinum-hero .owl-nav .owl-next { right: 16px; }

	.infinum-hero__container {
		padding-left: 72px;
		padding-right: 72px;
	}
}

.infinum-hero .owl-dots {
	position: absolute;
	bottom: 16px;
	left: 0;
	width: 100%;
	text-align: center;
	z-index: 5;
	margin: 0;
}

.infinum-hero .owl-dots .owl-dot span {
	width: 10px;
	height: 10px;
	margin: 0 4px;
	display: inline-block;
	border-radius: 50%;
	background: rgba( 255, 255, 255, .55 );
	box-shadow: 0 0 3px rgba( 0, 0, 0, .35 );
}

.infinum-hero .owl-dots .owl-dot.active span {
	background: #fff;
}

/* Before Owl initialises, show the first slide only rather than a stacked pile. */
.infinum-hero__slide + .infinum-hero__slide {
	display: none;
}

.owl-loaded .infinum-hero__slide + .infinum-hero__slide {
	display: flex;
}

/* ----------------------------------------------------------- responsive -- */

@media ( max-width: 991px ) {
	.infinum-hero__slide {
		height: var( --infinum-hero-h-tablet, 420px );
	}

	.infinum-hero__grid {
		gap: 28px;
	}

	.infinum-hero__heading {
		font-size: 30px;
	}

	.infinum-hero__subheading {
		font-size: 17px;
	}

	.infinum-hero .owl-item img.infinum-hero__image,
	.infinum-hero img.infinum-hero__image {
		max-height: calc( var( --infinum-hero-h-tablet, 420px ) - 70px );
	}
}

/*
 * Below 768px the columns stack, image under text, everything centred. The
 * slide keeps a fixed height so the carousel still does not jump, and the image
 * is capped hard so both fit inside it.
 */
@media ( max-width: 767px ) {
	.infinum-hero__slide {
		height: var( --infinum-hero-h-mobile, 380px );
	}

	.infinum-hero__container {
		padding-left: 48px;
		padding-right: 48px;
	}

	/*
	 * Everything stacks, but a swapped slide still stacks the other way up
	 * rather than being flattened back to the default order.
	 */
	.infinum-hero__grid {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}

	.infinum-hero__slide.is-reversed .infinum-hero__grid {
		flex-direction: column-reverse;
	}

	.infinum-hero__slide.has-image .infinum-hero__col {
		flex: 0 0 auto;
		width: 100%;
	}

	.infinum-hero__heading {
		font-size: 25px;
		margin-bottom: 10px;
	}

	.infinum-hero__subheading {
		font-size: 16px;
		margin-bottom: 14px;
	}

	.infinum-hero__button {
		padding: 9px 20px;
		font-size: 15px;
	}

	.infinum-hero .owl-item img.infinum-hero__image,
	.infinum-hero img.infinum-hero__image {
		max-height: calc( var( --infinum-hero-h-mobile, 380px ) * .42 );
	}

	/* Swap to the mobile artwork where one was supplied. */
	.infinum-hero .owl-item img.infinum-hero__image.is-desktop,
	.infinum-hero img.infinum-hero__image.is-desktop {
		display: none;
	}

	.infinum-hero .owl-item img.infinum-hero__image.is-mobile,
	.infinum-hero img.infinum-hero__image.is-mobile {
		display: block;
	}

	.infinum-hero .owl-nav .owl-prev,
	.infinum-hero .owl-nav .owl-next {
		width: 34px !important;
		height: 34px !important;
		font-size: 20px;
		line-height: 30px !important;
	}

	.infinum-hero .owl-nav .owl-prev { left: 6px; }
	.infinum-hero .owl-nav .owl-next { right: 6px; }
}