@charset "UTF-8";

/*
 * Globalne reguły, których nie da się wyrazić w theme.json:
 * warianty bloków core (is-style-*), nagłówek, dekoracje sekcji.
 * Style własnych bloków są w src/blocks/<blok>/style.scss.
 */

/* ── Podstawy i dostępność ─────────────────────────────────────────── */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Kotwice i fokus nie chowają się pod przyklejonym nagłówkiem (WCAG 2.4.11). */
html {
	scroll-padding-top: 7rem;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus-ring);
	outline-offset: 3px;
}

/*
 * Link „Przejdź do treści” (inc/accessibility.php) – ukryty wizualnie,
 * pojawia się w lewym górnym rogu po pierwszym naciśnięciu Tab.
 */
.skip-link.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link.screen-reader-text:focus {
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip-path: none;
	font-weight: 600;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	pointer-events: auto; /* nagłówek ma pointer-events: none */
	background: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--small);
}

/* Cel linku – fokus ustawiany programowo, bez ramki. */
main[tabindex="-1"]:focus {
	outline: none;
}

.visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:where(p, li) > a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/*
 * ── Akcenty kolorystyczne (bloki: karta usługi, licznik, krok, opinia) ──
 * Nazwy klas zostały z importu (zapisane w treści), ale kolory to odcienie
 * z logo pobierane z palety – zmiana w Wygląd → Edytor → Style → Kolory
 * zmienia też akcenty. Tło ikony = 10% koloru akcentu na białym.
 */
.is-accent-purple { --cc-accent: var(--wp--preset--color--logo-purple); }
.is-accent-blue { --cc-accent: var(--wp--preset--color--primary); }
.is-accent-orange { --cc-accent: var(--wp--preset--color--primary-dark); }
.is-accent-pink { --cc-accent: var(--wp--preset--color--indigo); }
.is-accent-teal { --cc-accent: var(--wp--preset--color--sky); }
.is-accent-coral { --cc-accent: var(--wp--preset--color--navy); }

:is(.is-accent-purple, .is-accent-blue, .is-accent-orange, .is-accent-pink, .is-accent-teal, .is-accent-coral) {
	--cc-accent-soft: color-mix(in srgb, var(--cc-accent) 10%, #fff);
}

/* ── Typografia ────────────────────────────────────────────────────── */

/* Format RichText „Tekst gradientowy” (src/editor/formats/gradient-text.js). */
.has-gradient-text {
	color: var(--wp--preset--color--primary-dark); /* fallback bez background-clip */
	background: var(--wp--preset--gradient--brand-text);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/*
 * Etykieta nad nagłówkiem sekcji („Czym się zajmujemy”): niebieski z logo,
 * wersaliki. Kolor z palety (primary-dark), a kolor ustawiony w panelu bloku
 * (klasa has-text-color) ma pierwszeństwo – stąd :where().
 */
.is-style-eyebrow {
	margin-bottom: 0.75rem !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.is-style-eyebrow:where(:not(.has-text-color)) {
	color: var(--wp--preset--color--primary-dark);
}

/* Na ciemnym tle jaśniejszy niebieski – kontrast AA. */
:where(.is-style-section-dark, .is-style-section-banner, .is-style-section-navy) .is-style-eyebrow:where(:not(.has-text-color)) {
	color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, #fff);
}

.is-style-eyebrow.has-text-align-center {
	background-position: center, 0 0;
}

/* Etykieta-pigułka z kropką („● STRONY INTERNETOWE”). */
.is-style-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.375rem 0.875rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-dark);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, #fff);
	border-radius: var(--wp--custom--radius--pill);
}

.is-style-pill::before {
	content: "";
	width: 0.375rem;
	height: 0.375rem;
	background: currentcolor;
	border-radius: 50%;
}

/* Siatka z dokładnie 4 kartami → 2×2 zamiast 3+1 (bez „sieroty” w ostatnim rzędzie). */
.is-layout-grid:has(> .wp-block-cleancode-service-card:nth-child(4):last-child) {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

/* ── Przyciski ─────────────────────────────────────────────────────── */

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding-block: calc(0.875rem - 1px);
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--contrast);
}

/* Biały przycisk ze strzałką (na ciemnym tle). */
.wp-block-button.is-style-light > .wp-block-button__link {
	color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--base);
}

.wp-block-button.is-style-light > .wp-block-button__link::after {
	content: " \2192 ";
}

.wp-block-button.is-style-light > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--navy) 8%, #fff);
}

/* ── Listy ─────────────────────────────────────────────────────────── */

/* Hero: kolorowe ptaszki ✓ (kolory jak w oryginale, każdy wiersz inny). */
.is-style-checklist {
	padding-left: 0;
	list-style: none;
}

.is-style-checklist li {
	position: relative;
	padding-left: 1.5rem;
	font-size: 1.25rem;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
}

/* Ptaszek w kolorze akcentu z logo (Style → Kolory → „Niebieski z logo”). */
.is-style-checklist li::before {
	content: "\2713 ";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* „Dlaczego warto”: kafelki z niebieskim ptaszkiem w 2 kolumnach. */
.is-style-check-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}

.is-style-check-tiles li {
	position: relative;
	padding: 0.875rem 1rem 0.875rem 3rem;
	font-size: var(--wp--preset--font-size--small);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	box-shadow: var(--wp--preset--shadow--card);
}

.is-style-check-tiles li::before {
	content: "\2713 ";
	position: absolute;
	top: 0.875rem;
	left: 1rem;
	display: grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, #fff);
	border-radius: 6px;
}

/* Lista „Etykiety”: technologie, umiejętności – pigułki bez punktorów. */
.is-style-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.is-style-tags li {
	padding: 0.375rem 0.875rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, #fff);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 18%, #fff);
	border-radius: var(--wp--custom--radius--pill);
}

:where(.is-style-section-dark, .is-style-section-navy) .is-style-tags li {
	color: var(--wp--preset--color--base);
	background: rgb(255 255 255 / 0.08);
	border-color: rgb(255 255 255 / 0.2);
}

/* „Masz pytania?” – numery telefonów z ikoną. */
.is-style-phones {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}

/*
 * Każdy numer to pigułka: kółko z ikoną słuchawki + numer. Cała pigułka klikalna
 * (link rozciągnięty ::after). Kółko = li::before, słuchawka = a::before (maska SVG).
 */
.is-style-phones li {
	--cc-phone-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");

	position: relative;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.375rem 1.25rem 0.375rem 0.375rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	box-shadow: var(--wp--preset--shadow--card);
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.is-style-phones li::before {
	content: "";
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, #fff);
	border-radius: 50%;
}

.is-style-phones a {
	color: inherit;
	text-decoration: none;
}

.is-style-phones a::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1.0625rem; /* środek kółka: 0.375rem + (2.5rem - 1.125rem) / 2 */
	width: 1.125rem;
	height: 1.125rem;
	background: var(--wp--preset--color--primary-dark);
	transform: translateY(-50%);
	-webkit-mask: var(--cc-phone-icon) center / contain no-repeat;
	mask: var(--cc-phone-icon) center / contain no-repeat;
}

.is-style-phones a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.is-style-phones li:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, #fff);
	box-shadow: var(--wp--preset--shadow--soft);
}

.is-style-phones li:has(a:focus-visible) {
	outline: var(--wp--custom--focus-ring);
	outline-offset: 3px;
}

.is-style-phones a:focus-visible {
	outline: none;
}

/* Kotwice (#zespol, spis treści) – cel przewijania nie chowa się pod pływającym nagłówkiem. */
:target,
[id] {
	scroll-margin-top: 7rem;
}

/* ── Nagłówek: pływający pasek z cieniem ───────────────────────────── */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 1rem var(--wp--preset--spacing--30) 0;
	pointer-events: none; /* klikalny jest tylko pasek, nie przezroczyste tło */
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 0);
}

.site-header__bar {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 0.625rem 0.75rem 0.625rem 1.5rem;
	pointer-events: auto;
	background: rgb(255 255 255 / 0.96);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: 0 10px 40px -10px rgba(1, 15, 28, 0.15);
	backdrop-filter: saturate(180%) blur(10px);
}

/*
 * Strona zaczyna się pod nagłówkiem – hero ma ujemny margines, by pasek „pływał” nad nim.
 * Dwa przypadki: hero w treści strony (Kontakt, O nas) i hero wprost w <main> szablonu
 * (kategorie, blog, wpisy, wyszukiwarka, realizacje).
 */
.site-header + main .wp-block-post-content > .is-hero:first-child,
.site-header + main > .is-hero:first-child,
.site-header + main > article:first-child > .is-hero:first-child {
	margin-top: -5.5rem !important;
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.is-hero {
	padding-top: 7.5rem;
}

/* Hero podstron (usługi, realizacje, portfolio): delikatny gradient w tle.
 * !important – górny odstęp musi zrobić miejsce na pływający nagłówek,
 * niezależnie od paddingu ustawionego w edytorze (inline style). */
.is-hero--sub {
	position: relative;
	isolation: isolate;
	padding-top: 8.5rem !important;
}

/* Poświata w pseudo-elemencie, a nie w „background” – dzięki temu obraz tła
 * ustawiony w edytorze (Style → Tło) jej nie nadpisuje, tylko leży pod nią. */
.is-hero--sub::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60rem 30rem at 85% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 10%, #fff) 0%, transparent 60%),
		radial-gradient(40rem 25rem at 0% 20%, color-mix(in srgb, var(--wp--preset--color--logo-purple) 6%, #fff) 0%, transparent 60%);
}

/* Hero w treści strony (podstrony z importu) – ta sama szerokość co sekcje pod nim. */
.wp-block-post-content > .wp-block-group.is-hero--sub > * {
	max-width: var(--wp--style--global--wide-size);
}

.is-hero--sub h1 {
	font-size: var(--wp--preset--font-size--huge);
}

.cc-hero-image img {
	width: 100%;
	max-width: 680px;
	height: auto;
	margin-left: auto;
	aspect-ratio: 1;
}

/* ── Sekcja z dekoracjami (np. kontakt: fala + ilustracje) ─────────────
 * Wszystko edytowalne w edytorze:
 * - fala = obraz tła grupy (Style → Tło),
 * - ilustracje = bloki Obrazek ze stylem „Dekoracja: prawy/lewy dół”.
 * Ten wariant grupy tylko przygotowuje pozycjonowanie.
 */
.is-style-decorated {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* Bez !important rozmiar/pozycja z panelu „Tło” nadpisują te wartości domyślne. */
.is-style-decorated.has-background-image,
.is-style-decorated[style*="background-image"] {
	background-repeat: no-repeat;
	background-position: 50% 100%;
	background-size: 100% auto;
}

:where(.wp-block-image).is-style-deco-right,
:where(.wp-block-image).is-style-deco-left {
	position: absolute;
	bottom: 1.5rem;
	z-index: -1;
	/* Naturalny rozmiar grafiki – zmiana w panelu bloku Obrazek (Szerokość). */
	width: fit-content;
	margin: 0 !important;
	pointer-events: none;
}

.wp-block-image.is-style-deco-right {
	right: max(2rem, calc(50% - 46rem));
}

.wp-block-image.is-style-deco-left {
	left: max(2rem, calc(50% - 46rem));
}

.wp-block-image:is(.is-style-deco-right, .is-style-deco-left) img {
	max-width: none;
	height: auto;
}

/* W edytorze dekoracje można zaznaczyć (do podmiany/usunięcia). */
.editor-styles-wrapper .wp-block-image:is(.is-style-deco-right, .is-style-deco-left) {
	z-index: 1;
	pointer-events: auto;
}

@media (max-width: 781px) {
	.wp-block-image:is(.is-style-deco-right, .is-style-deco-left) {
		display: none;
	}
}

/* Karta formularza z gradientową górną krawędzią. */
.is-style-form-card {
	position: relative;
	padding: var(--wp--preset--spacing--40) !important;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
}

.is-style-form-card::before {
	content: "";
	position: absolute;
	inset: 0 1.25rem auto;
	height: 3px;
	background: var(--wp--preset--gradient--brand);
	border-radius: 0 0 3px 3px;
}

/* Telefony w sekcji kontaktu – duże, w kolorze akcentu (na ciemnym tle jasne). */
.cc-contact-lines a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.cc-contact-lines a:hover {
	text-decoration: underline;
}

/*
 * Sekcja granatowa (styl grupy „Sekcja granatowa”, styles/sections/section-navy.json):
 * gradient z palety + delikatna siatka kropek wygaszana ku dołowi.
 * Kolory tekstu/linków ustawia wariant – tu tylko elementy spoza theme.json.
 */
.is-style-section-navy {
	position: relative;
	isolation: isolate;
}

.is-style-section-navy::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(rgb(255 255 255 / 0.09) 1px, transparent 1.5px) 0 0 / 22px 22px;
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
	mask-image: linear-gradient(180deg, #000 0%, transparent 75%);
}

:where(.is-style-section-navy, .is-style-section-dark) .cc-contact-lines a {
	color: color-mix(in srgb, var(--wp--preset--color--primary) 40%, #fff);
}

:where(.is-style-section-navy, .is-style-section-dark) .wp-block-button.is-style-outline > .wp-block-button__link:where(:not(.has-background)) {
	color: var(--wp--preset--color--base);
	background: transparent;
	border-color: rgb(255 255 255 / 0.35);
}

:where(.is-style-section-navy, .is-style-section-dark) .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--base);
}

/* Biała karta formularza na granacie: wyraźniejszy cień. */
.is-style-section-navy .is-style-form-card {
	color: var(--wp--preset--color--body);
	box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.45);
}

.is-style-section-navy .is-style-form-card a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--primary-dark);
}

.is-style-section-navy .is-style-form-card :where(h1, h2, h3, h4) {
	color: var(--wp--preset--color--contrast);
}

/* Wiersz danych kontaktowych: ikona + link (strona Kontakt). */
.cc-contact-item {
	gap: 1rem !important;
	padding: 0.875rem 1.125rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--card);
	transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.cc-contact-item:hover {
	box-shadow: var(--wp--preset--shadow--soft);
	transform: translateY(-2px);
}

.cc-contact-item p {
	margin: 0;
}

.cc-contact-item a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.cc-contact-item a:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

/* Cały wiersz klikalny (link rozciągnięty na kartę). */
.cc-contact-item {
	position: relative;
}

.cc-contact-item a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Linki społecznościowe jako pigułki. */
.cc-social-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	padding: 0;
	list-style: none;
}

.cc-social-pills a {
	display: inline-block;
	padding: 0.5rem 1.125rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	text-decoration: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
}

.cc-social-pills a:hover {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--navy);
}

/* ── Sekcja „Wyniki” – zrzuty ekranu ──────────────────────────────── */

.is-style-screenshot img {
	border-radius: var(--wp--custom--radius--small);
	box-shadow: 0 18px 50px -20px rgba(1, 15, 28, 0.35);
}

.cc-badge-icon {
	display: inline-grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	color: #fff;
	background: var(--cc-accent, var(--wp--preset--color--primary));
	border-radius: 50% 50% 50% 12%;
}

/* ── Blog: poziome karty wpisów ───────────────────────────────────── */

.is-style-post-card {
	display: grid !important;
	grid-template-columns: 40% 1fr;
	gap: 0 !important;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
}

.is-style-post-card .wp-block-post-featured-image {
	height: 100%;
	margin: 0;
}

.is-style-post-card .wp-block-post-featured-image img {
	height: 100%;
	object-fit: cover;
}

.is-style-post-card > .wp-block-group {
	padding: 1.5rem;
}

@media (max-width: 600px) {
	.is-style-post-card {
		grid-template-columns: 1fr;
	}

	/* Telefon: zdjęcie nad tekstem w kadrze poziomym (pionowe 3:4 zajmowałoby cały ekran). */
	.is-style-post-card .wp-block-post-featured-image,
	.is-style-post-card .wp-block-post-featured-image img {
		height: auto !important;
		aspect-ratio: 16 / 9 !important;
	}
}

/*
 * Karty wpisów i realizacji: jeden link (tytuł) rozciągnięty na całą kartę.
 * Zdjęcie nie jest osobnym linkiem – czytnik ekranu nie słyszy dwóch linków
 * do tego samego adresu, a kliknięcie w zdjęcie nadal działa.
 */
.is-style-post-card,
.cc-project-card {
	position: relative;
}

:is(.is-style-post-card, .cc-project-card) .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* Linki kategorii nad rozciągniętym linkiem tytułu – nadal klikalne osobno. */
:is(.is-style-post-card, .cc-project-card) .wp-block-post-terms a {
	position: relative;
	z-index: 1;
}

:is(.is-style-post-card, .cc-project-card):has(.wp-block-post-title a:focus-visible) {
	outline: var(--wp--custom--focus-ring);
	outline-offset: 4px;
}

:is(.is-style-post-card, .cc-project-card) .wp-block-post-title a:focus-visible {
	outline: none;
}

/* Kategoria wpisu jako granatowa pigułka. */
.is-style-pill-terms a {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	text-decoration: none;
	background: var(--wp--preset--color--navy);
	border-radius: var(--wp--custom--radius--pill);
}

.is-style-pill-terms .wp-block-post-terms__separator {
	display: none;
}

/* Jasny wariant pigułek (karty realizacji). */
.is-style-pill-terms.is-light a {
	color: var(--wp--preset--color--primary-dark);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, #fff);
}

/* ── Realizacje ────────────────────────────────────────────────────── */

/* Karta: zrzut ekranu w ramce z marginesem wewnętrznym, tekst odsunięty od krawędzi. */
.cc-project-card {
	box-sizing: border-box;
	height: 100%;
	padding: 0.75rem 0.75rem 1.25rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--card);
	transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.cc-project-card > :not(.wp-block-post-featured-image) {
	padding-inline: 0.5rem;
}

.cc-project-card:hover {
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-4px);
}

@media (prefers-reduced-motion: reduce) {
	.cc-project-card:hover {
		transform: none;
	}
}

.cc-project-card .wp-block-post-title {
	margin: 0;
}

/* ── Treści artykułów (wpisy, strony miast, realizacje) ───────────── */

:where(.wp-block-post-content) h2 {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--xx-large);
}

:where(.wp-block-post-content) h3 {
	margin-top: var(--wp--preset--spacing--40);
}

.cc-plain h1 {
	font-size: var(--wp--preset--font-size--huge);
}

/* Tabele (np. „kluczowe fakty” na stronach miast). */
.wp-block-table {
	overflow-x: auto;
}

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: var(--wp--preset--font-size--small);
}

/* Tabele z 3+ kolumnami (porównania we wpisach) na telefonie przewijają się w bok, zamiast ściskać tekst do ~100px. */
.wp-block-table table:has(tr > :nth-child(3)) {
	min-width: 34rem;
}

/* Długie kody błędów (NET::ERR_CERT_DATE_INVALID) łamią się zamiast rozpychać komórki. */
.wp-block-post-content code {
	overflow-wrap: anywhere;
}

.wp-block-table :where(th, td) {
	padding: 0.75rem 1rem;
	text-align: left;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-table th {
	width: 40%;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.wp-block-table tr:nth-child(odd) {
	background: #f8f9fc;
}

/* ── Wpis na blogu ─────────────────────────────────────────────────── */

/*
 * Układ: treść + panel boczny. W HTML panel jest PRZED treścią (na telefonie
 * spis treści pokazuje się nad artykułem), na desktopie grid przenosi go na prawo.
 */
.cc-post-layout {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

.cc-post-body {
	min-width: 0; /* długie adresy URL / tabele nie rozpychają kolumny */
}

@media (min-width: 1024px) {
	.cc-post-layout {
		grid-template-areas: "body aside";
		grid-template-columns: minmax(0, 1fr) 18.5rem;
		gap: var(--wp--preset--spacing--50);
	}

	.cc-post-body {
		grid-area: body;
	}

	/* Panel przyklejony pod nagłówkiem strony. */
	.cc-post-aside {
		position: sticky;
		top: 7rem;
		grid-area: aside;
		align-self: start;
	}

	/*
	 * Długi spis przewija się wewnątrz – razem z kartą specjalisty (~26rem)
	 * zawsze mieści się w oknie. Na niskich ekranach co najmniej 10rem listy.
	 */
	.cc-post-aside .cc-toc__list {
		max-height: max(10rem, calc(100vh - 7rem - 26rem - 5rem));
		padding-right: 0.25rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}

	/* Bez karty specjalisty (np. usunięta w edytorze) spis może być wyższy. */
	.cc-post-aside:not(:has(.cc-specialist)) .cc-toc__list {
		max-height: calc(100vh - 13rem);
	}
}

.cc-post-aside > * + * {
	margin-top: 1.25rem;
}

/*
 * Karta „czat ze specjalistą” w panelu bocznym (wzór: adspectra.pl).
 * Na telefonie ukryta – tam jest CTA na dole strony i karta autora pod wpisem.
 */
.cc-specialist {
	flex-shrink: 0;
	padding: 1.25rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--wp--preset--color--navy) 45%, transparent);
}

.cc-specialist :where(p, .wp-block-post-author-name) {
	margin: 0;
}

.cc-specialist .wp-block-post-author-name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.cc-specialist .wp-block-post-author-name a:hover {
	text-decoration: underline;
}

/* Zielona kropka „dostępny” przy nazwisku – dekoracja (kolor + tekst obok). */
.cc-specialist__head .wp-block-avatar {
	position: relative;
}

.cc-specialist__head .wp-block-avatar::after {
	content: "";
	position: absolute;
	right: 1px;
	bottom: 1px;
	width: 0.75rem;
	height: 0.75rem;
	background: #1fae5b;
	border: 2px solid #fff;
	border-radius: 50%;
}

.cc-specialist__status {
	color: var(--wp--preset--color--body);
}

/* Dymek z pytaniem. */
.cc-specialist__bubble {
	position: relative;
	padding: 1rem 1.125rem;
	background: var(--wp--preset--color--surface);
	border-radius: 4px var(--wp--custom--radius--medium) var(--wp--custom--radius--medium);
}

.cc-specialist__question {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}

.cc-specialist__perks {
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	list-style: none;
}

.cc-specialist__perks li {
	position: relative;
	padding-left: 1.375rem;
}

.cc-specialist__perks li::before {
	content: "\2713 ";
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

/* Przyciski z ikonami (maska SVG = kolor tekstu przycisku). */
.cc-specialist__actions .wp-block-button__link {
	display: inline-flex;
	gap: 0.5rem;
	align-items: center;
	justify-content: center;
	padding-block: 0.8rem;
}

/* Kolory przycisków ustawia się w edytorze (Style → Kolor); tu tylko efekt hover. */
:is(.cc-btn-mail, .cc-btn-phone) .wp-block-button__link:hover {
	filter: brightness(1.15);
}

:is(.cc-btn-mail, .cc-btn-phone) .wp-block-button__link::before {
	content: "";
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	background: currentcolor;
	mask: var(--cc-btn-icon) center / contain no-repeat;
}

.cc-btn-mail {
	--cc-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.cc-btn-phone {
	--cc-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

@media (max-width: 1023px) {
	.cc-specialist {
		display: none;
	}
}

/* Pasek pod tytułem: autor · Opublikowano · Zaktualizowano · czas czytania. */
.cc-post-meta {
	font-size: var(--wp--preset--font-size--small);
}

.cc-post-meta p,
.cc-post-meta .wp-block-post-date {
	margin: 0;
}

.cc-post-meta__item p {
	color: var(--wp--preset--color--body);
}

.cc-post-meta__item .wp-block-post-date,
.cc-post-meta .wp-block-post-author-name {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* Data aktualizacji pusta (wpis nie był zmieniany) → ukrywamy też etykietę. */
.cc-post-meta__updated:not(:has(time)) {
	display: none;
}

.cc-post-meta__item .wp-block-post-time-to-read {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* Pasek postępu czytania (tylko wpisy – assets/js/reading-progress.js). */
.cc-reading-progress {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 60;
	height: 4px;
	pointer-events: none;
	background: rgb(1 15 28 / 0.08);
}

.cc-reading-progress__bar {
	height: 100%;
	background: var(--wp--preset--gradient--logo);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

/* Okruszki (core/breadcrumbs). */
.wp-block-breadcrumbs a {
	color: var(--wp--preset--color--body);
	text-decoration: none;
}

.wp-block-breadcrumbs a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* Typografia artykułu – czytelna szerokość wiersza (~70 znaków). */
.cc-post-body .wp-block-post-content {
	max-width: 46rem;
	font-size: 1.0625rem;
	line-height: 1.75;
}

.cc-post-body .wp-block-post-content :where(h2, h3) {
	scroll-margin-top: 7rem;
}

.cc-post-body .wp-block-post-content :where(ul, ol) li + li {
	margin-top: 0.375rem;
}

.cc-post-body .wp-block-post-content img {
	height: auto;
	border-radius: var(--wp--custom--radius--medium);
}

.cc-post-tags {
	margin-top: var(--wp--preset--spacing--40);
}

.cc-post-tags a {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	margin: 0 0.25rem 0.375rem 0;
	color: var(--wp--preset--color--body);
	text-decoration: none;
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--wp--custom--radius--pill);
}

.cc-post-tags .wp-block-post-terms__separator {
	display: none;
}

.cc-author-box .is-style-eyebrow {
	margin: 0 !important;
	font-size: var(--wp--preset--font-size--x-small);
}

.cc-post-nav a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	text-decoration: none;
}

/* ── Lista wpisów (blog, kategoria): wiersze zdjęcie | treść ─────────── */

.cc-post-list > li + li {
	margin-top: 0;
}

.cc-post-row {
	position: relative;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Pierwszy wpis bez górnego odstępu – zaczyna się tuż pod licznikiem wpisów. */
.cc-post-list > li:first-child .cc-post-row {
	padding-top: 0;
}

@media (min-width: 700px) {
	.cc-post-row {
		/* Zdjęcie max 26rem – przy szerokim kontenerze (1440 px) tekst dostaje resztę. */
		grid-template-columns: minmax(0, min(26rem, 40%)) minmax(0, 1fr);
		align-items: center;
	}
}

.cc-post-row .wp-block-post-featured-image {
	margin: 0;
}

.cc-post-row .wp-block-post-featured-image img {
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.cc-post-row:hover .wp-block-post-featured-image img {
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-3px);
}

.cc-post-row .wp-block-post-title {
	margin: 0;
	line-height: 1.25;
}

/* Jeden link (tytuł) rozciągnięty na cały wiersz – jak w kartach. */
.cc-post-row .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.cc-post-row .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cc-post-row:has(.wp-block-post-title a:focus-visible) {
	outline: var(--wp--custom--focus-ring);
	outline-offset: 4px;
}

.cc-post-row .wp-block-post-title a:focus-visible {
	outline: none;
}

.cc-post-row__meta {
	font-size: var(--wp--preset--font-size--x-small);
}

/* Kategoria: kolorowa, wersaliki; link nad rozciągniętym linkiem tytułu. */
.cc-post-row__cat a {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--logo-blue);
	text-decoration: none;
}

.cc-post-row__cat a:hover {
	text-decoration: underline;
}

.cc-post-row__date {
	position: relative;
	padding-left: 1.75rem;
	color: var(--wp--preset--color--body);
}

.cc-post-row__date::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1.25rem;
	height: 1px;
	background: var(--wp--preset--color--border);
}

.cc-post-row .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--wp--preset--color--body);
}

.cc-post-row__ttr {
	color: var(--wp--preset--color--body);
}

.cc-post-row__ttr::before {
	content: "\25F7  ";
}

/* Krótki opis kategorii: blok w kontenerze, węższa tylko linia tekstu (czytelność). */
.cc-term-description p {
	max-width: 46rem;
	margin: 0;
}

/*
 * Paginacja list wpisów: numery w okrągłych przyciskach, bieżąca strona
 * wypełniona granatem z palety, „Poprzednia/Następna” jako pigułki.
 * Obszar klikalny min. 44×44 px (WCAG 2.5.5).
 */
.wp-block-query-pagination {
	gap: 0.75rem;
	align-items: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.wp-block-query-pagination-numbers .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-radius: var(--wp--custom--radius--pill);
	transition: background-color 0.15s, color 0.15s;
}

.wp-block-query-pagination-numbers a.page-numbers:hover {
	color: var(--wp--preset--color--primary-dark);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, #fff);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--navy);
}

.wp-block-query-pagination-numbers .page-numbers.dots {
	min-width: 1.5rem;
	color: var(--wp--preset--color--body);
}

:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	padding: 0 1.25rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	transition: border-color 0.15s, color 0.15s;
}

:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next):hover {
	color: var(--wp--preset--color--primary-dark);
	border-color: var(--wp--preset--color--primary);
}

:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) .wp-block-query-pagination-previous-arrow,
:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) .wp-block-query-pagination-next-arrow {
	margin: 0;
	color: var(--wp--preset--color--primary);
}

@media (max-width: 600px) {
	/* Na telefonie same strzałki – numery zostają w jednym rzędzie. */
	:is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next) {
		padding: 0 0.875rem;
		font-size: 0;
	}

	:is(.wp-block-query-pagination-previous-arrow, .wp-block-query-pagination-next-arrow) {
		font-size: var(--wp--preset--font-size--medium);
	}
}

/* Obrazek „Portret”: zdjęcie osoby – zaokrąglone, z cieniem, kadr 4:5. */
.wp-block-image.is-style-portrait img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 20%;
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* Cytat: akcent z palety po lewej, większa czcionka nagłówkowa. */
.wp-block-quote {
	margin-block: var(--wp--preset--spacing--30);
	padding: 0.25rem 0 0.25rem 1.5rem;
	border-left: 4px solid var(--wp--preset--color--primary);
}

.wp-block-quote p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.45;
	color: var(--wp--preset--color--contrast);
}

.wp-block-quote cite {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	color: var(--wp--preset--color--body);
}

/* ── Strona „O nas” ────────────────────────────────────────────────── */

.cc-about-hero__image img {
	width: 100%;
	aspect-ratio: 16 / 11;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--lifted);
}

.cc-about-stats .cc-stat.is-style-card {
	padding: 1.5em;
}

.cc-about-stats .cc-stat.is-style-card .cc-stat__value {
	font-size: 2em;
}

/* Karty ofert: ikona, tytuł, opis i link przyklejony do dołu karty. */
.cc-about-offer {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: transform var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.cc-about-offer:hover {
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-4px);
}

.cc-about-offer h3 {
	margin: 0.5rem 0 0;
}

.cc-about-offer__link {
	margin-top: auto !important;
}

.cc-about-offer__link a {
	text-decoration: none;
}

.cc-about-offer__link a:hover {
	text-decoration: underline;
}

/* Kolaż 2×2 – druga kolumna przesunięta w dół, zdjęcia przycięte do 4:3. */
.cc-about-collage {
	gap: 1rem !important;
}

.cc-about-collage .wp-block-image {
	margin: 0;
}

.cc-about-collage img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--medium);
	box-shadow: var(--wp--preset--shadow--soft);
}

@media (min-width: 782px) {
	.cc-about-collage > :nth-child(even) {
		transform: translateY(2.5rem);
	}
}

/* Karty zespołu. */
.cc-team-card {
	padding: var(--wp--preset--spacing--30);
	text-align: center;
	background: var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--soft);
}

.cc-team-card .wp-block-image {
	margin: 0 0 1rem;
}

.cc-team-card img {
	width: 100%;
	max-width: 15rem;
	margin-inline: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--large);
}

.cc-team-card h3 {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.cc-team-card h3 a {
	color: inherit;
	text-decoration: none;
}

.cc-team-card h3 a:hover {
	text-decoration: underline;
}

.cc-team-card p {
	margin: 0.25rem 0 0;
	font-size: var(--wp--preset--font-size--small);
}

/* ── Treści SEO (karty na dole strony głównej) ─────────────────────── */

.is-style-card {
	position: relative;
	overflow: hidden;
}

/*
 * Karta w układzie „ograniczonym”: siatki, kolumny i listy-kafelki na pełną
 * szerokość karty (bez pustego pasa po prawej), a tekst przy czytelnej długości linii.
 */
.is-style-card.is-layout-constrained > * {
	max-width: none;
}

.is-style-card.is-layout-constrained > :is(p, h1, h2, h3, h4, .wp-block-list:not(.is-style-check-tiles, .is-style-tags)) {
	max-width: 46rem;
}

/* Delikatne koło w prawym górnym rogu karty, jak w oryginale. */
.is-style-card::after {
	content: "";
	position: absolute;
	top: -5rem;
	right: -5rem;
	width: 14rem;
	height: 14rem;
	pointer-events: none;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 12%, #fff);
	border-radius: 50%;
}

.is-style-card h2,
.is-style-card h3 {
	font-size: var(--wp--preset--font-size--xx-large);
}

/* ── Kolumny z formularzem ─────────────────────────────────────────── */

/*
 * Core układa kolumny obok siebie od 782px – przy 782–991px formularz obok
 * tekstu ma ~250px i pola się łamią. W tym zakresie kolumny z formularzem idą jedna pod drugą.
 */
@media (min-width: 782px) and (max-width: 991.98px) {
	.wp-block-columns:has(.cc-form):not(.is-not-stacked-on-mobile) {
		flex-wrap: wrap !important;
	}

	.wp-block-columns:has(.cc-form):not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ── Siatki kart usług ─────────────────────────────────────────────── */

/*
 * Siatka z samą „liczbą kolumn” (bez minimalnej szerokości) trzyma 3 kolumny
 * nawet na telefonie. Poniżej 992px karty same zawijają się do szerokości ≥ 14rem.
 */
@media (max-width: 991.98px) {
	.is-layout-grid:has(> .cc-service-card) {
		grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
	}
}

/* ── Stopka ────────────────────────────────────────────────────────── */

.site-footer {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
}

/* Tytuły kolumn stopki to akapity (nie nagłówki) – nie zaśmiecają struktury H1–H6 strony. */
.site-footer__title {
	margin: 0 0 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}

.site-footer .wp-block-navigation a,
.site-footer p a {
	color: var(--wp--preset--color--body);
	text-decoration: none;
}

.site-footer .wp-block-navigation a:hover,
.site-footer p a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* Akcent pod nagłówkami kolumn. */
.site-footer__title::after {
	content: "";
	display: block;
	width: 2rem;
	height: 3px;
	margin-top: 0.625rem;
	background: var(--wp--preset--gradient--logo);
	border-radius: 3px;
}

/* Marker „›” przed linkami menu w stopce – przesuwa się przy najechaniu. */
.site-footer .wp-block-navigation-item__content {
	display: inline-flex;
	gap: 0.625rem;
	align-items: center;
	transition: color var(--wp--custom--transition);
}

.site-footer .wp-block-navigation-item__content::before {
	content: "";
	flex-shrink: 0;
	width: 0.375rem;
	height: 0.375rem;
	border-top: 2px solid var(--wp--preset--color--primary);
	border-right: 2px solid var(--wp--preset--color--primary);
	transform: rotate(45deg);
	transition: transform var(--wp--custom--transition);
}

.site-footer .wp-block-navigation-item__content:hover {
	text-decoration: none;
}

.site-footer .wp-block-navigation-item__content:hover::before {
	transform: translateX(3px) rotate(45deg);
}

/* Telefon i e-mail: ikona w kółku rozpoznawana po typie linku (tel:/mailto:). */
.site-footer {
	--cc-footer-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--cc-footer-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E");
}

.site-footer p:has(> a[href^="tel:"], > a[href^="mailto:"]) {
	line-height: 2.75;
}

.site-footer p a:is([href^="tel:"], [href^="mailto:"]) {
	position: relative;
	display: inline-flex;
	gap: 0.75rem;
	align-items: center;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* Kółko = ::before, symbol (maska SVG) = ::after nałożony na środek kółka. */
.site-footer p a:is([href^="tel:"], [href^="mailto:"])::before {
	content: "";
	flex-shrink: 0;
	width: 2.25rem;
	height: 2.25rem;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, #fff);
	border-radius: 50%;
}

.site-footer p a:is([href^="tel:"], [href^="mailto:"])::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0.625rem;
	width: 1rem;
	height: 1rem;
	background: var(--wp--preset--color--primary-dark);
	transform: translateY(-50%);
	-webkit-mask: var(--cc-footer-phone) center / contain no-repeat;
	mask: var(--cc-footer-phone) center / contain no-repeat;
}

.site-footer p a[href^="mailto:"]::after {
	-webkit-mask-image: var(--cc-footer-mail);
	mask-image: var(--cc-footer-mail);
}

/* Social media: ikony w kółkach, wypełniane granatem przy najechaniu. */
.site-footer .wp-block-social-links {
	gap: 0.5rem;
	margin-top: var(--wp--preset--spacing--20);
}

.site-footer .wp-block-social-link a {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0 !important;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.site-footer .wp-block-social-link a:hover {
	color: var(--wp--preset--color--base) !important;
	background: var(--wp--preset--color--navy);
}

.site-footer .wp-block-social-link svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* Pasek copyright oddzielony linią. */
.site-footer__copy {
	padding-top: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
}

/*
 * Poniżej 992px cztery kolumny są za wąskie (łamią się telefony i e-mail) –
 * siatka 2×2. Grid zamiast flexa, bo kolumny core mają inline flex-basis (28%).
 */
@media (max-width: 991.98px) {
	.site-footer > .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--40);
	}

	.site-footer > .wp-block-columns > .wp-block-column {
		margin: 0;
	}
}

/* Na wąskich telefonach jedna kolumna. */
@media (max-width: 479.98px) {
	.site-footer > .wp-block-columns {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Realizacja jako case study (templates/single-cc_project.html) ─────── */

.cc-case-hero .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--body);
}

.cc-case-hero .is-style-pill-terms {
	justify-content: center;
}

/* Pasek faktów: typ projektu, wykonawca, strona klienta. */
.cc-case-facts {
	box-sizing: border-box;
	gap: 0 !important;
	padding: 0.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--card);
}

.cc-case-fact {
	gap: 0.25rem !important;
	padding: 1rem 1.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.cc-case-fact + .cc-case-fact {
	border-left: 1px solid var(--wp--preset--color--border);
}

.cc-case-fact p,
.cc-case-fact .wp-block-post-terms {
	margin: 0;
}

.cc-case-fact a {
	color: var(--wp--preset--color--primary-dark);
}

.cc-case-fact__label {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
}

.cc-case-fact:not(:has(.wp-block-post-terms a, .cc-case-fact__url)) {
	display: none;
}

@media (max-width: 781px) {
	.cc-case-facts {
		grid-template-columns: 1fr !important;
	}

	.cc-case-fact + .cc-case-fact {
		border-top: 1px solid var(--wp--preset--color--border);
		border-left: 0;
	}
}

/* Treść realizacji jako sekcje case study: numerowane nagłówki, zakres jako kafelki. */
.cc-case-body .wp-block-post-content {
	counter-reset: cc-case;
}

.cc-case-body .wp-block-post-content > p:first-child {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}

.cc-case-body .wp-block-post-content > h2 {
	margin-top: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--xx-large);
}

.cc-case-body .wp-block-post-content > h2::before {
	content: counter(cc-case, decimal-leading-zero);
	counter-increment: cc-case;
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--primary-dark);
}

.cc-case-body .wp-block-post-content > ul:not([class*="is-style-"]) {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 0.75rem;
	padding: 0;
	list-style: none;
}

.cc-case-body .wp-block-post-content > ul:not([class*="is-style-"]) li {
	position: relative;
	padding: 0.875rem 1rem 0.875rem 3rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--small);
	box-shadow: var(--wp--preset--shadow--card);
}

.cc-case-body .wp-block-post-content > ul:not([class*="is-style-"]) li::before {
	content: "\2713 ";
	position: absolute;
	top: 0.875rem;
	left: 1rem;
	display: grid;
	place-items: center;
	width: 1.375rem;
	height: 1.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 9%, #fff);
	border-radius: 6px;
}

/* Ostatni akapit („Planujesz podobny projekt?…”) jako wyróżniona ramka. */
.cc-case-body .wp-block-post-content > p:last-child {
	margin-top: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--small);
}

/* Poprzednia / następna realizacja jako karty. */
.cc-case-nav > * {
	flex: 1 1 16rem;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--medium);
	transition: border-color var(--wp--custom--transition);
}

.cc-case-nav > *:hover {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, #fff);
}

.cc-case-nav .post-navigation-link-next {
	text-align: right;
}

.cc-case-nav a {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Brak poprzedniej/następnej realizacji – bez pustej karty. */
.cc-case-nav > :empty,
.cc-case-nav > :not(:has(a)) {
	display: none;
}

/*
 * Galeria „Logotypy (pasek)”: logotypy klientów w jednej linii, wyśrodkowane,
 * w odcieniach szarości (kolor po najechaniu). Kolejne logo: blok Galeria → Dodaj.
 */
.wp-block-gallery.is-style-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 2rem 3.5rem !important;
	align-items: center;
	justify-content: center;
}

.wp-block-gallery.is-style-logos figure.wp-block-image {
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
}

.wp-block-gallery.is-style-logos figure.wp-block-image img {
	width: auto !important;
	max-width: 8rem; /* szerokie logotypy nie dominują nad okrągłymi */
	height: 3rem !important;
	object-fit: contain !important;
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter var(--wp--custom--transition), opacity var(--wp--custom--transition);
}

.wp-block-gallery.is-style-logos figure.wp-block-image:hover img {
	filter: none;
	opacity: 1;
}

@media (max-width: 600px) {
	.wp-block-gallery.is-style-logos {
		gap: 1.5rem 2rem !important;
	}

	.wp-block-gallery.is-style-logos figure.wp-block-image img {
		height: 2.5rem !important;
	}
}

/* Pasek logotypów jako karuzela (gdy nie mieszczą się w rzędzie – assets/js/logo-marquee.js). */
.wp-block-gallery.is-style-logos.is-marquee {
	display: block;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.cc-logos-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: cc-marquee var(--cc-marquee-duration, 40s) linear infinite;
}

/* Odstęp marginesem (nie gap) – połowa ścieżki to dokładnie jeden komplet, pętla bez przeskoku. */
.wp-block-gallery.is-style-logos .cc-logos-track > figure.wp-block-image {
	margin: 0 3.5rem 0 0 !important;
}

.is-marquee:hover .cc-logos-track,
.is-marquee:focus-within .cc-logos-track {
	animation-play-state: paused;
}

@keyframes cc-marquee {

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.is-style-logos.is-marquee {
		overflow-x: auto;
		-webkit-mask-image: none;
		mask-image: none;
	}

	.cc-logos-track {
		animation: none;
	}
}