/*
Theme Name: Ortodontic
Theme URI: https://ortodontic.pl
Author: Radek
Description: Blokowy motyw WordPress dla kliniki Ortodontic — ortodoncja i stomatologia w Rzeszowie.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Version: 0.29.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ortodontic
Tags: full-site-editing, block-patterns, one-column
*/

/* -------------------------------------------------------------------------
 * Przewijanie strony
 * ---------------------------------------------------------------------- */

/* Kotwice z menu i przycisków („Umów wizytę" → #kontakt) dojeżdżają płynnie.
   Świadomie nie przejmujemy natywnego scrolla biblioteką typu Lenis — to psuje
   momentum trackpada, przewijanie klawiaturą i czytniki ekranu. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Sekcja po skoku nie przykleja się do krawędzi okna. */
html {
	scroll-padding-top: 32px;
}

/* Delikatne wejście sekcji przy pierwszym pokazaniu się w kadrze.
   `.js-reveal` dokłada `app.js`, więc bez JS treść jest po prostu widoczna. */
@media (prefers-reduced-motion: no-preference) {
	.js-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
			transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
		will-change: opacity, transform;
	}

	.js-reveal.is-revealed {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

/* -------------------------------------------------------------------------
 * Górna belka informacyjna
 * ---------------------------------------------------------------------- */

.topbar {
	padding-block: 0;
}

.topbar__inner {
	gap: 18px;
	min-height: 36px;
}

.topbar__claims {
	gap: 46px;
}

.topbar__contact {
	gap: 18px;
}

.topbar__claim,
.topbar__hours {
	color: rgba(255, 255, 255, 0.8);
	font-size: 11px;
	line-height: 1.4;
	margin: 0;
	white-space: nowrap;
}

.topbar__phone {
	margin: 0;
}

.topbar__phone a {
	color: var(--wp--preset--color--link-light);
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
}

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

.site-header {
	padding-block: 21px;
}

.site-header__inner {
	gap: 24px;
}

.site-logo img {
	display: block;
	width: 102px;
	height: auto;
}

.main-nav ul.wp-block-navigation__container {
	gap: 6px;
}

/* Pastylki wg projektu (Figma 6YcdRGqvyyGnrIhrHA43py, node 1:978 — pomiar z eksportu
   1140px, czyli w skali kontenera, więc css_px = figma_px × 1,088):
   wysokość 23 → 25, padding poziomy 11 → 12, odstęp 5, tło #fff, pełne zaokrąglenie.
   Rozmiar pisma dobrany pod szerokość tekstu, nie pod wysokość wersalika — Manrope jest
   szerszy od fontu projektu, więc 13px daje szerokości pastylek z makiety.
   2026-10-14: na życzenie klienta powiększone do 15px i paddingu 9px 16px. */
.main-nav .wp-block-navigation-item__content {
	background-color: transparent;
	border-radius: 100px;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1;
	padding: 9px 16px;
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Dziesięć pozycji (po powiększeniu pastylek do 15px) nie mieści się w jednym wierszu
   poniżej ~1280px, a złamane na dwa
   rozpychają nagłówek. Poniżej tej szerokości wymuszamy overlay — dokładnie to samo,
   co core robi sam poniżej 600px przy `overlayMenu: mobile`, tylko z wyższym progiem.
   Reguły `.is-menu-open` w core nie są w media query, więc otwarte menu wygląda tak samo. */
@media (min-width: 600px) and (max-width: 1279px) {
	.main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Białe tło pastylki tylko w poziomym menu — w overlayu na telefonie pastylki nie ma,
   zostaje samo zaokrąglenie dla stanu hover/focus. 600px to breakpoint, od którego core
   przestaje pokazywać menu jako overlay przy `overlayMenu: mobile`. */
@media (min-width: 600px) {
	.main-nav .wp-block-navigation__responsive-container:not(.is-menu-open)
		.wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--surface);
	}
}

/* Core drukuje `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content
   { color: inherit }` (0,3,0) i ładuje się PO arkuszu motywu, więc przy równej specyficzności
   wygrywa i kasuje biały tekst na hoverze. Powtórzona klasa daje nam (0,4,0). */
.main-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.main-nav .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Menu mobilne — overlay core/navigation
 *
 * Wymiary z makiety „iPhone 17" (804×1748 px = 402×874 css przy 2×), więc
 * css_px = px_makiety / 2: margines boczny 30, pierwsza pozycja u góry na 103,5,
 * krok pozycji 32, pismo 14/20, krzyżyk 22 px wpisany w 30 px od krawędzi.
 *
 * Core centruje treść overlaya; projekt wyrównuje ją do lewej i dokłada pod
 * listą CTA, telefony, logo, adres i godziny — to `.site-header__drawer`,
 * przenoszony tu z nagłówka przez `assets/js/header.js`.
 * ---------------------------------------------------------------------- */

.main-nav .wp-block-navigation__responsive-container.is-menu-open {
	align-items: flex-start;
	justify-content: flex-start;
	padding: 0 30px 40px;
}

/* Core daje kontenerowi treści `padding-top: 56px`, żeby zrobić miejsce na
   krzyżyk. Krzyżyk jest pozycjonowany absolutnie względem dialogu, więc odstęp
   nad listą liczymy sami — inaczej doklejałby się do naszego. */
.main-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content {
	align-items: flex-start;
	padding-top: 101px;
	width: 100%;
}

.main-nav .wp-block-navigation__responsive-container.is-menu-open
	ul.wp-block-navigation__container {
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

.main-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 20px;
	padding: 0;
}

/* Pastylka hover jest z poziomego menu — w overlayu zostaje samo podkreślenie.
   Powtórzona klasa, bo reguła hoveru wyżej ma (0,4,0). */
.main-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.main-nav .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* Krzyżyk: cienki, prawie czarny — w projekcie nie jest granatowy jak reszta. */
.main-nav .wp-block-navigation__responsive-container-close {
	color: #202020;
	padding: 0;
	right: 9px;
	top: 38px;
}

.main-nav .wp-block-navigation__responsive-container-close svg {
	height: 22px;
	width: 22px;
}

/* Stopka overlaya. Ukryta, dopóki `header.js` nie przeniesie jej do kontenera
   overlaya — w nagłówku (i na desktopie, gdzie kontener jest zwykłym paskiem)
   nie ma czego pokazywać. */
.site-header__drawer {
	display: none;
}

.wp-block-navigation__responsive-container .site-header__drawer {
	display: block;
	width: 100%;
}

@media (min-width: 1280px) {
	.wp-block-navigation__responsive-container .site-header__drawer {
		display: none;
	}
}

.site-header__drawer-cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 20px;
	padding: 8px 44px 8px 18px;
}

.site-header__drawer-phone {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: 20px;
	margin: 0;
}

.site-header__drawer-phone a {
	color: inherit;
	text-decoration: none;
}

.site-header__drawer-phone a:hover {
	text-decoration: underline;
}

/* Makieta jest telefonowa (402 css). Na tablecie overlay też się otwiera, więc
   wiersz logo/adres trzyma szerokość z projektu — inaczej adres odjeżdża na
   drugi koniec ekranu. */
.site-header__drawer-foot {
	align-items: flex-start;
	max-width: 342px;
	width: 100%;
}

.site-header__drawer-logo img {
	display: block;
	height: auto;
	width: 93px;
}

.site-header__drawer-info {
	text-align: right;
}

.site-header__drawer-address {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 21px;
	margin: 0;
}

.site-header__drawer-hours {
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--surface);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 14px;
	margin: 0;
	padding: 6px 14px;
}

/* -------------------------------------------------------------------------
 * Warianty przycisku (block styles core/button)
 * ---------------------------------------------------------------------- */

.wp-block-button.is-style-arrow .wp-block-button__link,
.wp-block-button.is-style-arrow-inverse .wp-block-button__link {
	padding-right: 48px;
	position: relative;
}

.wp-block-button.is-style-arrow .wp-block-button__link::after,
.wp-block-button.is-style-arrow-inverse .wp-block-button__link::after {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 9px 9px;
	border-radius: 50%;
	content: "";
	height: 26px;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 26px;
}

.wp-block-button.is-style-arrow .wp-block-button__link::after {
	background-color: var(--wp--preset--color--surface);
	background-image: url(assets/icons/arrow-navy.svg);
}

.wp-block-button.is-style-arrow-inverse .wp-block-button__link::after {
	background-color: var(--wp--preset--color--contrast);
	background-image: url(assets/icons/arrow-white.svg);
}

/* Sam okrągły przycisk-ikona ze strzałką. */
.wp-block-button.is-style-icon-arrow .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	background-image: url(assets/icons/arrow-white.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 13px 13px;
	border-radius: 50%;
	color: transparent;
	display: block;
	font-size: 0;
	height: 33px;
	overflow: hidden;
	padding: 0;
	width: 33px;
}

/* Przycisk obramowany na jasnym tle. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	padding: 10px 18px;
	text-decoration: none;
}

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

/* Hover przycisków kolorowanych presetami — globalnie, dla każdego wariantu.
   Klasy presetów core drukują `background-color: … !important`, więc hover
   musi powtórzyć `!important`, inaczej przegrywa mimo wyższej specyficzności. */
.wp-block-button .wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Limonkowy przycisk → granat z białym tekstem. */
.wp-block-button .wp-block-button__link.has-accent-background-color:hover,
.wp-block-button .wp-block-button__link.has-accent-background-color:focus-visible {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--surface) !important;
}

/* Granatowy przycisk → rozjaśniony granat. */
.wp-block-button .wp-block-button__link.has-contrast-background-color:hover,
.wp-block-button .wp-block-button__link.has-contrast-background-color:focus-visible {
	background-color: #454284 !important;
}

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

.hero {
	background-color: var(--wp--preset--color--primary);
	border-radius: 22px;
	color: var(--wp--preset--color--surface);
	overflow: hidden;
	padding: 62px 46px 38px;
	position: relative;
}

.hero__media {
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.hero__blob {
	left: 50%;
	margin: 0;
	max-width: none;
	position: absolute;
	top: -6%;
	transform: translateX(-50%);
	width: 470px;
}

.hero__blob img {
	display: block;
	height: auto;
	width: 100%;
}

.hero__grid {
	align-items: stretch;
	display: grid;
	gap: 30px;
	grid-template-columns: 466px minmax(0, 1fr);
	position: relative;
}

.hero__col--text {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.hero__col--media {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	position: relative;
}

.hero__eyebrow {
	color: var(--wp--preset--color--on-primary-soft);
	font-weight: 500;
	letter-spacing: 0.1px;
	margin: 0 0 6px;
}

.hero__title {
	color: var(--wp--preset--color--surface);
	margin: 0 0 22px;
}

.hero__chip-rows {
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hero__chips a {
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--surface);
	display: inline-block;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	padding: 12px 17px;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.hero__chips a:hover,
.hero__chips a:focus-visible {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.hero__cta {
	margin-top: 26px;
}

.hero__photo {
	inset: -44px 0 auto 0;
	margin: 0;
	position: absolute;
}

.hero__photo img {
	display: block;
	height: auto;
	margin-inline-start: auto;
	height: 530px;
	object-fit: contain;
	object-position: right top;
	width: 100%;
}

.hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 60px;
	margin: 18px 0 0;
	position: relative;
}

.hero__stat-value {
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.05;
	margin: 0;
}

.hero__stat-label {
	color: var(--wp--preset--color--muted);
	font-size: 11px;
	line-height: 1.4;
	margin: 5px 0 0;
}

/* -------------------------------------------------------------------------
 * Sekcja: Ortodontic Rzeszow — cztery filary
 * ---------------------------------------------------------------------- */

.onas {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid #dfe4f7;
	border-radius: 22px;
	overflow: hidden;
	padding: 43px 46px 28px;
	position: relative;
}

/* Cztery kolumny w siatce: wiersz ikony, wiersz nagłówka, wiersz opisu.
   Kolumny 2–4 dziedziczą wiersze przez `subgrid`, więc ikony, nagłówki
   i opisy startują na tej samej wysokości niezależnie od długości tekstu.
   Selektor dwuklasowy, bo core ustawia `.wp-block-columns { display: flex }`. */
.wp-block-columns.onas__cols {
	display: grid;
	gap: 10px 34px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-template-rows: 34px auto auto;
	position: relative;
}

.onas__col {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
}

/* Kolumna z nazwą kliniki nie ma ikony — tytuł zaczyna się wyżej. */
.onas__col--intro {
	display: block;
	padding-top: 8px;
}

.onas__icon {
	align-items: flex-end;
	align-self: end;
	display: flex;
	margin: 0;
}

.onas__icon img {
	display: block;
	height: auto;
}

.onas__icon--star img {
	width: 35px;
}

.onas__icon--dots img {
	width: 33px;
}

.onas__icon--asterisk img {
	width: 29px;
}

.onas__title {
	font-size: 28px;
	letter-spacing: -0.6px;
	line-height: 34px;
	margin: 0 0 14px;
}

.onas__heading {
	font-size: 22px;
	letter-spacing: -0.3px;
	line-height: 24px;
	margin: 0;
}

.onas .wp-block-column p {
	line-height: 1.57;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Sekcja: O klinice
 * ---------------------------------------------------------------------- */

.o-klinice__cols {
	gap: 149px;
}

.eyebrow {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0 0 20px;
	text-transform: uppercase;
}

.o-klinice__title {
	font-weight: 700;
	letter-spacing: -1.2px;
	line-height: 1.15;
	margin: 0;
}

.o-klinice .wp-block-column p {
	line-height: 1.57;
	margin: 0 0 22px;
}

.o-klinice .wp-block-column p:last-child {
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * Sekcja: Kompleksowe leczenie (usługi)
 * ---------------------------------------------------------------------- */

/* Szersza niż reszta strony: 1700px zamiast wideSize 1240px.
 * Trzy klasy (0,3,0) biją regułę layoutu core dla .alignwide (0,2,0).
 * Liczba widocznych kafelków i odstęp są zmiennymi — breakpointy zmieniają
 * tylko je, szerokość slajdu liczy się sama. */
.wp-block-group.alignwide.uslugi {
	max-width: 1700px;
}

.uslugi {
	--uslugi-gap: 39px;
	--uslugi-per: 6;
}

.uslugi__head {
	gap: 24px;
	margin-bottom: 26px;
}

.uslugi__title {
	margin: 0;
}

.uslugi__slider {
	overflow: hidden;
}

.uslugi__slider .wp-block-post-template {
	align-items: stretch;
	display: flex;
	gap: var(--uslugi-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Po starcie Swipera odstęp niesie jego `spaceBetween` — gap z CSS zostaje
 * wyzerowany, bo Swiper go nie widzi przy liczeniu `snapGrid` i ostatni slajd
 * kończyłby się poza kadrem. CSS-owy gap zostaje dla edytora i wersji bez JS. */
.uslugi__slider.swiper .wp-block-post-template {
	gap: 0;
}

.uslugi__slider .wp-block-post,
.uslugi__grid .wp-block-post {
	border-radius: 14px;
	box-sizing: border-box;
	container-type: inline-size;
	display: flex;
	flex: 0 0 calc((100% - (var(--uslugi-per) - 1) * var(--uslugi-gap)) / var(--uslugi-per));
	flex-direction: column;
	height: auto;
	overflow: hidden;
	position: relative;
	width: calc((100% - (var(--uslugi-per) - 1) * var(--uslugi-gap)) / var(--uslugi-per));
}

.uslugi__media {
	border-radius: 14px;
	margin: 0 0 14px;
	overflow: hidden;
	position: relative;
}

/* Usługa bez zdjęcia — core nie renderuje wtedy bloku obrazka w ogóle,
 * więc kadr trzyma proporcję sam. */
.uslugi__media:not(:has(.wp-block-post-featured-image)) {
	aspect-ratio: 29 / 38;
	background: var(--wp--custom--soft);
}

.uslugi__thumb {
	margin: 0;
}

.uslugi__thumb img {
	aspect-ratio: 29 / 38;
	border-radius: 14px;
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

/* --- Panel hover ---------------------------------------------------------
 * Zmierzony z `designs/uslugi-hover.png` (eksport 4×, kafelek 134 design px).
 * Wszystko jest podane w `cqw` — procentach szerokości kafelka — więc panel
 * skaluje się razem z nim i tekst plus strzałka mieszczą się przy każdej
 * szerokości, nie tylko przy 250,8px z projektu. Wartości to zmierzone
 * proporcje: padding 17,5/134, ikona 18/134, tytuł 12,0/134 interlinii itd.
 * Panel jest `pointer-events: none`, żeby klik trafiał w rozciągnięty link
 * nazwy pod spodem. */
.uslugi__reveal {
	background: var(--wp--preset--color--surface);
	border-radius: 0 0 14px 14px;
	bottom: 0;
	box-sizing: border-box;
	left: 0;
	max-height: 100%;
	overflow: hidden;
	padding: min(17.8cqw, 50px) min(13.1cqw, 36px) min(4.1cqw, 12px);
	pointer-events: none;
	position: absolute;
	right: 0;
	transform: translateY(100%);
	transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.uslugi__slider .wp-block-post:hover .uslugi__reveal,
.uslugi__slider .wp-block-post:focus-within .uslugi__reveal,
.uslugi__grid .wp-block-post:hover .uslugi__reveal,
.uslugi__grid .wp-block-post:focus-within .uslugi__reveal {
	transform: translateY(0);
}

.uslugi__reveal-title {
	color: var(--wp--preset--color--contrast);
	font-size: min(8.8cqw, 26px);
	font-weight: 500;
	letter-spacing: -0.3px;
	line-height: 1.09;
	margin: 0 0 min(5.6cqw, 16px);
}

.uslugi__reveal-text {
	color: #a3a5b0;
	font-size: min(5.2cqw, 15px);
	line-height: 1.46;
	margin: 0 0 min(7.2cqw, 20px);
}

.uslugi__reveal-text p {
	margin: 0;
}

.uslugi__reveal-icon {
	background-color: var(--wp--preset--color--primary);
	background-image: url(assets/icons/arrow-white.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 36% 36%;
	border-radius: 50%;
	height: min(13.2cqw, 40px);
	width: min(13.2cqw, 40px);
}

.uslugi__name {
	color: var(--wp--preset--color--contrast);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 1.3;
	margin: 0 0 6px;
	transition: color 0.2s ease;
}

.uslugi__name a {
	color: inherit;
	text-decoration: none;
}

/* Rozciągnięty link — klikalna jest cała karta, a nie sam nagłówek. */
.uslugi__name a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.uslugi__slider .wp-block-post:hover .uslugi__name,
.uslugi__slider .wp-block-post:focus-within .uslugi__name,
.uslugi__grid .wp-block-post:hover .uslugi__name,
.uslugi__grid .wp-block-post:focus-within .uslugi__name {
	color: var(--wp--preset--color--primary);
}

.uslugi__name a:focus-visible::after {
	border-radius: 14px;
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

.uslugi__desc {
	color: var(--wp--preset--color--body);
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Stopka
 * ---------------------------------------------------------------------- */

.site-footer {
	margin-top: 200px;
}

.site-footer__top {
	gap: 24px;
	margin-bottom: 26px;
}

/*
 * Trzy kolumny jak na starej stronie: Kontakt / Godziny pracy / Zaobserwuj nas.
 * Każda wartość to blok z pluginu (`ortodontic/contact-info`,
 * `ortodontic/social-links`) czytający Ustawienia → Dane kontaktowe.
 */
.site-footer__bar {
	border: 1px solid var(--wp--custom--overlay--line);
	border-radius: var(--wp--custom--radius--md);
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(4, minmax(0, 1fr));
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}

/* Kolumna „Na skróty” — linki do stron, jak na starej stronie. */
.site-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__nav li {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	margin: 0;
}

.site-footer__nav a {
	color: inherit;
	text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
	color: var(--wp--preset--color--link-light);
}

.site-footer__heading {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	margin: 0 0 var(--wp--preset--spacing--30);
	text-transform: uppercase;
}

.site-footer__item {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	margin: 0;
}

.site-footer__item--strong {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.site-footer__item--muted {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.site-footer__item a,
.site-footer__socials .ortodontic-social-links__link {
	color: inherit;
	text-decoration: none;
}

.site-footer__item a:hover,
.site-footer__item a:focus-visible,
.site-footer__socials .ortodontic-social-links__link:hover,
.site-footer__socials .ortodontic-social-links__link:focus-visible {
	color: var(--wp--preset--color--link-light);
	opacity: 1;
}

/* Blok ortodontic/social-links — baza wspólna dla każdego miejsca, nie tylko stopki. */
.wp-block-ortodontic-social-links {
	display: flex;
	gap: 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ortodontic-social-links__item {
	margin: 0;
}

.ortodontic-social-links__link {
	align-items: center;
	color: inherit;
	display: flex;
}

.ortodontic-social-links__link svg {
	display: block;
	height: 15px;
	width: 15px;
}

.ortodontic-social-links__link:hover {
	opacity: 0.7;
}

/* Wariant z podpisami (`showLabels`): ikona + nazwa sieci, jedna pod drugą. */
.wp-block-ortodontic-social-links.has-labels {
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.wp-block-ortodontic-social-links.has-labels .ortodontic-social-links__link {
	font-size: var(--wp--preset--font-size--medium);
	gap: var(--wp--preset--spacing--20);
	line-height: 1.5;
}

.wp-block-ortodontic-social-links.has-labels .ortodontic-social-links__link svg {
	height: 18px;
	width: 18px;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	font-size: 11px;
	gap: 12px;
	justify-content: space-between;
	margin-top: 20px;
}

.site-footer__legal p {
	margin: 0;
}

.site-footer__legal ul {
	display: flex;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-footer__legal a {
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.site-footer__legal a:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Strona 404
 * ---------------------------------------------------------------------- */

.error-404 {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	padding-block: var(--wp--preset--spacing--70);
	text-align: center;
}

.error-404__code {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
	line-height: 1;
	margin: 0;
}

.error-404__title,
.error-404__lead {
	margin: 0;
}

.error-404__lead {
	color: var(--wp--preset--color--body);
	max-width: 520px;
}

/* -------------------------------------------------------------------------
 * Slider — wspólna nawigacja
 * ---------------------------------------------------------------------- */

.slider-nav {
	display: flex;
	gap: 15px;
}

.slider-nav__btn {
	align-items: center;
	background-color: var(--wp--preset--color--surface);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px 12px;
	border: 1px solid var(--wp--custom--line);
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	height: 33px;
	justify-content: center;
	padding: 0;
	transition: border-color 0.18s ease, opacity 0.18s ease;
	width: 33px;
}

.slider-nav__btn:hover {
	border-color: var(--wp--preset--color--primary);
}

.slider-nav__btn--prev {
	background-image: url(assets/icons/arrow-left.svg);
}

.slider-nav__btn--next {
	background-image: url(assets/icons/arrow-right.svg);
}

.slider-nav__btn.swiper-button-disabled {
	cursor: default;
	opacity: 0.45;
}

/* Gdy wszystkie slajdy mieszczą się w kadrze, Swiper blokuje nawigację. */
.slider-nav__btn.swiper-button-lock {
	display: none;
}

/* -------------------------------------------------------------------------
 * Strony przeglądowe (archiwum usług, strona zespołu)
 * ---------------------------------------------------------------------- */

.listing-page__title {
	font-size: var(--wp--preset--font-size--section);
	margin: 0 0 8px;
	max-width: 900px;
}

.listing-page__lead {
	color: var(--wp--preset--color--body);
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	max-width: 690px;
}

/* -------------------------------------------------------------------------
 * Strona „Usługi” — siatka kafelków
 *
 * Kafelek to ten sam komponent co w sliderze na stronie głównej (klasy
 * `.uslugi__*`), zmienia się wyłącznie tor: zamiast flexa ze stałą szerokością
 * slajdu jest grid. `.uslugi__grid` celowo nie ma klasy `.uslugi__slider`,
 * bo `app.js` szuka właśnie jej, żeby podpiąć Swipera.
 * ---------------------------------------------------------------------- */

/* Kafelek w siatce nie ma stałej szerokości slajdu — tor wyznacza kolumny. */
.uslugi__grid .wp-block-post {
	flex: initial;
	width: auto;
}

.uslugi__grid .wp-block-post-template {
	display: grid;
	gap: 34px 24px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 1023px) {
	.uslugi__grid .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.uslugi__grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 480px) {
	.uslugi__grid .wp-block-post-template {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------------------------------
 * Sekcja: Nasz zespół
 * ---------------------------------------------------------------------- */

.zespol__head {
	gap: 24px;
	margin-bottom: 26px;
}

.zespol__title {
	flex: 0 0 auto;
	margin: 0;
}

.zespol__lead {
	flex: 1 1 320px;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	max-width: 690px;
}

.zespol__slider {
	overflow: hidden;
}

.zespol__slider .wp-block-post-template {
	align-items: stretch;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.zespol__slider .wp-block-post-template > * + *,
.opinie__slider .wp-block-post-template > * + * {
	margin-block-start: 0;
}

.zespol__slider .wp-block-post {
	display: flex;
	flex-direction: column;
	border: 1px solid #e4e7f2;
	border-radius: 11px;
	box-sizing: border-box;
	flex: 0 0 auto;
	height: auto;
	padding: 12px;
	position: relative;
	width: 184px;
}

.zespol__photo {
	margin: 0 0 12px;
}

/* Część zdjęć zespołu ma przezroczyste tło (np. PIONKA.webp), a kadr jest
   dosunięty do góry — bez tła prześwitywałby kolor sekcji. */
.zespol__photo img {
	background-color: var(--wp--preset--color--surface);
	border-radius: 8px;
	display: block;
	height: 180px;
	object-fit: cover;
	object-position: top;
	width: 100%;
}

.zespol__name {
	color: var(--wp--preset--color--contrast);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -0.1px;
	line-height: 18px;
	margin: 0 0 4px;
}

/* Dwie klasy: kolor linków z theme.json wchodzi jako
   `.wp-site-blocks a:where(...)` (0,2,0) i jest drukowany po arkuszu motywu. */
.zespol .zespol__name a,
.team-grid .zespol__name a {
	color: inherit;
	text-decoration: none;
}

/* Rozciągnięty link — klikalna jest cała karta, a nie sam nagłówek. */
.zespol__name a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.zespol__slider .wp-block-post:hover .zespol__name,
.zespol__slider .wp-block-post:focus-within .zespol__name,
.zespol__grid .wp-block-post:hover .zespol__name,
.zespol__grid .wp-block-post:focus-within .zespol__name {
	color: var(--wp--preset--color--primary);
}

.zespol__name a:focus-visible::after {
	border-radius: 11px;
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.zespol__role {
	color: #6b6c78;
	font-size: 11px;
	line-height: 18px;
	margin: 0 0 auto;
}

.zespol__dots {
	display: flex;
	gap: 7px;
	justify-content: center;
	margin-top: 26px;
}

/* -------------------------------------------------------------------------
 * Strona „Zespół” — siatka kafelków
 *
 * Karta jest tą samą kartą co w sliderze na stronie głównej (klasy `.zespol__*`);
 * zmienia się tor — grid zamiast flexa — i przez to szerokość karty, więc zdjęcie
 * musi trzymać proporcję (8:9 z projektu: 160 × 180), a nie stałą wysokość.
 * `.zespol__grid` celowo nie ma klasy `.zespol__slider`, bo `app.js` szuka właśnie jej.
 * ---------------------------------------------------------------------- */

.zespol__grid .wp-block-post-template {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.zespol__grid .wp-block-post {
	border: 1px solid #e4e7f2;
	border-radius: 11px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 12px;
	position: relative;
}

.zespol__grid .zespol__photo img {
	aspect-ratio: 8 / 9;
	height: auto;
}

.zespol__grid > * + *,
.zespol__grid .wp-block-post-template > * + *,
.zespol__grid .wp-block-post > * + * {
	margin-block-start: 0;
}

@media (max-width: 900px) {
	.zespol__grid .wp-block-post-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.zespol__grid .wp-block-post-template {
		gap: 16px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* -------------------------------------------------------------------------
 * Sekcja: Opinie
 * ---------------------------------------------------------------------- */

.opinie {
	background-color: var(--wp--preset--color--surface);
	border-radius: 22px;
	padding: 64px 44px 48px;
	text-align: center;
}

.opinie__mark {
	margin: 0 auto;
	opacity: 0.9;
	width: 74px;
}

.opinie__mark img {
	display: block;
	height: auto;
	width: 100%;
}

.opinie__slider {
	margin-top: 26px;
	overflow: hidden;
}

.opinie__slider .wp-block-post-template {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.opinie__slider .wp-block-post {
	flex: 0 0 100%;
	width: 100%;
}

.opinie__quote {
	margin: 0 auto 22px;
	max-width: 505px;
}

.opinie__quote .wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--contrast);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.2px;
	line-height: 1.68;
	margin: 0;
}

.opinie__author {
	align-items: center;
	gap: 9px;
	justify-content: center;
}

.opinie__avatar {
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	display: flex;
	flex: none;
	font-size: 12px;
	font-weight: 700;
	height: 28px;
	justify-content: center;
	width: 28px;
}

.opinie__who {
	text-align: left;
}

.opinie__name {
	color: var(--wp--preset--color--contrast);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}

.opinie__source {
	color: #6b6c78;
	font-size: 10px;
	line-height: 1.4;
	margin: 0;
}

.opinie__dots,
.zespol__dots {
	display: flex;
	gap: 7px;
	justify-content: center;
}

.opinie__dots {
	margin-top: 22px;
}

.opinie__dot,
.zespol__dot {
	background-color: #c9d3f0;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	height: 6px;
	padding: 0;
	transition: width 0.2s ease, background-color 0.2s ease;
	width: 6px;
}

.opinie__dot--active,
.zespol__dot--active {
	background-color: var(--wp--preset--color--primary);
	width: 22px;
}

.zespol__dot--active {
	width: 6px;
	background-color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * Sekcja: Liczniki
 * ---------------------------------------------------------------------- */

.liczby__grid {
	display: grid;
	gap: 28px;
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
}

.liczby__item {
	border-top: 1px solid #aab6e3;
	padding-top: 34px;
}

.liczby__value {
	color: var(--wp--preset--color--contrast);
	margin: 0;
	font-size: 46px;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -1.6px;
	line-height: 1;
}

.liczby__label {
	color: var(--wp--preset--color--body);
	font-size: 12px;
	line-height: 1.45;
	margin: 0;
	max-width: 190px;
}

/* -------------------------------------------------------------------------
 * Sekcja: Dlaczego pacjenci wybierają Ortodontic
 * ---------------------------------------------------------------------- */

.dlaczego__title {
	font-size: 36px;
	letter-spacing: -1.1px;
	margin: 0 0 26px;
}

.dlaczego__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
}

.dlaczego__card {
	background-color: var(--wp--preset--color--surface);
	border-radius: 14px;
	padding: 26px 26px 30px;
}

.dlaczego__card-title {
	color: var(--wp--preset--color--contrast);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 1.3;
	margin: 0 0 12px;
}

.dlaczego__card-text {
	color: var(--wp--preset--color--body);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

.dlaczego__card--cta {
	align-items: center;
	background-color: var(--wp--preset--color--contrast);
	border-radius: 14px;
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.dlaczego__card--cta .dlaczego__card-title {
	color: var(--wp--preset--color--surface);
	line-height: 1.2;
}

.dlaczego__card--cta .dlaczego__card-text {
	color: var(--wp--custom--muted-on-dark);
}

.dlaczego__cta {
	flex: none;
}

/* -------------------------------------------------------------------------
 * Sekcja: Pasek usług (marquee)
 * ---------------------------------------------------------------------- */

.pasek {
	background-color: var(--wp--preset--color--primary);
	overflow: hidden;
	padding: 15px 0;
}

.pasek__viewport {
	overflow: hidden;
}

.pasek__track {
	animation: pasek-scroll 38s linear infinite;
	display: flex;
	width: max-content;
}

.pasek__list {
	align-items: center;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pasek__item {
	align-items: center;
	color: var(--wp--preset--color--surface);
	display: flex;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.1px;
	white-space: nowrap;
}

.pasek__item::after {
	background-color: rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	content: "";
	height: 5px;
	margin: 0 32px;
	width: 5px;
}

@keyframes pasek-scroll {

	from {
		transform: translateX(0);
	}

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

@media (prefers-reduced-motion: reduce) {

	.pasek__track {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * Sekcja: Przyjazny dentysta dla dzieci
 * ---------------------------------------------------------------------- */

.dzieci {
	background-color: var(--wp--preset--color--surface);
	border-radius: 22px;
	padding: 44px 46px;
}

.dzieci__inner {
	align-items: center;
	display: grid;
	gap: 24px;
	gap: 68px;
	grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
}

.dzieci__eyebrow {
	color: var(--wp--preset--color--primary);
	margin: 0 0 14px;
}

.dzieci__title {
	font-size: 36px;
	letter-spacing: -1.1px;
	line-height: 1.15;
	margin: 0 0 18px;
}

.dzieci__lead {
	color: var(--wp--preset--color--body);
	line-height: 1.55;
	margin: 0 0 24px;
	max-width: 400px;
}

.dzieci__list {
	display: grid;
	gap: 13px;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
}

.dzieci__list li {
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	line-height: 1.4;
	padding-left: 26px;
	position: relative;
}

.dzieci__list li::before {
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	content: "";
	height: 17px;
	left: 0;
	position: absolute;
	top: 1px;
	width: 17px;
}

.dzieci__list li::after {
	border-bottom: 2px solid var(--wp--preset--color--surface);
	border-left: 2px solid var(--wp--preset--color--surface);
	content: "";
	height: 3px;
	left: 4px;
	position: absolute;
	top: 6px;
	transform: rotate(-45deg);
	width: 7px;
}

.dzieci__media {
	position: relative;
}

.dzieci__photo {
	margin: 0;
}

.dzieci__media img {
	display: block;
	height: auto;
	width: 100%;
}

/* -------------------------------------------------------------------------
 * Sekcja: Poradnik pacjenta
 * ---------------------------------------------------------------------- */

.poradnik__title {
	font-size: 36px;
	letter-spacing: -1.1px;
	margin: 0 0 26px;
}

.poradnik__grid .wp-block-post-template {
	display: grid;
	gap: 15px;
	grid-template-columns: repeat(6, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
}

.poradnik__grid .wp-block-post {
	display: flex;
	flex-direction: column;
}

.poradnik__thumb {
	margin: 0 0 12px;
}

.poradnik__thumb img {
	border-radius: 10px;
	display: block;
	height: 119px;
	object-fit: cover;
	width: 100%;
}

.poradnik__name {
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	margin: 0 0 auto;
}

.poradnik__name a {
	color: inherit;
	text-decoration: none;
}

.poradnik__name a:hover {
	color: var(--wp--preset--color--primary);
}

.poradnik__foot {
	align-items: center;
	display: flex;
	gap: 8px;
	justify-content: space-between;
	margin-top: 12px;
}

.poradnik__cat {
	margin: 0;
}

.poradnik__cat a {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	display: inline-block;
	font-size: 11px;
	padding: 5px 11px;
	text-decoration: none;
}

.poradnik__more {
	flex: none;
}

.poradnik__more a,
a.poradnik__more {
	background-color: var(--wp--preset--color--primary);
	background-image: url(assets/icons/arrow-white.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 11px 11px;
	border-radius: 50%;
	color: transparent;
	display: block;
	font-size: 0;
	height: 30px;
	overflow: hidden;
	text-decoration: none;
	width: 30px;
}

/* -------------------------------------------------------------------------
 * Sekcja: Wizyta krok po kroku
 * ---------------------------------------------------------------------- */

.kroki__head {
	align-items: flex-start;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
	margin-bottom: 26px;
}

.kroki__title {
	font-size: 36px;
	letter-spacing: -1.1px;
	line-height: 1.2;
	margin: 0;
	max-width: 640px;
}

.kroki__lead {
	color: var(--wp--preset--color--body);
	font-size: 12px;
	line-height: 1.5;
	margin: 58px 0 0;
	max-width: 260px;
}

.kroki__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, 1fr);
}

.kroki__card {
	background-color: var(--wp--preset--color--surface);
	border-radius: 14px;
	padding: 22px 24px 26px;
}

.kroki__card--accent {
	background-color: #e2e8fa;
}

.kroki__meta {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 20px;
}

.kroki__badge {
	align-items: center;
	background-color: var(--wp--preset--color--contrast);
	margin: 0;
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	display: flex;
	flex: none;
	font-size: 12px;
	font-weight: 700;
	height: 30px;
	justify-content: center;
	width: 30px;
}

.kroki__card--accent .kroki__badge {
	background-color: var(--wp--preset--color--primary);
}

.kroki__time {
	color: #8a8fa8;
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.kroki__card--accent .kroki__time {
	color: var(--wp--preset--color--primary);
}

.kroki__name {
	color: var(--wp--preset--color--contrast);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 10px;
}

.kroki__card--accent .kroki__name {
	color: var(--wp--preset--color--primary);
}

.kroki__text {
	color: var(--wp--preset--color--body);
	line-height: 1.5;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Sekcja: FAQ
 * ---------------------------------------------------------------------- */

.faq__cols {
	gap: 147px;
}

/*
 * Na stronie usługi FAQ stoi bez tła między białymi kartami, a sekcje dzieli
 * tylko blockGap (22px) — bez dodatkowego oddechu wygląda na doklejone.
 */
.single-service .wp-block-post-content > .faq {
	padding-block: var(--wp--preset--spacing--70);
}

/* Kolumny stackują się przy 781px — 147px poziomego odstępu robi się wtedy pionową dziurą. */
@media ( max-width: 781px ) {
	.wp-block-columns.faq__cols {
		gap: 32px;
	}

	.single-service .wp-block-post-content > .faq {
		padding-block: var(--wp--preset--spacing--50);
	}
}

.faq__title {
	font-size: 36px;
	letter-spacing: -1.1px;
	margin: 0 0 18px;
}

.faq__lead {
	font-size: 12px;
	line-height: 1.55;
	margin: 0 0 26px;
	max-width: 290px;
}

.faq__item {
	background-color: var(--wp--preset--color--surface);
	border-radius: 14px;
	margin-bottom: 14px;
	/* app.js animuje wysokość w px; poza animacją wysokość jest auto. */
	overflow: hidden;
	transition: height 0.28s ease;
}

@media ( prefers-reduced-motion: reduce ) {
	.faq__item {
		transition: none;
	}
}

.faq__item summary {
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	list-style: none;
	padding: 18px 62px 18px 20px;
	position: relative;
}

.faq__item summary::-webkit-details-marker {
	display: none;
}

.faq__item summary::after {
	background-color: #e6ebfa;
	background-image: url(assets/icons/plus-navy.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 11px 11px;
	border-radius: 50%;
	content: "";
	height: 30px;
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
}

.faq__item[open] summary::after {
	background-color: var(--wp--preset--color--primary);
	background-image: url(assets/icons/close-white.svg);
}

/*
 * Padding podsumowania jest identyczny w obu stanach — inaczej „+” i „×”
 * (pozycjonowane przez top: 50% summary) skakałyby po otwarciu karty.
 * Ciaśniejszy odstęp z projektu daje ujemny margines akapitu.
 */
.faq__item[open] p {
	margin-top: -12px;
}

.faq__item p {
	color: var(--wp--preset--color--body);
	line-height: 1.55;
	margin: 0;
	padding: 0 62px 20px 20px;
}

/* Link „Dowiedz się więcej” pod odpowiedzią — wcięty jak jej tekst. */
.faq__item .wp-block-buttons {
	margin: -6px 0 0;
	padding: 0 20px 20px;
}

/* -------------------------------------------------------------------------
 * Sekcja: Kontakt
 * ---------------------------------------------------------------------- */

.kontakt__grid {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(2, 1fr);
}

.kontakt__panel {
	border-radius: 22px;
}

.kontakt__panel--light {
	background-color: transparent;
	display: flex;
	flex-direction: column;
	padding: 30px 26px 26px;
}

.kontakt__panel--dark {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
	padding: 32px 34px 30px;
}

.kontakt__title {
	color: var(--wp--preset--color--contrast);
	font-size: 30px;
	letter-spacing: -0.9px;
	line-height: 1.2;
	margin: 0 0 14px;
}

.kontakt__title--light {
	color: var(--wp--preset--color--surface);
}

.kontakt__lead {
	color: var(--wp--preset--color--body);
	font-size: 12px;
	line-height: 1.5;
	margin: 0 0 26px;
	max-width: 300px;
}

.kontakt__lead--light {
	color: var(--wp--preset--color--muted);
}

.kontakt__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: auto;
}

.kontakt__actions .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	border: 0;
	color: var(--wp--preset--color--contrast);
	font-size: 12px;
	font-weight: 600;
	padding: 12px 22px;
}

.kontakt__actions .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.kontakt__note {
	color: rgba(255, 255, 255, 0.45);
	font-size: 10px;
	margin: 14px 0 0;
}

/* -------------------------------------------------------------------------
 * Pola formularzy — wspólny wygląd w całym serwisie
 * ---------------------------------------------------------------------- */

.fluentform .ff-el-group {
	margin-bottom: 12px;
}

.fluentform .ff-el-form-control {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line);
	border-radius: 10px;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 13px;
	padding: 12px 15px;
	width: 100%;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--primary);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}

.kontakt__panel--dark .fluentform .ff_submit_btn_wrapper .ff-btn-submit::after {
	content: " \2197";
}

.fluentform .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit {
	background-color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 11px;
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	padding: 13px 24px;
	width: 100%;
}

.fluentform .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}

.kontakt__panel--dark .fluentform .ff-el-form-control {
	background-color: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--surface);
}

.kontakt__panel--dark .fluentform .ff-el-form-control::placeholder {
	color: rgba(255, 255, 255, 0.45);
	opacity: 1;
}

/* Zgoda RODO (`gdpr_agreement`) — 12px w każdym formularzu w serwisie.
   Tekst siedzi w `.ff_t_c` wewnątrz `.ff_tc_label`, więc rozmiar dziedziczy. */
.fluentform .ff-el-tc .ff_tc_label {
	align-items: flex-start;
	display: flex;
	font-size: 12px;
	gap: 9px;
	line-height: 1.5;
	margin: 0;
}

.fluentform .ff-el-tc .ff-el-form-check-input {
	accent-color: var(--wp--preset--color--primary);
	flex: 0 0 auto;
	height: 15px;
	margin-top: 2px;
	width: 15px;
}

.fluentform .ff-el-tc a {
	color: inherit;
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Cennik (blok ortodontic/price-list)
 * ---------------------------------------------------------------------- */

.price-list__rows {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.price-list__row {
	align-items: baseline;
	border-top: 1px solid var(--wp--custom--line-soft);
	display: flex;
	gap: 16px;
	justify-content: space-between;
	padding: 10px 0;
}

.price-list__label {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
}

.price-list__value {
	color: var(--wp--preset--color--contrast);
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
	text-align: right;
	white-space: nowrap;
}

.price-list__group + .price-list__group {
	margin-top: 40px;
}

.price-list__desc {
	color: var(--wp--preset--color--body);
	display: block;
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.4;
	margin-top: 3px;
}

.price-list__group-title {
	margin: 0 0 12px;
}

/* Tryb „od …” bloku cennika i blok „Parametry usługi” — nieużywane na stronach
   usług po korekcie z projektu, ale wciąż dostępne w inserterze. */
.price-list--from {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 24px;
}

.price-list__from {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--heading);
	font-weight: 700;
}

.price-list__from-note {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
}

/* Repeater bloku „Parametry usługi” — tylko w edytorze. */
.spec-list-editor__row {
	align-items: center;
	border-bottom: 1px solid var(--wp--preset--color--on-primary-soft, #dfe3f5);
	display: grid;
	gap: 8px;
	grid-template-columns: 1fr 1fr auto;
	padding: 8px 0;
}

/* Widoczny tylko w edytorze — render.php nie emituje go na froncie. */
.price-list__empty {
	color: var(--wp--preset--color--muted, #b6bcd8);
	font-style: italic;
	margin: 0;
}

@media (max-width: 600px) {
	.price-list__row {
		flex-direction: column;
		gap: 2px;
	}

	.price-list__value {
		text-align: left;
	}
}

/* -------------------------------------------------------------------------
 * Zakładki (bloki ortodontic/tabs + ortodontic/tab)
 * ---------------------------------------------------------------------- */

.tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	justify-content: center;
	margin: 0 0 15px;
	padding-top: 15px;
}

.tabs__tab {
	background: transparent;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.2;
	padding: 9px 17px;
	transition: background-color 0.2s ease, color 0.2s ease;
	white-space: nowrap;
}

.tabs__tab:hover {
	background: var(--wp--custom--soft);
}

.tabs__tab.is-active {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

/* Panel gets focus when a tab is activated, so the ring must not be removed. */
.tabs__panel:focus-visible,
.tabs__tab:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Editor only: every panel is expanded, each under its own editable label. */
.tabs--editor .tabs__panel--editor + .tabs__panel--editor {
	border-top: 1px solid var(--wp--custom--line);
	margin-top: 24px;
	padding-top: 24px;
}

.tabs__tab--editor {
	background: var(--wp--custom--soft);
	border-radius: var(--wp--custom--radius--pill);
	display: inline-block;
	font-weight: 600;
	margin-bottom: 12px;
	padding: 8px 16px;
}

/* Na mobile zakładki zawijają się w kilka rzędów zamiast uciekać poza ekran.
   Etykiety bywają długie („Wypełnienia kompozytowe”), więc pojedyncza zakładka
   też musi móc złamać się na dwie linie — stąd white-space: normal. */
@media (max-width: 781px) {
	.tabs__list {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 6px;
	}

	.tabs__tab {
		font-size: var(--wp--preset--font-size--medium);
		max-width: 100%;
		padding: 8px 14px;
		white-space: normal;
	}
}

/* -------------------------------------------------------------------------
 * Strona usługi (patterny service-hero + service-tabs)
 * ---------------------------------------------------------------------- */

.breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.breadcrumbs__item {
	align-items: center;
	color: var(--wp--preset--color--body);
	display: flex;
	font-size: var(--wp--preset--font-size--x-small);
	gap: 6px;
}

.breadcrumbs__link {
	color: inherit;
	text-decoration: none;
}

.breadcrumbs__link:hover {
	color: var(--wp--preset--color--primary);
}

.breadcrumbs__item--current {
	color: var(--wp--preset--color--contrast);
}

.breadcrumbs__separator {
	color: var(--wp--preset--color--muted);
}

.service-hero__breadcrumbs {
	margin-bottom: 24px;
}

/* `.service-hero__grid` jest jednocześnie białą kartą i siatką dwóch kolumn.
   Proporcje 510/506 z projektu trzymamy przez `fr` — gap wtedy nie rozjeżdża sumy. */
.wp-block-columns.service-hero__grid {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl);
	display: grid;
	gap: 48px;
	grid-template-columns: 510fr 506fr;
	padding: 44px;
}

.service-hero__grid > .wp-block-column {
	min-width: 0;
}

.service-hero__photo img {
	border-radius: var(--wp--custom--radius--lg);
	display: block;
	width: 100%;
}

/* Zdjęcie z badge kategorii nałożonym na lewy górny róg. */
.service-hero__figure {
	position: relative;
}

/* Usługa bez zdjęcia wyróżniającego nie może składać kolumny — rezerwujemy kadr 3:2. */
.service-hero__figure:not(:has(img)) {
	aspect-ratio: 3 / 2;
	background: var(--wp--custom--soft);
	border-radius: var(--wp--custom--radius--lg);
}

.service-hero__badge {
	left: 20px;
	position: absolute;
	top: 20px;
}

.service-badge {
	margin: 0;
}

.service-badge__label {
	background: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--surface);
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 7px 15px;
	text-decoration: none;
	text-transform: uppercase;
}

/* Usługa bez kategorii — widoczne tylko w edytorze. */
.service-badge__label.is-placeholder {
	background: var(--wp--preset--color--muted);
}

/* Wiersze „Kategoria:” i „Tagi:” — linki prowadzą do archiwów taksonomii. */
.service-hero__meta {
	border-top: 1px solid var(--wp--custom--line-soft);
	margin-top: 17px;
	padding-top: 18px;
}

.service-hero__terms {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
}

.service-hero__terms + .service-hero__terms {
	margin-top: 12px;
}

.service-hero__terms a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.service-hero__terms a:hover {
	text-decoration: underline;
}

.service-hero__included {
	background: var(--wp--custom--soft);
	border-radius: var(--wp--custom--radius--lg);
	margin-top: 22px;
	padding: 26px 28px;
}

.service-hero__included-title {
	font-size: 16px;
	margin: 0 0 14px;
}

.service-hero__included-list {
	margin: 0;
}

.service-hero__title {
	font-family: inherit;
	font-size: clamp(28px, 3.2vw, 41px);
	font-weight: 800;
	letter-spacing: -1.1px;
	line-height: 1.07;
	margin: 0 0 72px;
}

.service-hero__lead {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	margin: 0 0 26px;
}

/* Cennik w hero: wiersze rozdzielone włoskową linią, pierwsza także nad. */
.service-hero__prices {
	margin: 0 0 26px;
}

.service-hero__actions {
	gap: 11px;
}

/* Przyciski w hero usługi są wyższe niż domyślne — 48px z projektu. */
.service-hero__actions .wp-block-button__link {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
	padding: 14px 22px;
}

.service-hero__actions .is-style-arrow .wp-block-button__link {
	padding-right: 50px;
}

.service-hero__actions .is-style-arrow .wp-block-button__link::after {
	background-size: 11px 11px;
	height: 30px;
	right: 7px;
	width: 30px;
}

.service-hero__actions .is-style-outline .wp-block-button__link {
	background-color: var(--wp--preset--color--surface);
	border-color: #e5ebfa;
	font-weight: 700;
	padding: 14px 23px;
}

/* Chipy oddziela od przycisków ta sama włoskowa linia co w projekcie. */
.service-hero__chips {
	border-top: 1px solid var(--wp--custom--line-soft);
	margin: 24px 0 0;
	padding-top: 22px;
}

/* Pastylki: chipy w hero i wszędzie tam, gdzie lista ma wyglądać jak tagi. */
.is-style-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.is-style-chips li {
	background: var(--wp--custom--soft);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	line-height: 1.15;
	padding: 8px 15px;
}

/* Lista gwarancji — niebieskie kółko z ptaszkiem zamiast punktora. */
.is-style-check {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.is-style-check li {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.45;
	padding-left: 29px;
	position: relative;
}

.is-style-check li + li {
	margin-top: 13px;
}

.is-style-check li::before {
	background-color: var(--wp--preset--color--primary);
	background-image: url(assets/icons/check-white.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 10px 10px;
	border-radius: 50%;
	content: "";
	height: 18px;
	left: 0;
	position: absolute;
	top: 2px;
	width: 18px;
}

@media (max-width: 1024px) {
	.wp-block-columns.service-hero__grid {
		gap: 36px;
		grid-template-columns: 1fr;
		padding: 32px;
	}

	/* Bez drugiej kolumny tytuł i cennik muszą trafić nad zdjęcie i gwarancje. */
	.service-hero__grid > .wp-block-column:last-child {
		order: -1;
	}

	.service-hero__title {
		margin-bottom: 28px;
	}
}

@media (max-width: 600px) {
	.wp-block-columns.service-hero__grid {
		padding: 22px 20px;
	}

	.service-hero__included {
		padding: 22px 20px;
	}
}

/* -------------------------------------------------------------------------
 * Treść zakładek usługi (klasy svc-* z importera services/tools)
 * ---------------------------------------------------------------------- */

.svc-panel,
.svc-section {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl);
	padding: 44px;
}

.svc-panel--dark,
.svc-section--dark {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

.svc-panel--dark .svc-title,
.svc-panel--dark .svc-subtitle,
.svc-panel--dark .svc-heading,
.svc-panel--dark .svc-section__title,
.svc-panel--dark .svc-card__title,
.svc-panel--dark .svc-note__title,
.svc-panel--dark .svc-column__title,
.svc-panel--dark .svc-column__subtitle,
.svc-panel--dark .svc-closing__title,
.svc-panel--dark .svc-step__title,
.svc-section--dark .svc-section__title,
.svc-section--dark .svc-heading,
.svc-section--dark .svc-note__title,
.svc-section--dark .svc-card__title {
	color: var(--wp--preset--color--surface);
}

/* Panel „mixed” składa własne sekcje, więc sam zostaje przezroczysty. */
.svc-panel--mixed {
	background: transparent;
	padding: 0;
}

/* Nadkreślnik z kropką nad tytułem sekcji. */
.svc-eyebrow {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 17px;
	padding-left: 15px;
	position: relative;
}

.svc-panel--dark .svc-eyebrow,
.svc-section--dark .svc-eyebrow {
	color: rgba(255, 255, 255, 0.72);
}

.svc-eyebrow::before {
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	top: 0.62em;
	width: 5px;
}

.svc-title,
.svc-section__title {
	font-size: clamp(22px, 2.3vw, 28px);
	letter-spacing: -0.6px;
	line-height: 1.19;
	margin: 0 0 14px;
	max-width: 660px;
}

.svc-subtitle {
	color: var(--wp--preset--color--primary);
	font-size: 16px;
	margin: 0 0 16px;
}

.svc-heading,
.svc-column__title {
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.18px;
	line-height: 1.35;
	margin: 28px 0 14px;
}

.svc-column__subtitle {
	font-size: var(--wp--preset--font-size--large);
	margin: 22px 0 11px;
}

.svc-panel > p:not([class]),
.svc-section > p:not([class]) {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.68;
	margin: 0;
	max-width: 655px;
}

.svc-panel > p:not([class]) + p:not([class]),
.svc-section > p:not([class]) + p:not([class]) {
	margin-top: 14px;
}

.svc-panel--dark > p:not([class]),
.svc-panel--dark li:not([class]),
.svc-section--dark > p:not([class]),
.svc-section--dark li:not([class]) {
	color: rgba(255, 255, 255, 0.72);
}

/* Listy punktowane — wiersze rozdzielone włoskową linią, jak w projekcie. */
.svc-list {
	list-style: none;
	margin: 17px 0 0;
	padding-left: 0;
}

.svc-list li {
	border-top: 1px solid var(--wp--custom--line-soft);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	padding: 14px 0 12px 18px;
	position: relative;
}

.svc-list li::before {
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	content: "";
	height: 5px;
	left: 0;
	position: absolute;
	top: 22px;
	width: 5px;
}

.svc-panel--dark .svc-list li,
.svc-section--dark .svc-list li {
	border-color: var(--wp--custom--overlay--line);
}

.svc-checks {
	margin: 17px 0 0;
}

/* „Chipy” w panelach to na projekcie kafle w czterech kolumnach, nie pastylki. */
.svc-chips.is-style-chips,
.svc-chips {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	list-style: none;
	margin: 17px 0 0;
	padding-left: 0;
}

.svc-chips.is-style-chips li,
.svc-chips li {
	background: var(--wp--custom--soft);
	border-radius: var(--wp--custom--radius--lg);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	padding: 17px 20px;
}

.svc-panel--dark .svc-chips li,
.svc-section--dark .svc-chips li {
	background: transparent;
	border: 1px solid var(--wp--custom--overlay--line);
	color: rgba(255, 255, 255, 0.72);
}

/* Numerowane kroki. */
.svc-steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.svc-step {
	background: var(--wp--custom--soft);
	border-radius: var(--wp--custom--radius--lg);
	display: grid;
	gap: 4px 18px;
	grid-template-columns: 34px 1fr;
	padding: 20px 22px;
}

.svc-step__number {
	align-items: center;
	background: var(--wp--preset--color--contrast);
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	display: flex;
	font-size: 13px;
	font-weight: 600;
	grid-row: span 2;
	height: 30px;
	justify-content: center;
	margin: 0;
	width: 30px;
}

.svc-step__title {
	font-size: 16px;
	margin: 0;
}

.svc-step__text {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	margin: 0;
}

.svc-panel--dark .svc-step,
.svc-panel--dark .svc-card,
.svc-section--dark .svc-step,
.svc-section--dark .svc-card {
	background: transparent;
	border: 1px solid var(--wp--custom--overlay--line);
}

.svc-panel--dark .svc-step__number {
	background: var(--wp--preset--color--primary);
}

/* Karty w rzędzie i w pionie. */
.svc-cards {
	gap: 20px;
	margin-top: 20px;
}

.svc-stack {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.svc-card {
	background: var(--wp--custom--soft);
	border-radius: var(--wp--custom--radius--lg);
	height: 100%;
	padding: 22px 24px;
}

.svc-card__number {
	align-items: center;
	background: var(--wp--preset--color--primary);
	border-radius: 50%;
	color: var(--wp--preset--color--surface);
	display: flex;
	font-size: 13px;
	font-weight: 600;
	height: 30px;
	justify-content: center;
	margin: 0 0 13px;
	width: 30px;
}

.svc-card__title {
	font-size: 16px;
	margin: 0 0 8px;
}

.svc-card__text {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	margin: 0;
}

.svc-panel--dark .svc-card__text,
.svc-section--dark .svc-card__text {
	color: rgba(255, 255, 255, 0.72);
}

.svc-card--danger .svc-card__title {
	color: #c0392b;
}

.svc-card--success .svc-card__title {
	color: #1e8a5f;
}

/* Oś czasu „RANO — ZABIEG”. */
.svc-timeline {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.svc-timeline__item {
	background: transparent;
	border: 1px solid var(--wp--custom--overlay--line);
	border-radius: var(--wp--custom--radius--lg);
	display: grid;
	gap: 4px 20px;
	grid-template-columns: minmax(140px, 200px) 1fr;
	padding: 20px 22px;
}

.svc-panel:not(.svc-panel--dark) .svc-timeline__item {
	border-color: var(--wp--custom--line-soft);
}

.svc-card__phase {
	color: var(--wp--preset--color--link-light);
	font-size: 12px;
	font-weight: 600;
	margin: 0;
	text-transform: uppercase;
}

/* Lista definicji: etykieta z lewej, treść wyrównana do prawej. */
.svc-defs {
	display: flex;
	flex-direction: column;
	margin-top: 20px;
}

.svc-def {
	align-items: baseline;
	border-bottom: 1px solid var(--wp--custom--overlay--line);
	display: grid;
	gap: 20px;
	grid-template-columns: minmax(160px, 240px) 1fr;
	padding: 14px 0;
}

.svc-panel:not(.svc-panel--dark) .svc-def {
	border-bottom-color: var(--wp--custom--line-soft);
}

.svc-def__term {
	font-weight: 600;
	margin: 0;
}

.svc-def__text {
	margin: 0;
	text-align: right;
}

/* Ramka z uwagą na dole zakładki. */
.svc-note {
	background: var(--wp--custom--soft);
	border-radius: var(--wp--custom--radius--lg);
	margin-top: 33px;
	padding: 26px 28px;
}

.svc-note__title {
	font-size: 16px;
	margin: 0 0 8px;
}

.svc-note p {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
	margin: 0;
	max-width: none;
}

.svc-note p + p {
	margin-top: 10px;
}

.svc-note--dark {
	background: var(--wp--preset--color--contrast);
}

.svc-note--dark p {
	color: rgba(255, 255, 255, 0.72);
}

.svc-panel--dark .svc-note,
.svc-section--dark .svc-note {
	background: transparent;
	border: 1px solid var(--wp--custom--overlay--line);
}

.svc-panel--dark .svc-note p,
.svc-section--dark .svc-note p {
	color: rgba(255, 255, 255, 0.72);
}

/* Sekcje w panelu „mixed”. */
.svc-section + .svc-section {
	margin-top: 24px;
}

/* Dwie kolumny z własnymi listami. */
.svc-columns {
	gap: 48px;
	margin-top: 24px;
}

/* Tabela zabiegów.
 * Selektory `.wp-block-table.svc-table` przebijają domyślne ramki core/table
 * (każda komórka + 3px pod nagłówkiem). Wygląd jak `.svc-card`: zaokrąglona
 * ramka, nagłówek na tle `soft`, tylko poziome linie między wierszami.
 * Na telefonie wiersz staje się blokiem, a nazwę kolumny nad wartością
 * wypisuje `data-label` (dodaje go ortodontic-core przy renderze). */
.wp-block-table.svc-table {
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--lg);
	margin: 24px 0 0;
	overflow: hidden;
}

.wp-block-table.svc-table table {
	border: 0;
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.svc-table thead {
	background: var(--wp--custom--soft);
	border: 0;
}

.wp-block-table.svc-table th,
.wp-block-table.svc-table td {
	border: 0;
	padding: 18px 24px;
	text-align: left;
	vertical-align: top;
}

.wp-block-table.svc-table th {
	color: var(--wp--preset--color--muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding-block: 14px;
	text-transform: uppercase;
}

.wp-block-table.svc-table td {
	border-top: 1px solid var(--wp--custom--line);
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.wp-block-table.svc-table td:first-child {
	color: var(--wp--preset--color--contrast);
	font-weight: 600;
	width: 24%;
}

@media (max-width: 700px) {
	.wp-block-table.svc-table thead {
		display: none;
	}

	.wp-block-table.svc-table table,
	.wp-block-table.svc-table tbody,
	.wp-block-table.svc-table tr,
	.wp-block-table.svc-table td {
		display: block;
		width: auto;
	}

	.wp-block-table.svc-table tr {
		padding: 18px 20px;
	}

	.wp-block-table.svc-table tr + tr {
		border-top: 1px solid var(--wp--custom--line);
	}

	.wp-block-table.svc-table td {
		border: 0;
		padding: 0;
	}

	.wp-block-table.svc-table td:first-child {
		width: auto;
	}

	.wp-block-table.svc-table td + td {
		margin-top: 12px;
	}

	.wp-block-table.svc-table td:not(:first-child)[data-label]::before {
		color: var(--wp--preset--color--muted);
		content: attr(data-label);
		display: block;
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.06em;
		margin-bottom: 4px;
		text-transform: uppercase;
	}
}

/* Domknięcie zakładki z przyciskiem. */
.svc-closing {
	border-top: 1px solid var(--wp--custom--line-soft);
	display: grid;
	gap: 8px 32px;
	grid-template-columns: 1fr auto;
	margin-top: 32px;
	padding-top: 28px;
}

.svc-closing__title {
	font-size: 16px;
	grid-column: 1;
	margin: 0;
}

.svc-closing__text {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	grid-column: 1;
	margin: 0;
	max-width: 60ch;
}

.svc-closing__actions {
	align-self: center;
	grid-column: 2;
	grid-row: span 2;
}

@media (max-width: 1024px) {
	.svc-chips.is-style-chips,
	.svc-chips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.svc-panel,
	.svc-section {
		padding: 28px 22px;
	}

	.svc-note {
		padding: 22px 20px;
	}

	.svc-def,
	.svc-timeline__item,
	.svc-closing {
		grid-template-columns: 1fr;
	}

	.svc-def__text {
		text-align: left;
	}

	.svc-closing__actions {
		grid-column: 1;
		grid-row: auto;
	}
}

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

/* -------------------------------------------------------------------------
 * Archiwa taksonomii usług (templates/taxonomy.html)
 * ---------------------------------------------------------------------- */

.service-archive__breadcrumbs {
	margin-bottom: 22px;
}

.service-archive__title {
	margin: 0 0 12px;
}

.service-archive__lead {
	color: var(--wp--preset--color--body);
	margin: 0 0 40px;
	max-width: 660px;
}

.service-archive__grid {
	gap: 24px;
}

.service-archive__card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl);
	padding: 16px 16px 22px;
}

.service-archive__thumb img {
	border-radius: var(--wp--custom--radius--md);
	width: 100%;
}

.service-archive__name {
	font-size: var(--wp--preset--font-size--medium);
	margin: 18px 0 8px;
}

.service-archive__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.service-archive__name a:hover {
	color: var(--wp--preset--color--primary);
}

.service-archive__desc {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.service-archive__pagination {
	gap: 10px;
	margin-top: 40px;
}

/* -------------------------------------------------------------------------
 * Usługa — sekcja kontaktu (pattern ortodontic/service-cta)
 * ---------------------------------------------------------------------- */

.service-cta {
	background-color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--xl);
	color: var(--wp--preset--color--surface);
	padding: 44px;
}

.wp-block-columns.service-cta__grid {
	display: grid;
	gap: 44px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-cta__title {
	color: var(--wp--preset--color--surface);
	font-size: clamp(24px, 2.6vw, 30px);
	letter-spacing: -0.9px;
	line-height: 1.16;
	margin: 0 0 13px;
	max-width: 465px;
}

.service-cta__lead {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	margin: 0;
	max-width: 380px;
}

.service-cta__note {
	color: rgba(255, 255, 255, 0.8);
	font-size: 12px;
	margin: 13px 0 0;
}

/* Na niebieskim tle pola są półprzezroczyste, a przycisk odwrócony — biały. */
.service-cta .fluentform .ff-el-group {
	margin-bottom: 11px;
}

.service-cta .fluentform .ff-el-group.ff_submit_btn_wrapper {
	margin-bottom: 0;
}

.service-cta .fluentform .ff-el-form-control {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.22);
	border-radius: 11px;
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--large);
	padding: 14px 17px;
}

.service-cta .fluentform .ff-el-form-control::placeholder {
	color: rgba(255, 255, 255, 0.75);
	opacity: 1;
}

.service-cta .fluentform .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	padding: 15px 24px;
}

.service-cta .fluentform .ff_submit_btn_wrapper .ff-btn-submit::after {
	content: " \2197";
}

.service-cta .fluentform .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
}

/* Zgoda RODO — wymagany checkbox pod polami, drobnym tekstem jak `__note`. */
.service-cta .fluentform .ff-el-tc {
	margin-top: 4px;
}

.service-cta .fluentform .ff-el-tc .ff_tc_label {
	align-items: flex-start;
	color: rgba(255, 255, 255, 0.8);
	display: flex;
	font-size: 12px;
	gap: 9px;
	line-height: 1.5;
	margin: 0;
}

.service-cta .fluentform .ff-el-tc .ff-el-form-check-input {
	accent-color: var(--wp--preset--color--accent);
	flex: 0 0 auto;
	height: 15px;
	margin-top: 2px;
	width: 15px;
}

.service-cta .fluentform .ff-el-tc a {
	color: inherit;
	text-decoration: underline;
}

@media (max-width: 781px) {
	.service-cta {
		padding: 32px 24px;
	}

	.wp-block-columns.service-cta__grid {
		gap: 28px;
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Strona Kontakt (pattern ortodontic/contact-details)
 *
 * Nagłówek strony w tej samej skali co `.pricing__head`, pod nim cztery kafle
 * z danymi teleadresowymi. Kafle schodzą 4 -> 2 -> 1 kolumny; wartości są
 * `large`, żeby numer telefonu dało się przeczytać z odległości ręki.
 * ---------------------------------------------------------------------- */

.contact-details__head {
	margin-bottom: 44px;
	max-width: 660px;
}

.contact-details__title {
	margin: 0 0 16px;
}

.contact-details__lead {
	color: var(--wp--preset--color--body);
	margin: 0;
}

.contact-details__grid {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(4, 1fr);
}

.contact-details__card {
	background: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl);
	padding: 32px 30px;
}

.contact-details__label {
	color: var(--wp--preset--color--primary);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.contact-details__value {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	margin: 0;
}

.contact-details__value a {
	color: inherit;
	text-decoration: none;
}

.contact-details__value a:hover,
.contact-details__value a:focus-visible {
	color: var(--wp--preset--color--primary);
}

.contact-details__note {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--x-small);
	margin: 28px 0 0;
}

@media (max-width: 1023px) {

	.contact-details__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {

	.contact-details__grid {
		grid-template-columns: 1fr;
	}
}

/* -------------------------------------------------------------------------
 * Dojazd i mapa (pattern ortodontic/directions, blok ortodontic/map)
 *
 * Granatowy panel jak `.kontakt__panel--dark`, trzy informacje w rzędzie
 * (3 -> 1 kolumna), pod nim mapa w zaokrąglonej karcie.
 * ---------------------------------------------------------------------- */

.directions__panel {
	background-color: var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--xl);
	color: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
}

.directions__title {
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: -0.9px;
	line-height: 1.2;
	margin: 0 0 var(--wp--preset--spacing--50);
}

.directions__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.directions__item {
	border-top: 1px solid var(--wp--custom--overlay--line);
	display: flex;
	flex-direction: column;
	padding-top: var(--wp--preset--spacing--40);
}

.directions__label {
	color: var(--wp--preset--color--link-light);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.4;
	margin: 0 0 var(--wp--preset--spacing--20);
	text-transform: uppercase;
}

.directions__text {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.6;
	margin: 0;
}

/* Blok ortodontic/map — baza wspólna; wysokość z atrybutu bloku przez zmienną. */
.wp-block-ortodontic-map {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
}

.ortodontic-map__frame {
	border: 0;
	display: block;
	height: var(--ortodontic-map-height, 450px);
	width: 100%;
}

/*
 * Zaślepka Complianz przed zgodą na cookies: dokładnie ten sam rozmiar co mapa,
 * rozmyty obrazek mapy (podmieniony filtrem w ortodontic-core) i komunikat
 * jako pigułka na środku. Complianz liczy wysokość kontenera z proporcji
 * obrazka (1280×920), stąd jawne `height` — inaczej zaślepka jest wyższa od mapy.
 */
.wp-block-ortodontic-map .cmplz-blocked-content-container {
	background-position: center;
	background-size: cover;
	border-radius: inherit;
	height: var(--ortodontic-map-height, 450px);
	max-height: none;
	min-height: 0;
}

.wp-block-ortodontic-map .cmplz-blocked-content-container .cmplz-placeholder-element {
	height: 100%;
}

.wp-block-ortodontic-map .cmplz-blocked-content-container .cmplz-blocked-content-notice {
	background-color: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--surface);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1.4;
	max-width: min(90%, 360px);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	transition: background-color 0.2s ease;
	width: auto;
}

.wp-block-ortodontic-map .cmplz-blocked-content-container .cmplz-blocked-content-notice:hover,
.wp-block-ortodontic-map .cmplz-blocked-content-container .cmplz-blocked-content-notice:focus-visible {
	background-color: var(--wp--preset--color--primary);
}

@media (max-width: 781px) {

	.directions__panel {
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.directions__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.ortodontic-map__frame,
	.wp-block-ortodontic-map .cmplz-blocked-content-container {
		height: min(var(--ortodontic-map-height, 450px), 360px);
	}
}

/* -------------------------------------------------------------------------
 * Strona Cennik (pattern ortodontic/pricing)
 * ---------------------------------------------------------------------- */

.pricing__head {
	margin-bottom: 44px;
	max-width: 660px;
}

.pricing__title {
	margin: 0 0 16px;
}

.pricing__lead {
	color: var(--wp--preset--color--body);
	margin: 0;
}

.pricing__list {
	margin-bottom: 44px;
}

/*
 * Kategorie cennika jako karty — Figma 6YcdRGqvyyGnrIhrHA43py, node 211:1300
 * (miary × 1.088). Nagłówek karty: jasne tło + niebieska kropka, bez licznika
 * pozycji. Kolory tylko z istniejących tokenów (soft / line / line-soft).
 */
.pricing__list .price-list__group {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--custom--line);
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

.pricing__list .price-list__group + .price-list__group {
	margin-top: var(--wp--preset--spacing--30);
}

.pricing__list .price-list__group-title {
	align-items: center;
	background: var(--wp--custom--soft);
	border-bottom: 1px solid var(--wp--custom--line);
	color: var(--wp--preset--color--contrast);
	display: flex;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	margin: 0;
	padding: 17px 22px;
}

.pricing__list .price-list__body {
	padding: 4px 22px 0;
}

.pricing__list .price-list__row {
	padding: 13px 0;
}

.pricing__list .price-list__label,
.pricing__list .price-list__value {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--medium);
}

.pricing__list .price-list__value {
	font-weight: 700;
}

.pricing__list .price-list__subgroup-title {
	align-items: center;
	border-top: 1px solid var(--wp--custom--line-soft);
	color: var(--wp--preset--color--primary);
	display: flex;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0;
	padding: 18px 0 6px;
	text-transform: uppercase;
}

/* Pierwszy wiersz kategorii i podgrupy bez linii nad sobą. */
.pricing__list .price-list__body > .price-list__rows:first-child > .price-list__row:first-child,
.pricing__list .price-list__subgroup-title + .price-list__rows > .price-list__row:first-child {
	border-top: 0;
}

/* -------------------------------------------------------------------------
 * Strona osoby z zespołu (pattern person-hero)
 *
 * Miary z Figmy 6YcdRGqvyyGnrIhrHA43py, frame 1:16644 (kontener 1140),
 * przeliczone tym samym mnożnikiem co reszta motywu: css_px = figma_px × 1.088.
 * ---------------------------------------------------------------------- */

.person-hero__breadcrumbs {
	margin: 0 0 17px;
}

/* Dwie osobne karty: 620/497 z projektu trzymamy przez `fr`, gap 23 → 25.
   Selektor musi mieć dwie klasy, żeby wygrać z `.wp-block-columns{display:flex}`. */
.wp-block-columns.person-hero__grid {
	display: grid;
	gap: 25px;
	grid-template-columns: 620fr 497fr;
	margin: 0;
}

.person-hero__grid > .wp-block-column {
	margin: 0;
}

.person-hero__media,
.person-hero__panel {
	background-color: var(--wp--preset--color--surface);
	border-radius: 28px;
	box-sizing: border-box;
	height: 100%;
}

/* Wysokość karty ze zdjęciem (834 → 907) wyznacza wiersz siatki, więc panel
   po prawej dostaje ją przez `stretch` — dokładnie jak w projekcie.
   Zdjęcie jest pozycjonowane absolutnie: eksporty 3:4 (800×1200) w kolumnie
   674px miałyby 1012px naturalnej wysokości i rozpychały kartę o ~105px ponad
   projekt, a cała nadwyżka lądowała jako dziura między bio a przyciskiem
   w panelu obok. `min-height` ma zostać podłogą, nie wynikiem proporcji pliku. */
.person-hero__media {
	display: flex;
	min-height: 907px;
	overflow: hidden;
	position: relative;
}

.person-hero__photo {
	inset: 0;
	margin: 0;
	position: absolute;
	width: 100%;
}

.person-hero__photo img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: top;
	width: 100%;
}

.person-hero__panel {
	display: flex;
	flex-direction: column;
	padding: 44px 52px;
}

.person-hero__role {
	color: var(--wp--preset--color--primary);
	font-size: 14px;
	font-weight: 600;
	line-height: 16px;
	margin: 0 0 22px;
	text-transform: uppercase;
}

/* Projekt łamie imię i nazwisko na dwie linie u każdej osoby, także tam, gdzie
   zmieściłyby się w jednej („Maja Kuczera”). Łamanie robi twarde `<br>` w treści
   (patrz `ort_team_hero()`), bo układowe `min-content` rozjeżdżało nazwiska
   dwuczłonowe — Chrome łamie po dywizie mimo `word-break: keep-all`. */
.person-hero__title {
	color: var(--wp--preset--color--contrast);
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.2px;
	line-height: 42px;
	margin: 0 0 32px;
}

.person-hero__bio {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 25px;
}

.person-hero__bio > * {
	margin-block: 0;
}

.person-hero__bio > * + * {
	margin-block-start: 40px;
}

.person-hero__actions {
	gap: 11px;
}

/* Przycisk hero osoby: 40 × 146 z projektu → 44 wysokości i badge 29. */
.person-hero__actions .wp-block-button__link {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
	padding: 12px 68px 12px 23px;
}

.person-hero__actions .is-style-arrow .wp-block-button__link::after {
	background-size: 10px 10px;
	height: 29px;
	right: 8px;
	width: 29px;
}

.person-hero__tagline {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.06em;
	margin: 0;
	text-transform: uppercase;
}

@media (max-width: 1023px) {
	.wp-block-columns.person-hero__grid {
		grid-template-columns: 1fr;
	}

	.person-hero__media {
		min-height: 520px;
	}

	.person-hero__panel {
		padding: 32px;
	}

	.person-hero__title {
		font-size: 30px;
	}

	.person-hero__bio > * + * {
		margin-block-start: 24px;
	}
}

@media (max-width: 599px) {
	.person-hero__media {
		min-height: 380px;
	}

	.person-hero__panel {
		padding: 24px 20px;
	}

	.person-hero__title {
		font-size: 26px;
	}
}

/* -------------------------------------------------------------------------
 * Strona osoby — panel usługi, CTA i „Pozostały zespół”
 *
 * Miary z projektów `team/*.png` (1920 × 2, kontener 1140), przeliczone tym
 * samym mnożnikiem co reszta motywu: css_px = figma_px × 1.088.
 * ---------------------------------------------------------------------- */

/* Karta usługi dziedziczy wygląd po `.svc-panel` ze stron usług; różni się
   tylko odstępem od hero i typografią nagłówka. */
.person-page > .person-svc {
	margin-block-start: 110px;
}

.person-svc__title {
	color: var(--wp--preset--color--contrast);
	font-size: 26px;
	letter-spacing: -0.4px;
	line-height: 1.2;
	margin: 0 0 24px;
	max-width: none;
}

.person-svc .svc-heading {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	margin: 38px 0 16px;
}

/* Na stronie osoby punktory nie mają włoskowej linii — same kropki. */
.person-svc .svc-list {
	margin-top: 0;
}

.person-svc .svc-list li {
	border-top: 0;
	padding: 0 0 0 18px;
}

.person-svc .svc-list li + li {
	margin-top: 19px;
}

.person-svc .svc-list li::before {
	top: 9px;
}

/* Lista „etykieta nad opisem” (protetyka, periodontologia). */
.person-svc__defs li + li {
	margin-top: 26px;
}

.person-svc__defs strong {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	line-height: 2;
}

/* Wiersze oferty rozdzielone włoskową linią (ortodoncja). */
.person-svc__rows {
	margin-top: 12px;
}

.person-svc__row {
	border-top: 1px solid var(--wp--custom--line-soft);
	padding: 18px 0 4px;
}

.person-svc__row-title {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin: 0 0 6px;
}

.person-svc__row-text {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.68;
	margin: 0;
}

/* Czterokolumnowe listy wyliczeń. Dwie klasy w selektorze, bo core ustawia
   `.wp-block-columns{display:flex}` z tą samą specyficznością. */
.wp-block-columns.person-svc__grid {
	display: grid;
	gap: 0 24px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 20px 0 0;
}

.person-svc__grid > .wp-block-column {
	margin: 0;
}

/* Akapit domykający wyliczenie (np. „Im wcześniej wada zostanie…”). */
.person-svc__grid + p {
	margin-top: 24px;
}

/* Sekcja kontaktu na stronie osoby: ta sama karta co przy usługach, ale na
   granacie (#2f2d6c z projektu) z niebieskim przyciskiem zamiast białego. */
.person-page > .person-cta {
	margin-block-start: 22px;
}

.person-cta {
	background-color: var(--wp--preset--color--contrast);
}

.person-cta .fluentform .ff-el-form-control {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.12);
}

.person-cta .fluentform .ff-el-form-control::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

/* Cztery klasy w selektorze, bo Fluent Forms drukuje inline
   `form.fluent_form_<id> .ff-btn-submit:not(.ff_btn_no_style)` (0,3,1). */
.person-cta .fluentform .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	width: 100%;
}

.person-cta .fluentform .ff-el-group.ff_submit_btn_wrapper .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

.person-cta .service-cta__note {
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
}

/* „Pozostały zespół” — pięć kart w rzędzie pod formularzem. */
.person-page > .person-team {
	margin-block-start: 152px;
}

.person-team__title {
	color: var(--wp--preset--color--contrast);
	font-size: 26px;
	letter-spacing: -0.4px;
	line-height: 1.2;
	margin: 0 0 24px;
}

/* Slider: Swiper dostaje własne klasy Query Loopa, więc blok zostaje
   zwykłym, edytowalnym core'em — jak w sekcji „Nasz zespół”. */
.person-team__head {
	gap: 24px;
	margin-bottom: 24px;
}

.person-team__slider {
	overflow: hidden;
}

.person-team__query .wp-block-post-template {
	align-items: stretch;
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}

.person-team__query .wp-block-post {
	box-sizing: border-box;
	flex: 0 0 auto;
	height: auto;
	width: 228px;
}

.person-team__dots {
	display: flex;
	gap: 7px;
	justify-content: center;
	margin-top: 24px;
}

.person-team__dot {
	background-color: #c9d3f0;
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	height: 6px;
	padding: 0;
	transition: width 0.2s ease, background-color 0.2s ease;
	width: 6px;
}

.person-team__dot--active {
	background-color: var(--wp--preset--color--primary);
}

.person-team__photo {
	background-color: var(--wp--preset--color--surface);
	border-radius: 14px;
	margin: 0 0 14px;
	overflow: hidden;
}

.person-team__photo img {
	aspect-ratio: 3 / 4;
	display: block;
	height: auto;
	object-fit: cover;
	object-position: top;
	width: 100%;
}

.person-team__name {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 6px;
}

/* Trzy klasy w selektorze: kolor linków z theme.json wchodzi jako
   `.wp-site-blocks a:where(...)` (0,2,0) i drukowany jest po arkuszu motywu. */
.person-team .person-team__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.person-team .person-team__name a:hover {
	color: var(--wp--preset--color--primary);
}

.person-team__role {
	color: var(--wp--preset--color--body);
	line-height: 1.4;
	margin: 0;
}

@media (max-width: 1023px) {

	.person-page > .person-svc {
		margin-block-start: 48px;
	}

	.person-page > .person-team {
		margin-block-start: 64px;
	}

	.wp-block-columns.person-svc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.person-team__query .wp-block-post {
		width: 200px;
	}
}

@media (max-width: 599px) {

	.wp-block-columns.person-svc__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.person-team__query .wp-block-post {
		width: 170px;
	}
}

/* -------------------------------------------------------------------------
 * Blog — lista wpisów (templates/home.html + index.html, pattern ortodontic/blog-grid)
 * ---------------------------------------------------------------------- */

.blog-index__title {
	margin: 0;
}

.blog-index__lead {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	margin: 0;
	max-width: 660px;
}

/* Siatka nadpisuje kontener layoutu core (0,1,0) — kolumny schodzą w media queries niżej. */
.blog-grid .wp-block-post-template {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.blog-grid .wp-block-post {
	display: flex;
	min-width: 0;
}

/* Karta wpisu: biała jak .service-archive__card, w środku elementy kafla „Poradnik”
   (.poradnik__name, .poradnik__foot, .poradnik__cat, .poradnik__more). */
.blog-card {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--xl);
	display: flex;
	flex-direction: column;
	padding: 14px;
	position: relative;
	width: 100%;
}

.blog-card__thumb {
	border-radius: var(--wp--custom--radius--md);
	margin: 0;
	overflow: hidden;
}

.blog-card__thumb img {
	display: block;
	transition: transform 0.4s ease;
	width: 100%;
}

.blog-card:hover .blog-card__thumb img {
	transform: scale(1.03);
}

.blog-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 18px 8px 4px;
}

.blog-card__date {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.blog-card .blog-card__title {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.3px;
	line-height: 1.3;
	margin: 0;
}

/* Cała karta jest klikalna: link tytułu rozciągnięty na kartę, kategoria i strzałka nad nim. */
.blog-card .blog-card__title a::after {
	content: "";
	inset: 0;
	position: absolute;
}

.blog-card:hover .blog-card__title a {
	color: var(--wp--preset--color--primary);
}

.blog-card .poradnik__cat,
.blog-card .poradnik__more {
	position: relative;
	z-index: 1;
}

.blog-card__excerpt {
	color: var(--wp--preset--color--body);
	margin: 0;
}

.blog-card__excerpt .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.blog-card .poradnik__cat a {
	background-color: var(--wp--custom--soft);
}

.blog-grid__pagination {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	gap: 8px;
}

.blog-grid__pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.blog-grid__pagination .page-numbers,
.blog-grid__pagination .wp-block-query-pagination-previous,
.blog-grid__pagination .wp-block-query-pagination-next {
	align-items: center;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	display: inline-flex;
	justify-content: center;
	margin: 0;
	min-height: 42px;
	min-width: 42px;
	padding: 0 14px;
	text-decoration: none;
}

.blog-grid__pagination .wp-block-query-pagination-previous,
.blog-grid__pagination .wp-block-query-pagination-next {
	padding: 0 20px;
}

.blog-grid__pagination .page-numbers.current {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}

.blog-grid__pagination .page-numbers.dots {
	background-color: transparent;
}

.blog-grid__pagination a.page-numbers:hover,
.blog-grid__pagination .wp-block-query-pagination-previous:hover,
.blog-grid__pagination .wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	text-decoration: none;
}

.blog-grid__empty {
	color: var(--wp--preset--color--body);
	margin: 0;
}

/* Pierwszy wpis na pierwszej stronie listy to szeroka karta: przy 10 wpisach na stronę
   daje to 1 + 3 × 3 zamiast 3 × 3 + 1 sieroty. Na kolejnych stronach (body.paged) zwykła siatka. */
@media (min-width: 1024px) {
	body:not(.paged) .blog-grid:not(.blog-grid--related) .wp-block-post:first-child {
		grid-column: 1 / -1;
	}

	body:not(.paged) .blog-grid:not(.blog-grid--related) .wp-block-post:first-child .blog-card {
		align-items: center;
		display: grid;
		gap: 40px;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		padding: 18px;
	}

	body:not(.paged) .blog-grid:not(.blog-grid--related) .wp-block-post:first-child .blog-card__body {
		gap: 16px;
		padding: 0 28px 0 0;
	}

	body:not(.paged) .blog-grid:not(.blog-grid--related) .wp-block-post:first-child .blog-card__title {
		font-family: var(--wp--preset--font-family--montserrat);
		font-size: var(--wp--preset--font-size--heading);
		letter-spacing: -0.6px;
		line-height: 1.15;
	}

	body:not(.paged) .blog-grid:not(.blog-grid--related) .wp-block-post:first-child .blog-card__excerpt {
		font-size: var(--wp--preset--font-size--large);
	}
}

@media (max-width: 1023px) {
	.blog-grid .wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.blog-grid .wp-block-post-template {
		gap: 16px;
		grid-template-columns: minmax(0, 1fr);
	}

	.blog-grid__pagination .wp-block-query-pagination-previous,
	.blog-grid__pagination .wp-block-query-pagination-next {
		padding: 0 14px;
	}
}

/* -------------------------------------------------------------------------
 * Blog — wpis (templates/single.html)
 * ---------------------------------------------------------------------- */

.blog-post__title {
	font-size: var(--wp--preset--font-size--section-lg);
	letter-spacing: -1.2px;
	line-height: 1.1;
	margin-bottom: 0;
}

.blog-post__meta {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.blog-post__date {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
}

.blog-post__image {
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
}

.blog-post__image img {
	display: block;
}

/* Treść wpisu: czytelna kolumna 830px (contentSize), typografia o stopień mniejsza
   niż nagłówki sekcji strony głównej. */
.blog-post__content {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.75;
}

.blog-post__content > h2 {
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: -0.6px;
	line-height: 1.2;
	margin-block-start: 48px;
}

.blog-post__content > h3 {
	font-size: var(--wp--preset--font-size--xx-large);
	margin-block-start: 36px;
}

.blog-post__content > h4 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-start: 30px;
}

.blog-post__content > :is(h2, h3, h4) + * {
	margin-block-start: 14px;
}

.blog-post__content strong {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

.blog-post__content p a,
.blog-post__content li a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.blog-post__content .wp-block-list {
	list-style: none;
	padding-left: 0;
}

.blog-post__content .wp-block-list > li {
	padding-left: 26px;
	position: relative;
}

.blog-post__content .wp-block-list > li + li {
	margin-top: 8px;
}

.blog-post__content ul.wp-block-list > li::before {
	background-color: var(--wp--preset--color--primary);
	border-radius: 50%;
	content: "";
	height: 8px;
	left: 4px;
	position: absolute;
	top: 0.72em;
	width: 8px;
}

.blog-post__content ol.wp-block-list {
	counter-reset: blog-list;
}

.blog-post__content ol.wp-block-list > li {
	counter-increment: blog-list;
}

.blog-post__content ol.wp-block-list > li::before {
	color: var(--wp--preset--color--primary);
	content: counter(blog-list) ".";
	font-weight: 700;
	left: 0;
	position: absolute;
}

.blog-post__content .wp-block-image img {
	border-radius: var(--wp--custom--radius--lg);
}

.blog-post__content figcaption {
	color: var(--wp--preset--color--body);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.blog-post__content .wp-block-quote {
	border-left: 3px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	margin-left: 0;
	padding-left: 22px;
}

.blog-related {
	border-top: 1px solid var(--wp--custom--line);
	padding-top: var(--wp--preset--spacing--60);
}

.blog-related__title {
	font-size: var(--wp--preset--font-size--heading);
	letter-spacing: -0.6px;
	margin: 0;
}

/* -------------------------------------------------------------------------
 * Galerie (core/gallery) — globalnie: wpisy bloga i .service-gallery na stronach usług
 * ---------------------------------------------------------------------- */

.wp-block-gallery.has-nested-images {
	--wp--style--unstable-gallery-gap: 24px;
	gap: 24px;
}

.wp-block-gallery.has-nested-images figure.wp-block-image {
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Plik do pobrania (core/file) — globalnie: /pliki-do-pobrania/ i wpisy bloga
 * Kolejne bloki pliku sklejają się w jedną białą listę z włoskową linią między wierszami.
 * ---------------------------------------------------------------------- */

div.wp-block-file {
	align-items: center;
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--lg);
	display: flex;
	gap: 18px;
	justify-content: space-between;
	margin-bottom: 0;
	padding: 14px 14px 14px 24px;
}

div.wp-block-file + div.wp-block-file {
	border-top: 1px solid var(--wp--custom--line);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	margin-block-start: 0;
}

div.wp-block-file:has(+ div.wp-block-file) {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.wp-block-file > a:not(.wp-block-file__button) {
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: 1.4;
	min-width: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.wp-block-file > a:not(.wp-block-file__button):hover {
	color: var(--wp--preset--color--primary);
}

/* „Pobierz” to przycisk motywu (element button z theme.json) z odznaką strzałki
   jak .is-style-arrow — strzałka obrócona w dół. */
.wp-block-file a.wp-block-file__button {
	flex: none;
	margin: 0;
	padding-right: 48px;
	position: relative;
	white-space: nowrap;
}

.wp-block-file a.wp-block-file__button::after {
	background-color: var(--wp--preset--color--surface);
	background-image: url(assets/icons/arrow-navy.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 9px 9px;
	border-radius: 50%;
	content: "";
	height: 26px;
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%) rotate(135deg);
	width: 26px;
}

.wp-block-file a.wp-block-file__button:hover,
.wp-block-file a.wp-block-file__button:focus {
	color: var(--wp--preset--color--surface);
	opacity: 1;
}

@media (max-width: 599px) {
	div.wp-block-file {
		align-items: flex-start;
		flex-direction: column;
		gap: 12px;
		padding: 16px 18px;
	}
}

/* -------------------------------------------------------------------------
 * Odstępy między blokami w kontenerach o własnym układzie
 * ---------------------------------------------------------------------- */

.topbar__inner > * + *,
.topbar__claims > * + *,
.topbar__contact > * + *,
.hero__media > * + *,
.hero__grid > * + *,
.hero__col > * + *,
.hero__chip-rows > * + *,
.hero__stats > * + *,
.hero__stat > * + *,
.onas > * + *,
.onas__col > * + *,
.uslugi__head > * + *,
.uslugi__slider > * + *,
.uslugi__slider .wp-block-post-template > * + *,
.uslugi__slider .wp-block-post > * + *,
.uslugi__grid > * + *,
.uslugi__grid .wp-block-post-template > * + *,
.uslugi__grid .wp-block-post > * + *,
.uslugi__reveal > * + *,
.opinie__dots > * + *,
.slider-nav > * + *,
.pasek__viewport > * + *,
.pasek__track > * + *,
.liczby > * + *,
.liczby__grid > * + *,
.liczby__item > * + *,
.dlaczego__grid > * + *,
.dlaczego__card > * + *,
.dlaczego__card--cta > * + *,
.dlaczego__card-body > * + *,
.dzieci__inner > * + *,
.dzieci__text > * + *,
.dzieci__media > * + *,
.poradnik__foot > * + *,
.kroki__head > * + *,
.kroki__grid > * + *,
.kroki__card > * + *,
.kroki__meta > * + *,
.kontakt__grid > * + *,
.kontakt__panel > * + *,
.site-footer__bar > * + *,
.site-footer__col > * + *,
.site-footer__nav > * + *,
.error-404 > * + *,
.directions > * + *,
.directions__panel > * + *,
.directions__grid > * + *,
.directions__item > * + *,
.site-footer__legal > * + *,
.price-list > * + *,
.price-list__rows > * + *,
.price-list__subgroup > * + *,
.price-list__row > * + *,
.tabs > * + *,
.tabs__list > * + *,
.tabs__panels > * + *,
.breadcrumbs__list > * + *,
.service-hero__grid > * + *,
.service-hero__col > * + *,
.service-hero__actions > * + *,
.service-hero__meta > * + *,
.is-style-chips > * + *,
.service-cta__grid > * + *,
.svc-steps > * + *,
.svc-stack > * + *,
.svc-timeline > * + *,
.svc-defs > * + *,
.svc-chips > * + *,
.pricing__actions > * + *,
.contact-details > * + *,
.contact-details__head > * + *,
.contact-details__grid > * + *,
.contact-details__card > * + *,
.person-hero > * + *,
.person-hero__media > * + *,
.person-hero__panel > * + *,
.person-hero__actions > * + *,
.person-svc__rows > * + *,
.person-svc__row > * + *,
.person-team > * + *,
.person-team__head > * + *,
.person-team__dots > * + *,
.person-team__query .wp-block-post-template > * + *,
.site-header__drawer > * + *,
.site-header__drawer-phones > * + *,
.site-header__drawer-foot > * + *,
.site-header__drawer-info > * + *,
.blog-index > * + *,
.blog-grid > * + *,
.blog-card > * + *,
.blog-card__body > * + *,
.blog-post__meta > * + *,
.blog-related > * + * {
	margin-block-start: 0;
}

/* Blog — odstępy za resetem blockGap i w jego specyficzności. */
.blog-index > .blog-index__lead {
	margin-block-start: 12px;
}

.blog-index > .blog-grid {
	margin-block-start: var(--wp--preset--spacing--60);
}

.blog-grid > .blog-grid__pagination,
.blog-grid > .wp-block-query-no-results {
	margin-block-start: 48px;
}

.blog-card__body > .blog-card__foot {
	margin-block-start: auto;
	padding-top: 8px;
}

.blog-post > .blog-post__title {
	margin-block-start: 22px;
}

.blog-post > .blog-post__meta {
	margin-block-start: 18px;
}

.blog-post > .blog-post__image {
	margin-block-start: var(--wp--preset--spacing--50);
}

.blog-post > .blog-post__content {
	margin-block-start: var(--wp--preset--spacing--60);
}

.blog-post > .blog-related {
	margin-block-start: var(--wp--preset--spacing--70);
}

.blog-related > .blog-grid {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Odstępy w stopce menu mobilnego — za resetem blockGap i w jego specyficzności. */
.site-header__drawer > .site-header__drawer-cta {
	margin-block-start: 32px;
}

.site-header__drawer > .site-header__drawer-phones {
	margin-block-start: 30px;
}

.site-header__drawer-phones > .site-header__drawer-phone + .site-header__drawer-phone {
	margin-block-start: 11px;
}

.site-header__drawer > .site-header__drawer-foot {
	margin-block-start: 72px;
}

.site-header__drawer-info > .site-header__drawer-hours {
	margin-block-start: 29px;
}

/* Nagłówek przylega do treści, a hero do karty „o nas” — tak jak w projekcie. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

.hero > * + * {
	margin-block-start: 0;
}

main > .onas {
	margin-block-start: 11px;
}

/* Odstęp podpisu od liczby — musi stać za resetem blockGap i mieć jego
   specyficzność, inaczej `margin` z `.liczby__label` przegrywa z `.liczby__item > * + *`. */
.liczby__item > .liczby__label {
	margin-block-start: 18px;
}

/* To samo w hero: `.hero__stat > * + *` z resetu (0,2,0) bije `margin` z
   `.hero__stat-label` (0,1,0), więc odstęp piszemy tu. */
.hero__stat > .hero__stat-label {
	margin-block-start: 10px;
}

/* Odstępy w panelu osoby muszą stać za resetem blockGap i mieć jego
   specyficzność — inaczej `margin-top` z sekcji wyżej przegrywa. */
.person-hero__panel > .person-hero__actions {
	margin-block-start: auto;
	padding-block-start: 40px;
}

.person-hero__panel > .person-hero__tagline {
	margin-block-start: 31px;
}

/* Zielone przyciski trzymają się dołu kolumny, jak w projekcie. */
.kontakt__panel--light > .kontakt__actions {
	margin-block-start: auto;
}

/* Stopka: adres pod kontaktami, odsunięty od e-maila. */
.site-footer__col > .site-footer__item--muted {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Dojazd: „Nawiguj” pod adresem, mapa pod panelem. */
.directions__item > .directions__actions {
	margin-block-start: var(--wp--preset--spacing--40);
}

.directions > .directions__map {
	margin-block-start: var(--wp--preset--spacing--40);
}

.hero__col--text > .hero__cta {
	margin-block-start: 26px;
}

/* Odstęp przycisków od włoskowej linii nad chipami w hero usługi —
   `margin` z `.service-hero__chips` (0,1,0) przegrywa z resetem. */
.service-hero__col > .service-hero__chips {
	margin-block-start: 24px;
}

main > .o-klinice {
	margin-block-start: 50px;
}

main > .pasek {
	margin-block-start: 32px;
}

main > .dzieci {
	margin-block-start: 84px;
}

/* -------------------------------------------------------------------------
 * Responsywność
 * ---------------------------------------------------------------------- */

@media (max-width: 1599px) {

	.uslugi {
		--uslugi-gap: 28px;
		--uslugi-per: 5;
	}
}

@media (max-width: 1299px) {

	.uslugi {
		--uslugi-gap: 24px;
		--uslugi-per: 4;
	}
}

@media (max-width: 1100px) {

	.hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.o-klinice__cols {
		gap: 60px;
	}

	.uslugi {
		--uslugi-gap: 20px;
		--uslugi-per: 3;
	}
}

@media (max-width: 900px) {

	.topbar__claims .topbar__claim:not(:first-child) {
		display: none;
	}

	.topbar__claim,
	.topbar__hours,
	.topbar__phone a {
		white-space: normal;
	}

	.topbar__inner {
		gap: 12px;
	}

	.topbar__hours {
		display: none;
	}

	.hero {
		padding: 32px 24px;
	}

	.hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.hero__blob {
		display: none;
	}

	/* Bez dwóch kolumn zdjęcie nie może zostać absolutne — nakładałoby się
	   na liczby pod spodem. */
	.hero__col--media {
		justify-content: flex-start;
	}

	.hero__photo {
		inset: auto;
		position: static;
	}

	.hero__photo img {
		height: auto;
		max-height: 340px;
		object-position: center bottom;
	}

	.hero__stats {
		gap: 28px;
	}

	.o-klinice__cols {
		gap: 32px;
	}

	.liczby__grid,
	.dlaczego__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.opinie {
		padding: 32px 20px;
	}

	.opinie__quote .wp-block-post-excerpt__excerpt {
		font-size: 18px;
	}

	.dzieci {
		padding: 32px 24px;
	}

	.dzieci__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	.onas {
		padding: 32px 24px;
	}

	.wp-block-columns.onas__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: 34px auto auto 34px auto auto;
	}

	.onas__col {
		grid-row: span 3;
	}

	.kroki__grid,
	.poradnik__grid .wp-block-post-template {
		grid-template-columns: repeat(3, 1fr);
	}

	.kontakt__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.uslugi {
		--uslugi-gap: 16px;
		--uslugi-per: 2.2;
	}
}

@media (max-width: 1024px) {

	.site-footer__bar {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {

	.wp-block-columns.onas__cols {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: repeat(4, 34px auto auto);
	}

	.site-footer__bar {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	}

	.site-footer__legal {
		flex-direction: column;
	}

	.liczby__grid,
	.dlaczego__grid {
		grid-template-columns: 1fr;
	}

	.hero {
		padding: 28px 20px 24px;
	}

	/* Pastylki usług zjadają na mobile pół ekranu — te same linki są
	   w menu i w sekcji „Usługi”. */
	.hero__chip-rows {
		display: none;
	}

	.hero__title {
		margin-bottom: 0;
	}

	.hero__photo img {
		max-height: 260px;
	}

	.hero__stats {
		gap: 20px 32px;
	}

	.o-klinice__cols {
		gap: 20px;
	}

	.zespol__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
		margin-bottom: 10px;
	}

	/* W kolumnie `flex-basis` liczy się jako wysokość, więc `flex: 1 1 320px`
	   z desktopu robiło 320px pustki pod leadem. */
	.zespol__lead {
		flex: 0 0 auto;
	}

	/* Strzałki jak w sliderze usług. Głowa sekcji jest tu kolumną, więc nawigacja
	   idzie do prawej krawędzi — tak samo jak w rzędzie na desktopie. */
	.zespol .zespol__nav {
		align-self: flex-end;
		display: flex;
	}

	/* Slider zespołu i liczniki to osobne sekcje, ale 148px blockGapu na telefonie
	   robi z tego przerwę na pół ekranu. */
	main > .liczby {
		margin-block-start: 64px;
	}

	.kroki__grid,
	.poradnik__grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}

	.kontakt__panel {
		padding: 26px 20px;
	}

	.topbar__claims {
		display: none;
	}

	.uslugi {
		--uslugi-gap: 14px;
		--uslugi-per: 1.35;
	}
}