/* ==========================================================================
   Widget — Ornate Hero (Photo + Breadcrumb)
   Figma node 64:236. A 1920 x 820 photograph darkening toward the foot, with
   breadcrumb, eyebrow and a 68px bold uppercase title in the lower left.

   Beyond the comp: several photographs crossfading with a slow zoom (driven
   by assets/js/widgets/ornate-hero.js, which only moves classes), a pause
   button, and a logo that can stand in for the eyebrow and headline.
   ========================================================================== */

/*
 * The height follows the comp's proportion - 820 at 1920 - so the photograph
 * keeps roughly its designed crop as the window narrows, with a floor so a
 * phone still gets a proper masthead. The shared "Minimum height" control
 * overrides it.
 *
 * The copy hangs from the bottom rather than floating in the middle.
 */
.o-section--ornate-hero {
	justify-content: flex-end;
	min-height: clamp(28rem, 42.7vw, 51.25rem); /* 448 -> 820 */
}

/* --------------------------------------------------------------------------
   Photographs
   Stacked in one layer between the section and its container, so they reach
   the edges while the copy stays on the 1440 grid.
   -------------------------------------------------------------------------- */
.o-ornate-hero__media {
	/* Fallbacks only - the widget writes all three inline. */
	--o-ornate-hold: 6s;
	--o-ornate-fade: 1.5s;
	--o-ornate-zoom: 1.1;

	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.o-ornate-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
}

/*
 * The crossfade. The incoming photograph fades in on top while the outgoing
 * one stays fully opaque underneath, then drops out once it is covered. Fading
 * both at once would let the navy show through halfway and dim the whole hero.
 *
 * Only the active state carries a transition, so arriving fades and leaving
 * is instant - by then the leaving photograph is hidden anyway.
 */
.o-ornate-hero__slide.is-active {
	z-index: 2;
	opacity: 1;
	transition: opacity var(--o-ornate-fade) ease-in-out;
}

.o-ornate-hero__slide.is-leaving {
	z-index: 1;
	opacity: 1;
}

.o-ornate-hero__img {
	--o-ornate-from: 1;
	--o-ornate-to: var(--o-ornate-zoom);

	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--o-ornate-focal, center center);
	/* The zoom moves toward the same point the crop keeps in frame. */
	transform-origin: var(--o-ornate-focal, center center);
	transform: scale(var(--o-ornate-from));
}

/* --------------------------------------------------------------------------
   Slow zoom
   An animation rather than a transition, so the pause button can freeze it
   mid-move with animation-play-state. It spans the photograph's whole time on
   screen - fading in, holding, and fading out under the next one - so it is
   still moving at the moment it is covered rather than parking early.
   -------------------------------------------------------------------------- */
.o-ornate-hero__media--zoom-out .o-ornate-hero__img,
.o-ornate-hero__media--zoom-alternate .o-ornate-hero__slide:nth-child(even) .o-ornate-hero__img {
	--o-ornate-from: var(--o-ornate-zoom);
	--o-ornate-to: 1;
}

.o-ornate-hero__media--zoom-none .o-ornate-hero__img {
	transform: none;
}

.o-ornate-hero__slide.is-zooming .o-ornate-hero__img {
	animation: o-ornate-zoom calc(var(--o-ornate-hold) + var(--o-ornate-fade) * 2) linear both;
	will-change: transform;
}

/* One photograph has nothing to hand over to, so it drifts in and back out. */
.o-ornate-hero__media--single .o-ornate-hero__slide.is-zooming .o-ornate-hero__img {
	animation-duration: calc(var(--o-ornate-hold) * 3);
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

.o-ornate-hero__media.is-paused .o-ornate-hero__img {
	animation-play-state: paused;
}

@keyframes o-ornate-zoom {
	from {
		transform: scale(var(--o-ornate-from));
	}

	to {
		transform: scale(var(--o-ornate-to));
	}
}

/*
 * The script never starts the zoom under reduced motion; this covers a visitor
 * who switches the setting on while the page is open.
 */
@media (prefers-reduced-motion: reduce) {
	.o-ornate-hero__slide.is-zooming .o-ornate-hero__img {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Scrim
   The comp's gradient, stop for stop. Its first stop is transparent white;
   transparent black is used instead, because fading from white greys the
   midtones slightly on the way down, and the comp's intent is clearly clear
   to dark.
   -------------------------------------------------------------------------- */
.o-ornate-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(
		to bottom,
		rgb(0 0 0 / 0) 0%,
		rgb(0 0 0 / 0.41) 50.3%,
		rgb(0 0 0 / 0.56) 100%
	);
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   Pause button
   Top right, on the container's edge, where it can never collide with copy
   hanging from the bottom - whichever way the copy is aligned. The same
   circular treatment as the site's other controls over a photograph.
   -------------------------------------------------------------------------- */
.o-ornate-hero__toggle {
	position: absolute;
	top: var(--o-space-lg);
	right: max(var(--o-gutter), calc((100% - var(--o-container)) / 2));
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: var(--o-radius-pill);
	background-color: var(--o-scrim);
	color: var(--o-white);
	box-shadow: var(--o-shadow-float);
	transition: background-color var(--o-transition), border-color var(--o-transition);
}

.o-ornate-hero__toggle:hover,
.o-ornate-hero__toggle:focus-visible {
	border-color: var(--o-orange);
	background-color: var(--o-orange);
	color: var(--o-white);
}

.o-ornate-hero__toggle svg {
	width: 18px;
	height: 18px;
}

.o-ornate-hero__toggle-play,
.o-ornate-hero__toggle[aria-pressed="true"] .o-ornate-hero__toggle-pause {
	display: none;
}

.o-ornate-hero__toggle[aria-pressed="true"] .o-ornate-hero__toggle-play {
	display: block;
}

/* --------------------------------------------------------------------------
   Copy
   -------------------------------------------------------------------------- */
.o-ornate-hero {
	position: relative;
	z-index: 1;
}

.o-section--ornate-hero .o-section-heading {
	max-width: 60rem;
	margin-inline: 0;
	margin-bottom: 0;
}

.o-ornate-hero--align-center .o-section-heading {
	margin-inline: auto;
}

.o-ornate-hero--align-right .o-section-heading {
	margin-inline: auto 0;
}

/* The site's full-size label voice: 18px Inter Medium, wide tracking, orange. */
.o-section--ornate-hero .o-eyebrow {
	font-size: var(--o-label-size);
	letter-spacing: var(--o-label-tracking);
}

/*
 * Bold - the heaviest of the comps' heading weights. The Simple Hero names a
 * page quietly in medium; this one is a destination announcing itself.
 */
.o-section--ornate-hero .o-section-heading__title {
	margin-top: var(--o-space-md); /* 20, per the comp */
	font-size: clamp(2.25rem, 1rem + 4vw, 4.25rem); /* 36 -> 68, per the comp */
	font-weight: var(--o-fw-bold);
	line-height: 1.03; /* 70 on 68 */
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}

.o-section--ornate-hero .o-section-heading__title:first-child {
	margin-top: 0;
}

/* Not in the comp. Kept full-strength for the same reason as the title: it is on a photograph. */
.o-section--ornate-hero .o-section-heading__intro {
	max-width: 40rem;
	margin-top: var(--o-space-md);
	color: var(--o-text);
	text-wrap: pretty;
}

.o-ornate-hero--align-center .o-section-heading__intro {
	margin-inline: auto;
}

.o-ornate-hero--align-right .o-section-heading__intro {
	margin-inline: auto 0;
}

/* --------------------------------------------------------------------------
   Logo in place of the eyebrow and headline
   Still inside the heading tag, so the heading's own margins and type are
   neutralised and the image sets the size. Width is a ceiling: the logo
   shrinks with the screen but never grows past what the editor chose.

   The block spans the whole copy column, and the logo is an inline image
   placed by text-align - the alignment control's own output, per breakpoint.
   Sizing and margining the heading's measure instead left the logo centred
   inside a box that could itself sit off to one side. Four classes, because
   Elementor writes the alignment control's rules with three
   (.elementor-{page} .elementor-element-{id} .o-section-heading).
   -------------------------------------------------------------------------- */
.o-section--ornate-hero .o-ornate-hero .o-section-heading.o-ornate-hero__lockup {
	max-width: none;
	margin-inline: 0;
}

.o-ornate-hero__logo {
	margin: 0;
	font-size: inherit;
	line-height: 0;
}

.o-ornate-hero__logo-img {
	display: inline-block;
	vertical-align: top;
	width: var(--o-lockup-width, 560px);
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   14px Montserrat at 80% white, 20 above the eyebrow, per the comp. The
   slashes are drawn here with empty alt text (the second content value), so
   screen readers announce the steps and not the punctuation; browsers that
   do not understand the alt syntax fall back to the first declaration.
   -------------------------------------------------------------------------- */
.o-ornate-hero__crumbs {
	margin-bottom: var(--o-space-md);
	color: var(--o-text);
	font-family: var(--o-font-body);
	font-size: var(--o-fs-small);
	letter-spacing: 0.036em; /* 0.5px at 14px */
	line-height: 1.4;
	opacity: 0.8;
}

.o-ornate-hero__crumb-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-ornate-hero--align-center .o-ornate-hero__crumb-list {
	justify-content: center;
}

.o-ornate-hero--align-right .o-ornate-hero__crumb-list {
	justify-content: flex-end;
}

.o-ornate-hero__crumb {
	display: inline-flex;
	gap: 0.5em;
	margin: 0;
}

.o-ornate-hero__crumb + .o-ornate-hero__crumb::before {
	content: "/";
	content: "/" / "";
}

.o-ornate-hero__crumb a {
	text-decoration: none;
}

.o-ornate-hero__crumb a:hover,
.o-ornate-hero__crumb a:focus-visible {
	text-decoration: underline;
}