/**
 * Home hero (block 04).
 *
 * 1:1 with the design prototype's full-bleed photo hero: rounded card, night
 * scrim gradient, glass countdown badge (top-right), and the bottom-left text
 * block (mono eyebrow, serif display title with an italic accent word, lead,
 * two pill CTAs). Every value below is lifted verbatim from the prototype's
 * inline styles. The image-zoom-on-hover comes from the shared `.at-imgzoom`
 * utility already defined in tokens.css, so the section just adds that class.
 *
 * The hero sits directly inside #content (which is full-bleed: no max-width /
 * padding), so the section's own horizontal margin provides the page gutters.
 */

.at-hero {
	position: relative;
	margin: 18px clamp(18px, 5vw, 48px) 0;
	border-radius: 20px;
	overflow: hidden;
	min-height: clamp(440px, 66vh, 640px);
	display: flex;
	align-items: flex-end;
}

/* Full-bleed background photo. height:100% overrides the global img{height:auto}. */
.at-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Night scrim so the white text stays legible over any photo. */
.at-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 10, 22, .12) 0%, rgba(8, 10, 22, .5) 52%, rgba(8, 10, 22, .88) 100%);
}

/* Glass countdown badge, top-right. */
.at-hero__countdown {
	position: absolute;
	top: clamp(20px, 4vw, 40px);
	right: clamp(20px, 4vw, 40px);
	text-align: center;
	color: #F3EFE4;
	background: rgba(8, 10, 22, .32);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px;
	padding: 14px 20px;
}

.at-hero__countdown-label {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .16em;
	color: #E9B79C;
	margin-bottom: 4px;
}

/* Inherits the serif body face (Newsreader 300). */
.at-hero__countdown-num {
	font-size: 2.6rem;
	line-height: 1;
	font-weight: 300;
	letter-spacing: -.02em;
}

.at-hero__countdown-unit {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	color: rgba(243, 239, 228, .7);
	margin-top: 5px;
}

/* Bottom-left text block, raised above the scrim. */
.at-hero__body {
	position: relative;
	padding: clamp(28px, 5vw, 60px);
	color: #F3EFE4;
	max-width: 780px;
}

/* padding:0 resets refur's global p{padding:0 0 20px} / h1{padding:0 0 25px}
 * leaks, which otherwise inflate every text row's height and break parity. */
.at-hero__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #E9B79C;
	margin: 0 0 16px;
	padding: 0;
}

/* Display title. Overrides the global h1 line-height (1.1 -> 1.02) and colour. */
.at-hero__title {
	font-size: clamp(2.6rem, 6.5vw, 4.9rem);
	line-height: 1.02;
	font-weight: 400;
	letter-spacing: -.02em;
	margin: 0;
	padding: 0;
	color: #F3EFE4;
}

.at-hero__title em {
	font-style: italic;
}

.at-hero__lead {
	font-size: clamp(1.05rem, 2vw, 1.42rem);
	color: rgba(243, 239, 228, .85);
	max-width: 48ch;
	margin: 22px 0 0;
	padding: 0;
	line-height: 1.5;
}

.at-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 13px;
	margin: 32px 0 0;
}

/* Primary CTA: solid terracotta pill (matches prototype's var(--accent)). */
.at-hero__actions .at-btn--primary {
	background: var(--accent);
	color: #fff;
	padding: 15px 30px;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 500;
	border: 0;
}

/* Secondary CTA: ghost pill with a hairline border. */
.at-hero__actions .at-btn--ghost {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .55);
	color: #fff;
	padding: 14px 28px;
	border-radius: 999px;
	font-size: 18px;
}

/* Phones: the absolute top-right badge collides with the (taller, full-width)
 * text block once the title/lead wrap onto more lines (≈ < 385px the body's top
 * rises under the badge). Reflow the card into a column — badge in normal flow
 * at the top-right, text pinned to the bottom — so they can never overlap.
 * Desktop/tablet (the 768/1440 parity gate) keep the prototype layout untouched. */
@media (max-width: 560px) {
	.at-hero {
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
	}

	.at-hero__countdown {
		position: static;
		align-self: flex-end;
		margin: clamp(16px, 4vw, 20px) clamp(16px, 4vw, 20px) 0;
	}
}