/* ============================================================
   CITY VILLA CLUB — редизайн: блог (Хід будівництва + Статті)
   Підключається тільки на blog.php / blog-post.php.
   Правило файлу: тільки .rd- класи, тільки токени з tokens.css,
   анімуємо лише transform/opacity/clip-path, поважаємо
   prefers-reduced-motion НЕ поважаємо — рішення власника від 2026-08-23.
   Глобального кілера в tokens.css більше немає, не повертати.
   ============================================================ */

/* ---------- 1. ПЕРЕМИКАЧ РУБРИК ---------- */
.rd-blogfilter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
  margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}
.rd-blogfilter__chips { display: inline-flex; flex-wrap: wrap; gap: .5rem; }
.rd-blogfilter__chip {
  appearance: none;
  cursor: pointer;
  font-family: var(--rd-font);
  font-size: .8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--rd-navy);
  background: var(--rd-white);
  border: 1px solid var(--rd-hairline);
  border-radius: 999px;
  padding: .65em 1.3em;
  transition: background var(--rd-fast), color var(--rd-fast), border-color var(--rd-fast);
}
.rd-blogfilter__chip:hover { border-color: var(--rd-navy); }
.rd-blogfilter__chip[aria-pressed="true"] { background: var(--rd-navy); border-color: var(--rd-navy); color: #fff; }
.rd-blogfilter__count { font-size: .84rem; color: var(--rd-muted); margin: 0; }
.rd-blogfilter__count b { color: var(--rd-navy); font-weight: 500; }
/* без JS: перемикач і "показати ще" зайві — всі картки вже видно одразу */
.no-js .rd-blogfilter,
.no-js .rd-blogmore { display: none; }

/* ---------- 2. СІТКА КАРТОК ---------- */
.rd-bloggrid {
  display: grid;
  gap: var(--rd-gap);
  grid-template-columns: 1fr;
  margin-top: clamp(1.8rem, 1.3rem + 1.6vw, 2.8rem);
}
@media (min-width: 700px) { .rd-bloggrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .rd-bloggrid { grid-template-columns: repeat(3, 1fr); } }
.rd-bloggrid [hidden] { display: none; }

/* ---------- 3. КАРТКА МАТЕРІАЛУ ---------- */
.rd-blogcard {
  background: var(--rd-white);
  border: 1px solid var(--rd-hairline);
  border-radius: var(--rd-radius);
  overflow: hidden;
  transition: box-shadow var(--rd-norm), transform var(--rd-norm), border-color var(--rd-norm);
}
.rd-blogcard:hover { box-shadow: var(--rd-shadow-lift); transform: translateY(-4px); border-color: transparent; }
.rd-blogcard__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.rd-blogcard__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.rd-blogcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--rd-ease); }
.rd-blogcard:hover .rd-blogcard__media img { transform: scale(1.05); }
.rd-blogcard__badge {
  position: absolute;
  top: .8rem; left: .8rem;
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  background: var(--rd-navy);
  padding: .45em .9em;
  border-radius: 999px;
}
/* хід будівництва — амбер-бейдж, статті — navy: два кольори з токенів,
   картки візуально різняться з першого погляду в спільній сітці */
.rd-blogcard__badge--progress { background: var(--rd-amber); color: #241a00; }
.rd-blogcard__badge--article { background: var(--rd-navy); }
.rd-blogcard__body { padding: 1.2rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.rd-blogcard__date { font-size: .74rem; font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--rd-muted); }
.rd-blogcard__title { font-size: 1.06rem; font-weight: 500; font-style: normal; color: var(--rd-navy); line-height: 1.3; margin: 0; }
.rd-blogcard:hover .rd-blogcard__title { text-decoration: underline; text-decoration-color: var(--rd-amber); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rd-blogcard__desc {
  font-size: .88rem;
  color: var(--rd-muted);
  line-height: 1.55;
  margin: 0;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-blogcard__more { margin-top: .3rem; font-size: .8rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--rd-navy); }
.rd-blogcard__more span { display: inline-block; transition: transform var(--rd-fast); }
.rd-blogcard:hover .rd-blogcard__more span { transform: translateX(4px); }

/* Варіант «Хід будівництва»: період великим замість заголовка вгорі тіла */
.rd-blogcard--progress .rd-blogcard__period {
  font-weight: 900;
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  color: var(--rd-navy);
  line-height: 1.05;
  padding-right: .09em;
  margin: 0;
}
.rd-blogcard--progress .rd-blogcard__title { font-size: .95rem; font-weight: 500; color: var(--rd-muted); }

/* ---------- 4. ПОРОЖНІЙ СТАН + «ПОКАЗАТИ ЩЕ» ---------- */
.rd-blogempty {
  grid-column: 1 / -1;
  text-align: center;
  padding: clamp(2.4rem, 1.8rem + 2vw, 3.6rem) 1rem;
  color: var(--rd-muted);
}
.rd-blogempty[hidden] { display: none; }
.rd-blogmore { display: flex; justify-content: center; margin-top: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.rd-blogmore[hidden] { display: none; }

/* ---------- 5. ТИПОГРАФІКА СТАТТІ ---------- */
.rd-article {
  max-width: 42em; /* ~68–72 символи на рядок при поточному кеглі */
  margin-inline: auto;
}
.rd-article > * + * { margin-top: 1.3em; }
.rd-article h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  margin-top: 1.9em;
  scroll-margin-top: 100px; /* якір ToC не ховається під fixed-шапкою */
}
.rd-article h3 {
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  margin-top: 1.6em;
  scroll-margin-top: 100px;
}
.rd-article p { line-height: 1.75; color: var(--rd-ink); }
.rd-article ul, .rd-article ol { padding-left: 1.4em; line-height: 1.7; display: grid; gap: .5em; }
.rd-article ul { list-style: none; }
.rd-article ul li { position: relative; padding-left: 1.3em; }
.rd-article ul li::before {
  content: '';
  position: absolute;
  left: 0; top: .62em;
  width: 9px; height: 2px;
  background: var(--rd-amber);
}
.rd-article ol { list-style: none; counter-reset: rdArticleOl; }
.rd-article ol li { counter-increment: rdArticleOl; position: relative; padding-left: 1.9em; }
.rd-article ol li::before {
  content: counter(rdArticleOl, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-weight: 900;
  font-style: italic;
  font-size: .82em;
  color: var(--rd-amber);
}
.rd-article blockquote {
  margin: 0;
  padding: .2em 0 .2em 1.3em;
  border-left: 3px solid var(--rd-amber);
  font-size: 1.1em;
  font-style: italic;
  color: var(--rd-navy);
}
.rd-article figure { margin: 0; }
.rd-article figure img { width: 100%; height: auto; border-radius: var(--rd-radius); display: block; }
.rd-article figcaption { margin-top: .6em; font-size: .82em; color: var(--rd-muted); text-align: center; }
.rd-article table { width: 100%; border-collapse: collapse; font-size: .92em; }
.rd-article th, .rd-article td { text-align: left; padding: .75em 1em; border-bottom: 1px solid var(--rd-hairline); }
.rd-article th { color: var(--rd-muted); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; font-size: .78em; }
.rd-article-tablewrap { overflow-x: auto; }
.rd-article strong { color: var(--rd-navy); font-weight: 500; }
.rd-article hr { border: 0; height: 1px; background: var(--rd-hairline); margin-block: 2em; }

/* ---------- 6. ЗМІСТ СТАТТІ (ToC, генерується JS) ---------- */
.rd-toc {
  max-width: 42em;
  margin: 0 auto 2.2rem;
  background: var(--rd-paper);
  border: 1px solid var(--rd-hairline);
  border-radius: var(--rd-radius);
  padding: 1.3rem 1.5rem;
}
.rd-toc[hidden] { display: none; }
.rd-toc__title { font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--rd-muted); margin: 0 0 .8rem; }
.rd-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: rdToc; display: grid; gap: .5rem; }
.rd-toc li { counter-increment: rdToc; }
.rd-toc a {
  display: flex;
  gap: .7em;
  font-size: .92rem;
  text-decoration: none;
  color: var(--rd-ink);
  transition: color var(--rd-fast);
}
.rd-toc a::before { content: counter(rdToc, decimal-leading-zero); font-weight: 900; font-style: italic; color: var(--rd-amber); flex: 0 0 auto; }
.rd-toc a:hover { color: var(--rd-navy); text-decoration: underline; text-decoration-color: var(--rd-amber); }

/* ---------- 7. HERO МАТЕРІАЛУ ---------- */
.rd-postmeta { display: flex; flex-wrap: wrap; align-items: center; gap: .5em 1em; margin-bottom: .9rem; }
.rd-postmeta__badge {
  font-size: .72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: #fff;
  background: var(--rd-amber);
  padding: .45em 1em;
  border-radius: 999px;
}
.rd-postmeta__date { font-size: .84rem; color: var(--rd-muted); }
.rd-postcover { border-radius: var(--rd-radius); overflow: hidden; box-shadow: var(--rd-shadow); margin-bottom: clamp(2rem, 1.5rem + 1.6vw, 3rem); }
.rd-postcover img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* ---------- 8. ГАЛЕРЕЯ ФОТОЗВІТУ (світлий слайдер, своя розмітка) ---------- */
.rd-repgallery { position: relative; max-width: 42em; margin: 2.4rem auto 0; }
.rd-repgallery__heading { font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--rd-muted); margin: 0 0 .8rem; }
.rd-repgallery__track {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: .2rem 0 .6rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.rd-repgallery__track:focus-visible { outline: 2px solid var(--rd-amber); outline-offset: 4px; }
.rd-repgallery__slide { flex: 0 0 auto; width: min(100%, 560px); scroll-snap-align: start; }
.rd-repgallery__slide figure { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--rd-radius); overflow: hidden; box-shadow: var(--rd-shadow); }
.rd-repgallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-repgallery__arrows { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .8rem; }
.rd-repgallery__arrow {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--rd-hairline);
  background: var(--rd-white);
  color: var(--rd-navy);
  font-family: var(--rd-font);
  font-size: 1.2rem;
  font-weight: 900;
  font-style: italic;
  line-height: 0;
  cursor: pointer;
  transition: background var(--rd-fast), color var(--rd-fast);
}
.rd-repgallery__arrow:hover { background: var(--rd-navy); color: #fff; }
.rd-repgallery__arrow[disabled] { opacity: .3; cursor: default; pointer-events: none; }

/* ---------- 9. ЧИТАЙТЕ ТАКОЖ ---------- */
.rd-related { margin-top: clamp(3rem, 2.2rem + 2.4vw, 4.5rem); }
.rd-related__title { text-align: center; }

/* ---------- 10. УТИЛІТИ ---------- */
/* home-v2.css має свій .rd-visually-hidden, але blog.php/blog-post.php його
   не підключають — дублюємо тут ту саму a11y-утиліту без залежності. */
.rd-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 11. ДОСТУПНІСТЬ І РУХ ---------- */


/* Галерея фотозвіту: квадратна сітка, що тримає ритм на всіх ширинах. */
.rd-postgal__title { font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); margin: 0 0 1rem; }
/* Галерея фотозвіту. Була сіткою з жорстким 3/2 і object-fit:cover - вертикальні
   кадри з майданчика різало до горизонтальної смуги, з будинку лишалася середина.
   Тепер кладка колонками: висоту диктує саме фото, кожен кадр видно цілим. */
.rd-postgal__grid {
  list-style: none; margin: 0; padding: 0;
  columns: 260px; column-gap: var(--rd-gap, 1rem);
}
.rd-postgal__grid li { break-inside: avoid; margin: 0 0 var(--rd-gap, 1rem); }
.rd-postgal__grid img {
  width: 100%; height: auto; display: block;
  border-radius: var(--rd-radius, 12px); box-shadow: var(--rd-shadow-lift, 0 6px 24px rgba(0,0,0,.12));
}