/**
 * Equipworks front page hero.
 *
 * Geometry comes from the designer's 1800x975 mock:
 *   - a full-width dark header band on top (logo left);
 *   - below it, a video panel whose left edge is a curved diagonal;
 *   - the orange brand symbol (70% opacity) laid over the video, its left
 *     edge coinciding with the video panel's left edge.
 *
 * The two shapes are SVG clipPaths in objectBoundingBox units (see
 * front-page.php), so they stretch to fill the hero at any screen size while
 * the video itself stays undistorted via object-fit: cover.
 */

:root {
	--eq-gutter: clamp(24px, 20vw, 360px);
	/*
	 * Framing of the video inside its clipped panel. The video is wider than the
	 * hero (--eq-video-w) so there is room to slide it left/right with
	 * --eq-video-x. More negative x => the panel shows more of the RIGHT of the
	 * footage; larger x => more of the LEFT. --eq-video-w also acts as zoom
	 * (bigger = more zoomed in).
	 */
	--eq-video-w: 119%;
	--eq-video-x: 31%;
	--eq-video-y: 0%;
}

/* Front page keeps the solid header band from branding.css; just align the
   logo with the contact column below it. */
.home .site-header {
	position: static;
	background: var(--eq-bg);
	padding-left: var(--eq-gutter);
}

/*
 * Safari can leave a hairline seam between two stacked full-width blocks where
 * the default white page shows through a sub-pixel gap. Paint the ancestors
 * dark and overlap the hero a pixel so nothing light can peek through.
 */
html,
body.home,
.home #page {
	background-color: var(--eq-bg);
}

.home .site-main {
	margin: -1px 0 0;
}

/* Hide the theme footer on the front page for now. */
.home .site-footer {
	display: none;
}

/* -------------------------------------------------------------------- Hero */

.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: calc(100vh - var(--eq-header-h));
	min-height: calc(100svh - var(--eq-header-h));
	overflow: hidden;
	background: var(--eq-bg);
	color: var(--eq-text);
	font-family: "Roboto Condensed", "Arial Narrow", Arial, Helvetica, sans-serif;
}

/*
 * Video panel: the clip lives on the wrapper (full hero box, so the shape keeps
 * the designed geometry), while the video inside can be freely sized and slid
 * for framing without touching the clip.
 */
.hero__media {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	background: #7d7d7d; /* shows if the video is missing */
	-webkit-clip-path: url(#eqClipVideo);
	clip-path: url(#eqClipVideo);
}

.hero__video {
	position: absolute;
	top: var(--eq-video-y);
	left: var(--eq-video-x);
	width: var(--eq-video-w);
	height: 100%;
	object-fit: cover;
	object-position: center;
	filter: grayscale(1) contrast(1.03) brightness(0.98);
}

/* Orange brand symbol laid over the video at 70% opacity. */
.hero__symbol {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: var(--eq-accent);
	opacity: 0.7;
	-webkit-clip-path: url(#eqClipSymbol);
	clip-path: url(#eqClipSymbol);
}

/* -------------------------------------------------------------- Left column */

.hero__content {
	position: relative;
	z-index: 3;
	margin-left: var(--eq-gutter);
	/* Cap the text column only; the left inset is the margin above, not padding,
	   so it never eats into the readable width. */
	max-width: 460px;
	padding: 40px 24px 40px 0;
}

.hero__contact {
	font-size: clamp(15px, 1.15vw, 18px);
	font-style: normal;
	line-height: 1.7;
	color: var(--eq-muted);
	letter-spacing: 0.01em;
}

.hero__contact .hero__address {
	margin: 0 0 24px;
	white-space: pre-line;
}

.hero__contact .hero__phone {
	margin: 0 0 24px;
}

.hero__contact a {
	text-decoration: none;
}

.hero__contact .hero__phone a {
	color: inherit;
}

.hero__contact .hero__email a {
	color: var(--eq-accent);
}

.hero__contact .hero__email a:hover,
.hero__contact .hero__email a:focus {
	color: var(--eq-accent-hover);
	text-decoration: underline;
}

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

/*
 * Mobile keeps the same diagonal composition, but with the portrait clip shapes
 * from the 729.9 x 1280 mock. Contact text sits in the dark left column.
 */
@media (max-width: 860px) {
	:root {
		--eq-gutter: clamp(16px, 5vw, 40px);
		/* Portrait panel is tall and narrow; frame the footage accordingly. */
		--eq-video-w: 133%;
		--eq-video-x: 31%;
		--eq-video-y: 0%;
	}

	.hero__media {
		-webkit-clip-path: url(#eqClipVideoM);
		clip-path: url(#eqClipVideoM);
	}

	.hero__symbol {
		-webkit-clip-path: url(#eqClipSymbolM);
		clip-path: url(#eqClipSymbolM);
	}

	.hero__content {
		margin-left: var(--eq-gutter);
		/* At vertical centre the dark wedge is at its widest (~57vw), so the
		   text column can breathe here without touching the diagonal. */
		max-width: 52vw;
		padding: 24px 6px 24px 0;
	}

	.hero__contact {
		font-size: clamp(12px, 3.2vw, 15px);
		line-height: 1.6;
	}

	.hero__contact .hero__address,
	.hero__contact .hero__phone {
		margin-bottom: 16px;
	}
}