/* ============================================================
   Візуальні блоки статей (/statti/*)
   Підключати після style-main.css. Графіт основний, олива акцентом.
   ============================================================ */

:root{
  --olive:#8A9070;
  --olive-d:#5B6146;
  --olive-wash:#ECEDDF;
  --olive-line:#DDDEC8;
  --graphite:#2B2C30;
}

/* ---------- підпис до будь-якого візуалу ---------- */
.artbody .vis{margin:40px 0}
.artbody .vis-cap{margin-top:12px;font-size:13.5px;line-height:1.5;color:var(--ink-faint)}

/* ---------- три картки поруч (стани, типи падінь) ---------- */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:700px){.cards3{grid-template-columns:1fr}}
.c3{background:var(--paper);border:1px solid var(--line-l);border-radius:18px;padding:20px 20px 22px}
.c3 .tag{display:inline-block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-faint)}
.c3 h4{margin:10px 0 8px;font-size:18px;line-height:1.3;letter-spacing:-.015em;color:var(--ink)}
.c3 p{font-size:14.5px !important;line-height:1.55 !important;color:var(--ink-soft) !important}
.c3.is-key{background:var(--graphite);border-color:var(--graphite)}
.c3.is-key .tag{color:#C9CBB4}
.c3.is-key h4{color:#fff}
.c3.is-key p{color:#C7C7CD !important}

/* ---------- ключова фраза на графіті ---------- */
.artbody .keyline{margin:44px 0;padding:34px 32px;background:var(--graphite);border-radius:22px;
  position:relative}
.artbody .keyline::before{content:"";position:absolute;left:32px;top:0;width:44px;height:3px;
  background:var(--olive);border-radius:0 0 3px 3px}
.artbody .keyline p{font-size:clamp(20px,2.4vw,24px);line-height:1.45;color:#fff;
  letter-spacing:-.02em;font-weight:500}

/* ---------- оливкова вправа / шаблон ---------- */
.artbody .try{margin:36px 0;padding:26px 28px;background:var(--olive-wash);
  border:1px solid var(--olive-line);border-radius:22px}
.artbody .try .try-h{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--olive-d);font-weight:600}
.artbody .try > * + *{margin-top:12px}
.artbody .try p,.artbody .try li{color:#33352B}
.artbody .try ul li::before{background:var(--olive-d)}
.artbody .try ol li::before{color:var(--olive-d)}

/* ---------- два стовпчики для порівняння ---------- */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:620px){.compare{grid-template-columns:1fr}}
.cmp{border-radius:18px;padding:22px}
.cmp h4{font-size:16px;margin-bottom:12px;letter-spacing:-.01em}
.cmp ul{gap:8px !important}
.cmp li{font-size:15px !important}
.cmp-a{background:var(--paper);border:1px solid var(--line-l)}
.cmp-b{background:var(--olive-wash);border:1px solid var(--olive-line)}
.cmp-b h4{color:var(--olive-d)}
.cmp-b li::before{background:var(--olive-d) !important}

/* ---------- чекліст ---------- */
.checks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px){.checks{grid-template-columns:1fr}}
.chk{display:flex;gap:12px;align-items:flex-start;background:var(--paper);
  border:1px solid var(--line-l);border-radius:14px;padding:14px 16px;cursor:pointer;
  transition:.15s ease}
.chk:hover{border-color:#C9C9C2}
.chk input{appearance:none;flex:0 0 18px;width:18px;height:18px;margin-top:2px;
  border:1.5px solid #B9B9B2;border-radius:5px;display:grid;place-content:center;cursor:pointer}
.chk input:checked{background:var(--olive-d);border-color:var(--olive-d)}
.chk input:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;
  border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.chk input:focus-visible{outline:2px solid var(--olive-d);outline-offset:2px}
.chk span{font-size:15px;line-height:1.45;color:var(--ink-soft)}
.chk b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.chk:has(input:checked){border-color:var(--olive);background:#F6F7EE}

/* ---------- кроки (кола трансформації) ---------- */
.steps{display:grid;gap:12px;counter-reset:st}
.stp{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;
  background:var(--paper);border:1px solid var(--line-l);border-radius:18px;padding:20px}
.stp .n{width:52px;height:52px;border-radius:50%;display:grid;place-content:center;
  background:var(--olive-wash);color:var(--olive-d);font-weight:600;font-size:18px}
.stp.is-key .n{background:var(--graphite);color:#fff}
.stp h4{font-size:17px;margin:4px 0 6px;letter-spacing:-.01em}
.stp p{font-size:15px !important;line-height:1.55 !important;color:var(--ink-soft) !important}

/* ---------- svg-графіки ---------- */
.artbody svg.chart{display:block;width:100%;height:auto;background:var(--paper);
  border:1px solid var(--line-l);border-radius:22px}

/* ---------- читати далі ---------- */
.readnext{margin-top:48px;display:grid;gap:10px}
.readnext .rn-h{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.artbody .readnext a{display:flex;justify-content:space-between;gap:16px;align-items:center;
  text-decoration:none;background:var(--paper);border:1px solid var(--line-l);
  border-radius:16px;padding:18px 20px;font-weight:500;color:var(--ink);transition:.15s ease}
.artbody .readnext a:hover{border-color:var(--olive);transform:translateY(-1px)}
.readnext a::after{content:"→";color:var(--olive-d)}

/* ---------- світла шапка статті з головним фото ---------- */
.topbar.on-light .logo{color:var(--ink)}
.topbar.on-light .topnav a{color:var(--ink-soft)}
.topbar.on-light .topnav a:hover{color:var(--ink)}
.topbar.on-light .btn-ghost{background:transparent;border-color:var(--line-l);color:var(--ink)}
.topbar.on-light .btn-ghost:hover{background:rgba(0,0,0,.05)}
.topbar.on-light .btn-light{background:var(--graphite);border-color:var(--graphite);color:#fff}
.topbar.on-light .btn-light:hover{background:#000;border-color:#000}

.art-hero-photo{background:var(--cream);color:var(--ink);padding:124px 0 0}
.art-hero-photo .wrap{max-width:720px}
.art-hero-photo .crumbs{color:var(--ink-faint)}
.art-hero-photo .crumbs a:hover{color:var(--ink)}
.art-hero-photo h1{margin-top:20px;font-size:clamp(30px,4.4vw,50px);max-width:20ch}
.art-hero-photo .lede{color:var(--ink-soft);margin-top:20px;font-size:clamp(16px,1.3vw,18.5px);max-width:58ch}
.art-hero-photo .art-meta{border-top-color:var(--line-l);color:var(--ink-faint)}
.art-cover{margin-top:36px}
.art-cover img{display:block;width:100%;height:auto;border-radius:22px;
  border:1px solid var(--line-l);box-shadow:0 24px 60px -32px rgba(20,20,24,.35)}
.art-hero-photo + .sect{padding-top:56px}

/* ---------- ілюстрація в тексті ---------- */
.artbody .ill img{display:block;width:100%;height:auto;border-radius:20px;border:1px solid var(--line-l)}

/* ---------- обкладинка в картці каталогу ---------- */
.artcard .cover{display:block;margin:-26px -26px 22px;aspect-ratio:16/10;overflow:hidden;
  border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:1px solid var(--line-l);background:var(--shell)}
.artcard .cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:left top;
  transition:transform .4s ease}
.artcard:hover .cover img{transform:scale(1.03)}

/* ---------- блок «Про авторку» внизу статті ---------- */
.author{margin-top:64px;display:grid;grid-template-columns:240px 1fr;gap:0;overflow:hidden;
  background:var(--graphite);border-radius:26px;color:#fff;position:relative}
.author::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--olive)}
.author .a-photo{position:relative;min-height:100%}
.author .a-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.author .a-body{padding:34px 34px 32px}
.artbody .author .a-eyebrow{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:#C9CBB4;font-weight:600}
.artbody .author .a-name{margin-top:10px;font-size:26px;line-height:1.2;letter-spacing:-.02em;font-weight:600;color:#fff}
.artbody .author .a-role{margin-top:6px;font-size:14.5px;line-height:1.5;color:#B8B8BF}
.artbody .author .a-text{margin-top:16px;font-size:15.5px;line-height:1.65;color:#DADADF}
.author .a-facts{margin-top:20px;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 26px;
  padding:16px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12)}
.author .a-facts b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;color:#fff}
.author .a-facts span{display:block;margin-top:4px;font-size:12.5px;line-height:1.35;color:#A6A6AE}
.author .a-cta{margin-top:22px;display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.artbody .author .a-cta .btn{background:#fff;color:var(--graphite);border-color:#fff;text-decoration:none}
.artbody .author .a-cta .btn:hover{background:var(--olive-wash);border-color:var(--olive-wash)}
.artbody .author .a-cta .a-link{font-size:14.5px;color:#C9CBB4;text-decoration:underline;text-underline-offset:3px}
.artbody .author .a-cta .a-link:hover{color:#fff}
.artbody .author .a-note{margin-top:12px;font-size:13px;line-height:1.5;color:#8F8F98}
@media(max-width:680px){
  .author{grid-template-columns:minmax(0,1fr)}
  .author .a-body{min-width:0}
  .artbody .author .a-cta .btn{width:100%;white-space:normal;text-align:center;justify-content:center}
  .author .a-photo{aspect-ratio:4/3}
  .author .a-photo img{object-position:center 18%}
  .author .a-body{padding:26px 22px 26px}
  .author .a-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px}
}

/* кнопка меню на світлій шапці статті */
.topbar.on-light .burger{background:transparent;border-color:var(--line-l)}
.topbar.on-light .burger i,.topbar.on-light .burger i::before,.topbar.on-light .burger i::after{background:var(--ink)}