/*
 * Style bloku "Tabela porównawcza".
 * Zakres wyłącznie: .wp-block-gg-konsulting-theme-tabela-porownawcza
 *
 * Kolor akcentu (--gg-accent) pochodzi automatycznie ze sfery strony
 * (inc/sphere.php) - blok go tylko czyta. Tła wyróżnień liczy
 * color-mix() z tej samej zmiennej, więc tabela wygląda spójnie
 * pod każdym z trzech korzeni URL i pod neutralną wartością domyślną.
 */

.wp-block-gg-konsulting-theme-tabela-porownawcza {
	position: relative;
	/*
	 * Pełna szerokość okna - identyczna zasada jak w pozostałych sekcjach.
	 * !important przebija "margin: auto !important" z układu constrained.
	 */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
	margin-top: 0 !important;
	background-color: var( --wp--preset--color--base );
	color: var( --wp--preset--color--primary );
	padding-block: clamp( 3rem, 6vw, 6rem );
	padding-inline: clamp( 1rem, 2.5vw, 2.5rem );
}

/* Wariant ciemny - sekcja na kolorze marki. */
.wp-block-gg-konsulting-theme-tabela-porownawcza.is-dark {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__inner {
	max-width: 1200px;
	margin-inline: auto;
}

/* --- Nagłówek sekcji --- */

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__header {
	max-width: 860px;
	margin: 0 auto clamp( 2rem, 4vw, 3rem );
	text-align: center;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__kicker {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 0.4rem;
	font-family: var( --wp--preset--font-family--raleway );
	font-size: clamp( 14px, 1.4vw, 18px );
	font-weight: 700;
	color: inherit;
	margin: 0 0 0.5rem;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__kicker-sep {
	color: #a67c52;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza.is-dark .porownanie__kicker-sep {
	color: #c9a37a;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__heading {
	font-size: clamp( 1.9rem, 3vw, 2.75rem );
	font-weight: 800;
	line-height: 1.2;
	color: inherit;
	margin: 0 0 1rem;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza.is-dark .porownanie__heading {
	color: var( --wp--preset--color--base );
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__accent {
	color: var( --gg-accent );
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__lead {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.65;
	color: inherit;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__lead p {
	margin: 0;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__lead p + p {
	margin-top: 1rem;
}

/* --- Tabela --- */

/*
 * Przewijanie w poziomie zamknięte w kontenerze sekcji - szeroka tabela
 * nigdy nie rozjeżdża całej strony.
 */
.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__scroll {
	overflow-x: auto;
	border-radius: 10px;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table {
	width: 100%;
	border-collapse: collapse;
	background-color: #ffffff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba( 43, 27, 58, 0.08 );
	font-size: 1.05rem;
	line-height: 1.55;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza.is-dark .porownanie__table {
	background-color: rgba( 245, 239, 230, 0.04 );
	box-shadow: none;
	border: 1px solid rgba( 245, 239, 230, 0.18 );
}

/* Opis tabeli dla czytników ekranu - poza widokiem, ale w drzewie dostępności. */
.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table thead th {
	background-color: var( --wp--preset--color--primary );
	color: var( --wp--preset--color--base );
	font-family: var( --wp--preset--font-family--heading );
	font-size: 1.05rem;
	font-weight: 700;
	text-align: left;
	padding: clamp( 1rem, 1.6vw, 1.35rem ) clamp( 1rem, 1.8vw, 1.5rem );
	vertical-align: bottom;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza.is-dark .porownanie__table thead th {
	background-color: rgba( 245, 239, 230, 0.1 );
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table thead th + th {
	border-left: 1px solid rgba( 245, 239, 230, 0.16 );
}

/*
 * Wyróżniona kolumna: nagłówek na pełnym akcencie. Tekst schodzi na
 * kolor marki - akcent jest jasny, więc kremowy tekst nie miałby na nim
 * wymaganego kontrastu.
 */
.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table thead th.is-highlight {
	background-color: var( --gg-accent );
	color: var( --wp--preset--color--primary );
}

@media ( min-width: 768px ) {
	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table thead th:first-child {
		width: 22%;
	}
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table td,
.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody th {
	padding: clamp( 0.9rem, 1.5vw, 1.25rem ) clamp( 1rem, 1.8vw, 1.5rem );
	border-bottom: 1px solid var( --wp--preset--color--muted );
	vertical-align: top;
	text-align: left;
	font-weight: 400;
	color: var( --wp--preset--color--primary );
}

.wp-block-gg-konsulting-theme-tabela-porownawcza.is-dark .porownanie__table td,
.wp-block-gg-konsulting-theme-tabela-porownawcza.is-dark .porownanie__table tbody th {
	border-bottom-color: rgba( 245, 239, 230, 0.14 );
	color: var( --wp--preset--color--base );
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody tr:last-child td,
.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody tr:last-child th {
	border-bottom: 0;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__row-label {
	font-family: var( --wp--preset--font-family--heading );
	/* !important przebija wspólną regułę font-weight dla wszystkich komórek. */
	font-weight: 700 !important;
}

/* --- Wyróżnienie: kolumna albo cały wiersz --- */

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table td.is-highlight,
.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody tr.is-highlight th,
.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody tr.is-highlight td {
	/* Zapas dla przeglądarek bez color-mix(). */
	background-color: rgba( 43, 27, 58, 0.05 );
	background-color: color-mix( in srgb, var( --gg-accent ) 18%, transparent );
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table td.is-highlight {
	font-weight: 600;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody tr.is-highlight th {
	box-shadow: inset 4px 0 0 var( --gg-accent );
}

/* --- Akapit zamykający --- */

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__footnote {
	max-width: 78ch;
	margin: clamp( 1.75rem, 3vw, 2.5rem ) auto 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.7;
	color: inherit;
	opacity: 0.9;
	text-align: center;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__footnote p {
	margin: 0;
}

.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__footnote p + p {
	margin-top: 1rem;
}

/* --- Wersja mobilna: wiersz zamienia się w kartę --- */

@media ( max-width: 767px ) {
	/* Minimum 18px dla treści czytanej na telefonie. */
	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table {
		font-size: 1.125rem;
		background: none;
		box-shadow: none;
		border: 0;
		overflow: visible;
	}

	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table,
	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody,
	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tr,
	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table td,
	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody th {
		display: block;
		width: auto;
	}

	/*
	 * Nagłówki kolumn znikają z widoku - ich treść wraca jako podpis nad
	 * komórką (data-label), więc nie powtarzamy ich nad każdą kartą.
	 * Zostają w drzewie dostępności dla czytników ekranu.
	 */
	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 0, 0, 0, 0 );
		white-space: nowrap;
	}

	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody tr {
		background-color: #ffffff;
		border: 1px solid var( --wp--preset--color--muted );
		border-radius: 10px;
		margin-bottom: 1rem;
		overflow: hidden;
	}

	.wp-block-gg-konsulting-theme-tabela-porownawcza.is-dark .porownanie__table tbody tr {
		background-color: rgba( 245, 239, 230, 0.06 );
		border-color: rgba( 245, 239, 230, 0.18 );
	}

	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody th {
		background-color: var( --wp--preset--color--primary );
		/* !important przebija regułę koloru komórek w wariancie jasnym. */
		color: var( --wp--preset--color--base ) !important;
		font-size: 1.15rem;
		border-bottom: 0;
	}

	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody tr.is-highlight th {
		background-color: var( --gg-accent );
		color: var( --wp--preset--color--primary ) !important;
		box-shadow: none;
	}

	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table td[data-label]::before {
		content: attr( data-label );
		display: block;
		font-family: var( --wp--preset--font-family--heading );
		font-size: 0.85rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		opacity: 0.65;
		margin-bottom: 0.25rem;
	}

	.wp-block-gg-konsulting-theme-tabela-porownawcza .porownanie__table tbody tr:last-child td:last-child {
		border-bottom: 0;
	}
}