/**
 * Section — Hero
 *
 * Calm and neutral background — Trust first, per EC-DESIGN.md's Core
 * Philosophy ("Trust first. Excitement second"). The one deliberate
 * Fire accent is the CTA button, not the section itself; painting the
 * whole first impression in Fire would risk it becoming "the primary
 * visual language of the website," which EC-DESIGN.md explicitly rules
 * out.
 */

.ec-hero {
	padding: var(--ec-space-8) var(--ec-space-5);
	background-color: var(--ec-color-surface-elevated);
	text-align: center;
}

.ec-hero__content {
	max-width: 42rem;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ec-space-5);
}

.ec-hero__title {
	font-family: var(--ec-font-family-base);
	font-weight: var(--ec-font-weight-bold);
	font-size: var(--ec-font-size-display);
	line-height: var(--ec-line-height-tight);
	color: var(--ec-color-text-primary);
	margin: 0;
}

/* Mobile: display size (60px) made "competitions" wider than a 375px
   screen. Component-scoped step down, the same convention
   competition-hero.css already uses for its own title — the type
   scale itself stays fixed (EC-DESIGN-SYSTEM.md, Typography). */
@media (max-width: 639px) {
	.ec-hero__title {
		font-size: var(--ec-font-size-h2);
		letter-spacing: -0.01em;
	}
}

.ec-hero__subtitle {
	font-size: var(--ec-font-size-body-lg);
	line-height: var(--ec-line-height-base);
	color: var(--ec-color-text-secondary);
	margin: 0;
}