/*
 * AW Hero widget styles (T-030 layout; T-031 adds behaviour, no CSS change needed for it).
 * Phone first. Colour, type, spacing and easing come from tokens.css; the four photo treatments
 * are the --hero-filter-* and --hero-shade-* tokens added for this widget (05, section 1).
 * The headline is two copies of the same two lines: the ink copy is clipped so only line 2 shows
 * on paper, the paper copy only line 1, and the pair sits over the photo edge. On desktop the clip
 * moves to the vertical seam instead.
 * Last task: T-030. Date: 2026-10-21.
 */

.aw-hero {
	position: relative;
	background: var(--paper);
	--aw-fs: var(--aw-fs-phone, var(--fs-hero-phone));
	--aw-line: calc(var(--aw-fs) * var(--lh-hero));
	--aw-split: 43%;
	--aw-img-filter: var(--hero-filter-night);
	--aw-shade: var(--hero-shade-night);
}

/* Phase treatments. The class on the root is set by PHP for the first paint and kept live by clock.js. */
.aw-hero[data-phase="Sunrise"] {
	--aw-img-filter: var(--hero-filter-sunrise);
	--aw-shade: var(--hero-shade-sunrise);
}

.aw-hero[data-phase="Daytime"] {
	--aw-img-filter: var(--hero-filter-daytime);
	--aw-shade: var(--hero-shade-daytime);
}

.aw-hero[data-phase="Sunset"] {
	--aw-img-filter: var(--hero-filter-sunset);
	--aw-shade: var(--hero-shade-sunset);
}

/* Photo band: full width, fixed height on phones, the right-hand column on desktop. */
.aw-hero__photo {
	position: relative;
	height: clamp(320px, 78vw, 520px);
	background: var(--ink);
	overflow: hidden;
}

.aw-hero__img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: 40% 50%;
	filter: var(--aw-img-filter);
	transition: filter 1.4s ease;
	will-change: transform;
	transform-origin: 50% 50%;
}

/* No photo chosen yet: a flat ink band keeps the layout and the headline crossing intact. */
.aw-hero__img--empty {
	display: block;
	background: var(--ink);
}

.aw-hero__shade {
	position: absolute;
	inset: 0;
	display: block;
	background: var(--aw-shade);
	transition: background 1.4s ease;
	pointer-events: none;
}

.aw-hero__note {
	position: absolute;
	left: max(var(--pad), env(safe-area-inset-left, 0px));
	bottom: calc(var(--aw-line) + 14px);
	margin: 0;
	padding: 4px 8px;
	background: color-mix(in srgb, var(--ink) 70%, transparent);
	color: var(--sand);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 11px;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Big local time: top right of the photo, under the header. */
.aw-hero__time {
	position: absolute;
	right: max(var(--pad), env(safe-area-inset-right, 0px));
	top: 96px;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: var(--paper);
	font-family: var(--font-display);
	text-transform: uppercase;
	text-align: right;
}

.aw-hero__phase {
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0.16em;
	color: var(--sand);
}

.aw-hero__bigtime {
	font-weight: 800;
	font-size: clamp(44px, 12vw, 76px);
	line-height: 0.9;
	font-variant-numeric: tabular-nums;
}

/* Headline: pulled up over the photo by one line, then clipped into two layers. */
.aw-hero__title {
	position: relative;
	z-index: 2;
	margin-top: calc(-1 * var(--aw-line));
}

.aw-hero__h1,
.aw-hero__ghost {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--aw-fs);
	line-height: var(--lh-hero);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	white-space: nowrap;
}

.aw-hero__h1 > span,
.aw-hero__ghost > span {
	display: block;
}

/* Ink copy: line 2 only, on the paper. */
.aw-hero__h1 {
	color: var(--ink);
	clip-path: inset(var(--aw-line) 0 0 0);
}

/* Paper copy: line 1 only, on the photo. It never takes a click or a screen reader. */
.aw-hero__ghost {
	position: absolute;
	inset: 0;
	color: var(--paper);
	clip-path: inset(0 0 calc(100% - var(--aw-line)) 0);
	pointer-events: none;
}

/* Body column, one column on phones. */
.aw-hero__body {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding-top: 26px;
	padding-bottom: 56px;
}

.aw-hero__eyebrow {
	margin: 0;
	order: -1;
}

.aw-hero__clocks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.aw-hero__clocks li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--muted);
}

.aw-hero__clocks li:first-child {
	color: var(--ink);
}

.aw-hero__dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	flex: none;
	border-radius: 50%;
	background: var(--signal);
}

html.motion-on .aw-hero__dot {
	animation: aw-hero-pulse 1.8s ease-in-out infinite;
}

@keyframes aw-hero-pulse {
	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

.aw-hero__subline {
	margin: 0;
	max-width: 20ch;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-subline);
	line-height: 1;
	text-transform: uppercase;
}

.aw-hero__cols {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.aw-hero__text {
	margin: 0;
	max-width: 42ch;
	color: var(--rule);
	font-size: 18px;
	line-height: var(--lh-body);
}

.aw-hero__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.aw-hero__fine {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.aw-hero__proof {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid var(--stone);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
}

.aw-hero__tag {
	flex: none;
}

.aw-hero__tag-body {
	fill: var(--signal);
}

.aw-hero__tag-tick {
	stroke: var(--ink);
}

/* Focus ring. Hello Elementor's a:focus-visible outranks base.css, so restate it from tokens. */
.aw-hero a:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

/* Tablet: the body splits into two columns, as in the prototype. */
@media (min-width: 760px) {
	.aw-hero {
		--aw-fs: var(--aw-fs-tablet, var(--aw-fs-phone, var(--fs-hero-phone)));
	}

	.aw-hero__cols {
		flex-direction: row;
		align-items: flex-start;
		gap: 36px;
	}
}

/* Desktop: paper left, photo right, headline across the seam. */
@media (min-width: 1024px) {
	.aw-hero {
		--aw-fs: var(--aw-fs-desktop, var(--aw-fs-tablet, var(--fs-hero-desktop)));
		min-height: clamp(900px, 72vw, 1080px);
	}

	.aw-hero__photo {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: var(--aw-split);
		height: auto;
	}

	.aw-hero__note {
		left: auto;
		right: max(var(--pad), env(safe-area-inset-right, 0px));
		bottom: auto;
		top: 104px;
	}

	.aw-hero__time {
		top: calc(168px + var(--aw-fs) * 1.72 + 28px);
	}

	.aw-hero__title {
		position: absolute;
		left: 0;
		right: 0;
		top: 168px;
		margin-top: 0;
	}

	/* Ink copy keeps the left of the seam; the paper copy keeps the right. */
	.aw-hero__h1 {
		clip-path: inset(0 var(--aw-split) 0 0);
	}

	.aw-hero__ghost {
		clip-path: inset(0 0 0 calc(100% - var(--aw-split)));
	}

	.aw-hero__body {
		width: calc(100% - var(--aw-split));
		padding-top: calc(168px + var(--aw-fs) * 1.72 + 36px);
		padding-bottom: 72px;
	}

	/* The eyebrow sits on the paper above the headline, level with the photo note. */
	.aw-hero__eyebrow {
		position: absolute;
		top: 122px;
		left: max(var(--pad), env(safe-area-inset-left, 0px));
	}
}