/* Sekcje stron: odstępy, nagłówki sekcji, rzędy kart (z karuzelą na telefonie). */

.section {
	padding-block: var(--space-80) var(--space-24);
}

.hero + .section {
	padding-top: var(--space-88);
}

.section-guides {
	padding-bottom: var(--space-88);
}

.section-tight {
	padding-block: 0 var(--space-88);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--space-16);
	margin-bottom: var(--space-32);
}

.section-head:has(+ .chip-row) {
	margin-bottom: var(--space-24);
}

.section-title {
	font-size: var(--text-9xl);
	line-height: var(--leading-heading);
	letter-spacing: var(--tracking-snug);
}

/* Rząd kart: zawija się; na telefonie przewijany w bok (karuzela). */
.card-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-24);
}

.card-row > * {
	flex: 1 1 var(--basis-card);
	min-width: 0;
}

.box-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-24);
}

.box-row > * {
	flex: 1 1 var(--basis-list-box);
	min-width: 0;
}

@media (max-width: 1023px) {
	.section {
		padding-block: var(--space-56) var(--space-20);
	}

	.hero + .section {
		padding-top: var(--space-56);
	}

	.section-guides {
		padding-bottom: var(--space-48);
	}

	.section-tight {
		padding-block: 0 var(--space-56);
	}
}

@media (max-width: 600px) {
	.section {
		padding-block: var(--space-48) var(--space-20);
	}

	.hero + .section {
		padding-top: var(--space-48);
	}

	.section-title {
		font-size: var(--text-7xl);
	}

	.card-row,
	.box-row {
		gap: var(--space-20);
	}

	.card-row.is-carousel,
	.post-row-list.is-carousel {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--space-6);
		margin-inline: calc(var(--space-16) * -1);
		padding-inline: var(--space-16);
		scroll-padding-inline: var(--space-16);
	}

	.card-row.is-carousel > *,
	.post-row-list.is-carousel > * {
		flex: 0 0 var(--width-carousel-card);
		scroll-snap-align: start;
	}
}

/* ---------- Najważniejsze promocje: karty osobiste + panel „Masz firmę?” ---------- */
.top-promos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-24);
	align-items: stretch;
}

.top-promos > .card-row {
	flex: 1 1 auto;
	min-width: 0;
}

/* Panel stoi obok kart, gdy obok mieszczą się 3 karty; inaczej spada pod nie na całą szerokość. */
.top-promos.has-business > .card-row {
	flex-basis: var(--basis-top-cards);
}

.top-promos.has-business > .card-row {
	flex-wrap: nowrap;
}

.top-promos.has-business > .card-row > * {
	flex-basis: var(--basis-card-compact);
}

.top-promos.has-business .card-promo {
	padding: var(--space-20);
}

.top-promos.has-business .card-promo-cta {
	padding-inline: var(--space-12);
	font-size: var(--text-md);
}

.business-panel {
	flex: 1 0 var(--basis-business-panel);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
	padding: var(--space-24) var(--space-20) var(--space-20);
	border-radius: var(--radius-4xl);
	background: var(--color-ink);
	color: var(--color-on-dark);
}

.business-panel .eyebrow {
	margin: 0;
}

.business-panel-title {
	margin: 0 0 var(--space-6);
	font-size: var(--text-2xl);
	line-height: var(--leading-snug);
	color: var(--color-on-dark);
}

/* Wąski panel: wiersze jeden pod drugim; panel na całą szerokość (tablet): obok siebie. */
.business-panel-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-10);
}

.business-row {
	flex: 1 1 var(--basis-mini-card);
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--space-12);
	padding: var(--space-12);
	border-radius: var(--radius-2xl);
	border: var(--border-width) solid var(--color-on-dark-line);
	background: var(--color-ink-soft);
	color: var(--color-on-dark);
	text-decoration: none;
}

.business-row:hover {
	border-color: var(--color-on-dark-outline);
	color: var(--color-on-dark);
}

.business-row .bank-logo {
	flex: none;
	width: var(--size-business-logo-w);
	height: var(--size-business-logo-h);
}

.business-row-text {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.business-row-name {
	font-size: var(--text-md);
	font-weight: var(--weight-bold);
	line-height: var(--leading-snug);
	overflow-wrap: anywhere;
}

.business-row-bank {
	font-size: var(--text-sm);
	color: var(--color-on-dark-faint);
}

.business-row-amount {
	flex: none;
	font-size: var(--text-lg);
	font-weight: var(--weight-extrabold);
	white-space: nowrap;
}

.business-panel-more {
	margin-top: auto;
}