/* =============================================================================
   TinySpacer — assets/css/hero.css
   -----------------------------------------------------------------------------
   Homepage hero section. Mobile-first: image → headline → subheading →
   buttons → trust indicators, stacked. From the desktop breakpoint (>= 64em)
   it becomes a two-column layout with copy left and lifestyle image right.

   Depends on tokens from assets/css/global.css (load it first). No hard-coded
   brand colors; all values reference --ts-* variables. No JavaScript.

   Enqueue (add to tinyspacer_enqueue_assets() in functions.php):
     wp_enqueue_style(
       'tinyspacer-hero',
       get_theme_file_uri( 'assets/css/hero.css' ),
       array( 'tinyspacer-global' ),
       filemtime( get_theme_file_path( 'assets/css/hero.css' ) )
     );
   ========================================================================== */

.ts-hero {
	padding-block: var(--ts-section-y);
	background-color: var(--ts-color-bg);
	overflow: hidden; /* Contain the subtle fade-up translate on entry. */
}

.ts-hero__inner {
	display: flex;
	flex-direction: column;
	gap: clamp(var(--ts-space-6), 5vw, var(--ts-space-10));
}

/* Mobile order: image first, then the copy block. */
.ts-hero__media {
	order: -1;
}

/* -----------------------------------------------------------------------------
   Copy column
   -------------------------------------------------------------------------- */
.ts-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--ts-space-5);
}

.ts-hero__title {
	font-family: var(--ts-font-heading);
	font-size: var(--ts-text-4xl);
	font-weight: var(--ts-weight-bold);
	line-height: var(--ts-leading-tight);
	letter-spacing: var(--ts-tracking-tight);
	color: var(--ts-color-heading);
	text-wrap: balance;
	margin: 0;
}

.ts-hero__subtitle {
	max-width: 54ch;
	font-size: var(--ts-text-xl);
	line-height: var(--ts-leading-snug);
	color: var(--ts-color-text-muted);
	margin: 0;
}

/* -----------------------------------------------------------------------------
   Actions
   -------------------------------------------------------------------------- */
.ts-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-3);
}

/* Full-width buttons on the smallest screens for easier tapping. */
@media (max-width: 25.999em) { /* < 416px */
	.ts-hero__actions .ts-btn {
		flex: 1 1 100%;
	}
}

/* -----------------------------------------------------------------------------
   Trust indicators
   -------------------------------------------------------------------------- */
.ts-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ts-space-3) var(--ts-space-5);
	margin: var(--ts-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.ts-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--ts-space-2);
	font-family: var(--ts-font-heading);
	font-size: var(--ts-text-sm);
	font-weight: var(--ts-weight-medium);
	color: var(--ts-color-text);
}

.ts-hero__trust-icon {
	flex: 0 0 auto;
	color: var(--ts-color-primary);
}

/* -----------------------------------------------------------------------------
   Media / image
   -------------------------------------------------------------------------- */
.ts-hero__media {
	position: relative;
}

.ts-hero__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: var(--ts-radius-xl);
	box-shadow: var(--ts-shadow-md);
	background-color: var(--ts-color-surface-alt);
}

/* -----------------------------------------------------------------------------
   Desktop layout (>= 1024px): copy left, image right, vertically centered.
   -------------------------------------------------------------------------- */
@media (min-width: 64em) {
	.ts-hero {
		padding-block: var(--ts-section-y-lg);
	}

	.ts-hero__inner {
		flex-direction: row;
		align-items: center;
		gap: clamp(var(--ts-space-8), 5vw, var(--ts-space-12));
	}

	.ts-hero__content {
		flex: 1 1 48%;
		gap: var(--ts-space-6);
	}

	.ts-hero__media {
		order: 0; /* Reset mobile ordering — image goes to the right. */
		flex: 1 1 52%;
	}

	.ts-hero__title {
		font-size: var(--ts-text-5xl);
	}
}

/* -----------------------------------------------------------------------------
   Animation — subtle fade-up on entry (<= 200ms), staggered per element.
   Gated behind prefers-reduced-motion: no motion, no opacity flash.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.ts-hero__fade {
		opacity: 0;
		transform: translateY(12px);
		animation: ts-hero-fade-up 200ms var(--ts-ease-out) forwards;
		animation-delay: var(--ts-fade-delay, 0ms);
	}
}

@keyframes ts-hero-fade-up {
	to {
		opacity: 1;
		transform: none;
	}
}