/* Раздел /blog — только то, чего нет в assets/styles.css */

/* styles.css задаёт section{padding:96px 0} по элементу — гасим для блоков внутри статьи */
.faq, .related{padding:0;}

.blog-hero{
  background:
    radial-gradient(ellipse at 78% 12%, rgba(184,148,79,.22), transparent 55%),
    linear-gradient(180deg,#2a201d 0%, var(--ink) 100%);
  color:var(--cream);
  padding:128px 0 54px;
}
.blog-wrap{max-width:720px; margin:0 auto; padding-left:24px; padding-right:24px;}
.blog-wrap--wide{max-width:1120px;}

.crumbs{font-size:12.5px; letter-spacing:.3px; color:rgba(248,243,234,.62); margin-bottom:18px;}
.crumbs a{color:#e9c98f;}
.crumbs a:hover{text-decoration:underline;}
.crumbs i{font-style:normal; padding:0 7px; opacity:.45;}

.blog-hero h1{font-family:'Bodoni Moda',serif; font-weight:500; font-size:clamp(26px,4.2vw,40px); line-height:1.18; max-width:640px;}
.blog-hero .lede{margin-top:16px; font-size:16.5px; color:rgba(248,243,234,.72); max-width:600px;}
.post-meta{margin-top:20px; font-size:12.5px; color:rgba(248,243,234,.62); letter-spacing:.3px;}
.post-meta i{font-style:normal; padding:0 8px; opacity:.45;}

/* ---- Тело статьи ---- */
/* только вертикальные отступы: шорткат здесь обнулял горизонтальный паддинг .blog-wrap,
   потому что <main> несёт оба класса сразу — .blog-wrap .post */
.post{padding-top:44px; padding-bottom:24px;}
.post p, .post li{font-size:17px; line-height:1.75; color:#3f3832;}
.post p{margin-bottom:16px;}
.post p.lede-p{font-size:18.5px; line-height:1.7; color:#2b2521;}
.post h2{font-family:'Bodoni Moda',serif; font-weight:500; font-size:clamp(22px,3vw,28px); color:var(--ink); margin:44px 0 14px;}
/* шапка position:fixed — любой якорь, а не только h2, должен вставать под неё */
.post [id]{scroll-margin-top:92px;}
.post h3{font-family:'Bodoni Moda',serif; font-weight:500; font-size:20px; color:var(--ink); margin:28px 0 8px;}
.post ul, .post ol{padding-left:22px; margin-bottom:20px;}
.post li{margin-bottom:8px;}
.post strong{font-weight:600; color:var(--ink);}
.post a{color:var(--wine); text-decoration:underline; text-underline-offset:2px;}
/* .post a выше красит и подчёркивает ЛЮБУЮ ссылку внутри статьи, включая кнопки CTA
   и карточки «Читайте также». Возвращаем им их собственные стили из assets/styles.css. */
.post a.btn-solid{color:var(--ink); text-decoration:none;}
.post a.btn-line{color:var(--cream); text-decoration:none;}
.post a.rel-card{color:var(--ink); text-decoration:none;}

.toc{background:#fff; border:1px solid #e7dccb; border-radius:8px; padding:20px 24px; margin:6px 0 34px;}
.toc b{display:block; font-size:12.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--wine); font-weight:600; margin-bottom:12px;}
.toc ol{margin:0; padding-left:20px;}
.toc li{font-size:15.5px; margin-bottom:7px; color:#4a423b;}
.toc a{color:#4a423b; text-decoration:none;}
.toc a:hover{color:var(--wine); text-decoration:underline;}

.table-wrap{overflow-x:auto; margin:24px 0 28px; -webkit-overflow-scrolling:touch;}
table.cmp{width:100%; min-width:580px; border-collapse:collapse; background:#fff; border:1px solid #e7dccb; border-radius:8px;}
table.cmp th, table.cmp td{padding:13px 15px; border-bottom:1px solid #ece3d3; text-align:left; vertical-align:top; font-size:17px; line-height:1.6; color:#3f3832;}
table.cmp th{background:var(--stone); font-weight:600; letter-spacing:.2px; color:var(--ink);}
table.cmp tr:last-child td{border-bottom:none;}

.note{background:var(--stone); border-left:3px solid var(--gold); padding:16px 20px; margin:24px 0; border-radius:0 6px 6px 0;}
.note p{margin:0; font-size:15.5px; color:#4a423b;}

/* ---- FAQ ---- */
.faq details{background:#fff; border:1px solid #e7dccb; border-radius:8px; margin-bottom:10px;}
.faq summary{cursor:pointer; list-style:none; padding:15px 46px 15px 20px; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; position:absolute; right:20px; top:13px; font-size:20px; color:var(--wine); line-height:1;}
.faq details[open] summary::after{content:'–';}
.faq summary h3{margin:0; font-size:17.5px; display:inline;}
.faq .answer{padding:0 20px 4px;}
.faq .answer p{font-size:17px;}

/* ---- CTA ---- */
.cta-card{background:var(--wine-dark); color:#fff; border-radius:10px; padding:32px; margin:44px 0 8px;}
.cta-card h2{font-family:'Bodoni Moda',serif; font-weight:500; font-size:26px; color:#fff; margin:0 0 10px;}
.cta-card p{color:rgba(248,243,234,.75); font-size:16px; margin-bottom:14px;}
.cta-facts{list-style:none; padding:0; margin:0 0 22px;}
.cta-facts li{font-size:15.5px; color:rgba(248,243,234,.85); margin-bottom:7px; padding-left:0;}
.cta-facts a{color:#e9c98f; text-decoration:none;}
.cta-facts a:hover{text-decoration:underline;}
.cta-btns{display:flex; gap:12px; flex-wrap:wrap;}

/* ---- Карточки статей ---- */
.rel-grid, .post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.rel-card, .post-card{display:block; background:#fff; border:1px solid #e7dccb; border-radius:8px; padding:20px; transition:transform .25s ease, box-shadow .25s ease;}
.rel-card:hover, .post-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(29,24,21,.08);}
.rel-card .cat, .post-card .cat{font-size:11px; text-transform:uppercase; letter-spacing:1.2px; color:var(--wine); font-weight:600;}
.rel-card b, .post-card b{display:block; font-family:'Bodoni Moda',serif; font-weight:500; font-size:17px; line-height:1.3; color:var(--ink); margin:9px 0 8px;}
.rel-card span, .post-card .excerpt{display:block; font-size:14px; line-height:1.6; color:#6a6158;}
.post-card .dates{display:block; margin-top:12px; font-size:12.5px; color:#8a8074;}
.related{margin:46px 0 0;}
.related h2{font-family:'Bodoni Moda',serif; font-weight:500; font-size:24px; color:var(--ink); margin-bottom:20px;}

/* ---- Витрина: фильтр категорий без JS ---- */
.blog-list{padding-top:56px; padding-bottom:96px;}
.cat-radio{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.cat-filter{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:30px;}
.cat-filter label{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border:1px solid rgba(29,24,21,.22); border-radius:30px; font-size:13px; font-weight:500; color:#4a423b; cursor:pointer; user-select:none;}
.cat-filter label:hover{border-color:var(--wine);}
#cat-all:checked   ~ .cat-filter label[for="cat-all"],
#cat-nails:checked ~ .cat-filter label[for="cat-nails"],
#cat-hair:checked  ~ .cat-filter label[for="cat-hair"],
#cat-brows:checked ~ .cat-filter label[for="cat-brows"],
#cat-podo:checked  ~ .cat-filter label[for="cat-podo"],
#cat-useful:checked ~ .cat-filter label[for="cat-useful"]{background:var(--wine); border-color:var(--wine); color:#fff;}
#cat-nails:checked  ~ .post-grid .post-card:not(.c-nails),
#cat-hair:checked   ~ .post-grid .post-card:not(.c-hair),
#cat-brows:checked  ~ .post-grid .post-card:not(.c-brows),
#cat-podo:checked   ~ .post-grid .post-card:not(.c-podo),
#cat-useful:checked ~ .post-grid .post-card:not(.c-useful){display:none;}

/* ---- Переключатель языков: на страницах блога это ссылки, а не кнопки ----
   assets/styles.css стилизует .lang-toggle button, поэтому вариант с <a> описываем здесь.
   Активный язык помечен aria-current, а не классом .active: класс переставляет site.js
   по сохранённому в localStorage выбору, и он не обязан совпадать с языком страницы. */
.lang-toggle a.lang-btn{display:inline-flex; align-items:center; justify-content:center; color:var(--cream); padding:6px 10px; font-weight:700; opacity:.6; letter-spacing:.4px; white-space:nowrap; text-decoration:none;}
.lang-toggle a.lang-btn:hover{opacity:.9;}
.lang-toggle a.lang-btn[aria-current="page"]{background:#e9c98f; color:var(--ink); opacity:1;}

.empty-note{font-size:16px; color:#6a6158; padding:8px 0 4px;}

/* ---- Пагинация витрины ---- */
.pagination{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:34px;}
.page-link{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:0 14px; border:1px solid rgba(29,24,21,.22); border-radius:26px; font-size:14px; font-weight:500; color:#4a423b;}
a.page-link:hover{border-color:var(--wine); color:var(--wine);}
.page-link.is-current{background:var(--wine); border-color:var(--wine); color:#fff;}

@media(max-width:480px){
  .blog-wrap{padding-left:20px; padding-right:20px;}
}

@media(max-width:820px){
  .blog-hero{padding:104px 0 42px;}
  /* тач-таргеты не меньше 44×44; правила здесь, а не в assets/styles.css, чтобы не трогать общий стиль */
  .toc a{display:flex; align-items:center; min-height:44px;}
  .toc li{margin-bottom:0;}
  .lang-toggle button, .lang-toggle a.lang-btn{min-height:44px; min-width:44px;}
  .burger{padding:10px 12px; margin:-10px -12px;}
  .rel-grid, .post-grid{grid-template-columns:1fr;}
  .post p, .post li{font-size:17px;}
  .cta-card{padding:24px;}
  .cta-btns .btn-solid, .cta-btns .btn-line{width:100%; text-align:center;}
}