/*
  TRIKOR — sekcja porównania dwóch maszyn.
  Selektory podwojone (.tkp .tkp__...), bo motyw stylizuje button/a regułami
  o wyższej specyficzności — patrz analogiczny komentarz w doradca.css.
*/

.tkp{
	--tkp-accent:#B98E2E;
	--tkp-ink:#141410;
	--tkp-muted:#585449;
	--tkp-line:rgba(20,20,16,.09);
	font-family:Poppins,system-ui,-apple-system,sans-serif;
	color:var(--tkp-ink);
	max-width:1420px;
	margin:0 auto;
	display:block;
}
.tkp *,.tkp *::before,.tkp *::after{box-sizing:border-box}

.tkp__head{
	display:flex;justify-content:space-between;align-items:flex-end;
	gap:28px;flex-wrap:wrap;padding-bottom:28px;
}
.tkp .tkp__tytul{
	font-family:Outfit,system-ui,sans-serif;font-weight:800;
	font-size:clamp(30px,4vw,54px);line-height:1.03;letter-spacing:-.03em;
	margin:0 0 10px;color:var(--tkp-ink);
}
.tkp .tkp__lead{
	font-size:16.5px;line-height:1.5;color:var(--tkp-muted);font-weight:300;
	margin:0;max-width:60ch;
}

/* --- pigułki wyboru --- */
.tkp__pigulki{display:flex;gap:8px;flex-wrap:wrap}
.tkp .tkp__pigulka{
	-webkit-appearance:none;appearance:none;
	display:inline-block;
	font-family:inherit;font-size:14px;font-weight:500;line-height:1.25;
	letter-spacing:normal;text-transform:none;
	margin:0;padding:11px 18px;
	border-radius:999px;white-space:nowrap;cursor:pointer;
	background-color:#fff;color:#3D3A32;
	border:1px solid rgba(20,20,16,.14);
	box-shadow:none;
	transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.tkp .tkp__pigulka:hover{background-color:#fff;color:#3D3A32;border-color:rgba(20,20,16,.4)}
.tkp .tkp__pigulka[aria-pressed="true"],
.tkp .tkp__pigulka[aria-pressed="true"]:hover{
	background-color:var(--tkp-ink);color:#fff;border-color:var(--tkp-ink);cursor:default;
}
.tkp .tkp__pigulka:focus-visible{outline:2px solid var(--tkp-accent);outline-offset:3px}

/* --- karty --- */
.tkp__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.tkp__karta{
	background:#fff;border:1px solid var(--tkp-line);border-radius:32px;overflow:hidden;
	box-shadow:0 22px 60px -46px rgba(20,20,16,.5);
	display:flex;flex-direction:column;
}
.tkp__okladka{
	aspect-ratio:16/9;position:relative;
	background:#F1EDE5 center/cover no-repeat;
}
.tkp__body{padding:26px 28px;display:flex;flex-direction:column;flex:1}
.tkp .tkp__nazwa{
	font-family:Outfit,system-ui,sans-serif;font-weight:800;font-size:27px;
	letter-spacing:-.03em;margin:0 0 4px;line-height:1.1;color:var(--tkp-ink);
}
.tkp .tkp__rodzaj{font-size:14px;color:var(--tkp-muted);font-weight:300;margin:0 0 18px;line-height:1.4}

/* --- wiersze parametrów --- */
.tkp__specs{margin:0;display:flex;flex-direction:column;gap:2px}
.tkp__spec{
	display:flex;justify-content:space-between;align-items:baseline;gap:12px;
	padding:11px 13px;border-radius:14px;background:transparent;
	min-height:44px; /* trzyma wyrównanie wierszy między kartami przy zawinięciu */
}
.tkp__spec--diff{background:rgba(185,142,46,.15)}
.tkp .tkp__spec dt{color:var(--tkp-muted);font-weight:300;font-size:14px;margin:0}
.tkp .tkp__spec dd{font-weight:500;font-size:15.5px;margin:0;text-align:right;color:var(--tkp-ink)}

.tkp__cena{display:flex;align-items:baseline;gap:10px;margin:20px 0 16px}
.tkp .tkp__cena strong{
	font-family:Outfit,system-ui,sans-serif;font-weight:800;font-size:30px;
	letter-spacing:-.03em;color:var(--tkp-ink);
}
.tkp .tkp__cena span{font-size:13.5px;color:var(--tkp-muted);font-weight:300}

.tkp__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.tkp .tkp__btn{
	display:inline-block;font-size:14.5px;border-radius:999px;line-height:1.2;
	text-decoration:none;cursor:pointer;
}
.tkp .tkp__btn--dark{
	background-color:var(--tkp-ink);color:#fff;font-weight:500;
	padding:14px 24px;border:1px solid var(--tkp-ink);
}
.tkp .tkp__btn--dark:hover{background-color:#2b2a23;color:#fff;text-decoration:none}
.tkp .tkp__btn--ghost{
	background-color:transparent;color:var(--tkp-ink);font-weight:400;
	padding:14px 20px;border:1px solid rgba(20,20,16,.16);
}
.tkp .tkp__btn--ghost:hover{border-color:var(--tkp-ink);color:var(--tkp-ink);text-decoration:none}

.tkp .tkp__hint{font-size:13.5px;color:var(--tkp-muted);font-weight:300;padding-top:14px;margin:0}

@media (max-width:880px){
	.tkp__grid{grid-template-columns:1fr}
	.tkp__spec{min-height:0}
	.tkp__body{padding:22px}
}