/* ============================================================
   theme.css — доповнення/оверрайди WP-теми ESC.
   НЕ синхронізується з верстки (на відміну від style.css).
   Підключається і на фронт, і в редактор (add_editor_style).
   ============================================================ */

/* ── Стандартні Gutenberg-блоки: обмеження ширини + стилі ────────────────
 * Наші esc/*-блоки самі мають внутрішній .container (навмисно full-bleed,
 * власне тло на всю ширину). Якщо контент-менеджер кладе СТАНДАРТНИЙ блок
 * (Абзац/Зображення/Колонки…) прямо на сторінку — без цього правила він
 * розповзається на всю ширину екрана (theme.json contentSize сам по собі
 * лише малює напрямні в редакторі, ширину фронту не обмежує в класичній темі).
 * .alignwide/.alignfull — стандартні класи ядра, самі виходять з обмеження.
 */
.entry-content > * {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.entry-content > [class*="wp-block-esc-"] {
  /* наші секційні блоки — самі відповідають за свою ширину (внутр. .container) */
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.entry-content > nav.breadcrumbs {
  /* повноширинна смуга крихт — теж керує собою сама */
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.entry-content > .alignwide { max-width: 1400px; }
.entry-content > .alignfull { max-width: none; padding-left: 0; padding-right: 0; }

/*
 * ⚠️ ВАЖЛИВО: усе нижче — ЛИШЕ ">" (прямий нащадок) або явно прив'язане до
 * .wp-block-* класів ядра. Наші esc/*-блоки завжди рендерять СВІЙ корінь як
 * <section class="… wp-block-esc-X">, тому "h2"/"p"/"a" НІКОЛИ не є прямим
 * нащадком .entry-content всередині esc/*-блоку — і ці правила туди не
 * дотягуються. Раніше тут були "descendant"-селектори (.entry-content a і т.д.)
 * без ">" — вони проникали крізь ВСІ esc/*-блоки й ламали сайт (підкреслені
 * кнопки/крихти, зайві відступи між секціями). НЕ повертати без ">".
 */
.entry-content > *:not([class*="wp-block-esc-"]):not(nav.breadcrumbs) + *:not([class*="wp-block-esc-"]):not(nav.breadcrumbs) {
  margin-top: 24px;                  /* ритм МІЖ стандартними блоками — не між esc/*-секціями */
}
.entry-content > *:first-child:not([class*="wp-block-esc-"]):not(nav.breadcrumbs) { margin-top: 48px; }
.entry-content > *:last-child:not([class*="wp-block-esc-"]):not(nav.breadcrumbs) { margin-bottom: 48px; }

/* Заголовки стандартних блоків — як і скрізь на сайті (Ermilov, uppercase на H1/H2) */
.entry-content > :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text);
}
.entry-content > h1 { font-size: 64px; text-transform: uppercase; }
.entry-content > h2 { font-size: 48px; text-transform: uppercase; }
.entry-content > h3 { font-size: 32px; }
.entry-content > h4 { font-size: 24px; }
.entry-content > h5, .entry-content > h6 { font-size: 18px; }

.entry-content > p { font-size: 16px; line-height: 1.5; color: var(--color-slate); }
.entry-content > p a,
.entry-content > li a,
.entry-content > ul a, .entry-content > ol a,
.entry-content > .wp-block-quote a {
  color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 2px;
}
.entry-content > p a:hover,
.entry-content > li a:hover,
.entry-content > .wp-block-quote a:hover { color: var(--color-hover); }

.entry-content > ul, .entry-content > ol { padding-left: 24px; }
.entry-content > ul li + li, .entry-content > ol li + li { margin-top: 8px; }

.entry-content > .wp-block-image { margin: 0; }
.entry-content > .wp-block-image img { border-radius: var(--radius-lg); height: auto; max-width: 100%; }
.entry-content > .wp-block-image figcaption { margin-top: 8px; font-size: 14px; color: var(--color-slate); text-align: center; }

.entry-content > .wp-block-gallery { gap: 16px; }

.entry-content > .wp-block-quote {
  padding: 16px 0 16px 24px;
  border-left: 3px solid var(--color-accent);
  font-style: italic;
  color: var(--color-text);
}
.entry-content > .wp-block-quote cite { display: block; margin-top: 8px; font-style: normal; font-size: 14px; color: var(--color-slate); }

.entry-content > .wp-block-table table { width: 100%; border-collapse: collapse; }
.entry-content > .wp-block-table th, .entry-content > .wp-block-table td { padding: 12px; border: 1px solid var(--color-line); text-align: left; }

.entry-content > .wp-block-separator { border-top: 1px solid var(--color-line); margin: 32px 0; }

.entry-content > .wp-block-buttons .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; padding: 0 32px;
  border-radius: 30px;
  font-family: var(--font-body); font-weight: 700; font-size: 18px;
  background: var(--color-accent); color: var(--color-accent-dark);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.entry-content > .wp-block-buttons .wp-block-button__link:hover { background: var(--color-hover); transform: translateY(-1px); }
.entry-content > .wp-block-buttons { gap: 16px; }

.entry-content > .wp-block-columns { gap: 32px; }
.entry-content > .wp-block-columns p { font-size: 16px; line-height: 1.5; color: var(--color-slate); }
.entry-content > .wp-block-group > * + * { margin-top: 16px; }

@media (max-width: 640px) {
  .entry-content > h1 { font-size: 36px; }
  .entry-content > h2 { font-size: 28px; }
  .entry-content > h3 { font-size: 24px; }
}

/* ── Спільні модифікатори для 2-колонкових блоків (esc/steps, esc/mini-awards,
 * esc/contacts; для esc/tblock — лише valign, mirror у нього вже свій) ──
 * .grid-mirror — swap порядку колонок через order (без дублювання
 * grid-template-columns на кожен блок); .valign-* — вертикальне вирівнювання. */
.grid-mirror > :first-child { order: 2; }
.grid-mirror > :last-child { order: 1; }
.valign-top { align-items: start; }
.valign-center { align-items: center; }
.valign-bottom { align-items: end; }
@media (max-width: 960px) {
  /* на стовпчику мобільного/планшета дзеркало не потрібне — повертаємо природний порядок */
  .grid-mirror > :first-child, .grid-mirror > :last-child { order: initial; }
}

/* ---- Відгуки: кольоровий логотип Google замість літери «G» ----
   Файл assets/images/google-g.svg (офіційний лого). Поки його немає —
   render.php віддає текстовий фолбек .rr-g/.review-g (стилі у style.css). */
.rr-g-logo {
	display: inline-block;
	width: 30px;
	height: 30px;
	margin-right: 10px;
	vertical-align: middle;
}
.review-g-logo {
	width: 22px;
	height: 22px;
	margin-left: auto;
	align-self: flex-start;
	flex: 0 0 auto;
}

/* ---- Клініка: темний водяний знак (у верстці світло-сірий #E6E7E8) ---- */
.clinic-watermark {
	filter: brightness(0);
	opacity: 0.6;
}

/* ---- Клініка: бабли зʼявляються одна за одною зліва направо ----
   .esc-anim додає theme.js; .is-visible — при вході в вʼюпорт. */
.clinic-bubbles.esc-anim .bubble {
	opacity: 0;
	transform: translateY(18px) scale(0.9);
}
.clinic-bubbles.esc-anim.is-visible .bubble {
	animation: escBubbleIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.clinic-bubbles.esc-anim.is-visible .b1 { animation-delay: 0s; }
.clinic-bubbles.esc-anim.is-visible .b2 { animation-delay: 0.14s; }
.clinic-bubbles.esc-anim.is-visible .b3 { animation-delay: 0.28s; }
.clinic-bubbles.esc-anim.is-visible .b4 { animation-delay: 0.42s; }
.clinic-bubbles.esc-anim.is-visible .b5 { animation-delay: 0.56s; }

@keyframes escBubbleIn {
	to {
		opacity: 1;
		transform: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.clinic-bubbles.esc-anim .bubble {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ---- Послуги: приховані «зайві» картки до розкриття кнопкою ---- */
.services:not( .services-expanded ) .services-grid > .is-extra {
	display: none;
}
.services-more-btn {
	cursor: pointer;
}

/* ============================================================
   MIMI карусель — крокова (як wise.com), БЕЗ автоскролу.
   Старий initCarousels не чіпає блок (немає .mimi-track).
   ============================================================ */
/* Viewport бере на себе виліт праворуч у нескінченність (за край екрана)
   і кліпає — картки, що виходять ліворуч, зникають, праві обрізаються екраном. */
.mimi-viewport {
	overflow: hidden;
	margin-right: min( 0px, calc( ( 100vw - var( --container-width ) ) / -2 ) );
	touch-action: pan-y;                /* горизонталь — свайп карусели, вертикаль — браузеру */
	cursor: grab;
}
.mimi-viewport.is-dragging { cursor: grabbing; }
.mimi-viewport.is-dragging .mimi-card { user-select: none; }
.mimi-carousel {
	display: flex;
	gap: 20px;
	transition: transform 0.5s cubic-bezier( 0.22, 1, 0.36, 1 );
	will-change: transform;
}

/* Глибинна анімація картки: «падає в глибину» при next / «повертається» при prev. */
.mimi-card.is-receding {
	animation: mimiRecede 0.5s cubic-bezier( 0.4, 0, 1, 1 ) forwards;
	z-index: 2;
}
.mimi-card.is-returning {
	animation: mimiReturn 0.5s cubic-bezier( 0, 0, 0.2, 1 );
	z-index: 2;
}
@keyframes mimiRecede {
	to {
		transform: scale( 0.5 );
		opacity: 0;
	}
}
@keyframes mimiReturn {
	from {
		transform: scale( 0.5 );
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}
@media ( prefers-reduced-motion: reduce ) {
	.mimi-card.is-receding,
	.mimi-card.is-returning {
		animation: none;
	}
}

/* Стрілки: зелені, якщо є крок у цей бік; сірі — якщо ні. */
.mimi .car-btn:not( .is-disabled ) { border-color: var( --color-accent-bright ); }
.mimi .car-btn:not( .is-disabled )::before { background: var( --color-accent-bright ); }
.mimi .car-btn:not( .is-disabled )::after { border-color: var( --color-accent-bright ); }
.mimi .car-btn.is-disabled { cursor: default; border-color: #c2c8c6; }
.mimi .car-btn.is-disabled::before { background: #c2c8c6; }
.mimi .car-btn.is-disabled::after { border-color: #c2c8c6; }

/* Пояснення переваги — оверлей на hover / focus / тап (клас show-expl). */
.mimi-card { position: relative; }
.mimi-expl {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	padding: 24px;
	background: rgba( 6, 20, 10, 0.9 );
	color: #fff;
	font-family: var( --font-body );
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	text-transform: none;
	border-radius: var( --radius-lg );
	opacity: 0;
	visibility: hidden;
	transition: opacity var( --transition ), visibility var( --transition );
}
.mimi-card:hover .mimi-expl,
.mimi-card:focus-within .mimi-expl,
.mimi-card.show-expl .mimi-expl {
	opacity: 1;
	visibility: visible;
}
/* Внутрішній блок — один флекс-child (щоб текст/<sup> не рвались flex-ом),
   і скрол, якщо пояснення довге. */
.mimi-expl-in {
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba( 255, 255, 255, 0.45 ) transparent;
}
.mimi-expl-in::-webkit-scrollbar {
	width: 6px;
}
.mimi-expl-in::-webkit-scrollbar-thumb {
	background: rgba( 255, 255, 255, 0.4 );
	border-radius: 3px;
}
.mimi-expl-in::-webkit-scrollbar-thumb:hover {
	background: rgba( 255, 255, 255, 0.65 );
}
.mimi-expl-in::-webkit-scrollbar-track {
	background: transparent;
}

/* ============================================================
   «Чому» — карусель як на bel-part: видно 4 картки, решта зʼявляються
   при скролі колесом / драгом курсором / свайпом. Скролбар ПРИХОВАНИЙ.
   Mobile — колонка з вертикальною лінією-зʼєднувачем.
   ============================================================ */
/* кольори кружечків циклічно для 5–8 (style.css задає лише 1–4) — на ВСІХ ширинах */
.why-item:nth-child( 5 ) .why-num { background: var( --color-accent ); }
.why-item:nth-child( 6 ) .why-num { background: var( --color-dark-green ); }
.why-item:nth-child( 7 ) .why-num { background: #06a734; }
.why-item:nth-child( 8 ) .why-num { background: #4d811a; }

@media ( min-width: 641px ) {
	.why-grid {
		display: flex;
		grid-template-columns: none;
		overflow-x: auto;
		gap: 48px;
		cursor: grab;
		/* смуги прокрутки не видно — рух лише колесом/драгом/свайпом */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.why-grid::-webkit-scrollbar { display: none; }
	/* рівно 4 картки у вʼюпорті: (100% - 3 гапи) / 4 */
	.why-grid > .why-item {
		flex: 0 0 calc( ( 100% - 3 * 48px ) / 4 );
	}
	.why-grid.is-dragging { cursor: grabbing; }
	.why-grid.is-dragging * { user-select: none; }
	/* лінія-зʼєднувач між кружечками є і на планшеті (style.css її ховав) */
	.why-item:not( :last-child )::before { display: block; }
}

@media ( max-width: 640px ) {
	.why-grid {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}
	/* кружечок — ліва колонка, текст — праворуч (лінія не перетинає текст) */
	.why-item {
		padding-left: 104px; /* 80 кружечок + 24 гап */
		min-height: 80px;
	}
	.why-item .why-num {
		position: absolute;
		left: 0;
		top: 0;
		margin-bottom: 0;
	}
	/* вертикальна лінія від низу кружечка до верху наступного */
	.why-item:not( :last-child )::before {
		display: block;
		top: 80px;
		bottom: -32px;
		left: 40px;
		right: auto;
		width: 1px;
		height: auto;
	}
	/* прибрати десктопний горизонтальний «хвіст» в останнього */
	.why-item:last-child::before {
		display: none;
	}
}

/* ---- Уніфікація відступу «крихти-смуга → заголовок» на сторінках без hero:
   еталон 8px (як .works-head/.article); .news-head мав 64px ---- */
.news-head {
	padding-top: 8px;
}
/* Пігулки → сітка новин: 56px дає .news-archive; глобальний margin-top
   сітки (64px, з головної) тут зайвий */
.news-archive .news-grid {
	margin-top: 0;
}

/* ---- Пагінація архівів — пігулки в стилі фільтрів новин ---- */
.navigation.pagination {
	margin-top: 48px;
}
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.navigation.pagination .page-numbers {
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: #ecefea;
	color: var( --color-text );
	font-size: 14px;
	font-weight: 500;
	transition: background var( --transition ), color var( --transition );
}
.navigation.pagination a.page-numbers:hover {
	background: #e2e7e0;
}
.navigation.pagination .page-numbers.current {
	background: var( --color-accent );
	color: var( --color-accent-dark );
}
.navigation.pagination .page-numbers.dots {
	background: none;
}
.navigation.pagination .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
}

/* ---- Стаття (сингл новини): списки з редактора + ряд «Поділитися» ---- */
.article-body ul:not( .article-list ):not( .fb-social ) {
	margin-top: 16px;
	padding-left: 24px;
	list-style: disc;
}
.article-body ul:not( .article-list ):not( .fb-social ) li {
	font-size: 16px;
	line-height: 1.4;
	color: var( --color-slate );
}
.article-body ul:not( .article-list ):not( .fb-social ) li + li {
	margin-top: 8px;
}
.article-share .fb-social {
	list-style: none;
	padding-left: 0;
	margin-top: 0;
}
.article-share .fb-social li {
	margin-top: 0;
}
.article-share {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 48px;
}
.article-share-label {
	font-weight: 600;
	color: var( --color-text );
}
.article-share .fb-social {
	margin: 0;
}
.news-others {
	padding: 64px 0 96px;
}

/* ---- Сторінка Ціни: акордеон на білому фоні (клас .prices тягне сірий
   стиль секції цін Імплантації — тут перекриваємо модифікатором) ---- */
.prices.prices--page {
	background: transparent;
	padding: 8px 0 64px;
}

/* ---- Клініка: бабли на ≤1280 — потоком, центровано, УСІ 5 (3+2) ----
   (абсолютні Figma-координати не влазять уже нижче ~1280; верстка робила
   flow лише з 960 і ховала b5) ---- */
@media ( max-width: 1280px ) {
	.clinic-inner {
		min-height: 0;
	}
	.clinic-bubbles {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 24px;
		margin-top: 48px;
		max-width: 700px; /* максимум 3 в ряд → розкладка 3+2 */
		margin-left: auto;
		margin-right: auto;
	}
	.clinic-bubbles .bubble {
		position: static;
		inset: auto;
		width: 200px;
		height: 200px;
	}
	.clinic-bubbles .b5 {
		display: block; /* верстка ховала 5-й — показуємо всі */
	}
}
@media ( max-width: 640px ) {
	.clinic-bubbles .bubble {
		width: 148px;
		height: 148px;
	}
}

/* ---- Адаптив-фікси (баги ще з верстки) ---- */
@media ( max-width: 960px ) {
	/* Клініка: у медіа style.css `padding: 64px 0`/`48px 0` затирає бокові
	   падінги контейнера (готча «padding: X 0») — повертаємо їх. */
	.clinic-inner {
		padding-left: var( --container-pad );
		padding-right: var( --container-pad );
	}
	/* Біла смуга під футером: резерв під фіксований бар був на body
	   (білий фон) — переносимо його у футер (фон #ecefea суцільний). */
	body {
		padding-bottom: 0;
	}
	.site-footer {
		padding-bottom: 64px;
	}
}

/* ---- Хлібні крихти на сторінках БЕЗ hero: сіра смуга під шапкою ---- */
.breadcrumbs--bar {
	background: var( --color-card );
	margin-bottom: 32px;
}

/* ---- Етапи: прибрати ховер-ефект (зелений→червоний). Крапка статична. ----
   Колір крапки задається per-item у блоці: зелений (дефолт) або .step--red. */
.steps-list li:hover::before {
	background: var( --color-accent );
}
.steps-list li.step--red::before,
.steps-list li.step--red:hover::before {
	background: #ff1e1e;
}

/* ---- Мега-меню: заголовок розділу = лінк; карета — тап-тогл на мобільному.
   Тап-зону робимо НЕВИДИМИМ ::after (сам шеврон 7×7 з верстки не чіпаємо —
   padding/margin роздували його і насували на текст). ---- */
@media ( max-width: 960px ) {
	.mega-caret {
		position: relative;
		cursor: pointer;
	}
	.mega-caret::after {
		content: "";
		position: absolute;
		inset: -16px;
	}
}

/* ---- Відео-лайтбокс (обслуговує [data-video]) ---- */
.video-lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba( 0, 0, 0, 0.85 );
}
.video-lightbox-inner {
	position: relative;
	width: min( 960px, 100% );
	aspect-ratio: 16 / 9;
}
.video-lightbox iframe,
.video-lightbox video {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 8px;
	background: #000;
}
/* .video-lightbox-close — стилізується уніфікованим правилом контролів лайтбоксу нижче. */
/* Редактор: пояснення показуємо як звичайний блок (щоб редагувати). */
.mimi-expl-edit {
	margin-top: 12px;
	font-size: 13px;
	opacity: 0.75;
}

/* =========================================================================
 * Contact Form 7 — вписування в дизайн форми .cf-* (верстка contacts.html).
 * CF7 обгортає <form> у div.wpcf7, а кожне поле — у span.wpcf7-form-control-wrap.
 * ======================================================================= */
/* Обгортка CF7 не має ставати грід-колонкою замість самої форми. */
.contacts-grid > .wpcf7 { display: contents; }
.wpcf7-form .wpcf7-form-control-wrap { display: block; }
.wpcf7-form .cf-row .wpcf7-form-control-wrap { flex: 1; min-width: 0; }
/* Спінер CF7 — по центру під кнопкою, а не інлайном. */
.wpcf7-form .wpcf7-spinner { display: block; margin: 8px auto 0; }
/* Повідомлення валідації поля. */
.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin: 6px 20px 0;
	font-size: 12px;
	line-height: 1.3;
	color: #c9584c;
}
/* Підсумкова відповідь форми (замість дефолтної рамки CF7). */
.wpcf7-form .wpcf7-response-output {
	margin: 20px 0 0;
	padding: 10px 16px;
	border: 1px solid var(--color-slate);
	border-radius: var(--radius-lg);
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	color: var(--color-slate);
}
.wpcf7-form.sent .wpcf7-response-output {
	border-color: var(--color-accent);
	background: var(--color-accent);
	color: var(--color-accent-dark);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
	border-color: #c9584c;
	color: #c9584c;
}

/* =========================================================================
 * Раунд правок власника 16.07 (оверрайди верстки — style.css не чіпаємо).
 * ======================================================================= */
/* Картки методик: заголовок притиснутий догори, дрібний текст — донизу. */
.mcard { display: flex; flex-direction: column; }
.mcard p { margin-top: auto; }
/* Відео-картки: нижня плашка підпису — скруглення як у превʼю зверху. */
.vcard figcaption { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
/* «Кому підійде»: CTA — останній елемент своєї колонки (колонки незалежні).
 * 23.07: align-self:flex-start прибрано — він тиснув CTA догори й по ширині;
 * центрування в залишку колонки тепер у style.css (.fit-col > .fit-cta). */
/* Керівництво: посада без підкреслення. */
.team-role { text-decoration: none; }
/* Новини: підзаголовок не зелений. */
.news-subtitle { color: var(--color-text); }
/* Картка новини: хувер не на всю картку — лише на сам елемент під курсором.
 * У верстці .ncard-more::after розтягує лінк на всю картку → хувер будь-де
 * підсвічував «Читати далі»; прибираємо (фото і назва мають власні лінки). */
.ncard-more::after { content: none; }
.ncard:hover .ncard-title { color: inherit; }
.ncard-title a:hover { color: var(--color-hover); }
/* Стрілка «Читати далі»: лінія по центру (була на пів-пікселя нижче шеврона),
 * на hover — колір + зсув стрілки вправо. */
.ncard-arrow::before { transform: translateY(-50%); }
.ncard-arrow::after { transform: translateY(-50%) rotate(45deg); right: 1px; }
.ncard-arrow { transition: transform var(--transition); }
.ncard-more:hover .ncard-arrow { transform: translateX(4px); }
/* Плейсхолдер фото для новини/статті без головного зображення — той самий знак, що в .scard-photo--ph. */
.ncard-photo--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 268px;
  background: #eef3f2;
}
.ncard-photo--ph::before {
  content: "";
  width: 62%;
  height: 62%;
  background: url('../images/intro-tooth.png') no-repeat center / contain;
}

/* ── Блок «Всі послуги» (esc/all-services) ─────────────────────────────
 * Сітка reuse .services/.scard; блок стоїть окремо на сторінці → свій верхній ритм. */
.all-services { padding-top: 64px; }
.services-empty { text-align: center; color: var(--color-slate); }
/* Плейсхолдер фото для послуги без головного зображення — знак з лого (водяний знак). */
.scard-photo--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 268px;
  background: #eef3f2;                 /* як фон hero — світлий бренд-тон */
}
.scard-photo--ph::before {
  content: "";
  width: 62%;
  height: 62%;
  /* знак із зірочками (як в інтро-блоці головної) — не "голий" watermark клініки */
  background: url('../images/intro-tooth.png') no-repeat center / contain;
}
@media (max-width: 640px) {
  .all-services { padding-top: 48px; }
}

/* ── Мега-пункт із власним посиланням (esc/all-services у меню) ─────────
 * Лейбл = клікабельний лінк (перехід на сторінку), мега — на hover;
 * каретка-кнопка існує лише для мобільного тоглу. */
.nav-caret-btn { display: none; }              /* десктоп: каретки нема (hover) */
@media (min-width: 961px) {
  /* колір лейбла при відкритій мезі — як у звичайних пунктів на hover
     (підкреслення лейбл успадковує від .nav-item > a). */
  .has-mega--linked:hover .nav-mega-link { color: var(--color-hover); }
}
@media (max-width: 960px) {
  /* лейбл (перехід) + каретка (тогл) в один ряд, мега-акордеон — нижче */
  .nav-item.has-mega--linked { display: flex; flex-wrap: wrap; align-items: center; }
  .has-mega--linked > .nav-mega-link { flex: 1 1 auto; width: auto; justify-content: flex-start; }
  .has-mega--linked > .nav-caret-btn {
    display: flex; align-items: center; flex: 0 0 auto;
    padding: 16px 8px 16px 12px;               /* тап-зона каретки */
    background: none; border: none; color: inherit; cursor: pointer;
  }
  .has-mega--linked > .mega { flex: 0 0 100%; }
}

/* ── Фотогалерея (esc/photo-gallery): сітка N в ряд + груповий лайтбокс ── */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(var(--pg-cols, 3), 1fr);
  gap: 24px;
  margin-top: 48px;
  margin-bottom: 48px;
}
.photo-gallery .pg-item { margin: 0; }
.photo-gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  cursor: zoom-in;
  transition: transform var(--transition), box-shadow var(--transition);
}
.photo-gallery img:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(24,48,44,0.12); }
@media (max-width: 900px) {
  .photo-gallery { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
  .photo-gallery { grid-template-columns: 1fr; }
}

/* Груповий лайтбокс + відео-лайтбокс — однакові контроли (CSS-мальовані, ідеально центровані).
 * Базовий .lightbox — у синхронізованому style.css. */
.lightbox-nav,
.lightbox-close,
.video-lightbox-close {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(254,254,254,0.14);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--transition);
}
.lightbox-nav:hover,
.lightbox-close:hover,
.video-lightbox-close:hover { background: rgba(254,254,254,0.3); }
.lightbox-close,
.video-lightbox-close { top: 24px; right: 24px; width: 48px; height: 48px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
/* хрестик закриття — дві лінії, точно по центру */
.lightbox-close::before, .lightbox-close::after,
.video-lightbox-close::before, .video-lightbox-close::after {
  content: ""; position: absolute; width: 18px; height: 2px; background: #fff; border-radius: 2px;
}
.lightbox-close::before, .video-lightbox-close::before { transform: rotate(45deg); }
.lightbox-close::after, .video-lightbox-close::after { transform: rotate(-45deg); }
/* шеврони ‹ › — бордер, по центру кнопки */
.lightbox-nav::before {
  content: ""; width: 11px; height: 11px;
  border: solid #fff; border-width: 2px 2px 0 0;
}
.lightbox-prev::before { transform: rotate(-135deg); margin-left: 6px; }
.lightbox-next::before { transform: rotate(45deg); margin-right: 6px; }
.lightbox-counter {
  position: absolute;
  bottom: 24px; left: 50%; transform: translateX(-50%);
  color: #fff; font-size: 15px; letter-spacing: 0.04em;
  background: rgba(0,0,0,0.4); padding: 6px 14px; border-radius: 20px;
}
@media (max-width: 640px) {
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}

/* Плейсхолдер-фото послуги / фото галерей — курсор-лупа */
.photo-gallery img, .license-grid img, #wgalleryMain, .article-body img { cursor: zoom-in; }

/*
 * Фото в тексті статей «Події» (single.php, .article-body[data-lightbox]) —
 * імпортований контент (inc/legacy-redirects.php раунд 17) вільний HTML,
 * НЕ Gutenberg-блоки, тож style.css-правило `.article-body figure.wp-block-image
 * img` (заокруглення/object-fit) на нього не діє — фото були голі, без відступів
 * і без лайтбокса. Груповий лайтбокс уже спрацьовує сам (theme.js
 * initImageLightbox бере БУДЬ-ЯКИЙ [data-lightbox]-контейнер — досить атрибута
 * на .article-body, доданого в single.php).
 */
.article-body img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin: 8px;
}
.article-body p:has(img) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: -8px;
  margin-right: -8px;
}

/*
 * Галерея випадку (works-single) — колонка мініатюр показує ЛИШЕ вікно
 * (рівно 3 мініатюри, БЕЗ обрізаної навпіл 4-ї) одразу, решта — прокручуються
 * стрілками ↑/↓ (initWorksGalleryWindow у theme.js, transform на
 * .wgallery-thumbs, а не scrollTop — той самий підхід, що в marquee-треках
 * проєкту). Раніше стрілки перемикали ГОЛОВНЕ фото (script.js), через що при
 * 7+ фото вся колонка розтягувала сторінку вниз без прокрутки.
 * ⚠️ Мініатюри лишаються ОДНАКОВОГО розміру (140px, `cover` зі style.css —
 * НЕ чіпати): рішення власника. "Оверлей" (viewport) підлаштовано так, щоб
 * висота вікна = точно ціле число мініатюр — тому жодна не зʼявляється
 * обрізаною навпіл на межі вікна. ⚠️ Реальна висота ОДНІЄЇ мініатюри — не
 * 140px, а 144px: `.wgallery-thumb` (кнопка-обгортка навколо img) має
 * `border: 2px solid transparent` (style.css) — при авто-висоті бордер
 * ЗАВЖДИ додається зверху border-box, height:140px стосується лише img
 * усередині. 3×144+2×16=464, не 452 — на 452 третя мініатюра різалась
 * рівно на ті самі 12px (4px×3 бордерів), які я не врахував.
 * `position: relative` на viewport — ОБОВʼЯЗКОВО: без позиціонованого предка
 * `offsetTop` дочірніх кнопок (theme.js) рахувався відносно найближчого
 * position!=static ПРЕДКА ВИЩЕ по дереву (не самого viewport) — реальні
 * значення виявлялись величезними, `translateY()` виносив трек за межі
 * екрана, і галерея "зникала" повністю.
 */
.wgallery-thumbs-viewport {
  position: relative;
  overflow: hidden;
  max-height: calc(144px * 3 + 16px * 2); /* точно 3 цілі мініатюри (140+2×2px border), без частини 4-ї */
}
.wgallery-thumbs {
  transition: transform 0.3s ease;
}
.wgallery-arrow[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }

/*
 * ≤960px (той самий брейкпоінт, що в style.css переводить .wgallery-thumbs
 * у flex-direction:row) — вікно мініатюр стає ГОРИЗОНТАЛЬНИМ. Без цього
 * блоку viewport лишався налаштований лише на вертикальну висоту, а ряд
 * мініатюр не мав жодної фіксованої ширини (img width:100% від невизначеної
 * ширини авто-flex-item) → мініатюри стискались у тонкі криві смужки на
 * весь наявний рядок замість акуратного ряду квадратів (theme.js визначає
 * вісь runtime за computed flex-direction — тут лише візуальні розміри).
 */
@media (max-width: 960px) {
  .wgallery-nav { justify-content: center; }
  .wgallery-thumbs-viewport {
    max-height: none;
    overflow-x: hidden;
    overflow-y: visible;
    /* НЕ фіксована ширина в px (516px нав "3 мініатюри+2 стрілки+гапи" не
       влазить у вузькі екрани, напр. 375px — 2-гу мініатюру різало на межі
       вʼюпорта). flex:1 1 auto + min-width:0 — вʼюпорт займає РЕШТУ наявної
       ширини nav (яка вже обмежена контейнером/паддінгами сторінки), скільки
       мініатюр влізе — те й покаже; min-width:0 обов'язковий, інакше flex-item
       не стискається нижче свого вмісту й overflow-x:hidden не спрацює. */
    flex: 1 1 auto;
    min-width: 0;
  }
  .wgallery-thumb { flex: 0 0 100px; }
  .wgallery-thumb img { width: 100px; }
  /* Іконки стрілок намальовані як ↑/↓ — у горизонтальному ряду мають
     вказувати ←/→ (сама логіка гортання вже горизонтальна, theme.js isRow()).
     ⚠️ down.svg вже "вниз" (не "вгору"), тож для обох однаковий -90deg дає
     ПРОТИЛЕЖНІ результати (up→ліворуч, down→праворуч) — +90 на down давав
     ліворуч ЩЕ РАЗ (той самий бік, що й up). */
  .wgallery-up img { transform: rotate(-90deg); }
  .wgallery-down img { transform: rotate(-90deg); }
}

/* Кнопка «нагору» */
.to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 90;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent);
  border: none; border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(24,48,44,0.18);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition), background var(--transition);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--color-hover); }
/* та сама стрілка, що й у мобільному барі (.mb-top) — візуальна єдність */
.to-top::before {
  content: "";
  width: 28px; height: 28px;
  background: url('../images/icon-arrow-up.svg') no-repeat center / contain;
}
@media (max-width: 960px) {
  /* дублює вбудовану кнопку .mb-top у фіксованому мобільному барі — ховаємо */
  .to-top { display: none !important; }
}

/* Промо-бар — клікабельний рядок-акція (лінк на сторінку «Акції»); hover → темно-зелений */
/* align-items:flex-start (не center) — щоб іконка трималась ПЕРШОГО рядка тексту,
   а не "плавала" по вертикальному центру всього блоку, коли текст переноситься на 2 рядки. */
.promo-link { display: inline-flex; align-items: flex-start; text-align: left; color: inherit; text-decoration: none; transition: color var(--transition); }
.promo-link:hover { color: var(--color-accent-dark); }
/* галочка — через mask, тож колір = колір тексту (міняється разом на hover) */
.promo-link .promo-check {
  flex: 0 0 auto;
  filter: none;
  width: 18px; height: 17px; margin-right: 8px;
  margin-top: 11px;                   /* оптичне вирівнювання з висотою літер першого рядка */
  background-color: currentColor;
  -webkit-mask: url('../images/icon-check.svg') no-repeat center / contain;
          mask: url('../images/icon-check.svg') no-repeat center / contain;
}

/* Активний пункт меню — як при hover (колір + підкреслення) */
@media (min-width: 961px) {
  .nav-item.is-active > a,
  .nav-item.is-active .nav-link,
  .nav-item.is-active .nav-mega-link { color: var(--color-hover); }
  .nav-item.is-active > a::after,
  .nav-item.is-active .nav-toggle::after { opacity: 1; }
}

/* ── Дропдаун «Про нас» у головній навігації — та сама поведінка на
   hover/фокусі, що й мега «Послуги» (style.css: .has-mega:hover .mega),
   тільки панель лишається вузькою .dropdown-menu, не на всю ширину як
   мега. Скоуп саме на .nav-item.dropdown — не зачіпає інші .dropdown на
   сторінці (напр. телефони в топбарі), ті лишаються клікабельними.
   JS (initDropdowns) і мобільний акордеон не змінені — клік і мобільна
   поведінка й далі працюють як раніше; це лише додатковий hover-шар для
   десктопу поверх наявної логіки. ── */
@media (min-width: 961px) {
  /* .navbar-inner{align-items:center} НЕ розтягує .main-nav на всі 64px —
     він лишається заввишки по контенту (nav-list) і центрується всередині
     рядка. Тому .nav-list теж не 64px — і align-self:stretch на дочірньому
     li саме по собі нічого не тягне (стелити нема куди). Розтягуємо весь
     ланцюжок: .main-nav → .nav-list → .nav-item.dropdown — лише тоді
     li реально дорівнює висоті рядка й .dropdown-menu (top:100%) лягає
     точно під нижню лінію шапки, а не вище неї. */
  .main-nav { align-self: stretch; }
  .nav-list { height: 100%; }

  .nav-item.dropdown {
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .nav-item.dropdown:hover .dropdown-menu,
  .nav-item.dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-item.dropdown:hover .dd-caret,
  .nav-item.dropdown:focus-within .dd-caret {
    transform: rotate(180deg);
  }

  /* та сама підкреслена лінія при наведенні, що й в інших пунктів шапки */
  .nav-item.dropdown .dropdown-toggle { position: relative; }
  .nav-item.dropdown .dropdown-toggle::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -8px;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--transition);
  }
  .nav-item.dropdown:hover .dropdown-toggle::after,
  .nav-item.dropdown .dropdown-toggle:hover::after {
    opacity: 1;
  }

  /* зелений текст на hover/відкритій панелі — та сама поведінка, що й
     .has-mega:hover .nav-toggle (style.css) для «Послуги» */
  .nav-item.dropdown:hover .dropdown-toggle,
  .nav-item.dropdown:focus-within .dropdown-toggle,
  .nav-item.dropdown .dropdown-toggle:hover {
    color: var(--color-hover);
  }

  /* Каретку ховаємо (не видаляємо — обертання й aria-логіка лишаються
     робочими в JS/CSS вище, просто не показуємо візуально). Повернути:
     видалити цей блок або поставити display:inline-block назад. */
  .nav-item.dropdown .dd-caret {
    display: none;
  }
}

/* Вигляд панелі — як у мега «Послуги» (style.css: .mega/.mega-list), тільки
   БЕЗ розтягування на всю ширину — панель лишається компактною, по контенту
   (успадковує position/left/min-width від базового .dropdown-menu). Скоуп
   .nav-item.dropdown .dropdown-menu — не чіпає дропдауни телефону/мови
   в топбарі, ті лишаються в старому компактному стилі. */
.nav-item.dropdown .dropdown-menu {
  top: 100%;                 /* flush під лінією меню, без 8px-відступу компактних дропдаунів */
  padding: 32px;
  background: var(--color-card);
  border-radius: 0;
  box-shadow: 0 18px 30px rgba(0,0,0,0.10);
  gap: 16px;
}
.nav-item.dropdown .dropdown-menu a {
  padding: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dark);
  white-space: nowrap;
}
.nav-item.dropdown .dropdown-menu a:hover {
  background: none;
  color: var(--color-hover);
}

.appointment-form-block { padding: 48px 0; }
.appointment-form-block .contacts-form { max-width: 520px; margin-left: auto; margin-right: auto; }
/* CF7-обгортка в окремому блоці не має ламати центрування картки */
.appointment-form-block .wpcf7 { display: block; }
/* «Комфорт для пацієнтів» (adv-card star): на мобільному зірка не накладається
   на заголовок — стоїть окремим рядком під текстом, праворуч. */
@media ( max-width: 640px ) {
	.adv-card--star .adv-star {
		position: static;
		display: block;
		margin: 16px 0 0 auto;
	}
}