/*
 * smh/section-hero (root .smh-hero). Owner: WP2. Design A "Living Network" (approved 2026-09-29), docs/ARCHITECTURE.md 5.3.1.
 * The ground and its layers (dot grid, three network planes, cursor light, shades, grain, office coordinates) are the
 * site engine's living network (data-net="hero": base.css section 11 + assets/js/living.js). This file: the cover's
 * size and rhythm, and the copy (kicker, H1 in the opening frame, lead, actions). The credential cards
 * (standing.css) float over its bottom edge.
 * Physical sides where the identity is physical (the network sits on the left in both languages, the text side
 * shade follows the reading start). Only transform and opacity move.
 */

.smh-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	box-sizing: border-box;
	min-height: max(740px, 100vh);
	min-height: max(740px, 100svh);
	display: flex;
	align-items: center;
	padding: calc(var(--smh-hdr, 88px) + 40px) 0 188px;
	color: var(--smh-white);
	background-color: var(--smh-petrol-deep);
}
/* ---------- copy ---------- */
.smh-hero .smh-hero__inner { z-index: 1; }
.smh-hero__copy { max-inline-size: 700px; will-change: transform; }
.smh-hero .smh-hero__kicker {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 30px;
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--smh-mist);
}
.smh-hero .smh-hero__kicker::before {
	content: "";
	position: relative;
	inline-size: 52px;
	block-size: 1px;
	flex: none;
	background: linear-gradient(to left, rgb(255 255 255 / .85), rgb(255 255 255 / 0));
	transform-origin: right;
}
html:not([dir="rtl"]) .smh-hero .smh-hero__kicker::before { background: linear-gradient(to right, rgb(255 255 255 / .85), rgb(255 255 255 / 0)); transform-origin: left; }
.smh-hero .smh-hero__kicker::after {
	content: "";
	position: absolute;
	inset-inline-start: -2px;
	top: 50%;
	inline-size: 5px;
	block-size: 5px;
	margin-top: -2.5px;
	background: var(--smh-white);
	box-shadow: 0 0 10px 1px rgb(190 230 240 / .8);
}
.js .smh-hero .smh-hero__kicker::before { transform: scaleX(0); }
.is-live .smh-hero .smh-hero__kicker::before { transform: none; transition: transform 1.2s var(--smh-a-out) .3s; }

.smh-hero .smh-hero__frame { margin-inline-start: calc(-1 * clamp(18px, 2.2vw, 32px)); }
.smh-hero .smh-hero__title {
	margin: 0;
	font-size: clamp(44px, 6.35vw, 98px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--smh-white);
	text-shadow: 0 2px 30px rgb(4 26 33 / .35);
}
html[lang|="en"] .smh-hero .smh-hero__copy { max-inline-size: 800px; }
html[lang|="en"] .smh-hero .smh-hero__title { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.12; letter-spacing: -0.01em; }
.smh-hero .smh-hero__copy > .smh-hero__lead {
	max-inline-size: 35em;
	margin-top: 30px;
	font-size: clamp(17px, 1.32vw, 19.5px);
	line-height: 1.95;
	color: var(--smh-mist);
}
html[lang|="en"] .smh-hero .smh-hero__copy > .smh-hero__lead { line-height: 1.7; }
.smh-hero .smh-hero__copy > .smh-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin-top: 42px; }
.smh-hero .smh-hero__copy > .smh-hero__actions > * { margin: 0; }
.js .smh-hero [data-in] { opacity: 0; transform: translate3d(0, 26px, 0); }
.is-live .smh-hero [data-in] { opacity: 1; transform: none; transition: opacity 1.1s var(--smh-a-out) var(--d, 0s), transform 1.3s var(--smh-a-out) var(--d, 0s); }

/* ---------- the primary action: base.css's on-petrol button (A's light button with the arrow) ---------- */
.smh-hero .smh-cta .smh-cta__link { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-block-size: 58px; font-size: 17px; }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
	.smh-hero { align-items: flex-end; padding: calc(var(--smh-hdr, 68px) + 36px) 0 128px; }
	.smh-hero .smh-hero__kicker { font-size: 14px; margin-bottom: 22px; }
	.smh-hero .smh-hero__kicker::before { inline-size: 30px; }
	.smh-hero .smh-hero__frame { margin-inline-start: -12px; padding-inline: 12px; }
	.smh-hero .smh-hero__copy > .smh-hero__lead { margin-top: 22px; line-height: 1.85; }
	.smh-hero .smh-hero__copy > .smh-hero__actions { margin-top: 32px; gap: 14px 26px; }
	.smh-hero .smh-cta .smh-cta__link { min-block-size: 56px; }
}
@media (max-width: 420px) {
	.smh-hero .smh-hero__title { font-size: 40px; }
	html[lang|="en"] .smh-hero .smh-hero__title { font-size: 36px; }
	.smh-hero .smh-hero__copy > .smh-hero__actions .smh-cta, .smh-hero .smh-hero__copy > .smh-hero__actions .smh-cta .smh-cta__link { inline-size: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.js .smh-hero .smh-hero__kicker::before { transform: none; }
}
@media print { .smh-hero { min-height: 0; padding: 24px 0; } }