/* ══════════════════════════════════════════════════════════════════
   БЛОГ: архів, фільтри, картки й одинична стаття.

   Працює поверх liquid.css (токени, .section, .btn) і services.css
   (.sv-hero, .sv-cta, .sd-breadcrumb). Нові класи — лише для блогу.
   ══════════════════════════════════════════════════════════════════ */

/* ── Архів ─────────────────────────────────────────────────────── */
.blog-section{ padding-top:var(--sp-10); }

.blog-filters{
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
  margin:var(--sp-8) 0 var(--sp-9);
}
.blog-filter{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4);
  border:1px solid var(--line); border-radius:999px;
  color:var(--ash); font-size:var(--fs-2); line-height:1.2;
  transition:color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.blog-filter:hover{ color:var(--milk); border-color:var(--glass-edge); }
.blog-filter.is-active{
  color:var(--milk); border-color:var(--glass-edge);
  background:rgba(76,138,95,.12);
}
.blog-filter__count{ color:var(--ash); font-size:var(--fs-1); }
.blog-filter.is-active .blog-filter__count{ color:var(--glass-light); }

.blog-filter-note{
  margin:calc(-1 * var(--sp-6)) 0 var(--sp-8);
  color:var(--ash); font-size:var(--fs-2);
}
.blog-filter-note b{ color:var(--milk); font-weight:500; }
.blog-filter-note a{ color:var(--glass-light); margin-left:var(--sp-2); }

.blog-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);
}

.post-card{
  border:1px solid var(--line); border-radius:16px;
  background:var(--panel);
  overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.post-card:hover{
  transform:translateY(-4px);
  border-color:var(--glass-edge);
  box-shadow:0 18px 40px rgba(0,0,0,.28);
}
.post-card__link{ display:block; color:inherit; }

.post-card__cover{
  position:relative; aspect-ratio:16/10;
  background:linear-gradient(135deg, rgba(76,138,95,.14), rgba(0,0,0,0));
  color:var(--glass-light);
  overflow:hidden;
}
.post-card__cover.has-img{ background:var(--panel); }
.post-card__img{ display:block; width:100%; height:100%; object-fit:cover; }
.post-card__pattern{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.5;
}
.post-card__index{
  position:absolute; left:var(--sp-4); bottom:var(--sp-3);
  font-family:var(--font-display); font-size:56px; font-weight:800;
  line-height:.9; letter-spacing:-.04em; color:var(--milk); opacity:.18;
}

.post-card__body{ padding:var(--sp-5); }
.post-card__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  margin-bottom:var(--sp-3);
  color:var(--ash); font-size:var(--fs-1); letter-spacing:.08em; text-transform:uppercase;
}
.post-card__cat{ color:var(--glass-light); }
.post-card__title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(20px,1.7vw,24px); line-height:1.12; letter-spacing:-.02em;
  color:var(--milk);
}
.post-card__excerpt{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  margin-top:var(--sp-3); overflow:hidden;
  color:var(--ash); font-size:var(--fs-2); line-height:1.6;
}
.post-card__more{
  display:inline-flex; align-items:center; gap:var(--sp-2);
  margin-top:var(--sp-4);
  color:var(--glass-light); font-size:var(--fs-2);
}
.post-card:hover .post-card__more{ color:var(--milk); }

/* Кнопка «Показати більше» */
.blog-more-wrap{ display:flex; justify-content:center; margin-top:var(--sp-8); }
.blog-more-wrap[hidden]{ display:none !important; }
.blog-more{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-6);
  border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--milk);
  font-family:var(--font-body); font-size:var(--fs-2);
  cursor:pointer;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), opacity .2s var(--ease);
}
.blog-more:hover,
.blog-more:focus,
.blog-more:focus-visible,
.blog-more:active{
  background:rgba(76,138,95,.10) !important;
  border-color:var(--glass-edge) !important;
  color:var(--glass-light) !important;
  outline:none;
}
.blog-more.is-loading{ opacity:.55; cursor:wait; }
.blog-more__count{ color:var(--ash); font-size:var(--fs-1); }

.blog-empty{
  padding:var(--sp-10) 0;
  color:var(--ash); font-size:var(--fs-3); text-align:center;
}

/* ── Одинична стаття ─────────────────────────────────────────── */
.post-single{ position:relative; z-index:1; }
.post-single__article{ padding-bottom:var(--sp-10); }

.post-single__hero{
  max-width:960px; margin:0 auto;
  padding:150px clamp(var(--sp-4),4vw,56px) var(--sp-8);
}
.post-single__meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  margin-top:var(--sp-5);
  color:var(--ash); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase;
}
.post-single__cat{ color:var(--glass-light); }
.post-single__title{
  margin-top:var(--sp-4);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(38px,6vw,84px); line-height:1; letter-spacing:-.035em;
  color:var(--milk);
}
.post-single__lead{
  max-width:60ch; margin-top:var(--sp-5);
  color:var(--ash); font-size:clamp(var(--fs-3),1.5vw,var(--fs-4)); line-height:1.6;
}
.post-single__cover{
  max-width:960px; margin:var(--sp-8) auto 0;
  padding:0 clamp(var(--sp-4),4vw,56px);
}
.post-single__cover img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); border-radius:18px;
}
.post-single__body{
  max-width:760px; margin:0 auto;
  padding:var(--sp-9) clamp(var(--sp-4),4vw,56px);
}
.post-single__foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-4);
  max-width:760px; margin:0 auto;
  padding:var(--sp-6) clamp(var(--sp-4),4vw,56px) 0;
  border-top:1px solid var(--line);
}
.post-single__back{ color:var(--ash); font-size:var(--fs-2); }
.post-single__back:hover{ color:var(--glass-light); }
.post-single__tags{ display:flex; flex-wrap:wrap; gap:var(--sp-2); }
.post-single__tags span{
  padding:var(--sp-1) var(--sp-3);
  border:1px solid var(--line); border-radius:999px;
  color:var(--ash); font-size:var(--fs-1);
}

/* ── Тіло статті ─────────────────────────────────────────────── */
.post-body{ color:var(--milk); font-size:var(--fs-3); line-height:1.8; }
.post-body > *{ max-width:100%; }
.post-body p{ margin:0 0 var(--sp-5); }
.post-body h2,
.post-body h3,
.post-body h4{
  margin:var(--sp-9) 0 var(--sp-4);
  font-family:var(--font-display); font-weight:800; line-height:1.1; letter-spacing:-.02em;
}
.post-body h2{ font-size:clamp(26px,3vw,38px); }
.post-body h3{ font-size:clamp(22px,2.2vw,28px); }
.post-body h4{ font-size:var(--fs-4); }
.post-body ul,
.post-body ol{ margin:0 0 var(--sp-5); padding-left:var(--sp-6); }
.post-body ul{ list-style:disc; }
.post-body ol{ list-style:decimal; }
.post-body li{ margin-bottom:var(--sp-2); }
.post-body a{ color:var(--glass-light); text-decoration:underline; text-underline-offset:3px; }
.post-body a:hover{ color:var(--milk); }
.post-body blockquote{
  margin:var(--sp-7) 0;
  padding:var(--sp-4) 0 var(--sp-4) var(--sp-5);
  border-left:2px solid var(--glass);
  color:var(--ash);
  font-family:var(--font-serif); font-style:italic; font-size:var(--fs-4); line-height:1.5;
}
.post-body blockquote p:last-child{ margin-bottom:0; }
.post-body figure{ margin:var(--sp-7) 0; }
.post-body img{ max-width:100%; height:auto; border-radius:14px; }
.post-body figcaption{ margin-top:var(--sp-2); color:var(--ash); font-size:var(--fs-1); text-align:center; }
.post-body hr{ margin:var(--sp-8) 0; border:0; border-top:1px solid var(--line); }
.post-body code{
  padding:2px 6px; border-radius:4px;
  background:var(--panel); color:var(--milk); font-size:.9em;
}
.post-body pre{
  margin:var(--sp-6) 0; padding:var(--sp-4);
  border:1px solid var(--line); border-radius:12px;
  background:var(--panel); overflow:auto;
}
.post-body pre code{ padding:0; background:none; }
.post-body table{ width:100%; margin:var(--sp-6) 0; border-collapse:collapse; font-size:var(--fs-2); }
.post-body th,
.post-body td{ padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--line); text-align:left; }
.post-body th{ color:var(--milk); font-weight:600; }
.post-body .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center;
  padding:var(--sp-3) var(--sp-6);
  border:1px solid var(--glass-edge); border-radius:999px;
  background:linear-gradient(180deg,#4c8a5f,#2e5d3e); color:#f2f0eb;
  font-size:var(--fs-2); text-decoration:none;
}
.post-body .wp-block-quote{ margin:var(--sp-7) 0; padding-left:var(--sp-5); border-left:2px solid var(--glass); }
.post-body .wp-block-image{ margin:var(--sp-7) 0; }
.post-body .alignwide{ width:min(100%,1000px); margin-left:50%; transform:translateX(-50%); }
.post-body .alignfull{ width:100vw; max-width:100vw; margin-left:50%; transform:translateX(-50%); }
.post-body .alignfull img{ border-radius:0; }
.post-body iframe{ max-width:100%; }
.post-body .wp-block-embed{ margin:var(--sp-6) 0; }
.post-body .wp-block-embed iframe{ width:100%; }

/* ── Схожі статті ────────────────────────────────────────────── */
.post-related{
  max-width:1200px; margin:0 auto;
  padding:var(--sp-10) clamp(var(--sp-4),4vw,56px);
  border-top:1px solid var(--line);
}
.post-related__heading{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(24px,2.6vw,36px); letter-spacing:-.02em;
}
.post-related__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);
  margin-top:var(--sp-6);
}
.post-related__item{
  display:block; padding-top:var(--sp-4);
  border-top:1px solid var(--line);
}
.post-related__cat{
  display:block;
  color:var(--glass-light); font-size:var(--fs-1); letter-spacing:.1em; text-transform:uppercase;
}
.post-related__title{
  display:block; margin-top:var(--sp-2);
  font-family:var(--font-display); font-weight:800;
  font-size:var(--fs-4); line-height:1.2; letter-spacing:-.02em;
  color:var(--milk);
}
.post-related__date{ display:block; margin-top:var(--sp-2); color:var(--ash); font-size:var(--fs-1); }
.post-related__item:hover .post-related__title{ color:var(--glass-light); }

/* ── Світла тема ─────────────────────────────────────────────── */
[data-theme="light"] .post-card{
  background:rgba(51,50,47,.03);
  border-color:rgba(51,50,47,.14);
}
[data-theme="light"] .post-card:hover{ box-shadow:0 18px 40px rgba(0,0,0,.12); }
[data-theme="light"] .post-card__cover{
  background:linear-gradient(135deg, rgba(76,138,95,.10), rgba(51,50,47,.02));
  color:var(--glass-deep);
}
[data-theme="light"] .post-card__cat,
[data-theme="light"] .post-card__more,
[data-theme="light"] .post-single__cat,
[data-theme="light"] .post-related__cat{ color:var(--glass-deep); }
[data-theme="light"] .blog-filter.is-active{
  background:rgba(76,138,95,.12);
  border-color:rgba(46,93,62,.45);
  color:var(--milk);
}
[data-theme="light"] .blog-filter.is-active .blog-filter__count{ color:var(--glass-deep); }
[data-theme="light"] .blog-more{ border-color:rgba(51,50,47,.28); }
[data-theme="light"] .blog-more:hover,
[data-theme="light"] .blog-more:focus,
[data-theme="light"] .blog-more:focus-visible{
  background:rgba(76,138,95,.12) !important;
  border-color:rgba(46,93,62,.5) !important;
  color:var(--glass-deep) !important;
}
[data-theme="light"] .post-body a{ color:var(--glass-deep); }
[data-theme="light"] .post-body a:hover{ color:var(--milk); }
[data-theme="light"] .post-body code,
[data-theme="light"] .post-body pre{ background:#dedad2; }

/* ── Адаптив ─────────────────────────────────────────────────── */
@media (max-width:1100px){
  .blog-grid{ grid-template-columns:repeat(2,1fr); }
  .post-related__grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .blog-grid{ grid-template-columns:1fr; }
  .post-related__grid{ grid-template-columns:1fr; }
  .blog-filters{ margin-bottom:var(--sp-7); }
  .post-single__hero{ padding-top:120px; }
  .post-single__body{ padding-top:var(--sp-7); }
  .post-single__title{ font-size:clamp(34px,10vw,56px); }
}
@media (max-width:600px){
  .post-single__hero{ padding-top:104px; }
  .blog-filter{ padding:var(--sp-2) var(--sp-3); font-size:var(--fs-1); }
  .post-single .sd-breadcrumb .cur,
  .post-single .sd-breadcrumb .sep:nth-last-child(2){ display:none; }
}

/* Хлібні крихти (спільний клас із service.css, але блог не вантажить його) */
.sd-breadcrumb{
  display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;
  font-size:var(--fs-1); letter-spacing:.14em; text-transform:uppercase;
}
.sd-breadcrumb a{ color:var(--ash); transition:color .25s var(--ease); }
.sd-breadcrumb a:hover{ color:var(--milk); }
.sd-breadcrumb .sep{ color:var(--ash); opacity:.5; }
.sd-breadcrumb .cur{ color:var(--glass-light); }