/* ------------------------------------------------------------------ *
 * Homepage hero — .loddon-hero
 *
 * Add the class "loddon-hero" (Advanced > CSS Classes) to the OUTER
 * container of a hero. Works with either structure in use:
 *   outer (bg/slideshow + overlay) > inner container > widgets, or
 *   outer boxed container > .e-con-inner > widgets.
 *
 * Colours come from each subsite's Elementor kit (primary / secondary),
 * so one rule set serves every site. The pathway motif is whatever image
 * is set as the container's Background Overlay in Elementor.
 *
 * Layers (bottom to top): photo / slideshow (0) → brand gradient ::after (1)
 * → pathway ::before (2) → content (3).
 *
 * Specificity: Elementor's per-element background rules reach (0,5,0)
 * (".elementor-N .elementor-element.elementor-element-ID:not(...)").
 * The class is repeated to match that, and this sheet loads after
 * Elementor's post CSS, so it wins on source order without !important.
 * ------------------------------------------------------------------ */

.loddon-hero {
	--loddon-hero-brand: var(--e-global-color-primary, #07272e);
	--loddon-hero-accent: var(--e-global-color-secondary, #ffffff);
	--loddon-hero-panel: var(--loddon-hero-brand);
	--loddon-hero-min-height: clamp(560px, 82vh, 800px);
	--loddon-hero-photo-height: 68vw;
	--loddon-hero-pathway-opacity: 0.16;
	--loddon-hero-content-width: 40rem;
	--loddon-hero-heading-width: 56rem;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.loddon-hero {
		/* Deepen the brand colour slightly so white text clears WCAG AA on every site. */
		--loddon-hero-panel: color-mix(in srgb, var(--loddon-hero-brand) 82%, #000);
	}
}

/* --- Frame -------------------------------------------------------- */

.e-con.loddon-hero.loddon-hero.loddon-hero.loddon-hero {
	--min-height: var(--loddon-hero-min-height);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: var(--loddon-hero-panel);
}

/* Slideshow heroes: show the first slide (set by the plugin as
   --loddon-hero-poster) immediately, before Elementor's script builds the
   slideshow on top. Mobile sizing below overrides size/position. */
.e-con.loddon-hero.loddon-hero.loddon-hero.loddon-hero:has(> .elementor-background-slideshow) {
	background-image: var(--loddon-hero-poster, none);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Brand gradient: solid behind the copy, clear over the subject. */
.e-con.loddon-hero.loddon-hero.loddon-hero.loddon-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background-image:
		linear-gradient(
			90deg,
			var(--loddon-hero-panel) 0%,
			color-mix(in srgb, var(--loddon-hero-panel) 82%, transparent) 28%,
			color-mix(in srgb, var(--loddon-hero-panel) 35%, transparent) 55%,
			transparent 75%
		),
		linear-gradient(0deg, rgba(0, 0, 0, 0.25) 0%, transparent 35%);
}

/* Pathway motif (image comes from the Elementor Background Overlay). */
.e-con.loddon-hero.loddon-hero.loddon-hero.loddon-hero::before {
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: auto 118%;
	background-position: left -6vw center;
	opacity: var(--loddon-hero-pathway-opacity);
	mix-blend-mode: normal;
}

/* The slideshow carries its own copy of the overlay; the frame's ::before replaces it. */
.loddon-hero > .elementor-background-slideshow::before {
	display: none;
}

.loddon-hero > .elementor-background-slideshow {
	z-index: 0;
}

/* Content sits above every decorative layer. */
.loddon-hero > .e-con,
.loddon-hero > .e-con-inner {
	position: relative;
	z-index: 3;
}

/* --- Copy --------------------------------------------------------- */

/* Repeated classes outrank Elementor's per-widget width rules (0,3,0). */
.e-con.loddon-hero.loddon-hero .elementor-widget-text-editor.elementor-widget-text-editor {
	max-width: var(--loddon-hero-content-width);
}

.e-con.loddon-hero.loddon-hero .elementor-widget-heading.elementor-widget-heading {
	max-width: var(--loddon-hero-heading-width);
}

.e-con.loddon-hero.loddon-hero h1.elementor-heading-title {
	font-size: clamp(2.25rem, 1.35rem + 3.4vw, 4.75rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: #fff;
}

.e-con.loddon-hero.loddon-hero .elementor-widget-text-editor {
	font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.3125rem);
	line-height: 1.55;
	color: #fff;
	text-wrap: pretty;
}

/* Eyebrow headings use the light brand tint, which holds contrast on the
   dark panel (the darker accent colour does not). Highlighted words in the
   H1 are set inline in Elementor with var(--e-global-color-secondary). */
.e-con.loddon-hero.loddon-hero .elementor-heading-title:not(h1) {
	color: var(--loddon-hero-accent);
}

.loddon-hero h1.elementor-heading-title,
.loddon-hero .elementor-widget-text-editor {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

/* --- Mobile: photo on top, copy on a brand panel below -------------- */

@media (max-width: 767px) {
	.loddon-hero {
		--loddon-hero-pathway-opacity: 0.12;
	}

	.e-con.loddon-hero.loddon-hero.loddon-hero.loddon-hero,
	.e-con.loddon-hero.loddon-hero.loddon-hero.loddon-hero:not(.elementor-motion-effects-element-type-background) {
		--min-height: 0px;
		min-height: 0;
		padding: var(--loddon-hero-photo-height) 0 0;
		background-size: auto var(--loddon-hero-photo-height);
		background-position-y: 0;
		background-repeat: no-repeat;
		background-color: var(--loddon-hero-panel);
	}

	/* Photo fades into the panel rather than ending on a hard edge. */
	.e-con.loddon-hero.loddon-hero.loddon-hero.loddon-hero::after {
		inset: auto 0 auto 0;
		top: calc(var(--loddon-hero-photo-height) - 96px);
		height: 97px;
		background-image: linear-gradient(180deg, transparent 0%, var(--loddon-hero-panel) 100%);
	}

	/* Pathway lives in the panel, tucked to the right. */
	.e-con.loddon-hero.loddon-hero.loddon-hero.loddon-hero::before {
		top: calc(var(--loddon-hero-photo-height) - 48px);
		bottom: 0;
		left: 0;
		right: 0;
		background-size: auto 100%;
		background-position: right -30vw bottom;
	}

	.loddon-hero > .elementor-background-slideshow {
		bottom: auto;
		height: var(--loddon-hero-photo-height);
	}

	/* Centre the slideshow poster horizontally, as the slides are. */
	.e-con.loddon-hero.loddon-hero.loddon-hero.loddon-hero:not(.elementor-motion-effects-element-type-background):has(> .elementor-background-slideshow) {
		background-position-x: center;
	}

	.e-con.loddon-hero.loddon-hero > .e-con,
	.e-con.loddon-hero.loddon-hero > .e-con-inner {
		padding: 28px 20px 44px;
		min-height: 0;
	}

	.e-con.loddon-hero.loddon-hero > .e-con > .e-con-inner {
		padding: 0;
	}

	.loddon-hero h1.elementor-heading-title,
	.loddon-hero .elementor-widget-text-editor {
		text-shadow: none;
	}

	.e-con.loddon-hero.loddon-hero .elementor-widget-text-editor.elementor-widget-text-editor,
	.e-con.loddon-hero.loddon-hero .elementor-widget-heading.elementor-widget-heading {
		width: 100%;
		max-width: none;
	}

	/* Buttons share the row and wrap cleanly on narrow screens. */
	.loddon-hero .e-con:has(> .elementor-widget-button) {
		flex-wrap: wrap;
		gap: 12px;
		width: 100%;
	}

	.loddon-hero .e-con:has(> .elementor-widget-button) > .elementor-widget-button {
		flex: 1 1 9rem;
	}

	.loddon-hero .elementor-widget-button .elementor-button {
		width: 100%;
		justify-content: center;
		white-space: nowrap;
		padding-inline: 1.25em;
	}
}

/* --- Motion ------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.loddon-hero .elementor-ken-burns,
	.loddon-hero .elementor-ken-burns--active {
		transform: none !important;
		transition: none !important;
		animation: none !important;
	}
}