/**
 * Oyolloo Elements — hero.
 *
 * Figma: node 471:1060.
 *   section  1920x896 black, 80px vertical padding
 *   grid     788 + 64px gap + 788, vertically centred
 *   eyebrow  Caption uppercase, brand yellow, 16px above the title
 *   title    80/1.1 Roboto Condensed SemiBold
 *   stack    24px between title block, plate form and badge row
 *   badges   20px icon + 6px gap + Caption, 24px apart
 *   pill     382x44 review pill on an 8% white wash, 24px under the badges
 *   media    788x736
 *
 * @package Oyolloo\Elements
 * @since   1.0.0
 */

.oe-hero__section {
	--oe-section-y: var(--oe-space-4xl);
	--oe-hero-title: 70px;

	overflow: hidden;
}

.oe-hero__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 64px;
}

.oe-hero__col {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--oe-space-md);
	min-width: 0;
	/* The design offsets the copy stack 44px below the optical centre so the
	   headline sits level with the plate in the photograph. The photograph
	   scales with the column, so the offset has to as well — held flat, it
	   overshot the plate by more and more as the grid narrowed. The stacked
	   layout below 767 drops it to 0, where there is nothing to line up with. */
	padding-block-start: clamp(16px, 2.43vw - 2.7px, 44px);
}

.oe-hero__head {
	display: flex;
	flex-direction: column;
	gap: var(--oe-space-sm);
}

.oe-hero__eyebrow {
	margin: 0;
	color: var(--oe-color-brand);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.oe-hero__title {
	margin: 0;
	font-family: var(--oe-font-title);
	font-size: var(--oe-hero-title);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	text-wrap: balance;
}

/* -- Trust badges -------------------------------------------------------- */

.oe-hero__badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--oe-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.oe-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-transform: uppercase;
	white-space: nowrap;
}

.oe-hero__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--oe-color-brand);
}

.oe-hero__badge-icon svg,
.oe-hero__badge-icon i {
	width: 100%;
	height: 100%;
	font-size: 16px;
}

/* The bundled tick is stroked and ships its own `fill="none"`; a blanket fill
   here would beat that attribute and flood it into a solid disc. Elementor's
   font-icon SVGs still need it, so it is scoped to them. */
.oe-hero__badge-icon .e-font-icon-svg {
	fill: currentColor;
}

/* -- Media --------------------------------------------------------------- */

.oe-hero__media {
	position: relative;
	margin: 0;
	border-radius: var(--oe-radius-xl);
	overflow: hidden;
	aspect-ratio: 788 / 736;
}

/*
 * The photograph ships pre-composed at the frame's own 788x736 - ring, beam
 * and badge already in it - so it wants a plain 1:1 fit. These are only the
 * fallbacks for a photo swapped in behind it; the widget's Image focus and
 * Image zoom controls override them.
 */
.oe-hero__media {
	--oe-focus-x: 50%;
	--oe-focus-y: 50%;
	--oe-focus-zoom: 100;
}

/* The mobile swap wraps the image, and only the image may size the frame. */
.oe-hero__media picture {
	display: contents;
}

.oe-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--oe-focus-x) var(--oe-focus-y);
	transform: scale(calc(var(--oe-focus-zoom) / 100));
	transform-origin: var(--oe-focus-x) var(--oe-focus-y);
}

/* -- Responsive ---------------------------------------------------------- */

@media (max-width: 1440px) {
	.oe-hero__section {
		--oe-hero-title: 64px;
	}

	.oe-hero__grid {
		gap: var(--oe-space-xl);
	}
}

@media (max-width: 1024px) {
	.oe-hero__section {
		--oe-hero-title: 48px;
	}

	.oe-hero__grid {
		grid-template-columns: 1fr;
	}

	.oe-hero__media {
		aspect-ratio: 16 / 9;
		order: -1;
	}
}

/*
 * Mobile (Figma 472:13947): the photograph is dropped entirely, the copy
 * centres, the plate stacks its field over its button, and the badges wrap
 * onto two centred rows.
 */
@media (max-width: 767px) {
	.oe-hero__section {
		--oe-hero-title: 48px;
		--oe-section-y: var(--oe-space-3xl);

		/* The band has to own a stacking context, or the photograph below sits
		   behind the section's own black fill instead of on top of it. */
		isolation: isolate;
	}

	.oe-hero__grid {
		grid-template-columns: 1fr;
		gap: var(--oe-space-md);
	}

	/* The photograph stops being a panel and becomes the band's own ground at
	   20%, with the magnifier callout dropped (Figma 472:13947). */
	.oe-hero__media {
		position: absolute;
		inset: 0;
		z-index: -1;
		/* `inset` owns the box here, so the panel ratio must stand down. */
		aspect-ratio: auto;
		margin: 0;
		border: 0;
		border-radius: 0;
		pointer-events: none;
	}

	/* The wash sits on the image: the reveal system owns the figure's own
	   opacity, so setting it there would be overwritten on reveal. */
	.oe-hero__media img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		opacity: 0.2;
		transform: none;
	}

	.oe-hero__overlay {
		display: none;
	}

	.oe-hero__col {
		align-items: center;
		padding-block-start: 0;
		text-align: center;
	}

	.oe-hero__head {
		align-items: center;
	}

	.oe-hero__eyebrow {
		font-size: var(--oe-body-sm-size);
		line-height: 20px;
	}

	.oe-hero__title {
		line-height: 53px;
	}

	.oe-hero__badges {
		justify-content: center;
		gap: 6px;
	}

	.oe-hero__badge .oe-caption {
		font-size: 12px;
		line-height: 17px;
	}

	.oe-hero__badge-icon {
		width: 16px;
		height: 16px;
	}

	.oe-trust--dark {
		gap: 6px;
		width: 100%;
		justify-content: center;
	}
}

/* -- Plate callout ------------------------------------------------------- */

/*
 * Figma 471:1060 draws a magnifier over the car's plate: a ring on the plate,
 * a white cone, and a large plate badge above it.
 *
 * Two coordinate spaces, because the two halves answer to different things.
 * The ring has to stay on the number plate, so it is measured against the
 * PHOTOGRAPH - JS pins `.oe-hero__photo` to the picture's cover-fit rectangle,
 * which is a different slice of the picture at every breakpoint. The badge has
 * to stay on screen, so it is measured against the FRAME; pinning it to the
 * photo too would push it off the side of the crop. The beam is derived from
 * wherever the two land, so neither has to know about the other.
 *
 * `container-type: size` on both makes cqw/cqh mean "percent of this layer",
 * which is how the plate artwork scales without a second set of numbers.
 */
.oe-hero__overlay {
	--oe-spot-x: 30.8%;
	--oe-spot-y: 58.2%;
	--oe-spot-w: 13.3%;
	--oe-spot-h: 9.3%;
	--oe-callout-x: 73%;
	--oe-callout-y: 38.4%;
	--oe-callout-size: 6.1;
	--oe-beam-spread: 48;
	--oe-callout-ink: var(--oe-color-white, #fff);

	position: absolute;
	inset: 0;
	container-type: size;
	pointer-events: none;
}

.oe-hero__photo {
	position: absolute;
	inset: 0;
	container-type: size;
}

.oe-hero__beam {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.oe-hero__beam-shape {
	fill: var(--oe-callout-ink);
}

/* Centred on the point an editor picks, so the control reads "put it here". */
.oe-hero__spot {
	position: absolute;
	left: calc(var(--oe-spot-x) - var(--oe-spot-w) / 2);
	top: calc(var(--oe-spot-y) - var(--oe-spot-h) / 2);
	width: var(--oe-spot-w);
	height: var(--oe-spot-h);
	container-type: size;
}

.oe-hero__spot-ring {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border: max(1.5px, 5.2cqh) solid var(--oe-callout-ink);
	border-radius: 50%;
}

/* Figma's mini plate is 123 wide inside a 167 ring; cqw holds that share, so
   it keeps covering the car's own plate whatever size the ring is set to. */
.oe-hero__mini {
	font-size: 9.5cqw;
}

/* At plate size the reg needs the margin a real plate has, which is also what
   keeps the miniature the same shape as Figma's rather than a squat version. */
.oe-hero__mini .oe-hero__tag-reg {
	padding-inline: 1.25em;
}

.oe-hero__callout {
	position: absolute;
	left: var(--oe-callout-x);
	top: var(--oe-callout-y);
	font-size: calc(var(--oe-callout-size) * 1cqw);
	transform: translate(-50%, -50%);
}

/* Flex, not block: an inline-flex plate would sit on a baseline and carry a
   descender's worth of empty height, which the beam then aims below. */
.oe-hero__callout-inner {
	display: flex;
}

/* -- Plate artwork ------------------------------------------------------- */

/*
 * One component at two sizes: the badge and the ring's mini plate differ only
 * in font-size, so the reg can be any length without a second set of rules.
 */
.oe-hero__tag {
	display: inline-flex;
	align-items: center;
	height: 1.521em;
	border-radius: 0.167em;
	background-color: var(--oe-color-black, #000);

	/*
	 * Figma strokes this frame on the inside: 55 + 219 = the full 274, with
	 * nothing left over for a border. An outline draws there without joining
	 * the box model, which a border cannot do on a content-sized element.
	 */
	outline: 0.083em solid var(--oe-callout-ink);
	outline-offset: -0.083em;
	overflow: hidden;
}

.oe-hero__tag-gb {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 0.08em;
	width: 1.146em;
	color: var(--oe-color-white, #fff);
}

.oe-hero__tag-code {
	font-family: var(--oe-font-title);
	font-size: 0.5em;
	font-weight: 500;
	line-height: 1;
}

.oe-hero__tag-bar {
	width: 0.56em;
	height: 0.25em;
	border-radius: 0.04em;
	background-color: currentColor;
	opacity: 0.5;
}

.oe-hero__tag-reg {
	display: flex;
	align-items: center;
	align-self: stretch;
	padding-inline: 0.208em;
	background-color: var(--oe-color-brand, #ffc700);
	color: var(--oe-color-black, #000);
	font-family: var(--oe-font-title);
	font-size: 1em;
	font-weight: 900;
	line-height: 1;

	/* Figma sets none, and eight characters of it is a visible 2% of width. */
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
}

/* -- Load animation ------------------------------------------------------ */

/*
 * Hidden only when JS can run it back in, so a scripting failure leaves the
 * callout visible rather than blank.
 */
.oe-js .oe-hero__overlay .oe-hero__spot-ring,
.oe-js .oe-hero__overlay .oe-hero__mini,
.oe-js .oe-hero__overlay .oe-hero__callout-inner,
.oe-js .oe-hero__overlay .oe-hero__beam-shape {
	opacity: 0;
}

.oe-js .oe-hero__overlay.is-shown .oe-hero__spot-ring,
.oe-js .oe-hero__overlay.is-shown .oe-hero__mini,
.oe-js .oe-hero__overlay.is-shown .oe-hero__callout-inner,
.oe-js .oe-hero__overlay.is-shown .oe-hero__beam-shape {
	opacity: 1;
}