/* ==========================================================================
   articles.css — Editorial article body for it-format.com.ua
   Підключати ПІСЛЯ style.css і copybtn.css.
   Скоуп: усе всередині .cont_in (тіло статті).
   Виключення: .clients-only-tag — глобально, бо в short_story.
   ==========================================================================
   Залежить від токенів V03 у tokens.css:
     --color-paper, --color-paper-raised, --color-ink, --color-ink-soft,
     --color-rule, --color-accent, --color-accent-ink,
     --font-serif, --font-sans, --font-mono,
     --space-1 ... --space-12
   Якщо якогось токена нема — див. tokens.additions.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. READING WIDTH + BASE RHYTHM
   .cont_in вже існує. Тут задаємо ширину тексту і базовий ритм.
   -------------------------------------------------------------------------- */
.cont_in {
  --measure: 68ch;             /* комфортна ширина читання */
  --lh-body: 1.65;
  --lh-tight: 1.25;

  max-width: var(--measure);
  margin-inline: auto;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: clamp(16px, 1rem + 0.15vw, 18px);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "onum", "liga";
  hanging-punctuation: first last;
}

/* Елементи, які повинні виходити за reading-width */
.cont_in > .article-hero,
.cont_in > .fig--full,
.cont_in > .t-data-wrap,
.cont_in > .toc--top {
  max-width: none;
}

/* --------------------------------------------------------------------------
   2. TYPE SCALE
   -------------------------------------------------------------------------- */
.cont_in h2,
.cont_in h3,
.cont_in h4 {
  font-family: var(--font-serif);
  color: var(--color-ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: var(--space-stack-h) 0 var(--space-3);
}

.cont_in h2 { font-size: clamp(26px, 1.5rem + 0.8vw, 34px); line-height: 1.2; }
.cont_in h3 { font-size: clamp(22px, 1.3rem + 0.4vw, 26px); line-height: 1.25; }
.cont_in h4 { font-size: clamp(18px, 1.1rem + 0.2vw, 20px); line-height: 1.3; }

/* h2 і h3, що йдуть першими у статті — без верхнього відступу */
.cont_in > h2:first-child,
.cont_in > h3:first-child { margin-top: 0; }

/* h3 має акцент-маркер ліворуч (editorial, опційно через клас) */
.cont_in h3.h--mark::before {
  content: "❋";
  color: var(--color-accent);
  margin-right: 0.4em;
  font-size: 0.9em;
  vertical-align: 0.05em;
}

/* Lead — перший абзац статті, опційно через клас */
.cont_in p.lead,
.cont_in > p:first-of-type:not(:has(+ .callout)):not([class]) {
  font-size: 1.18em;
  line-height: 1.55;
  color: var(--color-ink);
}
/* (друге правило — м'який «авто-lead» для першого параграфа; легко знімається класом) */

/* Body */
.cont_in p {
  margin: 0 0 var(--space-stack-p);
  text-wrap: pretty;
  hyphens: manual;            /* українська: словник браузера ламає; soft-hyphens у редакторі */
  font-feature-settings: "kern", "onum", "liga";
}

/* Лапки «» через шрифт (гарніші за стандартні в Source Serif) */
.cont_in q::before { content: "«"; }
.cont_in q::after  { content: "»"; }

/* Small / caption */
.cont_in small,
.cont_in .small,
.cont_in figcaption {
  font-size: 0.85em;
  color: var(--color-ink-soft);
  line-height: 1.45;
}

/* Strong / em */
.cont_in b,
.cont_in strong { font-weight: 600; color: var(--color-ink); }
.cont_in i,
.cont_in em { font-style: italic; }

/* Посилання */
.cont_in a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.cont_in a:hover {
  color: var(--color-accent);
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   3. LISTS
   -------------------------------------------------------------------------- */
.cont_in ul,
.cont_in ol {
  margin: 0 0 var(--space-stack-list);
  padding-left: 1.4em;
}
.cont_in li {
  margin: 0 0 var(--space-stack-li);
  hyphens: manual;
  text-wrap: pretty;
}
.cont_in li:last-child { margin-bottom: 0; }
.cont_in li > ul,
.cont_in li > ol { margin-top: var(--space-stack-li); margin-bottom: 0; }

/* ul: editorial dash маркер */
.cont_in > ul,
.cont_in > .lead + ul,
.cont_in p + ul,
.cont_in h2 + ul,
.cont_in h3 + ul,
.cont_in h4 + ul {
  list-style: none;
  padding-left: 0;
}
.cont_in > ul > li,
.cont_in p + ul > li,
.cont_in h2 + ul > li,
.cont_in h3 + ul > li,
.cont_in h4 + ul > li {
  position: relative;
  padding-left: 1.4em;
}
.cont_in > ul > li::before,
.cont_in p + ul > li::before,
.cont_in h2 + ul > li::before,
.cont_in h3 + ul > li::before,
.cont_in h4 + ul > li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-accent);
}
/* Списки всередині callouts і таблиць — НЕ переписуємо, у них свої правила */
.cont_in .callout ul > li::before,
.cont_in .callout ul { all: revert; }
.cont_in .callout ul > li { position: static; padding-left: 0; }
.cont_in .callout ul { padding-left: 1.4em; list-style: disc; }
.cont_in .callout-check ul,
.cont_in .callout-check ul > li::before { /* керується copybtn.css */ }

/* --------------------------------------------------------------------------
   4. STEP-LIST — нумеровані інструкції (1-2-3)
   Розмітка: <ol class="step-list"><li>…</li></ol>
   -------------------------------------------------------------------------- */
.cont_in .step-list {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: var(--space-6) 0;
}
.cont_in .step-list > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 var(--space-4) calc(var(--step-num-size) + var(--space-4));
  margin: 0 0 var(--space-3);
  border-bottom: 1px solid var(--color-rule);
  --step-num-size: 36px;
}
.cont_in .step-list > li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.cont_in .step-list > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: var(--step-num-size);
  height: var(--step-num-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-paper);
}

/* --------------------------------------------------------------------------
   5. FIGURE + CAPTION + 3 ВАРІАНТИ
   Розмітка:
     <figure class="fig">                  ← default (inline в reading width)
       <img src="..." alt="...">
       <figcaption>Підпис · джерело</figcaption>
     </figure>
     <figure class="fig fig--inset">       ← легкий inset (картка з рамкою)
     <figure class="fig fig--full">        ← виходить за reading width
   -------------------------------------------------------------------------- */
.cont_in .fig {
  margin: var(--space-6) 0;
  padding: 0;
}
.cont_in .fig img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-rule);
  background: var(--color-paper-raised);
  /* мʼякий друкарський тон — компенсує AI-glossy */
  filter: saturate(0.92) contrast(1.02);
}
.cont_in .fig figcaption {
  margin-top: var(--space-2);
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-ink-soft);
  line-height: 1.45;
}
.cont_in .fig figcaption b { color: var(--color-ink); font-weight: 600; }

.cont_in .fig--inset { padding: var(--space-3); background: var(--color-paper-raised); border: 1px solid var(--color-rule); }
.cont_in .fig--inset img { border: 0; background: transparent; }

.cont_in .fig--full {
  /* Розширюється за reading width до ширини .cont_in */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  padding-inline: var(--space-4);
}
@media (min-width: 1024px) {
  .cont_in .fig--full {
    /* у десктопі — обмежуємо до колонки контенту, не до viewport */
    margin-left: calc(-1 * var(--space-8));
    margin-right: calc(-1 * var(--space-8));
    padding-inline: 0;
  }
}

/* --------------------------------------------------------------------------
   6. ARTICLE HERO — перший блок у full_story
   Розмітка:
     <figure class="article-hero">
       <img src="..." alt="...">
       <figcaption>Підпис</figcaption>
     </figure>
   Aspect 16:9 за замовчуванням, через --hero-ratio можна 21:9 / 4:3.
   -------------------------------------------------------------------------- */
.cont_in .article-hero {
  --hero-ratio: 16/9;
  margin: 0 0 var(--space-6);
  padding: 0;
  /* виходить за reading width, як fig--full */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}
@media (min-width: 1024px) {
  .cont_in .article-hero {
    margin-left: calc(-1 * var(--space-8));
    margin-right: calc(-1 * var(--space-8));
  }
}
.cont_in .article-hero img {
  display: block;
  width: 100%;
  aspect-ratio: var(--hero-ratio);
  object-fit: cover;
  border: 1px solid var(--color-rule);
  filter: saturate(0.92) contrast(1.02);
}
.cont_in .article-hero figcaption {
  max-width: var(--measure);
  margin: var(--space-2) auto 0;
  padding-inline: var(--space-4);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-ink-soft);
}
.cont_in .article-hero[data-ratio="21:9"]  { --hero-ratio: 21/9; }
.cont_in .article-hero[data-ratio="4:3"]   { --hero-ratio: 4/3; }
.cont_in .article-hero[data-ratio="3:2"]   { --hero-ratio: 3/2; }

/* --------------------------------------------------------------------------
   7. SCREENSHOT PLACEHOLDER (тимчасовий, поки нема справжніх скрінів)
   Розмітка: <div class="screenshot-placeholder">[СКРІН N — опис]</div>
   -------------------------------------------------------------------------- */
.cont_in .screenshot-placeholder {
  margin: var(--space-5) 0;
  padding: var(--space-6) var(--space-4);
  background: var(--color-paper-raised);
  border: 1px dashed var(--color-rule-strong, var(--color-rule));
  color: var(--color-ink-soft);
  font-family: var(--font-sans);
  font-size: 13px;
  text-align: center;
  line-height: 1.5;
}
.cont_in .screenshot-placeholder::before {
  content: "❋";
  display: block;
  color: var(--color-accent);
  font-size: 18px;
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   8. TABLES — стандартний компонент
   Без класу: всі <table> в .cont_in отримують editorial-стиль.
   З класом .t-data — те саме явно. .t-data-wrap робить горизонтальний
   скрол на mobile.
   -------------------------------------------------------------------------- */
.cont_in .t-data-wrap {
  margin: var(--space-6) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-rule);
  background: var(--color-paper);
}

.cont_in table,
.cont_in .t-data {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-6) 0;
  font-family: var(--font-serif);
  font-size: 0.95em;
  line-height: 1.5;
  /* перебиваємо DLE inline атрибути border / cellpadding / cellspacing */
  border: 0 !important;
}
.cont_in .t-data-wrap > table,
.cont_in .t-data-wrap > .t-data {
  margin: 0;
  border: 0 !important;
}

.cont_in table thead,
.cont_in .t-data thead {
  /* перебиваємо DLE inline style="background:..." */
  background: var(--color-paper-raised) !important;
  border-bottom: 2px solid var(--color-ink) !important;
}
.cont_in table thead th,
.cont_in .t-data thead th {
  padding: var(--space-3) var(--space-4) !important;
  text-align: left !important;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
  border: 0 !important;
  vertical-align: bottom;
}

.cont_in table tbody tr,
.cont_in .t-data tbody tr {
  border-bottom: 1px solid var(--color-rule) !important;
}
.cont_in table tbody tr:last-child,
.cont_in .t-data tbody tr:last-child {
  border-bottom: 0 !important;
}
.cont_in table td,
.cont_in .t-data td {
  padding: var(--space-3) var(--space-4) !important;
  vertical-align: top;
  border: 0 !important;
}
.cont_in table td code,
.cont_in .t-data td code { white-space: nowrap; }

/* Numeric колонки — моноширинно і праворуч (через клас на td) */
.cont_in table td.num,
.cont_in .t-data td.num {
  font-family: var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Mobile: горизонтальний скрол через wrap, без zebra */
@media (max-width: 640px) {
  .cont_in table,
  .cont_in .t-data { font-size: 14px; }
  .cont_in table th,
  .cont_in .t-data th,
  .cont_in table td,
  .cont_in .t-data td { padding: var(--space-2) var(--space-3) !important; }
}

/* --------------------------------------------------------------------------
   9. BLOCKQUOTE / PULLQUOTE
   -------------------------------------------------------------------------- */
.cont_in blockquote {
  margin: var(--space-6) 0;
  padding: 0 0 0 var(--space-5);
  border-left: 2px solid var(--color-accent);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.15em;
  line-height: 1.5;
  color: var(--color-ink);
  text-wrap: pretty;
}
.cont_in blockquote p:last-child { margin-bottom: 0; }
.cont_in blockquote cite {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 13px;
  color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   10. INLINE BADGES
   -------------------------------------------------------------------------- */
.cont_in .badge {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-paper);
  background: var(--color-ink);
  border-radius: 2px;
  vertical-align: 0.1em;
}
.cont_in .badge--accent { background: var(--color-accent); color: var(--color-paper); }
.cont_in .badge--soft   { background: var(--color-paper-raised); color: var(--color-ink); border: 1px solid var(--color-rule); }

/* --------------------------------------------------------------------------
   11. HR
   -------------------------------------------------------------------------- */
.cont_in hr {
  border: 0;
  height: 1px;
  background: var(--color-rule);
  margin: var(--space-8) 0;
  position: relative;
  overflow: visible;
}
.cont_in hr::after {
  content: "❋";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-paper);
  padding: 0 var(--space-3);
  color: var(--color-accent);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   12. KEYBOARD HINT — <kbd> для шорткатів
   -------------------------------------------------------------------------- */
.cont_in kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--color-ink);
  background: var(--color-paper-raised);
  border: 1px solid var(--color-rule);
  border-bottom-width: 2px;
  border-radius: 3px;
  line-height: 1.2;
  vertical-align: 0.05em;
  white-space: nowrap;
}

/* ==========================================================================
   END articles.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   13. PLAIN <img> FALLBACK
   Для зображень, вставлених через DLE WYSIWYG (Froala) без <figure>.
   Перебивається специфічнішими .fig img / .article-hero img.
   Додано Claude Code 2026-04-28 (не входило в дизайн-пакет, бо edge-case).
   -------------------------------------------------------------------------- */
.cont_in img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--color-rule);
  background: var(--color-paper-raised);
  filter: saturate(0.92) contrast(1.02);
  margin: var(--space-5) auto;
  display: block;
}
/* Froala WYSIWYG-класи (DLE editor) */
.cont_in img.fr-dib { display: block; margin: var(--space-5) auto; }
.cont_in img.fr-dii { display: inline-block; margin: 0 var(--space-2); border-width: 0; }
.cont_in img.fr-fil { float: left;  margin: var(--space-3) var(--space-4) var(--space-3) 0; max-width: 50%; }
.cont_in img.fr-fir { float: right; margin: var(--space-3) 0 var(--space-3) var(--space-4); max-width: 50%; }