/* PoloniaHub — komponenty sekcji. Wydzielone z style.css, bo skaner
   hostingu odrzuca przez FTP pliki powyżej ~15 KB. */

/* ==========================================================================
   Komponenty strony głównej
   Strona główna jest zbudowana z bloków HTML opartych wyłącznie na tych
   klasach i na zmiennych z systemu projektowego. Żadnych wartości wpisanych
   w treści strony — zmiana wyglądu odbywa się tutaj, nie w edytorze.
   ========================================================================== */

/* --- Hero --------------------------------------------------------------- */

.ph-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(32px, 2rem + 2vw, 64px);
	align-items: center;
	padding-block: clamp(20px, 1rem + 1.2vw, 36px);
}

@media (max-width: 900px) {
	.ph-hero { grid-template-columns: 1fr; }
	/* Na wąskim ekranie ilustracja schodzi pod treść. Nad treścią zajmowała
	   cały pierwszy ekran i spychała nagłówek poniżej krawędzi — użytkownik
	   telefonu widziałby obrazek zamiast oferty. */
	.ph-hero__art { min-height: 240px; }
}

.ph-hero h1 {
	margin: 0 0 var(--ph-gap-title);
	/* Na stronie głównej nagłówek dostaje własny, nieco niższy sufit niż
	   globalne 72 px. Przy 72 px pierwsza linia nie mieściła się w kolumnie
	   i tytuł łamał się na cztery wiersze zamiast dwóch. */
	font-size: var(--ph-h1);
}

.ph-hero__lead {
	/* Jedyne miejsce, gdzie tekst jest większy niż 17 px — akapit
	   wprowadzający ma prowadzić wzrok od nagłówka do przycisku. */
	max-width: var(--ph-measure-lead);
	margin: 0 0 var(--ph-gap-cta);
	font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
	color: var(--ph-body);
}

.ph-hero__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	margin: var(--ph-gap-title) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--ph-small);
	color: var(--ph-body);
}

.ph-hero__checks li { display: flex; align-items: center; gap: 8px; }
.ph-hero__checks svg { flex: 0 0 auto; color: var(--ph-success); }

.ph-hero__note { margin-top: 20px; }

/* Ilustracja: warstwy dokumentów z pieczęcią. Rysowana w SVG, bo dzięki temu
   skaluje się bez utraty jakości, waży kilka kilobajtów i nie wymaga zdjęcia,
   którego jeszcze nie ma. Do podmiany na fotografię, gdy się pojawi. */
.ph-hero__art { display: flex; justify-content: center; }
.ph-hero__art svg { width: 100%; max-width: 520px; height: auto; }

/* --- Pasek zaufania ----------------------------------------------------- */

.ph-trustbar {
	border-block: 1px solid var(--ph-border);
	background: var(--ph-surface);
}

.ph-trustbar ul {
	display: grid;
	/* Trzy kolumny, nie sześć. Kontener ma stałe 1200 px, więc przy sześciu
	   kolumnach na pozycję zostaje 180 px — za mało na "Apostille &
	   translation", które łamało się na dwie linijki i psuło równy rząd.
	   Dwa rzędy po trzy są równe na każdej szerokości. */
	grid-template-columns: repeat(3, 1fr);
	gap: 12px 24px;
	margin: 0;
	padding: 18px 0;
	list-style: none;
	font-size: var(--ph-small);
	color: var(--ph-muted);
}

@media (max-width: 620px) { .ph-trustbar ul { grid-template-columns: repeat(2, 1fr); } }

.ph-trustbar li { display: flex; align-items: center; gap: 8px; line-height: 1.35; }
.ph-trustbar svg { flex: 0 0 auto; color: var(--ph-cta); }

/* --- Nagłówki sekcji ---------------------------------------------------- */

.ph-eyebrow {
	display: block;
	margin-bottom: 12px;
	font-family: var(--ph-font-body);
	font-size: var(--ph-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ph-cta);
}

/* Nagłówek sekcji: jedna kolumna, do lewej.
   Układ dwukolumnowy (tytuł po lewej, akapit po prawej) dobrze wygląda na
   makiecie, ale na laptopie się rozjeżdża: nagłówek łamie się inaczej niż
   akapit i linie bazowe przestają się zgadzać. Jedna kolumna zawsze się
   wyrównuje, niezależnie od długości tekstu i szerokości okna. */
.ph-sectionhead {
	margin-bottom: var(--ph-gap-title);
}

.ph-sectionhead h2 { margin: 0 0 16px; }

.ph-sectionhead p {
	margin: 0;
	max-width: var(--ph-measure-lead);
}

/* --- Karty usług -------------------------------------------------------- */

.ph-group + .ph-group { margin-top: 26px; }

.ph-group__label {
	margin: 0 0 18px;
	font-family: var(--ph-font-body);
	font-size: var(--ph-small);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ph-primary);
}

.ph-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.ph-service {
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--ph-surface);
	border: 1px solid var(--ph-border);
	border-radius: var(--ph-radius);
	padding: 18px;
	transition: border-color var(--ph-transition), box-shadow var(--ph-transition);
}

.ph-service:hover {
	border-color: var(--ph-accent-light);
	box-shadow: 0 6px 24px rgba(13, 43, 107, 0.08);
}

.ph-service__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--ph-radius-input);
	background: #E8EEFB;
	color: var(--ph-cta);
}

.ph-service h3 {
	margin: 0;
	font-family: var(--ph-font-body);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ph-heading);
}

.ph-service p {
	margin: 0;
	font-size: 1rem;
	color: var(--ph-body);
}

.ph-service__link {
	margin-top: auto;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ph-cta);
	text-decoration: none;
}
.ph-service__link:hover { text-decoration: underline; }
.ph-service__link::after { content: " →"; }

/* --- Kroki -------------------------------------------------------------- */

.ph-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 18px;
	counter-reset: step;
}

.ph-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--ph-cta);
	color: var(--ph-surface);
	font-family: var(--ph-font-body);
	font-size: 1.125rem;
	font-weight: 600;
}

.ph-step h3 {
	margin: 0 0 8px;
	font-family: var(--ph-font-body);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ph-heading);
}

.ph-step p { margin: 0; font-size: 1rem; }

/* --- Sekcja wyróżniona (obywatelstwo) ----------------------------------- */

.ph-featured {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(28px, 1.5rem + 2vw, 56px);
	background: var(--ph-surface);
	border: 1px solid var(--ph-border);
	border-radius: var(--ph-radius);
	padding: clamp(24px, 1rem + 3vw, 48px);
}

.ph-list { margin: 0; padding: 0; list-style: none; }
.ph-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	font-size: 1rem;
	color: var(--ph-body);
}
.ph-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--ph-cta); }
.ph-list--checks svg { color: var(--ph-success); }

/* --- Dlaczego my -------------------------------------------------------- */

.ph-why {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 24px;
}

.ph-why h3 {
	margin: 0 0 8px;
	font-family: var(--ph-font-body);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--ph-heading);
}
.ph-why p { margin: 0; font-size: 1rem; }

/* --- Opinie ------------------------------------------------------------- */

.ph-quotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
}

.ph-quote {
	display: flex;
	flex-direction: column;
	gap: 16px;
	background: var(--ph-surface);
	border: 1px solid var(--ph-border);
	border-radius: var(--ph-radius);
	padding: 24px;
}

.ph-quote blockquote {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--ph-heading-3);
}

.ph-quote figcaption {
	margin-top: auto;
	font-size: var(--ph-small);
	color: var(--ph-muted);
}
.ph-quote figcaption strong { display: block; color: var(--ph-heading-3); font-weight: 600; }

/* --- FAQ ------------------------------------------------------------------
   Płaska lista z liniami rozdzielającymi, bez zmiany tła i bez obramowania
   po otwarciu. Wcześniej otwarta pozycja zamieniała się w pływającą kartę
   z ramką — sąsiednie wiersze przeskakiwały, a lista traciła rytm.

   Zbudowane na <details>, więc działa bez JavaScriptu, a treść odpowiedzi
   jest w kodzie od razu — istotne, bo Google czyta ją do wyników
   rozszerzonych. */

.ph-faq { max-width: 820px; }

.ph-faq details {
	border-bottom: 1px solid var(--ph-border);
}

.ph-faq summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 20px;
	padding: 14px 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--ph-font-body);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ph-heading);
	transition: color var(--ph-transition);
}

.ph-faq summary:hover { color: var(--ph-cta); }
.ph-faq summary::-webkit-details-marker { display: none; }

/* Znak zamiast strzałki: nie obraca się, więc nie skacze przy otwarciu. */
.ph-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	width: 18px;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	color: var(--ph-cta);
}

.ph-faq details[open] summary { color: var(--ph-cta); }
.ph-faq details[open] summary::after { content: "\2212"; }

.ph-faq details > p,
.ph-faq details > div {
	margin: 0;
	padding: 0 38px 16px 0;
	max-width: var(--ph-measure);
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--ph-body);
}

/* --- Wezwanie końcowe --------------------------------------------------- */

.ph-cta-band {
	background: var(--ph-primary);
	border-radius: var(--ph-radius);
	padding: clamp(32px, 1.5rem + 3vw, 64px);
	text-align: center;
}

.ph-cta-band h2 { color: var(--ph-surface); margin: 0 0 16px; }
.ph-cta-band .ph-eyebrow { color: var(--ph-accent-light); }
.ph-cta-band p {
	max-width: 52ch;
	margin: 0 auto var(--ph-gap-cta);
	color: #C7D3EE;
}
.ph-cta-band .ph-actions { justify-content: center; }
.ph-cta-band .ph-btn--secondary { border-color: var(--ph-surface); color: var(--ph-surface); }
.ph-cta-band .ph-btn--secondary:hover { background: rgba(255, 255, 255, 0.12); }

/* ==========================================================================
   Strony z treścią: artykuły bazy wiedzy i strony usług
   ========================================================================== */

/* Tytuł wpisu był mniejszy (33 px) niż nagłówki sekcji w jego wnętrzu (36 px),
   czyli hierarchia była odwrócona. Tytuł dostaje 44 px, a nagłówki w treści
   schodzą do 28 px — w artykule mają porządkować tekst, a nie z nim
   konkurować. Na stronie głównej H2 zostaje przy 36 px, bo tam otwiera
   całe sekcje. */
body.single .entry-title,
body.single .entry-hero h1 {
	font-size: clamp(1.875rem, 1.55rem + 1.45vw, 2.75rem);   /* 30 → 44 px */
	line-height: 1.15;
}

body.single .entry-content h2 {
	font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);     /* 22 → 28 px */
	margin-top: 40px;
	margin-bottom: 16px;
}

body.single .entry-content h3 {
	font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);  /* 18 → 22 px */
	margin-top: 32px;
	margin-bottom: 12px;
}

/* Miara tekstu w artykule. Bez tego wiersz sięgał 79 znaków — powyżej 75
   oko gubi początek następnej linii, a przy tekstach czytanych w drugim
   języku kosztuje to podwójnie. */
body.single .entry-content p,
body.single .entry-content li {
	max-width: var(--ph-measure);
}

body.single .entry-content p { margin-bottom: 20px; }
body.single .entry-content li { margin-bottom: 8px; }

body.single .entry-content img {
	border-radius: var(--ph-radius);
	border: 1px solid var(--ph-border);
}

/* Wykluczamy przyciski: to też są znaczniki <a>, a ta reguła nadpisywała
   ich biały napis kolorem odnośnika — napis stawał się niebieski na
   niebieskim tle i przycisk wyglądał na pusty. */
body.single .entry-content a:not(.ph-btn):not(.kb-button):not(.kt-button):not(.wp-block-button__link):not(.ph-service__link) {
	color: var(--ph-cta);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Spis treści obok artykułu */
.entry-content .kb-table-of-content-wrap,
.kb-table-of-content-wrap {
	border-radius: var(--ph-radius);
	border: 1px solid var(--ph-border);
	background: var(--ph-surface);
}