/* Tarasenko — дизайн-система (світла ніжна тема) для Divi 5 */

:root {
  --tp-bg: #fdfbf8;
  --tp-surface: #ffffff;
  --tp-ink: #3a312c;
  --tp-ink-muted: #7a6a60;
  --tp-primary: #96685a;
  --tp-primary-dark: #7f574b;
  --tp-secondary: #f4ebe3;
  --tp-blush: #f6e9e2;
  --tp-gilt: #b08d5e;
  --tp-border: #e9ded3;
  --tp-radius: 4px;
}

/* --- 1. Базова типографіка ------------------------------------------- */

body,
#page-container {
  background-color: var(--tp-bg);
  color: var(--tp-ink);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--tp-ink);
}

/* Великий редакційний заголовок */
.tp-display,
.tp-display p,
.tp-display h1,
.tp-display h2 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 300 !important;
  font-size: clamp(2.5rem, 5.5vw, 4.25rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.015em !important;
  color: var(--tp-ink) !important;
}

.tp-display .tp-accent,
.tp-accent {
  color: var(--tp-primary) !important;
  font-style: normal;
}

/* Надзаголовок секції */
.tp-eyebrow,
.tp-eyebrow p {
  font-family: "Manrope", sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--tp-ink-muted) !important;
  margin-bottom: 0 !important;
}

.tp-lead,
.tp-lead p {
  font-size: 17px !important;
  line-height: 1.7 !important;
  color: var(--tp-ink-muted) !important;
}

/* --- 2. Кнопки -------------------------------------------------------- */

#page-container .et_pb_button,
#page-container .divi-button,
#page-container a.et_pb_button {
  font-family: "Manrope", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  padding: 15px 30px !important;
  min-height: 48px;
  border-radius: var(--tp-radius) !important;
  border-width: 1px !important;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

#page-container .et_pb_button:after {
  display: none !important;
}

/* Divi 5 не приймає колір фону кнопки через атрибути блока (у візуальному
   конструкторі це працює, програмно — ні), тому вигляд задаємо тут.
   !important обов'язковий: без нього Divi лишає власний колір тексту
   і на світлому тлі виходить білим по білому. */
#page-container .et_pb_button,
#page-container a.et_pb_button {
  background-color: var(--tp-primary) !important;
  border-color: var(--tp-primary) !important;
  color: #fff !important;
}

#page-container .et_pb_button:hover,
#page-container a.et_pb_button:hover {
  background-color: var(--tp-primary-dark) !important;
  border-color: var(--tp-primary-dark) !important;
  color: #fff !important;
}

/* Кнопка поверх темної секції заклику — навпаки, світла */
#page-container .et_pb_section:has(.tp-on-dark) .et_pb_button {
  background-color: #fff !important;
  border-color: #fff !important;
  color: var(--tp-primary) !important;
}

#page-container .et_pb_section:has(.tp-on-dark) .et_pb_button:hover {
  background-color: var(--tp-secondary) !important;
  border-color: var(--tp-secondary) !important;
}

/* --- 2b. Статистика під кнопками в hero ------------------------------- */

.tp-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 2.5rem;
  margin-top: .5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--tp-border);
}

.tp-stat-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  min-width: 84px;
}

.tp-stat-label {
  font-size: 13px;
  line-height: 1.35;
  color: var(--tp-ink-muted);
}

/* --- 2c. Списки пакетів ----------------------------------------------- */

.tp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.tp-list li {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tp-ink-muted);
  padding: 0;
}

.tp-list li em {
  font-size: 13px;
  opacity: .8;
}

/* Тире перед пунктами — як у блоці Premium на основному сайті */
.tp-list-dash li::before {
  content: "—";
  margin-right: .7rem;
  color: var(--tp-ink);
  font-weight: 600;
}

/* Відбивка «70 фото…» від переліку подій вище */
.tp-li-sep {
  display: block;
  margin-top: .5rem;
  padding-top: .85rem;
  border-top: 1px solid var(--tp-border);
}

.tp-note,
p.tp-note {
  font-size: 14px !important;
  color: var(--tp-ink-muted) !important;
}

p.tp-note-center {
  text-align: center;
}

/* Студії й локації — не блог: дата публікації й автор над назвою нічого не
   означають, а порожнє ім'я автора лишало рядок «від  | Лип 28, 2026».
   Свій шаблон Theme Builder цим типам не потрібен, тож ховаємо стилями.

   Той самий блок теми на весь екран підставляє featured image (звідки й
   узявся логотип на всю ширину сторінки) — прибираємо і його: наше фото
   вже є в «Фотогалереї» нижче, тут воно зайве й дублює контент. */
body.single-studio .et_post_meta_wrapper > .post-meta,
body.single-location .et_post_meta_wrapper > .post-meta,
body.single-studio .et_post_meta_wrapper > img,
body.single-location .et_post_meta_wrapper > img {
  display: none;
}

/* Маленький логотип поруч із назвою студії — лише там, де замовниця дала
   окремий файл логотипа (tp_logo_cover). Featured image приховано вище,
   тому цей логотип рендериться нашим власним блоком у tp_studio_body(). */
.tp-studio-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.tp-studio-title-row .tp-display {
  margin: 0;
}

.tp-studio-title-logo {
  max-width: 140px;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 560px) {
  .tp-studio-title-logo { max-width: 100px; max-height: 56px; }
}

/* Факти студії списком означень: Зали / Адреса / Метро / Ціна.

   Ціну навмисно НЕ віддаємо класу .tp-price (40px Cormorant): він
   розрахований на короткий рядок «від 1000 грн/год», а в даних 2026 року
   там повне речення з тарифами по залах — гігантським шрифтом воно
   розтягувалось на чотири рядки й забивало собою назву студії. */
.tp-facts {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 9px 18px;
  margin: 18px 0;
}

.tp-facts dt {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--tp-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tp-facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--tp-ink-muted);
}

@media (max-width: 560px) {
  .tp-facts {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tp-facts dt { margin-top: 12px; }
  .tp-facts dd { margin-top: 2px; }
}

/* Посилання студії: сайт / Instagram / бронювання — неактивна кнопка,
   коли даних немає, замість того щоб просто ховати пункт. */
.tp-studio-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.tp-link-btn {
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  padding: 9px 18px;
  border: 1px solid var(--tp-primary);
  border-radius: 999px;
  color: var(--tp-primary) !important;
  text-decoration: none;
  background-color: var(--tp-surface);
  transition: background-color .2s ease, color .2s ease;
}

a.tp-link-btn:hover {
  background-color: var(--tp-primary);
  color: var(--tp-bg) !important;
}

span.tp-link-btn.is-disabled {
  border: 1px dashed var(--tp-border);
  color: var(--tp-ink-muted) !important;
  opacity: .6;
  cursor: default;
}

/* Фільтр студій за берегом і районом — /studii/. Клієнтський JS
   (studios-filter.php) ховає картки нижче через display:none, сітка сама
   перетікає навколо схованих. */
.tp-studio-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 18px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--tp-border);
}

.tp-studio-filter__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tp-studio-filter__group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tp-ink);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tp-studio-filter__select {
  min-width: 200px;
  padding: 10px 14px;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  color: var(--tp-ink);
  background-color: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
}

#tp-filter-count {
  margin: 0 0 0 auto !important;
  align-self: center;
}

@media (max-width: 640px) {
  .tp-studio-filter { gap: 14px; }
  .tp-studio-filter__group { width: 100%; }
  .tp-studio-filter__select { min-width: 0; width: 100%; }
  #tp-filter-count { margin-left: 0 !important; }
}

/* Сітка карток студій: плоский HTML, не ряди/колонки Divi — щоб приховані
   фільтром картки не лишали порожніх дір у парі. */
.tp-studio-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 767px) {
  .tp-studio-grid { grid-template-columns: 1fr; }
}

.tp-studio-grid .tp-card {
  display: flex;
  flex-direction: column;
}

.tp-studio-card__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--tp-radius);
  margin-bottom: 16px;
}

/* Картка студії з логотипом (tp_logo_cover): без великого фото нагорі,
   натомість маленька мітка логотипу праворуч від назви. Назву заразом
   трохи збільшено — поруч із логотипом дрібний заголовок губився. */
.tp-studio-grid .tp-card-title {
  font-size: 30px !important;
}

.tp-card-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.tp-card-title-row .tp-card-title {
  margin: 0;
}

.tp-card-title-logo {
  max-width: 96px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.tp-studio-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

/* Фотогалерея студії — сітка мініатюр, клік відкриває лайтбокс
   (studios-lightbox.php). */
.tp-studio-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
}

@media (max-width: 980px) {
  .tp-studio-gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .tp-studio-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.tp-studio-gallery__item {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 0;
  border-radius: var(--tp-radius);
  overflow: hidden;
  background-color: var(--tp-secondary);
  cursor: zoom-in;
}

.tp-studio-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.tp-studio-gallery__item:hover img {
  transform: scale(1.04);
}

/* Лайтбокс: на весь екран, стрілки по боках, свайп на мобільному. */
html.tp-lightbox-open,
html.tp-lightbox-open body {
  overflow: hidden;
}

.tp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(20, 16, 14, .92);
}

.tp-lightbox.is-open {
  display: flex;
}

.tp-lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--tp-radius);
}

.tp-lightbox__close,
.tp-lightbox__arrow {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease;
  line-height: 1;
}

.tp-lightbox__close:hover,
.tp-lightbox__arrow:hover {
  background-color: rgba(255, 255, 255, .24);
}

.tp-lightbox__close {
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  font-size: 26px;
}

.tp-lightbox__arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  font-size: 30px;
}

.tp-lightbox__arrow--prev { left: 16px; }
.tp-lightbox__arrow--next { right: 16px; }

.tp-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255, 255, 255, .75);
  font-size: 14px;
}

@media (max-width: 640px) {
  .tp-lightbox__arrow { width: 42px; height: 42px; font-size: 24px; }
  .tp-lightbox__close { width: 38px; height: 38px; font-size: 22px; top: 12px; right: 12px; }
  .tp-lightbox__arrow--prev { left: 6px; }
  .tp-lightbox__arrow--next { right: 6px; }
}

/* Розширена стаття про студію — довший SEO-текст після фотогалереї. */
.tp-studio-article {
  max-width: 860px;
  font-size: 16px;
  line-height: 1.75;
  color: var(--tp-ink);
}

.tp-studio-article p {
  margin: 0 0 1.1em;
}

.tp-studio-article h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 26px;
  font-weight: 500;
  margin: 1.6em 0 .6em;
  color: var(--tp-ink);
}

.tp-studio-article ul {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}

.tp-studio-article li {
  margin-bottom: .4em;
}

/* --- 3. Картки -------------------------------------------------------- */

.tp-card {
  background-color: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  padding: 30px !important;
  height: 100%;
}

.tp-card-featured {
  background-color: var(--tp-secondary) !important;
  border: 2px solid rgba(150, 104, 90, .35) !important;
}

.tp-card-title,
.tp-card-title p {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 27px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  color: var(--tp-ink) !important;
}

.tp-step-num,
.tp-step-num p {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 46px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--tp-gilt) !important;
}

.tp-price,
.tp-price p {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 40px !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--tp-primary) !important;
  font-variant-numeric: tabular-nums;
}

.tp-stat,
.tp-stat p {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-size: 38px !important;
  font-weight: 300 !important;
  color: var(--tp-primary) !important;
  line-height: 1.1 !important;
}

/* --- 4. Зображення ---------------------------------------------------- */

/* Divi ставить border-radius на обгортку модуля й лишає overflow: visible,
   тому саме зображення заокруглення не отримує. Вмикаємо обрізання й
   передаємо радіус углиб — так працює і фірмова арка, і звичайні картки. */
.et_pb_image {
  overflow: hidden;
}

.et_pb_image .et_pb_image_wrap {
  display: block;
  border-radius: inherit;
  overflow: hidden;
}

.et_pb_image .et_pb_image_wrap img {
  display: block;
  width: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.tp-zoom .et_pb_image_wrap,
.tp-zoom img {
  border-radius: var(--tp-radius);
  overflow: hidden;
}

.tp-zoom img {
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}

.tp-zoom:hover img {
  transform: scale(1.04);
}

/* Текст поверх темної секції заклику.
   Клас ставиться на сам елемент, бо Divi 5 не віддає класи модулів у розмітку. */
.tp-on-dark,
p.tp-on-dark,
h1.tp-on-dark,
h2.tp-on-dark,
h3.tp-on-dark {
  color: #fff !important;
}

p.tp-eyebrow.tp-on-dark {
  color: rgba(255, 255, 255, .75) !important;
}

p.tp-lead.tp-on-dark {
  color: rgba(255, 255, 255, .88) !important;
}

/* --- 4b. Єдиний формат фото в галереях ---------------------------------
   Знімки локацій і студій приходять з різних джерел: вертикальні, горизонтальні,
   квадратні. Без спільного співвідношення сітка виглядає рваною.
   Тому задаємо фіксований формат і обрізаємо по центру — вміст кадру
   зберігається, а ряди стають рівними. */

:root {
  --tp-ratio-cover: 3 / 2;   /* обкладинка поруч із текстом */
  --tp-ratio-grid: 4 / 3;    /* плитки галереї */
  --tp-ratio-card: 3 / 2;    /* картки у списках */
}

/* Хедер і футер під ці правила не підпадають: там логотип, і фіксована
   пропорція розчавлювала його в портрет, а шапка через це виростала вдвічі. */
.et-l--header .et_pb_image,
.et-l--footer .et_pb_image {
  aspect-ratio: auto !important;
  overflow: visible !important;
}

/* Явна висота, а не auto: інакше до завантаження картинки коробка нульова
   і сторінка смикається, коли логотип нарешті приходить. */
.et-l--header .et_pb_image img {
  height: 40px !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain !important;
}

.et-l--footer .et_pb_image img {
  height: 48px !important;
  width: auto !important;
  max-width: 100%;
  object-fit: contain !important;
}

@media (max-width: 980px) {
  .et-l--header .et_pb_image img {
    height: 34px !important;
  }
}

/* спільні правила заповнення */
.tp-fit .et_pb_image_wrap,
body.single-location .et_pb_image .et_pb_image_wrap,
body.single-studio .et_pb_image .et_pb_image_wrap,
body.page-id-689 .et_pb_image .et_pb_image_wrap,
body.page-id-769 .et_pb_image .et_pb_image_wrap,
body.page-id-402 .et_pb_image .et_pb_image_wrap {
  display: block;
  width: 100%;
  height: 100%;
}

body.single-location .et_pb_image img,
body.single-studio .et_pb_image img,
body.page-id-689 .et_pb_image img,
body.page-id-769 .et_pb_image img,
body.page-id-402 .et_pb_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Обкладинка запису — перше зображення на сторінці */
body.single-location .et_pb_image_0,
body.single-studio .et_pb_image_0 {
  aspect-ratio: var(--tp-ratio-cover);
  width: 100%;
}

/* Решта — плитки галереї */
body.single-location .et_pb_image:not(.et_pb_image_0),
body.single-studio .et_pb_image:not(.et_pb_image_0) {
  aspect-ratio: var(--tp-ratio-grid);
  width: 100%;
  overflow: hidden;
}

/* М'який зум на наведення — плитка не рухає сусідів, бо обрізана рамкою */
body.single-location .et_pb_image:not(.et_pb_image_0) img,
body.single-studio .et_pb_image:not(.et_pb_image_0) img {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

body.single-location .et_pb_image:not(.et_pb_image_0):hover img,
body.single-studio .et_pb_image:not(.et_pb_image_0):hover img {
  transform: scale(1.05);
}

/* Картки у списках студій і локацій */
body.page-id-689 .et_pb_image,
body.page-id-769 .et_pb_image {
  aspect-ratio: var(--tp-ratio-card);
  width: 100%;
  overflow: hidden;
}

/* Описи в картках списку обрізаємо до трьох рядків, а кнопку притискаємо вниз —
   інакше картки в одному ряду мають різну висоту й сітка «стрибає». */
body.page-id-689 .et_pb_column,
body.page-id-769 .et_pb_column {
  display: flex;
  flex-direction: column;
}

/* Лише локації: там опис і далі коротко обрізаний wp_trim_words() до
   18 слів, і клемп на 3 рядки під це розраховано. У студій (689) з
   серпня 2026 картка показує повний опис без обрізання, і той самий
   клемп на не обрізаному тексті різав літери навпіл — min-height
   4.6em менший за фактичну висоту трьох рядків при line-height 1.7. */
body.page-id-769 p.tp-lead {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.6em;
}

body.page-id-689 h3.tp-card-title,
body.page-id-769 h3.tp-card-title {
  min-height: 2.2em;
}

/* кнопка «Детальніше» — завжди в нижній частині картки */
body.page-id-689 .et_pb_column .et_pb_button_module_wrapper,
body.page-id-769 .et_pb_column .et_pb_button_module_wrapper,
body.page-id-689 .et_pb_column .et_pb_button:last-child,
body.page-id-769 .et_pb_column .et_pb_button:last-child {
  margin-top: auto;
}

/* Сітка портфоліо на головній — портретний формат під портрети */
body.page-id-402 .et_pb_image {
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
}

/* Головне фото в hero має власну арку — формат не чіпаємо */
body.page-id-402 .et_pb_image_0 {
  aspect-ratio: auto;
}

/* На вузьких екранах плитки трохи вищі — так краще читається деталь */
@media (max-width: 767px) {
  body.single-location .et_pb_image:not(.et_pb_image_0),
  body.single-studio .et_pb_image:not(.et_pb_image_0),
  body.page-id-689 .et_pb_image,
  body.page-id-769 .et_pb_image {
    aspect-ratio: 3 / 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.single-location .et_pb_image img,
  body.single-studio .et_pb_image img {
    transition: none !important;
  }
}

/* --- 5. Фони секцій --------------------------------------------------- */

.tp-bg-soft { background-color: var(--tp-secondary) !important; }
.tp-bg-blush { background-color: var(--tp-blush) !important; }
.tp-bg-primary { background-color: var(--tp-primary) !important; }

.tp-bg-primary h1,
.tp-bg-primary h2,
.tp-bg-primary h3,
.tp-bg-primary p,
.tp-bg-primary .tp-display,
.tp-bg-primary .tp-display p {
  color: #fff !important;
}

.tp-bg-primary .tp-eyebrow p {
  color: rgba(255, 255, 255, .72) !important;
}

/* --- 6. FAQ (Divi toggle) --------------------------------------------- */

.tp-faq .et_pb_toggle,
.tp-faq .et_pb_module.et_pb_toggle {
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tp-border) !important;
  border-radius: 0 !important;
  padding: 18px 0 !important;
}

.tp-faq .et_pb_toggle_title {
  font-family: "Manrope", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--tp-ink) !important;
  padding: 0 40px 0 0 !important;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.tp-faq .et_pb_toggle_content {
  color: var(--tp-ink-muted) !important;
  font-size: 16px !important;
  padding-top: 4px;
}

/* --- 7. Форми WPForms ------------------------------------------------- */

.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="date"],
.wpforms-container select,
.wpforms-container textarea {
  font-family: "Manrope", sans-serif !important;
  font-size: 16px !important;   /* нижче 16px iOS зумить сторінку при фокусі */
  min-height: 48px;
  padding: 12px 14px !important;
  background: var(--tp-surface) !important;
  border: 1px solid var(--tp-border) !important;
  border-radius: var(--tp-radius) !important;
  color: var(--tp-ink) !important;
}

.wpforms-container button[type="submit"] {
  background-color: var(--tp-primary) !important;
  color: #fff !important;
  min-height: 48px;
  border: 0 !important;
  border-radius: var(--tp-radius) !important;
}

/* --- 7b. Хедер і футер із Divi Theme Builder --------------------------- */

.et-l--header {
  background-color: var(--tp-bg) !important;
  border-bottom: 1px solid var(--tp-border);
}

.et-l--header .et_pb_section,
.et-l--header .et_pb_row,
.et-l--header .et_pb_menu,
.et-l--header .et_pb_menu__wrap,
.et-l--header .et_pb_menu_inner_container {
  background-color: transparent !important;
}

.et-l--header .et_pb_menu__menu > nav > ul > li > a,
.et-l--header nav > ul > li > a {
  font-family: "Manrope", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--tp-ink-muted) !important;
  /* 44px тач-цілі навіть для коротких пунктів на кшталт «FAQ» */
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 12px 0 !important;
  transition: color .25s ease;
}

.et-l--header nav > ul > li > a:hover {
  color: var(--tp-ink) !important;
  opacity: 1 !important;
}

/* Поточний розділ підсвічуємо кольором бренду */
.et-l--header nav > ul > li.current-menu-item > a,
.et-l--header nav > ul > li.current_page_item > a {
  color: var(--tp-primary) !important;
}

.et-l--header .et_pb_menu__logo img {
  max-height: 44px;
  width: auto;
}

.et-l--footer {
  background-color: var(--tp-secondary) !important;
}

.et-l--footer h1,
.et-l--footer h2,
.et-l--footer h3,
.et-l--footer h4 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 300 !important;
  color: var(--tp-ink) !important;
}

.et-l--footer p,
.et-l--footer li,
.et-l--footer a {
  font-family: "Manrope", sans-serif !important;
  color: var(--tp-ink-muted) !important;
}

.et-l--footer a:hover {
  color: var(--tp-primary) !important;
}

/* У футері кнопки лишались із чорним текстом на рожевому — вирівнюємо */
.et-l--footer .et_pb_button,
.et-l--footer a.et_pb_button,
.et-l--header .et_pb_button,
.et-l--header a.et_pb_button {
  background-color: var(--tp-primary) !important;
  border-color: var(--tp-primary) !important;
  color: #fff !important;
}

.et-l--footer .et_pb_button:hover,
.et-l--header .et_pb_button:hover {
  background-color: var(--tp-primary-dark) !important;
  border-color: var(--tp-primary-dark) !important;
  color: #fff !important;
}

/* Divi виводить для кожної кнопки власне правило з !important і двома
   класами (.et_pb_button_0_tb_footer.et_pb_button). Подвоєння класу
   піднімає нашу специфічність вище — інакше в футері лишався чорний текст. */
.et-l--footer a.et_pb_button.et_pb_button,
.et-l--header a.et_pb_button.et_pb_button,
#page-container a.et_pb_button.et_pb_button {
  color: #fff !important;
  background-color: var(--tp-primary) !important;
  border-color: var(--tp-primary) !important;
}

#page-container .et_pb_section:has(.tp-on-dark) a.et_pb_button.et_pb_button {
  color: var(--tp-primary) !important;
  background-color: #fff !important;
  border-color: #fff !important;
}

/* Модуль соцмереж: круглі плашки з іконками, завжди в один рядок */
ul.et_pb_social_media_follow {
  display: flex !important;
  flex-direction: row !important;
  /* nowrap: у вузькій колонці хедера іконки інакше перескакували на другий рядок */
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

ul.et_pb_social_media_follow li {
  float: none !important;
  display: inline-flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

.et_pb_social_media_follow li a.icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease, opacity .2s ease;
}

.et_pb_social_media_follow li a.icon:hover {
  transform: translateY(-2px);
  opacity: .9;
}

.et_pb_social_media_follow li {
  margin-bottom: 0 !important;
}

.et-l--header .et_pb_social_media_follow {
  margin-bottom: 0 !important;
}

.et-l--footer .et_pb_social_media_follow {
  margin-top: 8px;
}

/* На десктопі соцмережі та кнопка мають стояти в один рядок,
   інакше вони складаються стовпчиком і шапка виростає вдвічі. */
@media (min-width: 981px) {
  .et-l--header .et_pb_column:nth-child(3) {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 14px;
  }

  .et-l--header .et_pb_column:nth-child(3) .et_pb_module {
    margin-bottom: 0 !important;
  }

  .et-l--header .et_pb_social_media_follow li a.icon {
    width: 34px;
    height: 34px;
  }
}

/* --- Мобільний хедер ---------------------------------------------------
   Кнопка «Забронювати» на телефоні прибирається: вона є в мобільному меню
   і в кожній секції сторінки, а в шапці лише ламала висоту. */
@media (max-width: 980px) {
  .et-l--header .et_pb_row {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    width: 92% !important;
  }

  .et-l--header .et_pb_column {
    margin-bottom: 0 !important;
  }

  .et-l--header .et_pb_image img {
    max-height: 38px;
    width: auto;
  }

  .et-l--header .et_pb_button {
    display: none !important;
  }

  .et-l--header .et_pb_social_media_follow {
    display: none !important;
  }

  /* Ряд на всю ширину: лого зліва, гамбургер притиснутий вправо */
  .et-l--header .et_pb_row {
    display: flex !important;
    align-items: center !important;
    width: 92% !important;
    max-width: none !important;
  }

  .et-l--header .et_pb_column:nth-child(1) {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .et-l--header .et_pb_column:nth-child(2) {
    flex: 1 1 auto !important;
    width: auto !important;
  }

  /* Третя колонка (кнопка + соцмережі) на телефоні не потрібна зовсім */
  .et-l--header .et_pb_column:nth-child(3) {
    display: none !important;
  }

  .et-l--header .et_pb_menu__menu {
    display: none !important;
  }

  .et-l--header .et_mobile_nav_menu {
    display: block !important;
    float: none;
    margin: 0 0 0 auto;
  }

  .et-l--header .mobile_menu_bar {
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .et-l--header .mobile_menu_bar:before {
    font-size: 26px;
    line-height: 1;
  }
}

/* Мобільне меню-гамбургер */
.et-l--header .et_pb_menu__icon,
.et-l--header .mobile_menu_bar:before {
  color: var(--tp-ink) !important;
}

.et-l--header .et_mobile_menu {
  background-color: var(--tp-bg) !important;
  border-top-color: var(--tp-primary) !important;
}

.et-l--header .et_mobile_menu li a {
  font-family: "Manrope", sans-serif !important;
  font-size: 15px !important;
  color: var(--tp-ink) !important;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--tp-border) !important;
}

/* --- 7c. Записи «Студії» та «Локації» --------------------------------- */

/* Тема друкує заголовок запису сама, а макет має власний — виходило два <h1>
   з однаковим текстом. Ховаємо тему: наш лишається єдиним і несе той самий текст,
   тож для читачів з екранного диктора нічого не втрачається. */
body.single-studio .entry-title,
body.single-location .entry-title,
body.single-studio .et_post_meta_wrapper > h1,
body.single-location .et_post_meta_wrapper > h1 {
  display: none;
}

/* Заголовок сторінки архіву */
body.post-type-archive-studio .et_pb_title_container h1,
body.post-type-archive-location .et_pb_title_container h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
}

/* --- 7d. Списки посилань у футері ------------------------------------- */

.tp-footer-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.tp-footer-nav li {
  padding: 0;
}

.tp-footer-nav a,
.tp-footer-nav li {
  display: flex;
  align-items: center;
  min-height: 44px; /* тач-ціль: короткі слова на кшталт «Ціни» інакше не дотягують */
  font-size: 15px;
  color: var(--tp-ink-muted);
  transition: color .2s ease;
}

.tp-footer-nav a:hover {
  color: var(--tp-primary) !important;
}

.et-l--footer .et_pb_image img {
  max-height: 52px;
  width: auto;
}

/* --- 8. Доступність --------------------------------------------------- */

#page-container a:focus-visible,
#page-container button:focus-visible,
#page-container .et_pb_button:focus-visible,
.wpforms-container input:focus-visible,
.wpforms-container textarea:focus-visible {
  outline: 2px solid var(--tp-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tp-zoom img,
  #page-container .et_pb_button {
    transition: none !important;
  }
}

/* --- 9. Портфоліо-історії ---------------------------------------------
   Розмітка приходить із шорткодів плагіна, а не з модулів Divi, тому тут
   звичайні класи й майже без !important — перебивати нічого не треба. */

.tp-stories {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

/* Кадри показуємо в їхніх власних пропорціях, без обрізання.
   Списки студій і локацій живуть за фіксованим форматом — там знімки прийшли
   з чужих сайтів і рівна сітка рятувала вигляд. Тут інакше: це роботи
   фотографа, і кадрувала їх вона, а не CSS. Вертикальний портрет, втиснутий
   у горизонтальну плитку, втрачає більшу частину композиції.
   align-items: start — щоб нижчі кадри не розтягувались під найвищий у ряду. */
.tp-photos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 980px) {
  .tp-stories { grid-template-columns: repeat(2, 1fr); }
  .tp-photos  { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .tp-stories { grid-template-columns: 1fr; }
  .tp-photos  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* Картка історії */

.tp-story-card {
  background-color: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  overflow: hidden;
  height: 100%;
}

.tp-story-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* Обкладинка в пропорціях самого кадру, без обрізання — те саме
   правило, що й для галереї всередині історії. Фіксований формат 3:2
   розрізав вертикальні портрети навпіл. */
.tp-story-card__media {
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: var(--tp-secondary);
}

.tp-story-card__media img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

/* Горизонтальна обкладинка займає дві колонки. */
.tp-story-card--wide {
  grid-column: span 2;
}

.tp-story-card__link:hover .tp-story-card__media img {
  transform: scale(1.05);
}

/* Тіло картки тягнеться вниз, підпис із кількістю кадрів притискається
   до низу — інакше картки в ряду мають різну висоту й сітка «стрибає». */
.tp-story-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

.tp-story-card__text {
  display: block;
  margin-top: 8px;
  color: var(--tp-ink-muted);
  font-size: 15px;
  line-height: 1.6;
}

.tp-story-card__meta {
  display: block;
  margin-top: auto;
  padding-top: 16px;
  color: var(--tp-gilt);
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Кадр */

.tp-photo {
  margin: 0;
}

.tp-photo__link {
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--tp-radius);
  background-color: var(--tp-secondary);
}

/* height: auto лишає кадру його пропорції. Атрибути width/height у розмітці
   ставить wp_get_attachment_image, тож місце під кадр резервується заздалегідь
   і сторінка не смикається під час завантаження. */
.tp-photo__link img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}

.tp-photo__link:hover img {
  transform: scale(1.05);
}

/* Опис кадру від ШІ буває довгим — три рядки, далі обрізаємо,
   повний текст лишається в підписі вкладення та в alt. */
.tp-photo__caption {
  margin-top: 8px;
  color: var(--tp-ink-muted);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Перемикач зрізів теми */

.tp-switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 28px;
}

.tp-switch__item {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--tp-border);
  border-radius: 999px;
  background-color: var(--tp-surface);
  color: var(--tp-ink-muted);
  font-size: 14px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

a.tp-switch__item:hover {
  border-color: var(--tp-primary);
  color: var(--tp-primary) !important;
}

.tp-switch__item.is-current {
  background-color: var(--tp-primary);
  border-color: var(--tp-primary);
  color: #fff;
}

/* Зріз, у якому нічого немає: показуємо, що він існує, але не вдаємо,
   що туди є сенс іти. */
.tp-switch__item.is-empty {
  opacity: .4;
  border-style: dashed;
}

/* Фільтр по темах */

.tp-filter__title,
.tp-related__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 27px;
  font-weight: 400;
  margin-bottom: 18px;
}

/* list-style: none тут обов'язково з !important — Divi ставить спискам
   list-style-type: disc правилом, яке специфічніше за наше. Без цього біля
   кожної теми висить чорна крапка. */
.tp-filter__list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none !important;
  margin: 0;
  padding: 0;
}

.tp-filter__list li {
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.tp-filter__list li::before,
.tp-filter__list li::marker {
  content: none;
}

.tp-filter__item {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 16px;
  border: 1px solid var(--tp-border);
  border-radius: 999px;
  background-color: var(--tp-surface);
  color: var(--tp-ink);
  font-size: 14px;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}

.tp-filter__item:hover {
  border-color: var(--tp-primary);
  color: var(--tp-primary) !important;
}

.tp-filter__item.is-current {
  background-color: var(--tp-secondary);
  border-color: var(--tp-primary);
}

.tp-filter__count {
  color: var(--tp-gilt);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* Тексти теми */

.tp-tema-intro {
  max-width: 760px;
  margin-bottom: 32px;
}

.tp-tema-intro p {
  color: var(--tp-ink-muted);
  font-size: 18px;
  line-height: 1.75;
}

/* Секція текстів теми стоїть у шаблоні завжди, але доки поля терміна порожні,
   обидва шорткоди віддають порожнечу. Обнулити відступи в шаблоні мало —
   Divi доливає власні 56px, — тому ховаємо секцію, в якій не відрендерилось
   нічого зі списку нижче. Перелічені класи покривають усе, що взагалі може
   опинитись у секціях сторінки теми, тож під правило потрапляє лише порожня. */
body.tax-tema .et-l--body .et_pb_section:not(:has(
  .tp-switch, .tp-stories, .tp-photos, .tp-empty,
  .tp-filter, .tp-tema-outro, .tp-related, .et_pb_button
)) {
  display: none;
}

/* Відступи знизу несе сам вміст, а не секція Divi. */
.tp-tema-outro {
  max-width: 760px;
  margin: 56px 0;
}

.tp-related {
  margin: 44px 0 56px;
  padding-top: 32px;
  border-top: 1px solid var(--tp-border);
}

/* На сторінці історії «Теми зйомки» стоять у власній секції з відступами —
   подвоювати їх не треба. */
body.single-story .tp-related {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.tp-more {
  margin-top: 26px;
  text-align: center;
}

.tp-more__link {
  color: var(--tp-primary) !important;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
}

.tp-empty {
  color: var(--tp-ink-muted);
}

/* Пагінація */

.tp-pagination {
  margin-top: 36px;
}

.tp-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tp-pagination li {
  margin: 0;
  padding: 0;
}

.tp-pagination a,
.tp-pagination span {
  display: inline-block;
  min-width: 40px;
  padding: 9px 12px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  background-color: var(--tp-surface);
  color: var(--tp-ink-muted);
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.tp-pagination a:hover {
  border-color: var(--tp-primary);
  color: var(--tp-primary) !important;
}

.tp-pagination .current {
  background-color: var(--tp-primary);
  border-color: var(--tp-primary);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .tp-story-card__media img,
  .tp-photo__link img {
    transition: none !important;
  }
}

/* Заголовки секцій усередині сторінки теми — розмітка з шорткоду,
   тому окремий клас, а не .tp-display від Divi-модулів. */
.tp-section-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 24px;
  color: var(--tp-ink);
}

.tp-section-title--spaced {
  margin-top: 56px;
}

/* Студія та локація на сторінці історії */

.tp-places {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  list-style: none !important;
  margin: 0 0 22px;
  padding: 0;
}

.tp-places li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none !important;
}

.tp-places li::marker {
  content: none;
}

.tp-places__label {
  color: var(--tp-ink-muted);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tp-places a {
  color: var(--tp-primary) !important;
  border-bottom: 1px solid transparent;
}

.tp-places a:hover {
  border-bottom-color: currentColor;
}

/* Покажчик усіх ключових слів (/temy/) */

.tp-index__group {
  margin-bottom: 36px;
}

.tp-index__letter {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--tp-border);
  color: var(--tp-gilt);
}

/* --- 10. Кадри: широкий формат, сторінка кадру, навігація ---------------- */

/* Горизонтальний кадр серед вертикальних виглядав зім'ятим удвічі нижчим
   прямокутником. Даємо йому дві колонки — тоді він читається як повноцінний
   знімок, а сітка лишається рівною по ширині. */
.tp-photo--wide {
  grid-column: span 2;
}

/* Навігація вгорі історії */

.tp-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-bottom: 20px;
}

.tp-crumbs__link {
  color: var(--tp-ink-muted) !important;
  font-size: 14px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.tp-crumbs__link:hover {
  color: var(--tp-primary) !important;
  border-bottom-color: currentColor;
}

/* Сторінка окремого кадру */

.tp-photo-single {
  margin: 0;
  text-align: center;
}

.tp-photo-single img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  border-radius: var(--tp-radius);
}

.tp-photo-single__title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 300;
  line-height: 1.1;
  margin: 6px 0 14px;
  color: var(--tp-ink);
}

.tp-photo-single__temas {
  margin-top: 18px;
}

/* Стрілки попередній/наступний прямо на фото */

.tp-photo-single__frame {
  position: relative;
}

.tp-photo-single__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: rgba(58, 49, 44, .55);
  color: var(--tp-bg) !important;
  font-size: 26px;
  line-height: 1;
  text-decoration: none !important;
  z-index: 2;
  transition: background-color .2s ease;
}

.tp-photo-single__arrow:hover,
.tp-photo-single__arrow:focus-visible {
  background-color: rgba(58, 49, 44, .8);
}

.tp-photo-single__arrow--prev { left: 12px; }
.tp-photo-single__arrow--next { right: 12px; }

@media (max-width: 640px) {
  .tp-photo-single__arrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* Повернення до історії */

.tp-photo-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--tp-border);
}

.tp-photo-nav__link {
  font-size: 14px;
  color: var(--tp-ink-muted) !important;
  text-decoration: none;
  padding: 9px 16px;
  border: 1px solid var(--tp-border);
  border-radius: 999px;
  background-color: var(--tp-surface);
  transition: border-color .2s ease, color .2s ease;
}

a.tp-photo-nav__link:hover {
  border-color: var(--tp-primary);
  color: var(--tp-primary) !important;
}

.tp-photo-nav__link--up {
  border-color: var(--tp-primary);
  color: var(--tp-primary) !important;
}

/* Кінець галереї — кнопка нікуди не веде, але місце тримає,
   щоб «Уся історія» лишалась посередині. */
.tp-photo-nav__link.is-disabled {
  opacity: .35;
  border-style: dashed;
}

/* --- 11. Хедер: меню в один рядок --------------------------------------
   Після дев'ятого пункту («Історії») хедер поїхав у два рядки й виріс до
   117px. Причина не лише в кількості пунктів: колонки мали фіксовані частки
   4/14/6, і права колонка з соцмережами та кнопкою просила 284px при
   виділених 211 — вміст вилазив ліворуч, у зону меню.

   Лікуємо пропорціями: кожна колонка стискається під свій вміст, а вільне
   місце розподіляється між ними порівну через space-between. Ширина рядка
   лишається такою ж, як у контенту (80% / 1080px) — інакше логотип не тримає
   вертикальну лінію з текстом секцій нижче.

   Макет 455 не чіпаємо: там ручні правки замовниці.
   Усе під min-width: 981px, бо нижче Divi вже сам перемикається на бургер. */

@media (min-width: 981px) {
  .et-l--header .et_pb_row {
    width: 80% !important;
    max-width: 1080px !important;
    justify-content: space-between !important;
    column-gap: 24px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Селектори з :nth-child у всіх трьох правилах навмисно однакової
     специфічності — інакше блок для вузького десктопа нижче не переб'є цей. */
  .et-l--header .et_pb_row > .et_pb_column:nth-child(1),
  .et-l--header .et_pb_row > .et_pb_column:nth-child(2),
  .et-l--header .et_pb_row > .et_pb_column:nth-child(3) {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .et-l--header .et-menu > li {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}

/* Вузький десктоп, 981–1199px. Дев'ять пунктів, логотип і кнопка сюди не
   влазять за жодних відступів: на 1000px рядок має 788px, а вмісту треба 856.
   Тому меню віддаємо бургеру — так само, як на телефоні, — але кнопку
   «Забронювати» лишаємо: на ноутбуці вона доречна, на телефоні ні.

   Порядок у рядку: логотип ліворуч, далі вільне місце, потім соцмережі,
   кнопка й бургер праворуч. */
@media (min-width: 981px) and (max-width: 1199px) {
  .et-l--header .et_pb_row {
    justify-content: flex-start !important;
  }

  .et-l--header .et_pb_menu__menu {
    display: none !important;
  }

  .et-l--header .et_mobile_nav_menu {
    display: block !important;
    margin: 0 !important;
  }

  /* Логотип забирає все вільне місце, решта пакується праворуч. */
  .et-l--header .et_pb_row > .et_pb_column:nth-child(1) {
    flex: 1 1 auto !important;
  }

  /* Бургер після кнопки, а не між логотипом і нею. */
  .et-l--header .et_pb_row > .et_pb_column:nth-child(2) {
    order: 3 !important;
  }

  .et-l--header .et_pb_row > .et_pb_column:nth-child(3) {
    order: 2 !important;
  }

  .et-l--header .et_pb_button {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Випадайка бургера позиціонується від своєї колонки, а тут колонка
     завширшки з саму іконку — без цього меню відкривалось смужкою 32px.
     Притискаємо до правого краю рядка. */
  .et-l--header .et_mobile_menu {
    width: 280px !important;
    left: auto !important;
    right: 0 !important;
    border-radius: 0 0 var(--tp-radius) var(--tp-radius);
    box-shadow: 0 12px 32px rgba(58, 49, 44, .12);
  }
}

/* --- 12. Сітка жанрів портфоліо ----------------------------------------
   Картка та ж, що в історіях (.tp-story-card), тому тут лише сітка. */

.tp-genres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

@media (max-width: 980px) {
  .tp-genres { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .tp-genres { grid-template-columns: 1fr; }
}

/* Плитки портфоліо на головній стали посиланнями — прибираємо
   підкреслення й лишаємо колір заголовка. */
body.page-id-402 h3.tp-card-title a {
  color: inherit !important;
  text-decoration: none;
  transition: color .2s ease;
}

body.page-id-402 h3.tp-card-title a:hover {
  color: var(--tp-primary) !important;
}

/* --- 13. Блог ------------------------------------------------------------
   Статті довгі — по 22–35 тисяч знаків, — тому головне тут не декор,
   а вимірна ширина рядка й ритм заголовків. Без цього текст у Divi
   розтягується на всю колонку й читати його неможливо.

   Чіпляємось до .et_pb_post_content, а не до власної обгортки: спроба
   відкрити <div> в одному Code-модулі й закрити в наступному не працює —
   Divi закриває тег у межах свого модуля, і обгортка лишається порожньою. */

body.single-post .et_pb_post_content {
  max-width: 720px;
}

body.single-post .et_pb_post_content p {
  font-size: 17px;
  line-height: 1.75;
  margin: 0 0 1.15em;
  color: var(--tp-ink);
}

body.single-post .et_pb_post_content h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.15;
  margin: 2em 0 .6em;
  color: var(--tp-ink);
}

/* h3/h4 навмисно гротеском, щоб відрізнялись від секційних h2. !important
   потрібен: глобальне правило #page-container h3 специфічніше за це. */
body.single-post .et_pb_post_content h3 {
  font-family: "Manrope", sans-serif !important;
  font-size: 19px;
  font-weight: 600 !important;
  line-height: 1.35;
  margin: 1.8em 0 .5em;
  color: var(--tp-ink);
}

body.single-post .et_pb_post_content h4 {
  font-family: "Manrope", sans-serif !important;
  font-size: 16px;
  font-weight: 600 !important;
  margin: 1.5em 0 .4em;
  color: var(--tp-ink-muted);
}

body.single-post .et_pb_post_content ul,
body.single-post .et_pb_post_content ol {
  margin: 0 0 1.3em;
  padding-left: 1.3em;
}

body.single-post .et_pb_post_content li {
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: .35em;
  color: var(--tp-ink);
}

body.single-post .et_pb_post_content ul li {
  list-style: disc;
}

body.single-post .et_pb_post_content ol li {
  list-style: decimal;
}

body.single-post .et_pb_post_content a {
  color: var(--tp-primary) !important;
  border-bottom: 1px solid rgba(150, 104, 90, .35);
  transition: border-color .2s ease;
}

body.single-post .et_pb_post_content a:hover {
  border-bottom-color: var(--tp-primary);
}

body.single-post .et_pb_post_content strong {
  font-weight: 600;
}

/* Кнопка-заклик у кінці статті. У тексті це звичайне посилання, тому
   стилюємо власним класом, а не чіпаємо кнопки Divi. */
.tp-post-cta {
  margin: 2.4em 0 0;
}

.tp-btn {
  display: inline-block;
  padding: 15px 30px;
  min-height: 48px;
  background-color: var(--tp-primary);
  border: 1px solid var(--tp-primary);
  border-radius: var(--tp-radius);
  color: #fff !important;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease;
}

body.single-post .et_pb_post_content a.tp-btn {
  border-bottom-color: var(--tp-primary);
}

.tp-btn:hover {
  background-color: var(--tp-primary-dark);
  border-color: var(--tp-primary-dark);
  color: #fff !important;
}

/* «Читайте також» */

body.single-post .et_pb_post_content .tp-readmore {
  list-style: none !important;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

body.single-post .et_pb_post_content .tp-readmore li {
  list-style: none !important;
  margin: 0;
}

body.single-post .et_pb_post_content .tp-readmore li::marker {
  content: none;
}

body.single-post .et_pb_post_content .tp-readmore a {
  display: block;
  padding: 13px 18px;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  background-color: var(--tp-surface);
  color: var(--tp-ink) !important;
  font-size: 15px;
  text-decoration: none;
}

body.single-post .et_pb_post_content .tp-readmore a:hover {
  border-color: var(--tp-primary);
  color: var(--tp-primary) !important;
}

/* Список статей */

.tp-posts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 767px) {
  .tp-posts { grid-template-columns: 1fr; }
}

.tp-post-card {
  background-color: var(--tp-surface);
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  height: 100%;
}

.tp-post-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 30px 26px;
  color: inherit;
  text-decoration: none;
}

.tp-post-card__date {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tp-gilt);
  margin-bottom: 10px;
}

.tp-post-card h2.tp-card-title {
  font-size: 24px !important;
  margin: 0;
}

.tp-post-card__text {
  display: block;
  margin-top: 10px;
  color: var(--tp-ink-muted);
  font-size: 15px;
  line-height: 1.6;
}

.tp-post-card__more {
  display: block;
  margin-top: auto;
  padding-top: 18px;
  color: var(--tp-primary);
  font-size: 14px;
}

.tp-post-card__link:hover h2.tp-card-title {
  color: var(--tp-primary) !important;
}

/* --- 14. Правки за зауваженнями замовниці -------------------------------- */

/* Бургер: Divi лишає спискам disc, як і скрізь. */
.et-l--header .et_mobile_menu,
.et-l--header .et_mobile_menu li {
  list-style: none !important;
}

.et-l--header .et_mobile_menu li::marker {
  content: none;
}

/* Сертифікат на головній — власний <img>, тому формат 4:5 із сітки
   портфоліо на нього не діє. Показуємо цілим. */
.tp-cert-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tp-radius);
}

/* Статті: Divi додає абзацам padding-bottom: 1em поверх нашого margin,
   через що між рядками з'являлась подвійна порожнеча — 36px на кожному
   абзаці. У цих статтях майже кожне речення окремий абзац, тому текст
   розтягувався на два екрани там, де мав бути один. */
body.single-post .et_pb_post_content p,
body.single-post .et_pb_post_content li {
  padding-bottom: 0 !important;
}

body.single-post .et_pb_post_content p {
  margin-bottom: .85em;
}

body.single-post .et_pb_post_content ul,
body.single-post .et_pb_post_content ol {
  margin-bottom: 1em;
}

body.single-post .et_pb_post_content li {
  margin-bottom: .2em;
}

body.single-post .et_pb_post_content h2 {
  margin-top: 1.5em;
}

body.single-post .et_pb_post_content h3 {
  margin-top: 1.3em;
}

/* Футерне меню у дві колонки.
   display: block обов'язковий — вище список оголошений flex-контейнером,
   а на flex властивість columns не діє взагалі, тому перша спроба нічого
   не змінила. Заразом зменшуємо крок між пунктами: 44px мінімальної висоти
   потрібні як тач-ціль на телефоні, а на десктопі вони й розтягували
   меню у стрічку. */
.tp-footer-nav {
  display: block;
  columns: 2;
  column-gap: 28px;
}

.tp-footer-nav li {
  break-inside: avoid;
}

/* Відступ лише на посиланні: якщо задати його ще й пункту, крок
   подвоюється — саме через це рядок виходив 41px замість 29px. */
.tp-footer-nav a,
.tp-footer-nav li {
  min-height: 0;
  line-height: 1.4;
}

.tp-footer-nav li {
  padding: 0;
}

.tp-footer-nav a {
  padding: 4px 0;
}

/* На телефоні один стовпчик і повноцінна тач-ціль. */
@media (max-width: 767px) {
  .tp-footer-nav {
    columns: 1;
  }

  .tp-footer-nav a,
  .tp-footer-nav li {
    min-height: 44px;
    padding: 0;
  }
}