/* ==========================================================================
   PoloniaHub — warstwa wizualna sekcji

   Poprzednia wersja była poprawna typograficznie i pusta wizualnie: płaskie
   tło na całej długości strony, brak hierarchii między sekcjami, kroki jako
   luźne akapity. Ten plik dokłada to, co odróżnia stronę złożoną od strony
   zaprojektowanej — rytm teł, głębię, prowadzenie wzroku.

   Wszystko z tokenów systemu. Bez mocnych gradientów: to ma wyglądać jak
   wiarygodna usługa dokumentowa, nie jak startup technologiczny. Głębia
   pochodzi z obramowań, delikatnych cieni i rytmu teł, nie z przejść
   kolorystycznych.
   ========================================================================== */

/* --- Rytm sekcji --------------------------------------------------------
   Naprzemienne tła dzielą stronę na czytelne pasma. Bez tego dziesięć
   sekcji na jednym tle czyta się jak jedna bardzo długa sekcja. */

.ph-section--alt { background: var(--ph-surface); }

.ph-hero-wrap {
	background: var(--ph-bg);
}

/* --- Nadtytuł z kreską --------------------------------------------------- */
/* inline-flex, nie blok: inaczej w sekcji wyśrodkowanej kreska zostaje
   przyklejona do lewej krawędzi kontenera, metr od własnego tekstu. */

.ph-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	position: relative;
}

.ph-eyebrow::before {
	position: static;
	flex: 0 0 auto;
}

.ph-eyebrow::before {
	content: "";
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background: var(--ph-cta);
}

/* --- Karty usług: głębia i akcent przy najechaniu ------------------------ */

.ph-service {
	position: relative;
	overflow: hidden;
	transition: transform var(--ph-transition),
	            border-color var(--ph-transition),
	            box-shadow var(--ph-transition);
}

/* Pasek akcentu wjeżdża od lewej — sygnał, że karta jest klikalna,
   bez migotania kolorem całej ramki. */
.ph-service::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--ph-cta);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.ph-service:hover::after,
.ph-service:focus-within::after { transform: scaleX(1); }

.ph-service:hover,
.ph-service:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(13, 43, 107, 0.10);
	border-color: #D6E0F5;
}

.ph-service__icon {
	background: #EEF3FD;
	border: 1px solid #DCE6FA;
}

.ph-service__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ph-service__link::after {
	content: "→";
	transition: transform var(--ph-transition);
}

.ph-service:hover .ph-service__link::after { transform: translateX(3px); }

/* --- Etykieta grupy usług ------------------------------------------------ */

.ph-group__label {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ph-group__label::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ph-border);
}

/* --- Kroki jako oś czasu -------------------------------------------------
   Cztery numery bez połączenia to cztery osobne akapity. Linia biegnąca
   za numerami mówi, że to jeden proces w kolejności. */

.ph-steps { position: relative; }

.ph-steps::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: linear-gradient(90deg,
		transparent, var(--ph-border) 10%, var(--ph-border) 90%, transparent);
}

@media (max-width: 900px) { .ph-steps::before { display: none; } }

.ph-step { position: relative; }

/* Obwódka w kolorze tła robi przerwę w linii dokładnie pod numerem. */
.ph-step__num {
	box-shadow: 0 0 0 8px var(--ph-surface);
	background: var(--ph-primary);
}

/* --- Sekcja wyróżniona --------------------------------------------------- */

.ph-featured {
	background: var(--ph-surface);
	align-items: start;
}

/* Prawa kolumna dostaje własne tło. Wcześniej lista wisiała w pustce
   i dół sekcji zostawał pusty na jedną trzecią wysokości. */
.ph-featured__aside {
	background: #F4F7FD;
	border: 1px solid #E1E9F8;
	border-radius: var(--ph-radius);
	padding: 24px;
}

.ph-featured__aside h3 { margin-bottom: 8px; }

.ph-featured__aside .ph-list li {
	padding: 9px 0;
	border-bottom: 1px dashed #DCE4F3;
}
.ph-featured__aside .ph-list li:last-child { border-bottom: 0; }

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

.ph-quote {
	position: relative;
	transition: transform var(--ph-transition), box-shadow var(--ph-transition);
}

.ph-quote:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(13, 43, 107, 0.10);
}

.ph-quote__stars {
	color: #F5A623;
	font-size: 0.9375rem;
	letter-spacing: 3px;
}

.ph-quote figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--ph-border);
}

/* Inicjały zamiast zdjęcia: nie udajemy fotografii klienta,
   której nie mamy, a wpis przestaje być samym tekstem. */
.ph-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: #E8EEFB;
	color: var(--ph-primary);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

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

.ph-why > div {
	padding: 24px;
	background: var(--ph-surface);
	border: 1px solid var(--ph-border);
	border-radius: var(--ph-radius);
}

.ph-section--alt .ph-why > div { background: var(--ph-bg); }

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

.ph-cta-band {
	position: relative;
	overflow: hidden;
	background: var(--ph-primary);
}

/* Siatka kropek nawiązuje do mapy w hero — ta sama myśl na początku
   i na końcu strony. */
.ph-cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle, rgba(255, 255, 255, 0.10) 1px, transparent 1px);
	background-size: 22px 22px;
}

.ph-cta-band > * { position: relative; }


/* Motyw nadaje elementom <figure> margines dolny, a ostatniemu w rzędzie nie.
   Przy siatce o równych wysokościach dwie pierwsze karty kończyły się 32 px
   wyżej niż trzecia i podpisy nie trzymały jednej linii. */
.entry-content .ph-quote { margin: 0; }
.entry-content .ph-quotes,
.entry-content .ph-grid,
.entry-content .ph-steps,
.entry-content .ph-why { align-items: stretch; }


/* --- Wezwanie końcowe: warianty na ciemnym tle ---------------------------
   Przycisk drugorzędny ma domyślnie białe tło, więc na granacie znikał —
   biały napis na białym tle. Na ciemnym musi być przezroczysty. */

.ph-cta-band .ph-eyebrow::before { background: var(--ph-accent-light); }

.ph-cta-band .ph-btn--secondary {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: var(--ph-surface);
}

.ph-cta-band .ph-btn--secondary:hover,
.ph-cta-band .ph-btn--secondary:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: var(--ph-surface);
	color: var(--ph-surface);
}