/* Karty: promocja, wiersz wpisu, poradnik. */

/* Karta promocji */
.card-promo {
	display: flex;
	flex-direction: column;
	gap: var(--space-18);
	padding: var(--space-24);
	border-radius: var(--radius-4xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
}

.card-promo-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-12);
}

.card-promo-title {
	margin-bottom: var(--space-xs);
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
}

.card-promo-cta {
	margin-top: auto;
}

/* Fakty w kafelkach: Warunki / Czas */
.facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
	margin: 0;
	font-size: var(--text-md);
}

.fact {
	flex: 1 1 0;
	min-width: 0;
	padding: var(--space-10) var(--space-12);
	border-radius: var(--radius-lg);
	background: var(--color-bg);
}

.fact-label {
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
}

.fact-value {
	margin: 0;
	font-weight: var(--weight-extrabold);
}

/* Etykieta i wartość jako span/strong (kafle z grafiką) – w bloku, jak dt/dd. */
.fact-label,
.fact-value,
.bonus-fact-label,
.bonus-fact-value {
	display: block;
}

/* Kafel z grafiką: licznik warunków albo kartka kalendarza obok tekstu. */
.fact-inline {
	display: flex;
	align-items: center;
	gap: var(--space-10);
}

/* Za wąsko na dwa kafle z grafiką obok siebie – jeden pod drugim. */
.facts .fact-inline,
.bonus-facts .fact-inline {
	flex: 1 1 var(--basis-fact-icon);
}

.fact-text {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

.fact-icon {
	flex: none;
	display: block;
}

.fact-value.is-hard,
.bonus-fact-value.is-hard {
	color: var(--color-accent-text);
}

.gauge-arc {
	fill: none;
	stroke: var(--color-gauge-track);
	stroke-width: 6;
}

.gauge-arc.is-on-1 {
	stroke: var(--color-gauge-easy);
}

.gauge-arc.is-on-2 {
	stroke: var(--color-gauge-medium);
}

.gauge-arc.is-on-3 {
	stroke: var(--color-gauge-hard);
}

.gauge-needle {
	stroke: var(--color-ink);
	stroke-width: 3;
	stroke-linecap: round;
}

.gauge-hub {
	fill: var(--color-ink);
}

.calendar-page {
	fill: var(--color-surface);
	stroke: var(--color-gauge-track);
	stroke-width: 2;
}

.calendar-head {
	fill: var(--color-gauge-medium);
}

.calendar.is-long .calendar-head {
	fill: var(--color-gauge-hard);
}

.calendar-ring {
	fill: var(--color-ink);
}

.calendar-num {
	fill: var(--color-ink);
	font-family: var(--font-sans);
	font-size: var(--text-calendar-num);
	font-weight: var(--weight-extrabold);
}

/* Wiersz wpisu o promocji (miniatura + treść) */
.post-row-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-20);
}

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

.post-row-list[hidden] {
	display: none;
}

.card-post-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--space-16) var(--space-20);
	padding: var(--space-16);
	border-radius: var(--radius-4xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-ink);
	text-decoration: none;
}

.card-post-row-thumb {
	flex: 1 1 var(--basis-post-thumb);
	min-height: var(--size-thumb-min-h);
}

.card-post-row-body {
	flex: 999 1 var(--basis-post-body);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-xs) 0;
}

.card-post-row-title {
	font-size: var(--text-xl);
	line-height: var(--leading-snug);
	font-weight: var(--weight-extrabold);
}

.card-post-row .meta-row {
	margin-top: auto;
}

.card-post-row:hover {
	color: var(--color-ink);
}

.card-post-row:hover .card-post-row-title {
	color: var(--color-brand);
	text-decoration: underline;
}

/* Karta poradnika */
.card-guide {
	display: flex;
	flex-direction: column;
	gap: var(--space-14);
	color: var(--color-ink);
	text-decoration: none;
}

.card-guide-thumb {
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-3xl);
}

.card-guide-title {
	font-size: var(--text-3xl);
	line-height: var(--leading-snug);
	font-weight: var(--weight-extrabold);
}

.card-guide-excerpt {
	font-size: var(--text-base-sm);
	color: var(--color-text-body);
}

.card-guide:hover {
	color: var(--color-ink);
}

.card-guide:hover .card-guide-title {
	color: var(--color-brand);
	text-decoration: underline;
}

@media (max-width: 600px) {
	.post-row-list.is-carousel {
		gap: var(--space-20);
	}

	.post-row-list.is-carousel .card-post-row {
		flex-direction: column;
		flex-wrap: nowrap;
	}

	.post-row-list.is-carousel .card-post-row-thumb {
		flex: none;
	}

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

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

	.card-guide-title {
		font-size: var(--text-lg);
	}
}

/* Mała karta promocji („Podobne promocje”) */
.mini-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-12);
}

.card-mini {
	flex: 1 1 var(--basis-mini-card);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding: var(--space-18);
	border-radius: var(--radius-3xl);
	border: var(--border-width) solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-ink);
	text-decoration: none;
}

/* Karta promocji: logo banku po lewej, opis obok. */
.card-mini-with-logo {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--space-14);
}

.card-mini-with-logo > .bank-logo {
	flex: none;
}

.card-mini-body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.card-mini:hover {
	border-color: var(--color-placeholder-line);
	color: var(--color-ink);
}

.card-mini:hover .card-mini-title {
	color: var(--color-brand);
	text-decoration: underline;
}

.card-mini.is-ended {
	border-style: dashed;
	border-color: var(--color-border-strong);
}

.card-mini .badge {
	padding: var(--space-2xs) var(--space-10);
}

.card-mini-title {
	font-size: var(--text-base);
	line-height: var(--leading-snug);
}

.card-mini.is-ended .card-mini-title {
	color: var(--color-text-body);
}

.card-mini-meta {
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	color: var(--color-text-muted);
}

@media (max-width: 600px) {
	.mini-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--space-6);
	}

	.card-mini {
		flex: 0 0 var(--width-carousel-card);
		scroll-snap-align: start;
	}
}