/*
 * Front-page modernisation, staging only.
 *
 * Elementor owns the saved layout; nothing here edits it. This adds the search
 * hero and gives the sections below it a contained, rounded treatment so the
 * page reads as cards on a page rather than full-bleed bands.
 */

.swu-home-modern {
	--swu-home-radius: 28px;
	--swu-home-blue: var(--swu-brand-mediterranean);
	--swu-home-navy: var(--swu-brand-submarine);
	--swu-home-navy-deep: var(--swu-brand-submarine);
	--swu-home-soft: var(--swu-brand-sky);
	--swu-home-frost: var(--swu-brand-frost);
	--swu-home-line: var(--swu-brand-coast);
	--swu-home-muted: var(--swu-brand-mud);
	--swu-home-gutter: clamp(16px, 4vw, 44px);
	/*
	 * 1560 rather than 1320. The hero reads as a video still, and 1320 made it
	 * squarer than the 2.67 panorama inside it. Every band uses this one value,
	 * so widening the hero alone would have left the cards below misaligned.
	 */
	--swu-home-width: 1560px;
	background: var(--swu-brand-white);
}

/* ---------------------------------------------------------- search hero -- */

/* Above the Elementor stage, which carries its own z-index: 200. */
.swu-home-hero {
	position: relative;
	z-index: 300;
	background:
		radial-gradient(110% 90% at 50% -20%, var(--swu-home-soft) 0%, rgba(201, 230, 242, 0) 62%),
		var(--swu-brand-white);
	padding: clamp(44px, 5vw, 72px) var(--swu-home-gutter) clamp(30px, 3.4vw, 46px);
	text-align: center;
}

.swu-home-hero__inner {
	margin-inline: auto;
	max-width: 860px;
}

.swu-home-hero__eyebrow {
	color: var(--swu-home-blue);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	margin: 0 0 12px;
	text-transform: uppercase;
}

.swu-home-modern .swu-home-hero h2 {
	color: var(--swu-home-navy-deep);
	font-size: clamp(26px, 2.8vw, 38px);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
}

.swu-home-hero__lede {
	color: var(--swu-home-muted);
	font-size: clamp(14px, 1.2vw, 16px);
	line-height: 1.6;
	margin: 10px auto 0;
	max-width: 620px;
}

/* The mount the shared search script fills. */
.swu-home-hero__field {
	margin: clamp(24px, 3vw, 34px) auto 0;
	max-width: 760px;
	position: relative;
	z-index: 20;
}

.swu-home-modern .swu-home-hero__field .swu-global-search {
	border: 1.5px solid var(--swu-home-line) !important;
	border-radius: 0 !important;
	box-shadow: 0 2px 6px rgba(0, 32, 60, 0.06), 0 26px 54px -26px rgba(0, 32, 60, 0.42) !important;
	min-height: 70px !important;
}

.swu-home-modern .swu-home-hero__field .swu-global-search:focus-within {
	border-color: var(--swu-home-blue) !important;
	box-shadow: 0 0 0 5px rgba(0, 148, 255, 0.2), 0 26px 54px -26px rgba(0, 32, 60, 0.42) !important;
}

.swu-home-modern .swu-home-hero__field .swu-global-search input {
	font-size: clamp(16px, 1.5vw, 19px) !important;
	padding: 18px 14px 18px 0 !important;
}

.swu-home-modern .swu-home-hero__field .swu-global-search__icon {
	padding: 0 8px 0 22px !important;
}

.swu-home-modern .swu-home-hero__field .swu-global-search__icon svg {
	height: 22px !important;
	width: 22px !important;
}

.swu-home-modern .swu-home-hero__field .swu-global-search button {
	font-size: 14px !important;
	margin: 8px !important;
	min-height: 54px !important;
	padding: 0 28px !important;
}

.swu-home-hero__quick {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 18px;
}

.swu-home-hero__quick span {
	color: var(--swu-home-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.swu-home-modern .swu-home-hero__quick a {
	background: var(--swu-brand-white);
	border: 1px solid var(--swu-home-line);
	border-radius: 0;
	color: var(--swu-home-navy);
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 15px;
	text-decoration: none;
	transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.swu-home-modern .swu-home-hero__quick a:hover {
	background: var(--swu-home-blue);
	border-color: var(--swu-home-blue);
	color: var(--swu-brand-white);
}

/* ------------------------------------------------- contained hero stage -- */

/*
 * The Elementor hero and the bands under it ran edge to edge. Containing them
 * turns each into a card and gives the search above room to read.
 */
.swu-home-modern .elementor-element-c19240f {
	border-radius: 0;
	margin-inline: auto;
	max-width: var(--swu-home-width);
	overflow: hidden;
	width: calc(100% - (2 * var(--swu-home-gutter)));
}

/*
 * The hero photo is a 2012x755 panorama (2.67) and `auto 100%` is the minimum
 * crop that still covers, so the card's own ratio decides how much of the
 * photo survives. The closer the card gets to 2.67, the less is thrown away.
 *
 * Elementor's own `140% auto` resolved to 1848x693 - shorter than the card,
 * which is what left a band of empty section below it. Sizing to cover a taller
 * layer fixed that but scaled the image to ~2494px wide, cropping 47% of a
 * panorama and reading as zoomed.
 *
 * Measured with the current 2.2 card: 1560x700 scales the photo to 1866px wide,
 * ~16% trimmed. It was ~31% while the card was 1320x890. A flatter card keeps
 * more of the group, but 2.6 read as squished, so this is the trade deliberately
 * settled at 2.2.
 */
.swu-home-modern .elementor-element-c19240f .elementor-motion-effects-layer {
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: auto 100% !important;
	height: 100% !important;
	top: 0 !important;
}

/*
 * The stage was pulled up by -57px to tuck beneath a transparent header. With
 * the search hero above it that negative margin lands on the quick links, so
 * it becomes a positive gap instead.
 */
.swu-home-modern .elementor-element-c19240f {
	box-shadow: 0 2px 6px rgba(0, 32, 60, 0.07), 0 40px 80px -40px rgba(0, 32, 60, 0.45);
	margin-top: clamp(16px, 2.2vw, 30px) !important;
	z-index: 1;
}

/*
 * Elementor asks for `--min-height: 80vh`, which is a full-bleed measurement:
 * on a 1113px window it made an 890px card, taller than it was wide once the
 * card stopped running edge to edge. Sizing from the viewport WIDTH instead
 * keeps the card near 2.2-2.4 at every desktop size.
 *
 * Both overrides need a tag on the selector. Elementor's own rule is three
 * classes (`.elementor-5875 .elementor-element.elementor-element-<id>`), so a
 * two-class selector here loses on specificity and the variable never moves.
 */
body.swu-home-modern .elementor-element.elementor-element-c19240f {
	--min-height: clamp(460px, 40vw, 700px);
}

/*
 * The hero content carried `9%` top padding against `2%` bottom - clearance for
 * the transparent header this page used to have. The header is solid now and
 * the card starts below it, so that 9% was 140px of nothing at the top and the
 * single largest reason the hero measured 890px. Symmetric padding is what
 * actually shortens it; the min-height above only sets the floor.
 */
body.swu-home-modern .elementor-element.elementor-element-791d3b9 {
	--padding-bottom: clamp(28px, 4vw, 64px);
	--padding-top: clamp(28px, 4vw, 64px);
}

/* Give the stacked bands below the hero the same contained rhythm. */
.swu-home-modern .elementor-element-e8439de,
.swu-home-modern .elementor-element-ca1684a,
.swu-home-modern .elementor-element-2176bf9f,
.swu-home-modern .elementor-element-d68745d,
.swu-home-modern .elementor-element-903f3a1 {
	border-radius: 0;
	margin-inline: auto;
	max-width: var(--swu-home-width);
	overflow: hidden;
	width: calc(100% - (2 * var(--swu-home-gutter)));
}

.swu-home-modern .elementor-element-3d3fa30 {
	margin-inline: auto;
	max-width: var(--swu-home-width);
	width: calc(100% - (2 * var(--swu-home-gutter)));
}

/* ------------------------------------------------------- modern cards --- */

.swu-home-modern .uc_post_grid_style_one .uc_post_item,
.swu-home-modern .elementor-widget-image-box .elementor-image-box-wrapper,
.swu-home-modern .uc_image_card,
.swu-home-modern .elementor-widget-call-to-action .elementor-cta {
	border-radius: 0 !important;
	overflow: hidden;
}

.swu-home-modern .uc_post_grid_style_one .uc_post_item {
	box-shadow: 0 1px 2px rgba(0, 32, 60, 0.05), 0 18px 40px -26px rgba(0, 32, 60, 0.3);
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.swu-home-modern .uc_post_grid_style_one .uc_post_item:hover {
	box-shadow: 0 2px 4px rgba(0, 32, 60, 0.07), 0 30px 58px -28px rgba(0, 32, 60, 0.38);
	transform: translateY(-3px);
}

.swu-home-modern .uc_more_btn,
.swu-home-modern .elementor-button {
	border-radius: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
	.swu-home-modern .uc_post_grid_style_one .uc_post_item,
	.swu-home-modern .swu-home-hero__quick a {
		transition: none;
	}

	.swu-home-modern .uc_post_grid_style_one .uc_post_item:hover {
		transform: none;
	}
}

.swu-home-modern :is(.swu-home-hero, .elementor-heading-title, .elementor-button, .uc_more_btn) {
	font-family: var(--swu-brand-font);
}

@media (max-width: 620px) {
	.swu-home-modern {
		--swu-home-radius: 18px;
	}
}