/**
 * Homepage-only sections: hero, trust bar. Section markup lives in
 * template-parts/sections/. Pricing card styles, the template-showcase
 * grid (.templates-layout/.template-grid/etc.), .final-cta and
 * .hero__actions (found 2026-09-06 to have the exact same bug —
 * reused on the Website Design detail page and homepage hero
 * respectively, but styled here, front-page-only) all moved to
 * components.css since they're shared across pages — this file is
 * only enqueued on the front page (see inc/enqueue.php). Before
 * putting a new rule here, confirm its markup is truly never rendered
 * anywhere but the homepage — this mistake has now happened 4 times.
 */

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

.hero {
	padding-block: var(--space-10) var(--space-16);
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: center;
}

/* The whole left-column content block (eyebrow, title, lede, feature
   chips, CTA buttons) is centred as a unit, per explicit request —
   the visual/slides column on the right is unaffected. */
.hero__content {
	text-align: center;
}

.hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-primary);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);
	margin-bottom: var(--space-4);
}

.hero__title {
	margin-bottom: var(--space-5);
}

.hero__lede {
	font-size: var(--fs-lg);
	max-width: 46ch;
	margin-inline: auto;
}

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

.hero-slide {
	display: none;
}

.hero-slide.is-active {
	display: block;
	animation: appiappi-hero-fade-in 350ms ease;
}

@keyframes appiappi-hero-fade-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.hero-dots {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-6);
}

.hero-dots button {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: var(--radius-full);
	background: var(--color-neutral-300);
	transition: width var(--transition-base), background var(--transition-base);
}

.hero-dots button.is-active {
	width: 24px;
	background: var(--color-primary);
}

.hero__visual {
	position: relative;
}

.hero__visual-frame {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-navy-800);
}

.hero__visual-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 400ms ease;
}

.hero__visual-frame img.is-active {
	opacity: 1;
}

.rating-card {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	padding: var(--space-4) var(--space-5);
	margin-top: -var(--space-8);
	margin-inline: var(--space-6);
	position: relative;
	z-index: 2;
}

.rating-card__icon {
	flex-shrink: 0;
}

.rating-card__score {
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	color: var(--color-neutral-900);
	line-height: 1;
}

.rating-card__stars {
	color: var(--color-warning);
	font-size: var(--fs-sm);
	letter-spacing: 2px;
	margin: var(--space-1) 0;
}

.rating-card__caption {
	font-size: var(--fs-xs);
	color: var(--color-text-muted);
}

.rating-card--placeholder .rating-card__score,
.rating-card--placeholder .rating-card__stars {
	color: var(--color-neutral-400);
}

@media (min-width: 1024px) {
	.hero {
		padding-block: var(--space-16) var(--space-24);
	}

	.hero__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-16);
		padding-inline: var(--hero-pad-desktop);
	}

	.rating-card {
		position: absolute;
		top: calc(-1 * var(--space-6));
		right: var(--space-6);
		margin: 0;
		max-width: 260px;
	}
}

/* Pricing preview + Website Designs preview: their own desktop side
   padding (configurable, see tokens.css), separate from the sitewide
   --container-pad — targeted via each section's existing #id rather
   than a new class, since both already have one. */
@media (min-width: 768px) {
	#pricing > .container {
		padding-inline: var(--pricing-preview-pad-desktop);
	}

	#templates > .container {
		padding-inline: var(--templates-preview-pad-desktop);
	}
}

/* Trust bar: moved to components.css 2026-09-07 (shared with the About
   page, which this front-page-only file never reached). */