/* Hero strony głównej (fioletowe tło). */

.hero {
	background: var(--color-brand);
	color: var(--color-on-dark);
}

.hero-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-48);
	padding-block: var(--space-72) var(--space-80);
}

.hero-text {
	flex: 1 1 var(--basis-hero-text);
	min-width: 0;
}

.hero-title,
.hero-accent {
	font-size: var(--text-12xl);
	line-height: var(--leading-tight);
	font-weight: var(--weight-extrabold);
	letter-spacing: var(--tracking-tight);
}

/* Dopisek pod H1 to osobny element (zasada: nagłówek ma jeden kolor). */
.hero-accent {
	color: var(--color-cta-hover);
}

.hero-lead {
	max-width: var(--width-text);
	margin: var(--space-20) 0 var(--space-32);
	font-size: var(--text-lg);
	color: var(--color-on-dark-soft);
}

/* Karta „Promocja tygodnia” */
.card-featured {
	flex: 1 1 var(--basis-hero-card);
	max-width: var(--width-hero-card);
	display: flex;
	flex-direction: column;
	padding: var(--space-28);
	border-radius: var(--radius-5xl);
	background: var(--color-surface);
	color: var(--color-ink);
	box-shadow: var(--shadow-hero-card);
}

/* Plakietka „mój typ!” wystaje nad kartę dzięki ujemnemu marginesowi (bez position). */
.card-featured-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--space-12);
	margin-bottom: var(--space-14);
}

.card-featured-top .badge-hand {
	margin-top: calc((var(--space-28) + var(--space-18)) * -1);
	margin-right: calc(var(--space-xs) * -1);
}

.card-bank {
	display: flex;
	align-items: center;
	gap: var(--space-14);
	margin-bottom: var(--space-18);
}

.card-bank-text {
	min-width: 0;
}

.card-bank-name {
	font-size: var(--text-lg);
	line-height: var(--leading-snug);
}

.card-bank-kind {
	font-size: var(--text-md);
	color: var(--color-text-muted);
}

.card-featured .amount {
	margin-bottom: var(--space-18);
}

.card-featured .check-list {
	margin-bottom: var(--space-22);
}

.card-featured-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xs) var(--space-12);
	margin-top: var(--space-12);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

@media (max-width: 1023px) {
	.hero-inner {
		padding-block: var(--space-48) var(--space-56);
	}

	.hero-title,
	.hero-accent {
		font-size: var(--text-10xl);
	}
}

@media (max-width: 600px) {
	.hero-inner {
		gap: var(--space-28);
		padding-block: var(--space-40) var(--space-48);
	}

	.hero-title,
	.hero-accent {
		font-size: var(--text-hero-sm);
	}

	.card-featured {
		padding: var(--space-20);
	}

	.card-featured-top .badge-hand {
		margin-top: calc((var(--space-20) + var(--space-18)) * -1);
	}

	.amount-xl .amount-value {
		font-size: var(--text-9xl);
	}
}