/* ==========================================================================
   Karty „Główne klasy …” ([ssk_klasy]) wg projektu (Figma: SUROWIEC, sekcja klas).
   Wcześniej dziedziczyły font Inter z .ssk-wrap – projekt używa DDT i Utility.
   ========================================================================== */

.ssk-klasy .ssk-klasa-card {
	padding: 0 52px;
	border-left-color: #C5DCE3;
}

.ssk-klasy .ssk-klasa-card:first-child {
	padding-left: 0;
}

.ssk-klasy .ssk-klasa-card__media {
	width: 166px;
	height: 166px;
	margin-bottom: 24px;
	border-radius: 12px;
	background: #fff;
}

.ssk-klasy .ssk-klasa-card__title,
.ssk-klasy .ssk-klasa-card__subtitle {
	font-family: "ddt", sans-serif;
	font-weight: 300;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: 0;
	color: #013462;
}

.ssk-klasy .ssk-klasa-card__title {
	margin-bottom: 24px;
}

/* Podtytuł to doprecyzowanie klasy (np. kod lub czystość) – mniejszy, niebieski. */
.ssk-klasy .ssk-klasa-card__subtitle {
	margin: -16px 0 24px;
	font-family: "ff-utility-web-pro", sans-serif;
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.12em;
	color: #00B6F1;
}

.ssk-klasy .ssk-klasa-card__text {
	font-family: "ff-utility-web-pro", sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.8;
	color: #313131;
}

.ssk-klasy .ssk-klasa-card__text p {
	margin-bottom: 13px;
}

@media (max-width: 767px) {
	.ssk-klasy .ssk-klasa-card {
		padding: 0 24px;
	}
}

/* Motyw wymusza img { height: auto } – przy zdjęciach poziomych kwadrat nie był wypełniony. */
.ssk-klasy .ssk-klasa-card__media img {
	height: 100% !important;
}

/* Nawigacja jest ukryta w Dodatkowym CSS (przy 3 klasach była zbędna). Pokazujemy ją tylko,
   gdy kart jest więcej niż mieści się naraz: 3 na desktopie, 2 do 700 px, 1 do 480 px. */
.ssk-klasy:has(.ssk-klasa-card:nth-child(4)) .ssk-klasy__nav {
	display: flex !important;
}

@media (max-width: 700px) {
	.ssk-klasy:has(.ssk-klasa-card:nth-child(3)) .ssk-klasy__nav {
		display: flex !important;
	}
}

@media (max-width: 480px) {
	.ssk-klasy:has(.ssk-klasa-card:nth-child(2)) .ssk-klasy__nav {
		display: flex !important;
	}
}

.ssk-klasy .ssk-klasy__nav {
	margin-top: 52px;
}

.ssk-klasy .ssk-klasy__arrow {
	color: #00B6F1;
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
}

.ssk-klasy .ssk-klasy__counter {
	font-family: "ff-utility-web-pro", sans-serif;
	font-size: 12px;
	letter-spacing: 0.8em;
	color: #000A16;
}

.ssk-klasy .ssk-klasy__progress-fill {
	background: #00B6F1;
}