/* ==========================================================================
   Новини: пошук, теми (мітки), сітка карток
   Підключається лише на blog.php і tag.php (inc/news.php). Префікс knews-, змінні --kn-.
   Мова теми: h1 55px #2F446F, «скляні» білі елементи, активний #598CF7, наведення #DEE8FD.
   ========================================================================== */
.knews {
  --kn-ink: #2F446F;
  --kn-ink-soft: #7B849B;
  --kn-brand: #598CF7;
  --kn-wash: #DEE8FD;
  --kn-wash-soft: #EFF4FF;
  --kn-line: #E3E9F5;
  --kn-mark: #FFE58A;
  --kn-glass: rgba(255, 255, 255, .55);
  --kn-glass-shadow: 0 10px 80px rgba(108, 133, 164, .2), inset 0 0 40px rgba(255, 255, 255, .75);
  --kn-card-shadow: -20px 20px 40px rgba(108, 133, 164, .1);
  --kn-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--kn-brand);

  color: var(--kn-ink); font-size: 16px; line-height: 1.5;
  margin-top: 60px; padding-bottom: 80px;
}
.knews [hidden] { display: none !important; }
/* body теми — flex із space-between: без цього короткий список (пошук, мала тема) «відʼїжджає» вниз */
body.page-template-blog > main,
body.tag > main { flex: 1 0 auto; }
/* Скидаємо загальні правила теми: article > * + * { margin-top: 1em } і p { color; font-size } */
.knews .knews-card > * { margin-top: 0; }
.knews .knews-empty p { color: inherit; font-size: inherit; line-height: inherit; }
.knews p { margin: 0; }
.knews a { color: inherit; }
.knews :focus-visible { outline: none; box-shadow: var(--kn-focus); }
.knews-icon { width: 20px; height: 20px; flex: none; }
.knews-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.knews .knews-title { margin: 0 0 30px; font-size: 55px; line-height: 100%; font-weight: 700; color: var(--kn-ink); }

/* ---------- Пошук ---------- */
.knews-search { position: relative; max-width: 760px; }
.knews-search > .knews-icon {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; color: var(--kn-brand); pointer-events: none; z-index: 1;
}
.knews .knews-search__field {
  -webkit-appearance: none; appearance: none; width: 100%; height: 60px; border: 0; border-radius: 10px;
  padding: 0 60px 0 58px; font-size: 16px; font-weight: 500; color: var(--kn-ink);
  background: var(--kn-glass); box-shadow: var(--kn-glass-shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
/* Тема робить плейсхолдери білими — повертаємо читабельний колір */
.knews .knews-search__field::placeholder,
.knews .knews-panel__field::placeholder { color: var(--kn-ink-soft); font-weight: 400; opacity: 1; }
.knews .knews-search__field::-webkit-input-placeholder,
.knews .knews-panel__field::-webkit-input-placeholder { color: var(--kn-ink-soft); }
.knews .knews-search__field::-moz-placeholder,
.knews .knews-panel__field::-moz-placeholder { color: var(--kn-ink-soft); }
.knews-search__field::-webkit-search-cancel-button { display: none; }
.knews .knews-search__field:focus-visible { background: #FFFFFF; box-shadow: 0 0 0 2px var(--kn-brand), 0 10px 80px rgba(108, 133, 164, .2); }
.knews .knews-search__clear {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 1;
  display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--kn-wash); color: var(--kn-ink); cursor: pointer; text-decoration: none;
}
.knews-search__clear .knews-icon { width: 16px; height: 16px; }
.knews .knews-search__clear:hover { background: #CFDDFB; }

/* ---------- Теми ---------- */
.knews-topics { margin-top: 26px; }
/* Один ряд: теми від найбільшої за кількістю новин; скільки вміщується — стільки й видно,
   решта ховається, а видимі розтягуються на всю ширину ряду, щоб не лишалося порожнього місця.
   «Усі теми» — завжди в кінці ряду. Без JS теми просто переносяться на кілька рядків. */
.knews-topics__row { display: flex; align-items: flex-start; gap: 10px; }
.knews-topics__strip { display: flex; flex-wrap: wrap; flex: 1; min-width: 0; gap: 10px; }
.knews-js .knews-topics__strip { flex-wrap: nowrap; overflow: hidden; padding: 30px 40px 40px; margin: -30px -40px -40px; }
.knews-js .knews-topics__strip .knews-chip { flex: 1 0 auto; justify-content: center; }
.knews-js .knews-topics__strip.is-measuring .knews-chip { flex: 0 0 auto; }
.knews .knews-chip.is-overflow { display: none; }
.knews .knews-chip,
.knews .knews-more {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 10px;
  background: var(--kn-glass); box-shadow: var(--kn-glass-shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 16px; font-weight: 600; line-height: 1.2; color: var(--kn-ink); text-decoration: none;
  white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s;
}
.knews .knews-chip:hover,
.knews .knews-more:hover { background: var(--kn-wash); box-shadow: none; }
.knews .knews-chip[aria-current] { background: var(--kn-brand); color: #FFFFFF; box-shadow: none; }
.knews-chip[aria-current]:not(.knews-chip--all)::after { content: "×"; margin-left: 2px; font-size: 18px; line-height: 1; opacity: .85; }
.knews .knews-more { flex: none; background: #FFFFFF; }
/* «Усі теми» працює лише з JS; без нього теми просто переносяться на кілька рядків */
.knews:not(.knews-js) .knews-more,
.knews:not(.knews-js) .knews-panel { display: none; }
.knews-more .knews-icon { width: 16px; height: 16px; transition: transform .2s; }
.knews-more[aria-expanded="true"] { background: var(--kn-wash); }
/* Видимий фокус з клавіатури: правила кнопок вище інакше перебивають загальний :focus-visible */
.knews .knews-chip:focus-visible,
.knews .knews-more:focus-visible,
.knews .knews-tag:focus-visible,
.knews .knews-pages__num:focus-visible,
.knews .knews-pages__step:focus-visible { box-shadow: var(--kn-focus); }
.knews-results:focus { outline: none; }
.knews-more[aria-expanded="true"] .knews-icon { transform: rotate(180deg); }
.knews-more__count {
  min-width: 28px; padding: 3px 7px; border-radius: 5px; background: var(--kn-wash-soft);
  font-size: 13px; font-weight: 700; text-align: center;
}

/* Панель «Усі теми» */
.knews-panel {
  margin-top: 14px; padding: 20px 24px 24px; border-radius: 20px;
  background: #FFFFFF; box-shadow: var(--kn-card-shadow);
}
.knews-panel__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.knews-panel__filter { position: relative; flex: 1; max-width: 360px; }
.knews-panel__filter .knews-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--kn-brand); pointer-events: none; }
.knews .knews-panel__field {
  width: 100%; height: 44px; padding: 0 14px 0 42px; border: 0; border-radius: 10px;
  background: var(--kn-wash-soft); font-size: 16px; color: var(--kn-ink);
}
.knews .knews-panel__field:focus-visible { background: #FFFFFF; box-shadow: 0 0 0 2px var(--kn-brand); }
.knews .knews-panel__close {
  margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--kn-wash-soft); color: var(--kn-ink); cursor: pointer;
}
.knews-panel__close:hover { background: var(--kn-wash); }
.knews-panel__close .knews-icon { width: 16px; height: 16px; }
.knews .knews-panel__list { columns: 4 200px; column-gap: 24px; list-style: none; margin: 0; padding: 0; }
.knews-panel__list li { break-inside: avoid; }
.knews .knews-panel__link {
  display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 8px;
  font-size: 15px; font-weight: 500; line-height: 1.3; text-decoration: none; color: var(--kn-ink);
}
.knews .knews-panel__link:hover { background: var(--kn-wash-soft); color: var(--kn-brand); }
.knews .knews-panel__link[aria-current] { background: var(--kn-brand); color: #FFFFFF; }
/* Довгі назви без пробілів (НМЦВФПО_Єднаймо_душі_…) переносимо, щоб не залазили на сусідню колонку */
.knews-panel__name { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.knews-panel__count { flex: none; padding-top: 1px; font-size: 13px; color: var(--kn-ink-soft); font-variant-numeric: tabular-nums; }
.knews-panel__link[aria-current] .knews-panel__count { color: rgba(255, 255, 255, .8); }
.knews-panel__empty { color: var(--kn-ink-soft); font-size: 15px; }

/* ---------- Результати ---------- */
.knews .knews-search__field { margin: 0; }
.knews-results { margin-top: 40px; transition: opacity .15s; scroll-margin-top: 20px; }
.knews-results[aria-busy="true"] { opacity: .55; }
.knews .knews-count { margin: 0 0 16px; font-size: 15px; font-weight: 500; color: var(--kn-ink-soft); }
.knews-count b { color: var(--kn-ink); font-weight: 700; }

/* Сітка на 6 доріжок: звичайна картка займає 2 (три в ряд).
   Неповний останній ряд розтягується, щоб не було порожніх місць:
   is-row3-2 — дві картки по половині, is-row3-1 — одна на всю ширину (PHP рахує залишок) */
.knews .knews-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px; margin: 0; padding: 0; list-style: none; }
.knews-grid > li { grid-column: span 2; }
.knews-grid > li.is-lead,
.knews-grid > li.is-row3-1 { grid-column: 1 / -1; }
.knews-grid > li.is-row3-2 { grid-column: span 3; }
.knews-grid > li.is-row3-2 .knews-card__img { aspect-ratio: 2 / 1; }
.knews-card {
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: #FFFFFF; border-radius: 20px; box-shadow: var(--kn-card-shadow);
}
.knews-card__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--kn-wash-soft); }
.knews-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.knews-card:hover .knews-card__img img { transform: scale(1.04); }
.knews-card__body { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 22px; }
.knews .knews-card__date { font-size: 15px; font-weight: 600; color: var(--kn-brand); }
.knews .knews-card__title {
  margin: 6px 0 0; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--kn-ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.knews-card__title a { text-decoration: none; }
/* Уся картка клікабельна через посилання заголовка */
.knews-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.knews-card__title a:focus-visible { box-shadow: none; }
.knews-card__title a:focus-visible::after { box-shadow: inset 0 0 0 3px var(--kn-brand); }
.knews-card:hover .knews-card__title { color: var(--kn-brand); }
.knews .knews-card__text {
  margin-top: 10px; font-size: 16px; line-height: 1.5; color: var(--kn-ink-soft);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.knews-card__tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; }
.knews .knews-tag {
  padding: 5px 10px; border-radius: 6px; background: var(--kn-wash-soft);
  font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--kn-ink); text-decoration: none;
}
.knews a.knews-tag:hover { background: var(--kn-wash); color: var(--kn-brand); }
.knews .knews-tag--more { background: none; color: var(--kn-ink-soft); }
.knews mark { background: var(--kn-mark); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Найсвіжіша новина — широка картка на першій сторінці без пошуку */
.knews-card--lead { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.knews-card--lead .knews-card__img { aspect-ratio: auto; min-height: 340px; }
/* Остання картка, розтягнута на весь ряд, — горизонтальна, як головна, але скромніша */
.knews-grid > li.is-row3-1 .knews-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.knews-grid > li.is-row3-1 .knews-card__img { aspect-ratio: auto; min-height: 260px; }
.knews-grid > li.is-row3-1 .knews-card__body { padding: 28px 32px; justify-content: center; }
.knews .knews-grid > li.is-row3-1 .knews-card__title { font-size: 24px; }
.knews-grid > li.is-row3-1 .knews-card__tags { margin-top: 0; }
.knews-card--lead .knews-card__body { padding: 34px 38px; justify-content: center; }
.knews .knews-card--lead .knews-card__title { font-size: 32px; line-height: 1.2; -webkit-line-clamp: 4; }
.knews .knews-card--lead .knews-card__text { margin-top: 16px; font-size: 18px; -webkit-line-clamp: 4; }
.knews-card--lead .knews-card__tags { margin-top: 0; padding-top: 22px; }

/* ---------- Сторінки (як .nav-links теми) ---------- */
.knews-pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 40px; }
.knews .knews-pages__num,
.knews .knews-pages__step {
  display: inline-block; padding: 8px 13px; border-radius: 5px; background: var(--kn-wash);
  font-size: 18px; font-weight: 500; line-height: 100%; text-decoration: none; color: var(--kn-ink);
}
.knews a.knews-pages__num:hover, .knews .knews-pages__step:hover { background: #CFDDFB; }
.knews .knews-pages__num[aria-current] { background: var(--kn-brand); color: #FFFFFF; }
.knews-pages__gap { color: var(--kn-ink-soft); }

.knews-empty { padding: 24px 28px; border-radius: 20px; background: #FFFFFF; box-shadow: var(--kn-card-shadow); color: var(--kn-ink-soft); }
.knews .knews-empty a { margin-left: 6px; color: var(--kn-brand); font-weight: 600; text-underline-offset: 3px; }

/* ---------- Адаптив ---------- */
@media (max-width: 1024px) {
  .knews .knews-title { font-size: 42px; }
  .knews .knews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  /* Дві колонки: скидаємо розтягування для трьох і розтягуємо лише непарну останню */
  .knews-grid > li, .knews-grid > li.is-row3-1, .knews-grid > li.is-row3-2 { grid-column: auto; }
  .knews-grid > li.is-row3-2 .knews-card__img { aspect-ratio: 16 / 10; }
  .knews-grid > li.is-row3-1 .knews-card { display: flex; }
  .knews-grid > li.is-row3-1 .knews-card__img { aspect-ratio: 16 / 10; min-height: 0; }
  .knews-grid > li.is-row3-1 .knews-card__body { padding: 18px 22px 22px; justify-content: flex-start; }
  .knews .knews-grid > li.is-row3-1 .knews-card__title { font-size: 20px; }
  .knews-grid > li.is-row3-1 .knews-card__tags { margin-top: auto; }
  .knews-grid > li.is-lead, .knews-grid > li.is-row2-1 { grid-column: 1 / -1; }
  .knews-grid > li.is-row2-1 .knews-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .knews-grid > li.is-row2-1 .knews-card__img { aspect-ratio: auto; min-height: 240px; }
  .knews-grid > li.is-row2-1 .knews-card__body { justify-content: center; }
  .knews-grid > li.is-row2-1 .knews-card__tags { margin-top: 0; }
  .knews-card--lead .knews-card__body { padding: 26px 28px; }
  .knews .knews-card--lead .knews-card__title { font-size: 26px; }
  .knews .knews-card--lead .knews-card__text { font-size: 16px; }
}
@media (max-width: 680px) {
  /* Тема на ≤605px стискає .container до 300px — на цій сторінці повертаємо звичайну ширину */
  .knews .container { max-width: none !important; padding: 0 16px !important; }
  .knews { margin-top: 28px; padding-bottom: 60px; }
  .knews .knews-title { margin-bottom: 20px; font-size: 30px; }

  .knews .knews-search__field { height: 52px; padding-left: 44px; padding-right: 54px; }
  .knews-search > .knews-icon { left: 14px; width: 20px; height: 20px; }
  .knews .knews-search__clear { right: 8px; }

  /* Теми — стрічка, яку гортають пальцем; «Усі теми» лишається праворуч */
  .knews-topics { margin-top: 16px; }
  .knews-topics__row { flex-wrap: nowrap; gap: 8px; align-items: stretch; }
  .knews-topics__strip {
    display: flex; flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; gap: 8px; margin: -6px 0; padding: 6px 2px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent);
  }
  .knews-topics__strip::-webkit-scrollbar { display: none; }
  .knews-js .knews-topics__strip { overflow-x: auto; margin: -6px 0; padding: 6px 2px 10px; }
  .knews-js .knews-topics__strip .knews-chip { flex: none; }
  .knews .knews-chip.is-overflow { display: inline-flex; }
  .knews .knews-chip { flex: none; min-height: 44px; padding: 8px 14px; font-size: 15px; box-shadow: 0 6px 24px rgba(108, 133, 164, .18), inset 0 0 40px rgba(255, 255, 255, .75); }
  .knews .knews-more { min-height: 44px; padding: 8px 12px; font-size: 15px; align-self: auto; }
  .knews-more__count { display: none; }

  .knews-panel { margin-top: 12px; padding: 14px 14px 10px; border-radius: 16px; }
  .knews-panel__head { margin-bottom: 8px; }
  .knews-panel__filter { max-width: none; }
  .knews .knews-panel__list { columns: 1; max-height: 55vh; overflow-y: auto; overscroll-behavior: contain; }
  .knews .knews-panel__link { margin: 0; padding: 11px 10px; font-size: 16px; }
  .knews-panel__list li + li { border-top: 1px solid var(--kn-line); }

  .knews-results { margin-top: 24px; }
  .knews .knews-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .knews-grid > li.is-lead, .knews-grid > li.is-row2-1 { grid-column: auto; }
  .knews-grid > li.is-row2-1 .knews-card__body, .knews-grid > li.is-row3-1 .knews-card__body { padding: 12px 14px; }

  /* Звичайна картка на телефоні — компактний рядок: мініатюра ліворуч, дата й заголовок праворуч */
  .knews-grid > li .knews-card:not(.knews-card--lead) { display: grid; grid-template-columns: 104px minmax(0, 1fr); border-radius: 16px; }
  .knews-grid > li .knews-card:not(.knews-card--lead) .knews-card__img { aspect-ratio: auto; height: 100%; min-height: 104px; }
  .knews .knews-grid > li .knews-card:not(.knews-card--lead) .knews-card__title { font-size: 16px; }
  .knews-card:not(.knews-card--lead) .knews-card__body { padding: 12px 14px; }
  .knews .knews-card:not(.knews-card--lead) .knews-card__date { font-size: 13px; }
  .knews .knews-card:not(.knews-card--lead) .knews-card__title { margin-top: 2px; font-size: 16px; line-height: 1.3; }
  .knews-card:not(.knews-card--lead) .knews-card__text,
  .knews-card:not(.knews-card--lead) .knews-card__tags { display: none; }
  .knews-card__title a::after { border-radius: 16px; }
  /* Під час пошуку показуємо уривок тексту, щоб було видно, де знайдено слово */
  .knews-grid.is-search .knews-card:not(.knews-card--lead) .knews-card__text { display: -webkit-box; margin-top: 4px; font-size: 14px; -webkit-line-clamp: 2; }

  .knews-card--lead { grid-template-columns: minmax(0, 1fr); border-radius: 16px; }
  .knews-card--lead .knews-card__img { aspect-ratio: 16 / 10; min-height: 0; }
  .knews-card--lead .knews-card__body { padding: 16px 16px 18px; }
  .knews .knews-card--lead .knews-card__date { font-size: 14px; }
  .knews .knews-card--lead .knews-card__title { font-size: 21px; -webkit-line-clamp: 4; }
  .knews .knews-card--lead .knews-card__text { margin-top: 8px; font-size: 15px; -webkit-line-clamp: 3; }
  .knews-card--lead .knews-card__tags { padding-top: 14px; }

  .knews-pages { gap: 8px; margin-top: 26px; }
  .knews .knews-pages__num, .knews .knews-pages__step { min-width: 44px; padding: 13px 12px; font-size: 16px; text-align: center; }
  .knews-empty { padding: 18px 16px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .knews *, .knews-results { transition: none !important; }
}

/* ==========================================================================
   Сторінка новини (single.php). Префікс kpost-, змінні --kp-.
   Картки «Вам може бути цікаво» — ті самі, що в списку новин (knews-card).
   ========================================================================== */
.kpost {
  --kp-ink: #2F446F;
  --kp-text: #34405A;
  --kp-soft: #7B849B;
  --kp-brand: #598CF7;
  --kp-wash: #DEE8FD;
  --kp-wash-soft: #EFF4FF;
  --kp-line: #E3E9F5;
  --kp-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px #598CF7;
  margin-top: 50px; padding-bottom: 40px; color: var(--kp-text);
}
.kpost :focus-visible { outline: none; box-shadow: var(--kp-focus); }
.kpost [hidden] { display: none !important; }
/* Уся сторінка новини — одна колонка 960px: заголовок, фото, текст, «Поділитися» і «Вам може бути цікаво»
   однакової ширини; нічого не прилипає і не їде під час прокрутки */
.kpost > .container { max-width: 990px; }
.kpost-layout { margin-top: 30px; }

.kpost .kpost-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; padding: 8px 14px 8px 10px; border-radius: 10px;
  background: rgba(255, 255, 255, .55); box-shadow: 0 10px 40px rgba(108, 133, 164, .15);
  font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--kp-ink); text-decoration: none;
}
.kpost .kpost-back:hover { background: var(--kp-wash); }
.kpost-back svg { width: 18px; height: 18px; color: var(--kp-brand); }

.kpost .kpost-title { margin: 0; font-size: 48px; line-height: 1.12; font-weight: 700; color: var(--kp-ink); overflow-wrap: anywhere; }
.kpost-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 18px; }
.kpost .kpost-date { margin-right: 6px; font-size: 16px; font-weight: 600; color: var(--kp-brand); }
.kpost .kpost-tag {
  padding: 7px 12px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 6px 20px rgba(108, 133, 164, .12);
  font-size: 14px; font-weight: 600; line-height: 1.2; color: var(--kp-ink); text-decoration: none;
}
.kpost .kpost-tag:hover { background: var(--kp-wash); color: var(--kp-brand); }

/* Головне фото: без обрізання, на світлому тлі, якщо воно вузьке чи високе */
/* Ширина — як у колонки тексту, висота обмежена, щоб фото не займало весь екран */
/* Заокруглення й тінь — на самому фото, тож без світлих смуг по боках, якщо фото вузьке; фото по центру колонки */
.kpost .kpost-cover { margin: 0 0 32px; }
.kpost .kpost-cover img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: 480px; margin: 0 auto;
  border-radius: 20px; box-shadow: -20px 20px 40px rgba(108, 133, 164, .12);
}

/* ---------- Текст новини (ACF editor_blog) ---------- */
.kpost-text { margin: 0; font-size: 19px; line-height: 1.7; color: var(--kp-text); overflow-wrap: break-word; }
.kpost .kpost-text p,
.kpost .kpost-text li { font-size: inherit; line-height: inherit; font-weight: 400; color: inherit; }
.kpost .kpost-text > * { margin-top: 0; margin-bottom: 0; }
.kpost .kpost-text > * + * { margin-top: 1em; }
.kpost .kpost-text h1 { margin: 1.6em 0 .5em; font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--kp-ink); }
.kpost .kpost-text .wp-caption { width: auto !important; max-width: 100%; }
.kpost .kpost-text h2 { margin: 1.6em 0 .5em; font-size: 28px; line-height: 1.25; font-weight: 700; color: var(--kp-ink); }
.kpost .kpost-text h3 { margin: 1.4em 0 .4em; font-size: 22px; line-height: 1.3; font-weight: 700; color: var(--kp-ink); }
.kpost .kpost-text h4, .kpost .kpost-text h5, .kpost .kpost-text h6 { margin: 1.2em 0 .3em; font-size: 19px; font-weight: 700; color: var(--kp-ink); }
.kpost .kpost-text strong, .kpost .kpost-text b { font-weight: 700; color: var(--kp-ink); }
.kpost .kpost-text a { color: #2F6BDB; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.kpost .kpost-text a:hover { color: var(--kp-ink); }
.kpost .kpost-text ul, .kpost .kpost-text ol { padding-left: 1.3em; }
.kpost .kpost-text ul { list-style: disc; }
.kpost .kpost-text ol { list-style: decimal; }
.kpost .kpost-text li + li { margin-top: .35em; }
.kpost .kpost-text li::marker { color: var(--kp-brand); font-weight: 700; }
.kpost .kpost-text blockquote {
  margin: 1.5em 0; padding: 18px 24px; border-left: 4px solid var(--kp-brand); border-radius: 0 14px 14px 0;
  background: #FFFFFF; font-size: 20px; color: var(--kp-ink);
}
/* Окреме фото в тексті: вертикальне не розтягуємо на весь екран */
/* Розмір із редактора (атрибут width) зберігаємо, але не ширше колонки; object-fit — щоб обмеження висоти не сплющувало фото */
.kpost .kpost-text img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; max-height: 560px; object-fit: contain; border-radius: 14px; }
/* Фото «по центру» з редактора WordPress (і фото без вирівнювання, що стоїть в абзаці саме) — окремим блоком */
.kpost .kpost-text img.aligncenter,
.kpost .kpost-text p > img:only-child { display: block; margin-left: auto; margin-right: auto; }
.kpost .kpost-text img.alignleft { float: left; margin: .3em 1.2em .6em 0; }
.kpost .kpost-text img.alignright { float: right; margin: .3em 0 .6em 1.2em; }
.kpost .kpost-text::after { content: ""; display: block; clear: both; }
.kpost .kpost-text figure { margin: 1.5em 0; }
.kpost .kpost-text figcaption { margin-top: 8px; font-size: 15px; color: var(--kp-soft); text-align: center; }
.kpost .kpost-text iframe, .kpost .kpost-text video { display: block; width: 100%; max-width: 100%; border: 0; border-radius: 14px; }
.kpost .kpost-text iframe[src*="youtube"], .kpost .kpost-text iframe[src*="youtu.be"], .kpost .kpost-text iframe[src*="vimeo"] { height: auto; aspect-ratio: 16 / 9; }
.kpost .kpost-text table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 16px; }
.kpost .kpost-text th, .kpost .kpost-text td { padding: 8px 12px; border: 1px solid var(--kp-line); text-align: left; }
/* Кілька фото підряд (абзац із фото чи галерея WordPress; single.php збирає їх у .kpost-photos) — сіткою.
   Неповний останній ряд розтягується, щоб не було порожніх місць. */
.kpost .kpost-text .gallery,
.kpost .kpost-text .wp-block-gallery,
.kpost .kpost-text .kpost-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kpost-text .gallery > *, .kpost-text .wp-block-gallery > *, .kpost-text .kpost-photos > * { margin: 0 !important; }
.kpost-text .gallery > br, .kpost-text .gallery > style { display: none; }
.kpost-text .kpost-photos > a { display: block; }
.kpost .kpost-text .gallery img,
.kpost .kpost-text .wp-block-gallery img,
.kpost .kpost-text .kpost-photos img { width: 100%; height: 100%; max-height: none; min-height: 0; aspect-ratio: 4 / 3; object-fit: cover; }
/* !important — перебиває width/height з атрибутів і style="" редактора, інакше фото виходить за клітинку */
.kpost .kpost-text .kpost-photos img,
.kpost .kpost-text .gallery img,
.kpost .kpost-text .wp-block-gallery img { width: 100% !important; height: 100% !important; max-width: none !important; }
/* Телефон: по 2 в ряд, непарне останнє фото — на всю ширину */
.kpost-text .kpost-photos > :nth-child(odd):last-child { grid-column: 1 / -1; }
.kpost .kpost-text .kpost-photos > img:nth-child(odd):last-child,
.kpost .kpost-text .kpost-photos > :nth-child(odd):last-child img { aspect-ratio: 16 / 9; }
/* Комп'ютер і планшет: по 3 в ряд (6 доріжок, фото займає 2) */
@media (min-width: 681px) {
  .kpost .kpost-text .gallery,
  .kpost .kpost-text .wp-block-gallery,
  .kpost .kpost-text .kpost-photos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .kpost .kpost-text .kpost-photos > *,
  .kpost .kpost-text .kpost-photos > :nth-child(odd):last-child { grid-column: span 2; }
  .kpost .kpost-text .gallery > *, .kpost .kpost-text .wp-block-gallery > * { grid-column: span 2; }
  .kpost .kpost-text .kpost-photos > img:nth-child(odd):last-child,
  .kpost .kpost-text .kpost-photos > :nth-child(odd):last-child img { aspect-ratio: 4 / 3; }
  .kpost .kpost-text .kpost-photos > :nth-child(3n+1):nth-last-child(2),
  .kpost .kpost-text .kpost-photos > :nth-child(3n+1):nth-last-child(2) + * { grid-column: span 3; }
  .kpost .kpost-text .kpost-photos > :nth-child(3n+1):last-child { grid-column: 1 / -1; }
  .kpost .kpost-text .kpost-photos > img:nth-child(3n+1):last-child,
  .kpost .kpost-text .kpost-photos > :nth-child(3n+1):last-child img { aspect-ratio: 21 / 9; }
}

/* ---------- Перегляди і «Поділитися» ---------- */
.kpost-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px;
  margin: 44px 0 0; padding: 14px 16px 14px 20px; border-radius: 16px;
  background: #FFFFFF; box-shadow: -20px 20px 40px rgba(108, 133, 164, .1);
}
.kpost-views { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; color: var(--kp-soft); }
.kpost-views svg { width: 20px; height: 20px; color: var(--kp-brand); }
.kpost-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kpost-share__label { margin-right: 4px; font-size: 15px; font-weight: 500; color: var(--kp-soft); }
.kpost .kpost-share__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; min-width: 40px; padding: 0 12px;
  border: 0; border-radius: 10px; background: var(--kp-wash-soft); color: var(--kp-ink);
  font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.kpost .kpost-share__btn:hover { background: var(--kp-wash); color: var(--kp-brand); }
.kpost-share__btn svg { width: 20px; height: 20px; }
.kpost-share__btn.is-done { background: #DDF6EC; color: #117A55; }

/* ---------- Вам може бути цікаво ---------- */
.kpost-related { margin-top: 70px; }
.kpost .kpost-related__title { margin: 0 0 24px; font-size: 32px; line-height: 1.2; font-weight: 700; color: var(--kp-ink); }
.kpost-related .knews { margin: 0; padding: 0; }

@media (max-width: 1024px) {
  .kpost .kpost-title { font-size: 38px; }
}
@media (max-width: 680px) {
  .kpost .container { max-width: none !important; padding: 0 16px !important; }
  .kpost { margin-top: 24px; }
  .kpost .kpost-back { margin-bottom: 18px; font-size: 14px; }
  .kpost .kpost-title { font-size: 28px; line-height: 1.18; }
  .kpost-meta { margin-top: 12px; gap: 6px 8px; }
  .kpost .kpost-date { width: 100%; font-size: 14px; }
  .kpost .kpost-tag { font-size: 13px; padding: 5px 10px; }
  .kpost-layout { margin-top: 20px; }
  .kpost .kpost-cover { margin: 0 0 22px; }
  .kpost .kpost-cover img { border-radius: 14px; }
  .kpost .kpost-cover img { max-height: 320px; }
  .kpost-text { font-size: 17px; line-height: 1.65; }
  .kpost .kpost-text h2 { font-size: 23px; }
  .kpost .kpost-text h3 { font-size: 20px; }
  .kpost .kpost-text blockquote { padding: 14px 16px; font-size: 17px; }
  .kpost .kpost-text img { border-radius: 10px; }
  .kpost-bar { margin-top: 32px; padding: 12px; }
  .kpost-share { width: 100%; }
  .kpost-share__label { width: 100%; }
  .kpost .kpost-share__btn { flex: 1 1 0; padding: 0 8px; }
  .kpost-share__btn span { display: none; }
  .kpost-related { margin-top: 44px; }
  .kpost .kpost-related__title { margin-bottom: 14px; font-size: 23px; }
}