/* ==========================================================================
   HOME HERO

   One or more "slides" inside .masm-hero. A slide is .masm-hero-slide and
   holds two things: .hero-media (the collage image or video) and .hero-copy
   (the eyebrow, headline, standfirst and the button row). With two or more
   slides masm-hero.js crossfades them and adds the line "dots".

   The rules below are written against those classes and never against the
   page's nesting, so the hero renders the same whether it is built with
   blocks (where a slide is a Cover block) or with Suv Page Builder (where a
   slide is a column and the builder adds wrappers in between). The legacy
   Cover class names are kept alongside the new ones for that reason.
   ========================================================================== */

/* design tokens (repeated from site.css so the editor, which only loads this
   file, shows the hero exactly as the live site does) */
/* Design tokens (colours, fonts, --masm-max / --masm-gut) live in
   assets/css/tokens.css, which is loaded before this file. */


/* The hero runs to the very top of the page, underneath the fixed header. */
body:has(.masm-hero) { padding-top: 0; }
.masm-front { margin-block-start: 0; }
.masm-front .wp-block-post-content > * { margin-block: 0; }

.masm-hero { position: relative; margin: 0; padding: 0; max-width: none; background: var(--masm-paper); overflow: hidden; }

.masm-hero :is(.masm-hero-slide, .wp-block-cover) {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	min-height: 100vh !important;
	padding: var(--masm-header-h, 154px) 0 0 0;
	margin: 0;
	overflow: hidden;
	background: var(--masm-paper);
	box-sizing: border-box;
}
@supports (min-height: 100svh) {
	.masm-hero :is(.masm-hero-slide, .wp-block-cover) { min-height: 100svh !important; }
}

/* the collage (image or video) fills the whole hero, behind the header too */
.masm-hero .hero-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	padding: 0;
}
.masm-hero :is(.hero-media img, .hero-media video, .wp-block-cover__image-background, .wp-block-cover__video-background) {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 61% 60%;
	transform-origin: 72% 50%;
	animation: masm-hero-settle 1.9s cubic-bezier(.22, .7, .28, 1) both;
	z-index: 0;
}
.masm-hero .hero-media figure { margin: 0; height: 100%; }
@keyframes masm-hero-settle { from { transform: scale(1.05); } to { transform: scale(1); } }

/* the wash. Drawn by the slide itself, so there is no extra element for the
   client to delete by accident. The legacy Cover overlay is kept visible for
   markup that still carries one. */
.masm-hero .masm-hero-slide:not(:has(.wp-block-cover__background))::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--masm-hero-scrim);
}
.masm-hero .wp-block-cover__background { z-index: 1; opacity: 1; }

.masm-hero :is(.hero-copy, .wp-block-cover__inner-container) {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--masm-max);
	margin-inline: auto;
	padding: clamp(26px, 4.5vh, 54px) var(--masm-gut);
	box-sizing: border-box;
	color: var(--masm-ink);
}

/* The four pieces of copy. Addressed by class rather than by position, so a
   client can reorder or remove one without the spacing falling apart. */
.masm-hero :is(.hero-copy, .wp-block-cover__inner-container) :is(.eyebrow, h1, h2, .hero-sub, .hero-actions) {
	max-width: min(640px, 54%);
	/* Only the top margin is cleared here. The bottom margin is the design's
	   rhythm and is set per element below; clearing it here would outrank
	   those rules, because this selector is the more specific of the two. */
	margin-top: 0;
	margin-inline: 0;
	animation: masm-hero-rise .85s cubic-bezier(.2, .7, .3, 1) both;
}
.masm-hero :is(.hero-copy, .wp-block-cover__inner-container) .eyebrow { margin-bottom: 20px; animation-delay: .10s; }
.masm-hero :is(.hero-copy, .wp-block-cover__inner-container) :is(h1, h2) { margin-bottom: 20px; animation-delay: .22s; }
.masm-hero :is(.hero-copy, .wp-block-cover__inner-container) .hero-sub { margin-bottom: 26px; max-width: min(47ch, 54%); animation-delay: .34s; }
.masm-hero :is(.hero-copy, .wp-block-cover__inner-container) .hero-actions { margin-bottom: 0; animation-delay: .46s; }
@keyframes masm-hero-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* eyebrow */
.masm-hero .eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	font-family: var(--masm-stamp);
	font-size: 13px;
	line-height: 1.62;
	letter-spacing: .14em;
	font-weight: 400;
	color: var(--masm-rust-ink);
}
.masm-hero .eyebrow::before {
	content: "";
	flex: 0 0 34px;
	width: 34px;
	height: 1.5px;
	background: var(--masm-rust-ink);
}

/* headline */
.masm-hero h1,
.masm-hero h2 {
	font-family: var(--masm-serif);
	font-size: clamp(34px, 5.4vw, 66px);
	line-height: 1.07;
	letter-spacing: -.022em;
	font-weight: 500;
	color: var(--masm-ink);
	margin-bottom: 20px;
}
.masm-hero h1 em,
.masm-hero h2 em { font-style: italic; font-weight: 400; }

/* sub-headline */
.masm-hero .hero-sub {
	font-family: var(--masm-sans);
	font-size: clamp(17px, 1.45vw, 20.5px);
	line-height: 1.55;
	color: var(--masm-ink-soft);
	max-width: min(47ch, 54%);
	margin-bottom: 26px;
}

/* button + note row */
.masm-hero .hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
}
.masm-hero .hero-actions > * { margin: 0; }
.masm-hero .wp-block-buttons { gap: 14px; margin: 0; display: flex; flex-wrap: wrap; }
.masm-hero :is(.wp-block-button__link, .hero-button) {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--masm-sans);
	font-size: 16px;
	line-height: 1.62;
	font-weight: 400;
	letter-spacing: 0;
	text-decoration: none;
	background: var(--masm-ink);
	color: var(--masm-paper);
	padding: 15px 30px;
	border: 0;
	border-radius: 999px;
	transition: background .25s, transform .25s, box-shadow .25s;
}
.masm-hero :is(.wp-block-button__link, .hero-button)::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--masm-ochre);
	flex: 0 0 7px;
}
.masm-hero :is(.wp-block-button__link, .hero-button):hover,
.masm-hero :is(.wp-block-button__link, .hero-button):focus-visible {
	background: #0A1C36;
	color: var(--masm-paper);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -14px rgba(17, 41, 75, .7);
}
.masm-hero .hero-note {
	font-family: var(--masm-sans);
	font-size: 15px;
	line-height: 1.62;
	color: var(--masm-ink-soft);
}
.masm-hero .hero-note a {
	color: var(--masm-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--masm-rule);
	padding-bottom: 2px;
	transition: color .2s, border-color .2s;
}
.masm-hero .hero-note a:hover { border-bottom-color: var(--masm-rust); color: var(--masm-ink); }

/* ---- slides (only when there is more than one slide in the hero) ---- */
.masm-hero.is-slider { display: grid; }
.masm-hero.is-slider :is(.masm-hero-slide, .wp-block-cover) {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 0s linear 1s;
}
.masm-hero.is-slider :is(.masm-hero-slide, .wp-block-cover).is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease, visibility 0s;
}
.masm-hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 30px;
	z-index: 5;
	display: flex;
	gap: 10px;
	max-width: var(--masm-max);
	margin-inline: auto;
	padding-inline: var(--masm-gut);
	box-sizing: border-box;
	pointer-events: none;
}
.masm-hero-dots button {
	pointer-events: auto;
	width: 28px;
	height: 14px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}
.masm-hero-dots button::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 6px;
	height: 2px;
	background: var(--masm-rule);
	transition: background .3s;
}
.masm-hero-dots button[aria-current="true"]::before { background: var(--masm-rust); }

@media (max-width: 1080px) {
	.masm-hero :is(.hero-copy, .wp-block-cover__inner-container) :is(.eyebrow, h1, h2, .hero-actions) { max-width: min(640px, 62%); }
	.masm-hero :is(.hero-copy, .wp-block-cover__inner-container) .hero-sub { max-width: min(47ch, 62%); }
}

@media (max-width: 860px) {
	.masm-hero :is(.masm-hero-slide, .wp-block-cover) {
		display: block;
		padding-top: var(--masm-header-h, 126px);
	}
	.masm-hero .masm-hero-slide::after,
	.masm-hero .wp-block-cover__background { display: none; }
	.masm-hero .hero-media { position: relative; inset: auto; }
	.masm-hero :is(.hero-media img, .hero-media video, .wp-block-cover__image-background, .wp-block-cover__video-background) {
		position: relative;
		inset: auto;
		display: block;
		height: auto;
		aspect-ratio: 12 / 8;
		animation: none;
		transform: none;
	}
	.masm-hero :is(.hero-copy, .wp-block-cover__inner-container) { padding-block: 38px 46px; }
	.masm-hero :is(.hero-copy, .wp-block-cover__inner-container) :is(.eyebrow, h1, h2, .hero-sub, .hero-actions) { max-width: 100%; }
	.masm-hero h1,
	.masm-hero h2 { font-size: clamp(30px, 7.6vw, 40px); }
	.masm-hero .hero-actions { gap: 16px; }
	.masm-hero .wp-block-buttons,
	.masm-hero .wp-block-button { width: 100%; }
	.masm-hero :is(.wp-block-button__link, .hero-button) { width: 100%; justify-content: center; box-sizing: border-box; }
	.masm-hero-dots { bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.masm-hero *,
	.masm-hero :is(.masm-hero-slide, .wp-block-cover) { animation: none !important; transition: none !important; }
}