/*
 * site/karty — STRUKTURA. Wygląd: css/site-karty.css.
 * Wartości: AP S17 + S23; `Strony internetowe Lublin.dc.html` L244–254,
 * `O nas.dc.html` L241–250 (numery), `Redesign strony.dc.html` data-svc
 * L133–137, „Co zmieniamy” (pasek wyniku szybkości) i „Dodatki” (karty
 * oferty ze stopką), `Tworzenie stron internetowych.dc.html` „Co daje
 * strona” (mini-ilustracje).
 *
 * `.s-pw-card` (skin.css) ładuje się PO tym arkuszu — odstęp i promień karty
 * nadpisuje selektor o dwóch klasach.
 */

.s-karty__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 32px;
}

/* Z nadtytułem siatka stoi 34 px pod nagłówkiem (Lublin L247), bez niego
   32 px (O nas L244). */
.s-pw-eyebrow + .s-pw-h2 + .s-karty__grid {
	margin-top: 34px;
}

.s-karty__grid.is-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.s-karty__grid.is-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.s-pw-card.s-karty__card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border-radius: 24px;
}

.s-karty__title {
	margin: 0;
}

.s-karty__num + .s-karty__title {
	margin-top: 14px;
}

.s-karty__text {
	margin: 8px 0 0;
}

/* Stopka przyciśnięta do dołu karty (karty w rzędzie mają równą wysokość);
   odstęp nad kreską: padding-top, nad stopką co najmniej 20 px. */
.s-karty__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
}

.s-karty__card > :has(+ .s-karty__foot) {
	margin-bottom: 20px;
}

/* --- Karty S17: ikona albo mini-ilustracja nad tytułem --------------------
   Kampanie „Kanały” L241 @22235–25526, Internetowa obsługa firmy „Co
   dostajesz” L241 @17194–24825 (ilustracja: odstęp 22, padding 26/26/28,
   promień 26), Opieka „W abonamencie” L234 @12849–20034 (ikona: odstęp 16,
   padding 26/24/26, promień 24). Tytuł i opis w jednym bloku `__body`. */

.s-karty.is-media-ikona .s-karty__grid,
.s-karty.is-media-wizual .s-karty__grid {
	margin-top: 36px;
}

.s-karty.is-media-wizual .s-karty__grid.is-cols-2 {
	gap: 18px;
}

.s-karty.is-media-ikona .s-pw-card.s-karty__card {
	gap: 16px;
	padding: 26px 24px;
}

.s-karty.is-media-wizual .s-pw-card.s-karty__card {
	gap: 22px;
	padding: 26px 26px 28px;
	border-radius: 26px;
}

.s-karty.is-media-ikona .s-pw-card.s-karty__card {
	transition: transform 0.35s var(--pw-ease), border-color 0.35s;
}

.s-karty.is-media-ikona .s-pw-card.s-karty__card:hover {
	transform: translateY(-4px);
}

.s-karty__body .s-karty__text {
	margin-top: 6px;
}

.s-karty__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
}

/* Mini-ilustracje: 84 px bez ramki (Kampanie) albo 120 px w ramce. */
.s-karty__visual {
	position: relative;
	display: flex;
	height: 84px;
}

.s-karty__visual.is-google {
	flex-direction: column;
	justify-content: space-between;
}

.s-karty__visual.is-meta {
	align-items: center;
	gap: 12px;
}

.s-karty__visual:is(.is-przegladarka, .is-reklama, .is-status, .is-opiekun) {
	display: block;
	height: 120px;
	overflow: hidden;
	border-radius: 16px;
}

.s-karty__visual-in {
	position: absolute;
	inset: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.s-karty__visual-in.is-status {
	justify-content: center;
	gap: 10px;
}

.s-karty__ad {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 12px;
}

.s-karty__ad-row {
	display: flex;
	align-items: center;
	gap: 6px;
}

.s-karty__ad-tag {
	padding: 2px 6px;
	border-radius: 5px;
}

.s-karty__ad-tag.is-small {
	padding: 1px 6px;
	border-radius: 4px;
}

.s-karty__ad-line {
	width: 30%;
	height: 6px;
	margin-left: auto;
	border-radius: 4px;
}

.s-karty__line {
	display: block;
	height: 6px;
	border-radius: 4px;
}

.s-karty__visual.is-google .s-karty__line {
	margin-left: 10px;
}

.s-karty__line.is-strong {
	height: 8px;
}

.s-karty__line.is-w40 {
	width: 40%;
}

.s-karty__line.is-w52 {
	width: 52%;
}

.s-karty__line.is-w60 {
	width: 60%;
}

.s-karty__line.is-w70 {
	width: 70%;
}

.s-karty__line.is-w90 {
	width: 90%;
}

.s-karty__post {
	flex: none;
	width: 84px;
	height: 84px;
	border-radius: 16px;
}

.s-karty__post-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.s-karty__post-btn {
	align-self: flex-start;
	margin-top: 4px;
	padding: 4px 10px;
	border-radius: 100px;
}

.s-karty__window {
	position: absolute;
	top: 14px;
	right: 14px;
	bottom: -10px;
	left: 14px;
	overflow: hidden;
	border-radius: 10px 10px 0 0;
}

.s-karty__window-bar {
	height: 14px;
}

.s-karty__window-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.s-karty__chart {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 34px;
	margin-top: auto;
}

.s-karty__chart > span {
	flex: 1;
	border-radius: 4px 4px 1px 1px;
}

.s-karty__chart > .is-h30 {
	height: 30%;
}

.s-karty__chart > .is-h45 {
	height: 45%;
}

.s-karty__chart > .is-h40 {
	height: 40%;
}

.s-karty__chart > .is-h62 {
	height: 62%;
}

.s-karty__chart > .is-h78 {
	height: 78%;
}

.s-karty__chart > .is-h96 {
	height: 96%;
}

.s-karty__check {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.s-karty__ok {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 100px;
}

.s-karty__keeper {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.s-karty__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.s-karty__call {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 4px 10px;
	border-radius: 100px;
}

/* Paski pod kartami (Opieka) i dopisek. */
.s-karty__bars {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
}

.s-karty__bar {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 20px 24px;
	border-radius: 22px;
}

.s-karty__bar-text {
	margin: 0;
}

.s-karty__note {
	margin: 14px 0 0;
}

/* --- Mini-ilustracje Tworzenia (84 px bez ramki) -------------------------
   `Tworzenie stron internetowych.dc.html` L240 @6686–11191 „Co daje strona”:
   słupki, wyniki wyszukiwania, pierścień szybkości. */

.s-karty.is-media-wizual .s-karty__grid.is-cols-3 {
	gap: 18px;
}

.s-karty__visual.is-slupki {
	align-items: flex-end;
	gap: 7px;
}

.s-karty__col {
	flex: 1;
	border-radius: 8px 8px 3px 3px;
}

.s-karty__col.is-h28 {
	height: 28%;
}

.s-karty__col.is-h40 {
	height: 40%;
}

.s-karty__col.is-h36 {
	height: 36%;
}

.s-karty__col.is-h54 {
	height: 54%;
}

.s-karty__col.is-h66 {
	height: 66%;
}

.s-karty__col.is-h90 {
	height: 90%;
}

.s-karty__visual.is-wyniki {
	flex-direction: column;
	justify-content: space-between;
}

.s-karty__serp {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 10px;
}

.s-karty__serp.is-first {
	padding: 8px 10px;
	border-radius: 12px;
}

.s-karty__serp-line {
	height: 6px;
	border-radius: 4px;
}

.s-karty__serp.is-first .s-karty__serp-line {
	margin-left: auto;
}

.s-karty__serp-line.is-w36 {
	width: 36%;
}

.s-karty__serp-line.is-w48 {
	width: 48%;
}

.s-karty__serp-line.is-w38 {
	width: 38%;
}

.s-karty__visual.is-szybkosc {
	align-items: center;
	gap: 16px;
}

/* Pierścień wyniku (design: conic-gradient; tu SVG — długość łuku
   w atrybucie, bez stylu inline): 96 px, grubość 10, środek 76 px; mały
   w ilustracji karty: 84 px, grubość 9, środek 66 px. */
.s-karty__ring {
	position: relative;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
}

.s-karty__ring.is-small {
	width: 84px;
	height: 84px;
}

.s-karty__ring-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.s-karty__ring-track,
.s-karty__ring-value {
	fill: none;
	stroke-width: 10;
}

.s-karty__ring.is-small :is(.s-karty__ring-track, .s-karty__ring-value) {
	stroke-width: 9;
}

.s-karty__score-value {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 76px;
	height: 76px;
	border-radius: 50%;
}

.s-karty__ring.is-small .s-karty__score-value {
	width: 66px;
	height: 66px;
}

/* --- Pasek wyniku szybkości (Odświeżenie „Co zmieniamy”) ----------------
   `Redesign strony.dc.html` L240 @7198–14096. */

.s-karty__speed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 28px 48px;
	margin-top: 18px;
	padding: 30px 24px;
	border-radius: 26px;
}

.s-karty__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

/* Strzałka jak w designie: SVG w linii tekstu (base.css robi z SVG blok),
   więc pudełko ma wysokość wiersza i strzałka siedzi na linii bazowej. */
.s-karty__speed-arrow > svg {
	display: inline;
}

.s-karty__speed-text {
	max-width: 30ch;
	margin: 0;
}

/* --- Karty oferty (S17 „Dodatki”) ---------------------------------------
   `Redesign strony.dc.html` L240 @14106–19492: odstęp 20, padding
   26/26/24, promień 26, ilustracja 96 px w ramce, opis 8 px pod tytułem;
   stopka przyciśnięta do dołu (odstęp daje `gap`, nie margines). */

.s-karty.is-oferta .s-pw-card.s-karty__card {
	gap: 20px;
	padding: 26px 26px 24px;
	border-radius: 26px;
}

.s-karty.is-oferta .s-karty__card > :has(+ .s-karty__foot) {
	margin-bottom: 0;
}

.s-karty.is-oferta .s-karty__body .s-karty__text {
	margin-top: 8px;
}

.s-karty__visual:is(.is-ogloszenie, .is-kontrola) {
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	height: 96px;
	padding: 14px 16px;
	border-radius: 16px;
}

.s-karty__visual.is-kontrola {
	gap: 9px;
}

.s-karty__visual.is-ogloszenie .s-karty__ad-row {
	gap: 8px;
}

.s-karty__ad-tag.is-offer {
	padding: 2px 7px;
}

.s-karty__visual.is-kontrola .s-karty__check {
	gap: 10px;
}

.s-karty__check-state {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.s-karty__foot-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
}

@media (max-width: 1060px) {
	.s-karty__grid.is-cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 960px) {
	.s-karty__grid.is-cols-2,
	.s-karty__bars {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 900px) {
	.s-karty__grid.is-cols-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 560px) {
	.s-karty__grid.is-cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Cel dotyku 44 px dla linku w stopce karty (design: `data-tap`): wiersz
   18 px + 2 × 13 px (12 px dawało 42 px — sonda mobile, Zadanie 10). */
@media (max-width: 1024px), (pointer: coarse) {
	.s-karty__foot-link {
		display: inline-block;
		margin: -13px 0;
		padding: 13px 0;
	}
}