/* =========================================================
   ZTM Kielce — Widget "Banery promocyjne"
   Lista bloków: żółto podkreślony tytuł + biała karta z obramowaniem,
   w której admin wgrywa dowolną grafikę (elastyczna wysokość, bez
   wymuszonego przycinania/rozciągania). Cała karta jest jednym linkiem.
   ========================================================= */

.ztm-widget--banners {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding: 28px 26px 32px;
}

.ztm-banner-block {
	display: flex;
	flex-direction: column;
}

.ztm-banner-title {
	font-size: calc(19px * var(--ztm-font-scale, 1));
	font-weight: 700;
	color: var(--ztm-navy);
	margin: 0 0 10px;
	line-height: 1.3;
}

/* Żółte podkreślenie pod tytułem — ten sam akcent co w widgecie Rozkład jazdy,
   tu jako krótka pełna linia, nie pastylka wewnątrz przycisku. */
.ztm-banner-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	border-radius: 2px;
	background: #f4d06f;
	margin-top: 10px;
}

.ztm-banner-card {
	display: block;
	border: 1px solid var(--ztm-border-grey);
	border-radius: 12px;
	padding: 28px;
	background: var(--ztm-white);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ztm-banner-card:hover {
	border-color: var(--ztm-navy);
	box-shadow: var(--ztm-elevation-1);
}

.ztm-banner-card:focus-visible {
	outline: 3px solid var(--ztm-blue-light);
	outline-offset: 2px;
}

/* Grafika elastyczna: pełna szerokość karty, wysokość naturalna (wynika
   z proporcji wgranego pliku) — nigdy nie jest ani obcinana, ani rozciągana. */
.ztm-banner-card img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
	.ztm-banner-card {
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================
   RESPONSYWNOŚĆ
   ========================================================= */

@media (max-width: 640px) {
	.ztm-widget--banners {
		padding: 22px 22px 26px;
		gap: 28px;
	}

	.ztm-banner-card {
		padding: 18px;
	}
}