/* ══════════════════════════════════════════════════════════════════════
   Оформлення статей. Підключається ПІСЛЯ case/case.css і тільки на
   сторінках розділу /statti/.

   Навіщо окремий файл, а не дописати в case.css. Від case.css залежить
   двадцять одна готова сторінка — кейси й послуги. Довгий текст потребує
   своєї типографіки (абзаци, підзаголовки всередині тексту, списки), і
   класи під неї в кейсах не потрібні жодного разу. Окремий файл означає,
   що правка в статтях фізично не може зачепити роботи.

   Кольори й відступи не свої — беруться зі змінних case.css.
   ══════════════════════════════════════════════════════════════════════ */

/* ── шапка статті ───────────────────────────────────────────────── */

.art-meta{margin-top:18px;display:flex;gap:14px;flex-wrap:wrap;
  font-size:13.5px;color:var(--dimmer)}
.art-meta time{color:var(--dim)}

/* ── саме тіло тексту ───────────────────────────────────────────────
   Ширина 68 символів — не примха: рядок, довший за приблизно сімдесят
   знаків, око губить на зворотному ході, і людина перечитує його двічі.
   Решта сайту тримається 56–62, у суцільному тексті можна трохи ширше. */

.art{max-width:68ch}
.art > * + *{margin-top:1.15em}

.art p{font-size:clamp(15.5px,1.5vw,17.5px);line-height:1.75;color:var(--dim)}
.art p b,.art li b{color:#e5f2eb;font-weight:600}
.art a{color:var(--mint);text-decoration:none;
  border-bottom:1px solid var(--line-hi);transition:border-color .25s,color .25s}
.art a:hover{color:#fff;border-bottom-color:var(--mint)}

.art h2{margin-top:clamp(36px,4.4vw,58px);font-size:clamp(21px,2.4vw,28px);
  line-height:1.28;letter-spacing:-.01em;color:#eaf4ef}
.art h3{margin-top:clamp(26px,3vw,36px);font-size:clamp(17px,1.75vw,20px);
  line-height:1.35;color:#dceee5}

.art ul,.art ol{padding-left:0;list-style:none}
.art li{position:relative;padding-left:26px;margin-top:.7em;
  font-size:clamp(15px,1.45vw,17px);line-height:1.7;color:var(--dim)}
.art ul > li::before{content:"";position:absolute;left:6px;top:.72em;
  width:6px;height:6px;border-radius:50%;background:var(--green-lt);opacity:.75}
.art ol{counter-reset:art}
.art ol > li{counter-increment:art}
.art ol > li::before{content:counter(art);position:absolute;left:0;top:0;
  font-size:13px;font-weight:700;color:var(--green-lt);opacity:.9}

/* Врізка — коротка думка, заради якої розділ і написано. Не цитата:
   лапок не ставимо, це наші слова, а не чужі. */
.art .note{margin-top:clamp(26px,3vw,34px);padding:20px 22px;
  border-left:2px solid var(--green);border-radius:0 var(--r) var(--r) 0;
  background:var(--card);font-size:clamp(15.5px,1.5vw,17px);
  line-height:1.65;color:#dceee5}

/* Посилання на нашу роботу або послугу прямо в тексті. Виглядає як
   картка, щоб не загубитись між абзацами. */
.art .go{display:block;margin-top:clamp(26px,3vw,34px);padding:18px 22px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  text-decoration:none;transition:border-color .3s,transform .3s}
.art .go:hover{border-color:var(--line-hi);transform:translateY(-2px)}
.art .go b{display:block;color:#eaf4ef;font-size:16px;font-weight:700}
.art .go span{display:block;margin-top:5px;font-size:14.5px;line-height:1.6;
  color:var(--dim)}
.art .go i{font-style:normal;color:var(--green-lt)}

/* ── список статей ──────────────────────────────────────────────── */

.arts{display:grid;gap:16px;margin-top:clamp(26px,3vw,36px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.art-card{display:flex;flex-direction:column;padding:24px;
  border-radius:var(--r);border:1px solid var(--line);background:var(--card);
  text-decoration:none;transition:border-color .35s,transform .45s}
.art-card:hover{border-color:var(--line-hi);transform:translateY(-3px)}
.art-card .k{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dimmer)}
.art-card h3{margin-top:12px;font-size:19px;line-height:1.32;color:#eaf4ef}
.art-card p{margin-top:10px;font-size:14.5px;line-height:1.62;color:var(--dim)}
.art-card .go-t{margin-top:auto;padding-top:16px;font-size:14px;font-weight:700;
  color:var(--green-lt)}

/* На вузькому екрані врізка й картка не мають тиснути текст до країв. */
@media (max-width:560px){
  .art .note,.art .go{padding:16px 17px}
  .art-card{padding:20px}
}