/**
 * Sekcja: modele współpracy (zakładki).
 * Figma 14557:3930 — kontener 1280, nagłówek 40/48 + lead 16/24 (y=64),
 * lista zakładek 436×488 (karty 110, odstęp 16) i panel 826 w odstępie 24 od y=136.
 * Zakładka: wnętrze 20, numer 18/27, nazwa 24/33,6, podpis 18/27 w odstępie 16,
 * ikona 42×42 przy prawej krawędzi. Zakładka aktywna: zieleń primary, tekst biały.
 * Panel: tło F2F6F9, wnętrze 32, nazwa modelu 24/33,6, plakietka 14/21,
 * nagłówek 32/41,6 w kolumnie 259,5, opis 18/27 w kolumnie 482 (odstęp 20),
 * cytat 18/27 z zieloną linią, cztery wiersze parametrów 72 (etykieta 160 + 582),
 * przycisk 160×56 u dołu.
 */

.usluga-models {
	background-color: var(--color-surface);
	padding-block: 100px;
}

.usluga-models__title {
	margin: 0;
	color: var(--color-title);
}

.usluga-models__lead {
	margin: 16px 0 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
	color: var(--color-ink);
}

.usluga-models__tabs {
	display: grid;
	grid-template-columns: 436px minmax(0, 1fr);
	gap: var(--space-md);
	margin-top: 48px;
	align-items: start;
}

/* --- lista zakładek --- */

.usluga-models__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.usluga-models__tab {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 42px;
	align-items: center;
	gap: 9px 12px;
	min-height: 110px;
	padding: 20px;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast),
		color var(--transition-fast);
}

.usluga-models__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

.usluga-models__tab-head {
	display: flex;
	align-items: baseline;
	gap: var(--space-xs);
	grid-column: 1;
}

.usluga-models__tab-number {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-muted);
}

.usluga-models__tab-name {
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-heading);
	color: var(--color-ink);
}

.usluga-models__tab-summary {
	grid-column: 1;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-ink);
}

.usluga-models__tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	grid-column: 2;
	grid-row: 1 / span 2;
	width: 42px;
	height: 42px;
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-soft);
	color: var(--color-ink);
}

.usluga-models__tab-icon svg {
	width: 16px;
	height: 16px;
}

.usluga-models__tab:hover {
	border-color: var(--color-border-mint);
}

/* Stan aktywny i focus są bezindeksowe — :has() patrzy na własny input zakładki. */
.usluga-models__tab:has(.usluga-models__radio:checked) {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
}

.usluga-models__tab:has(.usluga-models__radio:checked) .usluga-models__tab-number,
.usluga-models__tab:has(.usluga-models__radio:checked) .usluga-models__tab-name,
.usluga-models__tab:has(.usluga-models__radio:checked) .usluga-models__tab-summary {
	color: var(--color-white);
}

.usluga-models__tab:has(.usluga-models__radio:checked) .usluga-models__tab-icon {
	background-color: var(--color-mint);
	color: var(--color-primary);
}

.usluga-models__tab:has(.usluga-models__radio:focus-visible) {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* --- panel --- */

.usluga-models__panels {
	display: grid;
}

.usluga-models__panel {
	display: none;
	grid-area: 1 / 1;
	padding: 32px;
	border: 1px solid var(--color-hairline);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface-soft);
}

/* Widoczność panelu wymaga powiązania indeksu zakładki z indeksem panelu — jedyne
   miejsce w tej sekcji z regułami per indeks. Obsłużone osiem zakładek, tyle ile
   dopuszcza repeater (szablon obcina listę do ośmiu). */
.usluga-models__tabs:has(.usluga-models__list > :nth-child(1) .usluga-models__radio:checked) .usluga-models__panel:nth-child(1),
.usluga-models__tabs:has(.usluga-models__list > :nth-child(2) .usluga-models__radio:checked) .usluga-models__panel:nth-child(2),
.usluga-models__tabs:has(.usluga-models__list > :nth-child(3) .usluga-models__radio:checked) .usluga-models__panel:nth-child(3),
.usluga-models__tabs:has(.usluga-models__list > :nth-child(4) .usluga-models__radio:checked) .usluga-models__panel:nth-child(4),
.usluga-models__tabs:has(.usluga-models__list > :nth-child(5) .usluga-models__radio:checked) .usluga-models__panel:nth-child(5),
.usluga-models__tabs:has(.usluga-models__list > :nth-child(6) .usluga-models__radio:checked) .usluga-models__panel:nth-child(6),
.usluga-models__tabs:has(.usluga-models__list > :nth-child(7) .usluga-models__radio:checked) .usluga-models__panel:nth-child(7),
.usluga-models__tabs:has(.usluga-models__list > :nth-child(8) .usluga-models__radio:checked) .usluga-models__panel:nth-child(8) {
	display: block;
}

/* Przeglądarka bez :has() pokazuje pierwszy panel — treść zostaje dostępna. */
@supports not selector(:has(*)) {
	.usluga-models__panel:first-child {
		display: block;
	}
}

.usluga-models__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
}

.usluga-models__panel-name {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h5);
	font-weight: 400;
	line-height: var(--lh-h5);
	letter-spacing: var(--ls-heading);
	color: var(--color-primary);
}

.usluga-models__badge {
	margin: 0;
	padding: 8px var(--space-sm);
	border-radius: var(--radius-pill);
	background-color: var(--color-white);
	font-size: var(--fs-small);
	line-height: 21px;
	color: var(--color-primary);
}

.usluga-models__panel-body {
	display: grid;
	grid-template-columns: 259px minmax(0, 1fr);
	gap: 20px;
	margin-top: 41px;
}

.usluga-models__panel-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-h4);
	font-weight: 400;
	line-height: var(--lh-h4);
	letter-spacing: var(--ls-heading);
	color: var(--color-black);
}

.usluga-models__panel-text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 30px;
}

.usluga-models__description {
	margin: 0;
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-black);
}

.usluga-models__details.btn--text {
	color: var(--color-primary);
}

.usluga-models__details.btn--text:hover {
	color: var(--color-primary-bright);
}

.usluga-models__quote {
	margin: 41px 0 0;
	padding-left: 14px;
	border-left: 1px solid var(--color-primary);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-primary);
}

.usluga-models__params {
	margin: 41px 0 0;
}

.usluga-models__param {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	align-items: start;
	gap: 20px;
	padding-block: 12px;
	border-bottom: 1px solid var(--color-hairline);
}

.usluga-models__param-label {
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
	color: var(--color-primary);
}

.usluga-models__param-value {
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-body);
	color: var(--color-ink);
}

.usluga-models__cta {
	margin-top: 41px;
}

@media (max-width: 1199px) {
	.usluga-models__tabs {
		grid-template-columns: minmax(0, 1fr);
	}

	.usluga-models__panel-body {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.usluga-models__panel {
		padding: var(--space-md);
	}

	.usluga-models__param {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-xs);
	}
}