/**
 * Homepage hero — Slider Revolution replacement.
 *
 * Remember: html root font-size is 10px on this site, so 1rem = 10px.
 *
 * DESKTOP: matches the original composite closely. The yellow panel's diagonal
 * is measured from the source JPEG — its right edge ran from x=1013 at the top
 * to x=774 at the bottom of a 1600px-wide image, i.e. 63.3% to 48.4%, with a
 * ~24px white stripe alongside (1.5%).
 *
 * MOBILE: the original scaled to a ~138px strip with ~14px headline text. Here
 * the panel stacks above the photo instead, so the words stay readable.
 */

.mk-hero {
	/*
	 * Sampled by Chris from the LIVE site's rendered banner, not from the source
	 * JPEG. That matters: main_new.jpg carries an embedded "iMac" display
	 * profile, so the browser colour-manages it and paints it warmer than its
	 * raw pixel value (#f6c545). CSS is treated as plain sRGB and gets no such
	 * conversion, which is why the panel looked flatter than the image it
	 * replaced despite being numerically the same yellow.
	 *
	 * Taking the value off the screen sidesteps the profile question entirely.
	 *
	 * NOTE: the rest of the site uses #f6c445 (style.css and the other component
	 * files). This is deliberately hero-only for now — see the note to Chris.
	 */
	--h-brand: #fec30d;
	--h-ink: #212121;
	--h-white: #fff;

	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--h-brand);
}

.mk-hero__stage {
	position: relative;
	width: 100%;
	/* 1600 x 563 in the original */
	aspect-ratio: 1600 / 563;
	overflow: hidden;

	/* Type below is sized in cqw — percentages of THIS box, not the viewport.
	 * With vw units the text kept growing with the window after the container
	 * had hit its max-width, so on wide screens the copy outgrew the banner and
	 * the button clipped off the bottom edge. Sized against the banner it can
	 * never overflow, whatever the window does. */
	container-type: inline-size;
}

/* ------------------------------------------------------------- slides */

.mk-hero__slides,
.mk-hero__slide {
	position: absolute;
	inset: 0;
}

.mk-hero__slide {
	opacity: 0;
	transition: opacity .7s ease;
}

.mk-hero__slide.is-active {
	opacity: 1;
}

.mk-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ------------------------------------------------- the yellow panel */

.mk-hero__panel {
	position: absolute;
	inset: 0;
	/* white stripe sits just right of the yellow, as in the original */
	background: var(--h-white);
	clip-path: polygon(0 0, 64.8% 0, 49.9% 100%, 0 100%);
	pointer-events: none;
}

/* the yellow itself, inset by the stripe width (~1.5%) */
.mk-hero__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--h-brand);
	clip-path: polygon(0 0, 63.3% 0, 48.4% 100%, 0 100%);
}

/* Proportions measured directly off the original composite (main_new.jpg,
   1600x563) — the copy was baked into the image, so the pixels are the only
   spec that exists:
 *
 *   left margin of every element   230px  = 14.4% of width
 *   headline line spacing           71px  ->  font-size ~4.25% of width
 *   body line spacing               33px  ->  font-size ~1.5%  of width
 */
.mk-hero__panel-inner {
	position: relative;
	z-index: 2;
	height: 100%;
	width: 48%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 0 0 14.4%;
	box-sizing: border-box;
	pointer-events: auto;
}

/* ---------------------------------------------------------- the copy */

/* All sizes are straight percentages of the banner width, taken from the
   original: headline 4.25%, body 1.5%, gaps to match the measured 71px and
   33px line spacing. */
.mk-hero__heading {
	font-family: 'Lato', sans-serif;
	font-size: 4.25cqw;
	font-weight: 300;
	line-height: 1.04;      /* 71px spacing on a ~68px face */
	color: var(--h-white);
	margin: 0 0 1.5cqw;     /* tightened — frees space top and bottom */
	text-wrap: balance;
}

.mk-hero__leadin {
	font-family: 'Lato', sans-serif;
	font-size: 1.5cqw;
	line-height: 1.375;     /* 33px spacing on a ~24px face */
	color: var(--h-ink);
	margin: 0 0 .5em;
}

.mk-hero__services {
	list-style: none;
	margin: 0 0 1.7cqw;     /* tightened — frees space top and bottom */
	padding: 0;
}

.mk-hero__services li {
	font-family: 'Lato', sans-serif;
	font-size: 1.5cqw;
	line-height: 1.375;
	margin: 0;
}

.mk-hero__services a {
	color: var(--h-ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.mk-hero__services a:hover,
.mk-hero__services a:focus-visible {
	border-bottom-color: var(--h-ink);
}

/* Original button box: 166 x 45px at 1600 wide. */
.mk-hero__cta {
	align-self: flex-start;
	font-family: 'Lato', sans-serif;
	font-size: 1.15cqw;
	letter-spacing: .12em;
	color: var(--h-ink);
	text-decoration: none;
	border: 2px solid var(--h-ink);
	padding: .8em 1.6em;
	transition: background .15s ease, color .15s ease;
}

/* Total underlines links on hover globally, which put a line through the
   button label. Repeated here because the base rule above is not inherited
   by the hover state. */
.mk-hero__cta:hover,
.mk-hero__cta:focus-visible {
	background: var(--h-ink);
	color: var(--h-brand);
	text-decoration: none;
}

/* -------------------------------------------------------------- arrows
 * 50x50, transparent, dark chevron, square — matching the original
 * "uranus" arrows, and hidden under 768px as the original config did.
 */

/* Both arrows white — the left one previously inherited dark, which read as a
   mismatch against the right. */
/*
 * Both arrows must be optically identical and dead-centre. Three things were
 * working against that:
 *
 *  1. <button> carries a default padding, which is NOT symmetric once the
 *     glyph is added, so the two arrows sat at different distances from their
 *     edges even though left: and right: were the same value.
 *  2. The glyph was laid out as normal inline text, so its own side bearings
 *     (which differ between the two characters) shifted it inside the box.
 *  3. line-height alone does not centre a glyph vertically — it centres the
 *     line box, and the character does not fill it evenly.
 *
 * Flex centring on a zero-padding box fixes all three: the glyph is centred on
 * both axes by layout rather than by typography, so the two are mirror images.
 */
.mk-hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 5rem;
	height: 5rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--h-white);
	font-size: 3.2rem;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	transition: opacity .15s ease;
	opacity: .85;
	text-shadow: 0 0 6px rgba(0, 0, 0, .25);   /* keeps it legible over yellow */
}

/* Total styles bare <button> elements globally and paints a brand-yellow
   background on hover/focus/active. The arrows must stay transparent, so all
   three states are pinned explicitly — the base rule alone does not win. */
.mk-hero__arrow:hover,
.mk-hero__arrow:focus,
.mk-hero__arrow:active {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--h-white);
}

.mk-hero__arrow:hover { opacity: 1; }

.mk-hero__arrow:focus-visible {
	outline: 3px solid var(--h-white);
	outline-offset: -3px;
	opacity: 1;
}

.mk-hero__arrow--prev { left: 1.6rem; }
.mk-hero__arrow--next { right: 1.6rem; }

@media (max-width: 767px) {
	.mk-hero__arrow { display: none; }
}

/* -------------------------------------------------- stack on mobile
 * The whole point: the panel is no longer part of the image, so it can
 * stack instead of shrinking into illegibility.
 */

@media (max-width: 767px) {
	.mk-hero__stage {
		aspect-ratio: auto;
		display: flex;
		flex-direction: column-reverse;   /* photo above, panel below */
	}

	.mk-hero__slides {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 16 / 9;
	}

	.mk-hero__slide { position: absolute; inset: 0; }

	.mk-hero__panel {
		position: relative;
		inset: auto;
		clip-path: none;
		background: var(--h-brand);
	}

	.mk-hero__panel::before { display: none; }

	.mk-hero__panel-inner {
		width: 100%;
		padding: 3rem 2.4rem 3.4rem;
	}

	/* Fixed sizes here, not cqw — once stacked the container is the full
	   viewport, so container units would render the copy tiny. */
	.mk-hero__heading { font-size: 3rem; margin-bottom: 1.6rem; }
	.mk-hero__leadin,
	.mk-hero__services li { font-size: 1.6rem; }
	.mk-hero__services { margin-bottom: 2rem; }
	.mk-hero__cta { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-hero__slide { transition: none; }
}