/* Bloki treści hasła słowniczka HR.
 *
 * Własne klasy zamiast utility Tailwinda — Tailwind ładuje się z CDN i kompiluje
 * po przeskanowaniu DOM, a compat.css potrafi nadpisywać jego klasy. Scoped CSS
 * daje przewidywalny wygląd niezależnie od kolejności ładowania.
 *
 * Tokeny z systemu: primary #2e3fb1, primary-700 #171e6c, secondary #E4EEFA,
 * nagłówki PolySans, treść Mabry Pro.
 */

/* --- W skrócie ------------------------------------------------------------ */
/* Cicho, ale pierwsze w kolejności czytania. Ma trafiać do snippetu, nie krzyczeć. */
.gb-tldr {
	border-left: 3px solid #2e3fb1;
	background: #E4EEFA;
	border-radius: 0 .75rem .75rem 0;
	padding: 1rem 1.25rem;
	margin: 0 0 2rem;
}
.gb-tldr__label {
	display: block;
	font-family: "PolySans", system-ui, sans-serif;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #2e3fb1;
	margin-bottom: .35rem;
}
.gb-tldr__text {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: #171e6c;
}

/* --- Podstawa prawna ------------------------------------------------------ */
/* Element sygnaturowy strony. Konkurencyjne słowniczki podają definicję bez
   źródła — tutaj artykuł jest wyeksponowany typograficznie jak dane, nie proza. */
.gb-legal {
	border: 1px solid rgba(46, 63, 177, .18);
	border-radius: .75rem;
	padding: 1.25rem 1.5rem;
	margin: 0 0 2rem;
	background: #fff;
}
.gb-legal__head {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .9rem;
}
.gb-legal__icon {
	width: 1.25rem;
	height: 1.25rem;
	color: #2e3fb1;
	flex-shrink: 0;
}
.gb-legal__title {
	font-size: 1rem !important;
	font-weight: 700;
	margin: 0 !important;
	color: #171e6c;
}
.gb-legal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .75rem;
}
.gb-legal__item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .5rem .75rem;
	padding-bottom: .75rem;
	border-bottom: 1px solid rgba(46, 63, 177, .08);
}
.gb-legal__item:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}
/* Numer artykułu jako dana — stała szerokość znaku ułatwia skanowanie wzrokiem. */
.gb-legal__art {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	color: #2e3fb1;
	white-space: nowrap;
}
.gb-legal__act { color: #171e6c; }
.gb-legal__note {
	flex-basis: 100%;
	font-size: .9375rem;
	color: rgba(23, 30, 108, .7);
}
.gb-legal__link {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-left: auto;
	font-size: .875rem;
	font-weight: 600;
	color: #2e3fb1;
	text-decoration: none;
	white-space: nowrap;
}
.gb-legal__link svg { width: .875rem; height: .875rem; }
.gb-legal__link:hover { text-decoration: underline; }
.gb-legal__date {
	margin: .9rem 0 0;
	font-size: .8125rem;
	color: rgba(23, 30, 108, .6);
}

/* --- Tabela konkretów ----------------------------------------------------- */
/* Klasa .table NIE jest zdefiniowana w compat.css — tabela bez tych reguł
   renderuje się zupełnie bez ramek i oddechu. Stylujemy jak tabele na blogu
   (.type-post table): granatowa główka, siatka, naprzemienne wiersze. */
.gb-facts { margin: 0 0 2rem; }
.gb-facts__caption {
	font-size: 1.125rem !important;
	font-weight: 700;
	margin: 0 0 .75rem !important;
}
/* Szerokie tabele przewijają się we własnym kontenerze — strona nigdy w poziomie. */
.gb-facts__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: .5rem;
}
.gb-facts__scroll table {
	width: 100%;
	min-width: 34rem;
	margin: 0;
	border-collapse: collapse;
	font-size: .9375rem;
	background: #fff;
}
.gb-facts__scroll thead {
	background: #2e3fb1;
	color: #fff;
}
.gb-facts__scroll th {
	padding: .75rem 1rem;
	text-align: left;
	font-weight: 700;
	border: 1px solid #2e3fb1;
	white-space: nowrap;
}
.gb-facts__scroll td {
	padding: .7rem 1rem;
	border: 1px solid rgba(46, 63, 177, .15);
	vertical-align: top;
	color: #1f2540;
}
.gb-facts__scroll tbody tr:nth-child(even) { background: rgba(228, 238, 250, .45); }
/* Pierwsza kolumna to etykieta wiersza — nie powinna zlewać się z wartością. */
.gb-facts__scroll td:first-child { font-weight: 600; }
/* Liczby czyta się w kolumnie, więc stała szerokość cyfry. */
.gb-facts__scroll td strong { font-variant-numeric: tabular-nums; color: #171e6c; }
.gb-facts__scroll td sup { font-size: .7em; }

/* --- Przykład z praktyki -------------------------------------------------- */
.gb-example {
	border-radius: .75rem;
	padding: 1.25rem 1.5rem;
	margin: 0 0 2rem;
	background: rgba(229, 253, 197, .45); /* tertiary #e5fdc5, wyciszony */
}
.gb-example__head {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: .6rem;
}
.gb-example__icon { width: 1.25rem; height: 1.25rem; color: #3f6212; flex-shrink: 0; }
.gb-example__title {
	font-size: 1rem !important;
	font-weight: 700;
	margin: 0 !important;
	color: #1a2e05;
}
.gb-example__body { margin: 0; color: #1a2e05; }
/* Reset globalny zeruje marginesy akapitów — bez tego kolejne <p> zlewają się
   w jeden blok tekstu i cały przykład staje się nieczytelny. */
.gb-example__body p { margin: 0 0 .85rem; line-height: 1.65; }
.gb-example__body :last-child { margin-bottom: 0; }
/* Krok obliczenia — wyróżniony wiersz w ramce, żeby dało się go wyłowić wzrokiem. */
.gb-example__calc {
	margin: 0 0 .85rem;
	padding: .7rem .9rem;
	background: rgba(255, 255, 255, .65);
	border-left: 3px solid #65a30d;
	border-radius: 0 .4rem .4rem 0;
	font-variant-numeric: tabular-nums;
}
.gb-example__calc:last-child { margin-bottom: 0; }

/* --- Treść definicji ------------------------------------------------------ */
/* Reset globalny zeruje marginesy <p>, przez co rozwinięcie definicji czytało się
   jak jeden zbitek tekstu mimo poprawnego podziału na akapity. */
.gb-body p { margin: 0 0 1.1rem; line-height: 1.7; }
.gb-body p:last-child { margin-bottom: 0; }
.gb-body ul, .gb-body ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.gb-body li { margin-bottom: .4rem; line-height: 1.65; }
.gb-body h3 {
	font-size: 1.125rem !important;
	font-weight: 700;
	margin: 1.75rem 0 .6rem !important;
}

/* --- Powiązane pojęcia ---------------------------------------------------- */
/* Wcześniej były to małe pigułki bez kontekstu — łatwe do przeoczenia i nieinformujące,
   dokąd prowadzą. Karta z fragmentem definicji daje powód do kliknięcia. */
.gb-related { margin: 0 0 2.5rem; }
.gb-related__title {
	font-size: 1.25rem !important;
	font-weight: 700;
	margin: 0 0 1rem !important;
}
.gb-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
	gap: .75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gb-related__card {
	display: block;
	height: 100%;
	padding: .9rem 1rem;
	border: 1px solid rgba(46, 63, 177, .18);
	border-radius: .6rem;
	background: #fff;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.gb-related__card:hover,
.gb-related__card:focus-visible {
	border-color: #2e3fb1;
	box-shadow: 0 4px 14px rgba(23, 30, 108, .08);
	transform: translateY(-1px);
	text-decoration: none;
}
.gb-related__name {
	display: block;
	font-weight: 700;
	color: #2e3fb1;
	margin-bottom: .3rem;
	line-height: 1.35;
}
.gb-related__excerpt {
	display: block;
	font-size: .875rem;
	line-height: 1.5;
	color: rgba(31, 37, 64, .72);
}
@media (prefers-reduced-motion: reduce) {
	.gb-related__card { transition: none; }
	.gb-related__card:hover { transform: none; }
}

/* --- Narzędzie ------------------------------------------------------------ */
.gb-tool {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	justify-content: space-between;
	padding: 1.35rem 1.5rem;
	margin: 0 0 2rem;
	border-radius: .75rem;
	background: linear-gradient(135deg, #E4EEFA 0%, #f3f7fd 100%);
	border: 1px solid rgba(46, 63, 177, .16);
}
.gb-tool__copy { flex: 1 1 20rem; min-width: 0; }
.gb-tool__title {
	font-size: 1.0625rem !important;
	font-weight: 700;
	margin: 0 0 .35rem !important;
	color: #171e6c;
}
.gb-tool__text {
	margin: 0;
	font-size: .9375rem;
	line-height: 1.6;
	color: rgba(23, 30, 108, .78);
}
.gb-tool__cta {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	flex-shrink: 0;
	padding: .7rem 1.35rem;
	border-radius: .5rem;
	background: #2e3fb1;
	color: #fff !important;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.gb-tool__cta:hover { background: #25329a; text-decoration: none; }
.gb-tool__cta svg { width: .95rem; height: .95rem; }

/* --- Dark mode ------------------------------------------------------------ */
/* Serwis przełącza motyw klasą na <html> (tailwind darkMode: 'class'). */
.dark .gb-tldr { background: rgba(46, 63, 177, .18); border-left-color: #7c8ce0; }
.dark .gb-tldr__label { color: #b9c3f0; }
.dark .gb-tldr__text { color: #eaecf7; }

.dark .gb-legal { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
.dark .gb-legal__icon,
.dark .gb-legal__art,
.dark .gb-legal__link { color: #b9c3f0; }
.dark .gb-legal__title,
.dark .gb-legal__act { color: #fff; }
.dark .gb-legal__note { color: rgba(255, 255, 255, .7); }
.dark .gb-legal__item { border-bottom-color: rgba(255, 255, 255, .1); }
.dark .gb-legal__date { color: rgba(255, 255, 255, .55); }

.dark .gb-example { background: rgba(229, 253, 197, .1); }
.dark .gb-example__icon { color: #bef264; }
.dark .gb-example__title,
.dark .gb-example__body { color: #ecfccb; }
.dark .gb-example__calc { background: rgba(0, 0, 0, .22); border-left-color: #bef264; }

.dark .gb-facts__scroll table { background: transparent; }
.dark .gb-facts__scroll td { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .12); }
.dark .gb-facts__scroll td strong { color: #fff; }
.dark .gb-facts__scroll tbody tr:nth-child(even) { background: rgba(255, 255, 255, .04); }

.dark .gb-related__card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
.dark .gb-related__card:hover { border-color: #7c8ce0; }
.dark .gb-related__name { color: #b9c3f0; }
.dark .gb-related__excerpt { color: rgba(255, 255, 255, .68); }

.dark .gb-tool {
	background: linear-gradient(135deg, rgba(46, 63, 177, .22) 0%, rgba(46, 63, 177, .1) 100%);
	border-color: rgba(255, 255, 255, .14);
}
.dark .gb-tool__title { color: #fff; }
.dark .gb-tool__text { color: rgba(255, 255, 255, .75); }

/* --- Mobile --------------------------------------------------------------- */
@media (max-width: 640px) {
	.gb-legal { padding: 1rem 1.1rem; }
	.gb-legal__link { margin-left: 0; flex-basis: 100%; }
	.gb-tldr { padding: .9rem 1rem; }
}