/* Article page — все, що не у chrome.css.
 * Взято з redesign/article.html і відкоректовано під WP-розмітку (the_content виходи).
 */

/* base font-size on body for articles є 16px (vs 15 на головній) — використовуємо 'Lora' для тіла */
body.single,
body.singular{
  font-size: 16px;
  line-height: 1.55;
}

/* reading progress (sits on top of fixed nav) */
.progress{
  position: fixed; left: 0; top: 0; right: 0; height: 3px; z-index: 100;
  background: transparent;
}
.progress .bar{
  height: 100%; background: var(--yellow);
  width: 0; transition: width .1s linear;
}

/* ============================ CRUMBS ============================ */
.crumbs{
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 13px; color: var(--muted);
}
.crumbs a:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep{ opacity: .5; }
.crumbs.crumbs-bottom{
  margin-top: 36px; padding: 22px 0 8px;
  border-top: 1px dashed var(--line);
}

/* ============================ ARTICLE HEADER ============================ */
.art-head{ padding: 26px 0 28px; max-width: 880px; }
.cat-line{
  display: flex; gap: 10px; align-items: center; margin-bottom: 18px; flex-wrap: wrap;
}
.tag-cat{
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: 6px 12px; border-radius: 999px; background: var(--red); color: white;
}
.tag-cat.soft{ background: var(--yellow); color: var(--ink); }
.tag-section{ font-size: 13px; color: var(--muted); font-weight: 600; }
.tag-section a:hover{ color: var(--ink); }
.cat-line .pub{
  font-size: 13px; color: var(--muted); font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.cat-line .pub::before{ content: "·"; color: var(--muted-2); }
.cat-line .pub b{
  font-weight: 700; color: var(--ink-2); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; margin-right: 4px;
}

h1.title{
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05; letter-spacing: -.02em;
  margin: 6px 0 18px;
  text-wrap: balance;
}
/* довгі заголовки (>65 символів) — стискаємо, щоб header не з'їдав весь перший екран */
h1.title.is-long{
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
}
h1.title.is-xlong{
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
}
h1.title .hl{ position: relative; display: inline-block; padding: 0 .08em; }
h1.title .hl::before{
  content: ""; position: absolute; left: 0; right: 0; bottom: .08em; height: .32em;
  background: var(--yellow); z-index: -1; border-radius: 6px; transform: skewX(-4deg);
}
.dek{
  font-family: 'Lora', serif; font-style: italic;
  font-size: clamp(18px, 2vw, 22px); color: var(--ink-2);
  max-width: 760px; line-height: 1.45;
  margin: 0 0 22px;
}

/* ============================ COMPACT BYLINE ============================ */
.byline{
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  padding: 2px 0 0;
}
.author{ display: flex; gap: 10px; align-items: center; }
.avatar{
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--yellow), var(--yellow-deep));
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Unbounded'; font-weight: 700; font-size: 11.5px; color: var(--ink);
  overflow: hidden;
}
.avatar img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.author .name{ font-weight: 700; font-size: 13px; line-height: 1.2; }
.author .role{ font-size: 11px; color: var(--muted); line-height: 1.25; margin-top: 2px; }
.byline .meta{
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 12px; color: var(--muted);
}
.byline .meta::before{
  content: ""; width: 3px; height: 3px; border-radius: 50%;
  background: var(--line); flex: none;
}
.byline .meta span{ display: inline-flex; align-items: center; gap: 6px; }
.byline .meta svg{ width: 13px; height: 13px; opacity: .7; }
.byline .share{ display: flex; align-items: center; margin-left: auto; }
.share-btn{
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 8px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong);
  font-family: 'Manrope'; font-weight: 700; font-size: 12.5px;
  transition: background .15s, border-color .15s, transform .15s;
}
.share-btn:hover{ background: var(--paper-2); border-color: var(--ink); transform: translateY(-1px); }
.share-btn svg{ width: 13px; height: 13px; }
@media (max-width: 600px){
  .share-btn{ width: 30px; padding: 0; justify-content: center; gap: 0; }
  .share-btn .lbl{ display: none; }
}

/* ============================ SHARE MODAL ============================ */
.share-modal{
  position: fixed; inset: 0; z-index: 95;
  display: none; align-items: flex-start; justify-content: center;
  padding: 24px 16px; overflow-y: auto;
}
.share-modal.open{ display: flex; }
.share-modal-scrim{
  position: fixed; inset: 0; z-index: 0;
  background: rgba(14,14,15,.45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  cursor: pointer;
}
.share-modal-card{
  position: relative; z-index: 1;
  width: 100%; max-width: 600px;
  background: var(--paper); border-radius: 18px;
  padding: 22px 24px;
  box-shadow: 0 30px 80px rgba(14,14,15,.3);
  margin: auto 0;
  animation: smPop .18s cubic-bezier(.2,.8,.3,1);
}
body[data-theme="dark"] .share-modal-card{ background: var(--paper-2); }
@keyframes smPop{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: translateY(0); } }
.sm-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.sm-head h3{
  font-family: 'Unbounded'; font-weight: 700; font-size: 20px;
  margin: 0; letter-spacing: -.01em;
}
.sm-close{
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--ink-2);
  font-size: 20px; line-height: 1;
}
.sm-close:hover{ background: var(--paper-2); color: var(--ink); }
.sm-hero{
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius: 12px; display: block; margin-bottom: 14px;
  background: var(--paper-2);
}
.sm-title{
  font-family: 'Unbounded'; font-weight: 700; font-size: 18px;
  line-height: 1.25; letter-spacing: -.01em;
  margin: 0 0 8px; color: var(--ink); text-wrap: balance;
}
.sm-meta{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--muted);
  margin-bottom: 14px;
}
.sm-meta .sm-dot{
  width: 5px; height: 5px; border-radius: 50%; background: var(--red);
}
.sm-divider{ height: 1px; background: var(--line); margin: 0 0 16px; }
.sm-label{
  font-family: 'Manrope'; font-weight: 700; font-size: 13px;
  color: var(--ink-2); margin-bottom: 12px;
}
.sm-socs{ display: flex; gap: 10px; margin-bottom: 4px; align-items: stretch; }
.sm-soc{
  width: 52px; height: 52px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper-2); color: var(--ink);
  transition: background .15s, color .15s, transform .15s;
  flex: 0 0 auto;
}
.sm-soc:hover{ background: var(--paper-3); transform: translateY(-1px); }
.sm-soc.fb:hover{ background: #1877f2; color: #fff; }
.sm-soc.tg:hover{ background: var(--tg); color: #fff; }
.sm-soc.x:hover{ background: var(--ink); color: var(--paper); }
.sm-soc svg{ width: 22px; height: 22px; }
.sm-copy{
  flex: 1 1 auto; min-width: 0; height: 52px; padding: 0 16px;
  background: var(--paper-2); color: var(--ink);
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Manrope'; font-weight: 600; font-size: 14px;
  transition: background .15s, color .15s;
}
.sm-copy:hover{ background: var(--paper-3); }
.sm-copy.done{ background: var(--ink); color: var(--paper); }
.sm-copy svg{ width: 18px; height: 18px; flex-shrink: 0; }
.sm-copy .lab{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px){
  .sm-copy .lab{ display: none; }
  .sm-copy{ flex: 1 1 auto; padding: 0; }
}

/* ============================ HERO IMAGE ============================ */
.hero-img{ margin: 18px 0 18px; }
.hero-img-media{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/8;
  background: linear-gradient(160deg, #1b1b1d 0%, #3a3a3f 100%);
}
.hero-img svg.illu{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero-img.hero-fallback.k1 .hero-img-media{ background: linear-gradient(135deg, var(--yellow) 0%, var(--yellow-deep) 100%); }
.hero-img.hero-fallback.k2 .hero-img-media{ background: linear-gradient(160deg, #1b1b1d 0%, #3a3a3f 100%); }
.hero-img.hero-fallback.k3 .hero-img-media{ background: linear-gradient(135deg, var(--red) 0%, var(--red-deep) 100%); }
.hero-img.hero-fallback.k4 .hero-img-media{ background: linear-gradient(135deg, #c7d7e8 0%, #8aa6c2 100%); }
.hero-img.hero-fallback.k5 .hero-img-media{ background: linear-gradient(135deg, #e8e0cb 0%, #c4b896 100%); }
.hero-img img.ph{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.hero-img .caption{
  display: block;
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 13px; font-family: 'Lora', serif; font-style: italic;
  line-height: 1.5;
}
.hero-img .caption b{
  font-style: normal; font-family: 'Manrope'; font-weight: 700; text-transform: uppercase;
  font-size: 11px; letter-spacing: .08em; color: var(--ink); margin-right: 8px;
}

/* ============================ ARTICLE BODY ============================ */
.article-layout{
  display: grid; grid-template-columns: 1fr 280px; gap: 56px;
  padding: 16px 0 36px;
}
@media (max-width: 980px){
  .article-layout{ grid-template-columns: 1fr; gap: 32px; }
  .art-side{ order: 2; position: static; }
}
.art-main{ max-width: 720px; min-width: 0; }
.art-main img{ max-width: 100%; height: auto; }
.art-main figure[style*="width"]{ max-width: 100% !important; }
.art-main .wp-caption{ max-width: 100% !important; }
.art-main .wp-caption img{ display: block; }
.art-main iframe,
.art-main video,
.art-main embed,
.art-main object{ max-width: 100%; }
.art-main pre,
.art-main code{ max-width: 100%; overflow-x: auto; }
.art-main table{ display: block; max-width: 100%; overflow-x: auto; }
.art-main p{
  font-family: 'Lora', serif; font-size: 19px; line-height: 1.65; margin: 0 0 22px; color: var(--ink-2);
}
.art-main p:first-of-type::first-letter{
  font-family: 'Unbounded', sans-serif; font-weight: 800;
  font-size: 74px; float: left;
  line-height: .82;
  padding: 5px 12px 2px 0;
  margin: 6px 0 -4px;
  color: var(--ink);
  letter-spacing: -.03em;
}
/* скасовуємо буквицю всередині цитат та інших блоків */
.art-main blockquote p:first-of-type::first-letter,
.art-main .wp-block-quote p:first-of-type::first-letter,
.pullquote p:first-of-type::first-letter,
.fact-box p:first-of-type::first-letter,
.expert-quote p:first-of-type::first-letter,
.art-main p.no-drop:first-of-type::first-letter,
.art-main p.no-drop::first-letter{
  font-family: inherit; font-size: inherit; float: none;
  padding: 0; margin: 0; color: inherit; letter-spacing: inherit;
}
.art-main h2{
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: 30px; letter-spacing: -.01em; line-height: 1.1;
  margin: 44px 0 14px;
  scroll-margin-top: 130px;
}
.art-main h3{
  font-family: 'Unbounded', sans-serif; font-weight: 600;
  font-size: 22px; letter-spacing: -.01em; margin: 32px 0 10px;
}
.art-main a:not(.tg-thin):not(.doc-link):not(.location-card):not(.ai-btn):not(.rmini-row):not(.article-native-ad__link){
  color: var(--ink); border-bottom: 2px solid var(--yellow);
  font-weight: 600; text-decoration: none;
}
.art-main a:not(.tg-thin):not(.doc-link):not(.location-card):not(.ai-btn):not(.rmini-row):not(.article-native-ad__link):hover{ background: var(--yellow-soft); }
.art-main ul:not(.compare ul){ padding-left: 0; list-style: none; margin: 0 0 24px; }
.art-main ul:not(.compare ul) li{
  font-family: 'Lora', serif; font-size: 18px; line-height: 1.6; color: var(--ink-2);
  padding: 6px 0 6px 28px; position: relative;
}
.art-main ul:not(.compare ul) li::before{
  content: ""; position: absolute; left: 0; top: 18px;
  width: 16px; height: 2px; background: var(--red);
}

/* WP block paragraph alignment helpers */
.art-main .alignwide,
.art-main .alignfull{ max-width: none; }
.art-main figure.wp-block-image{ margin: 24px 0; }
.art-main figure.wp-block-image img{ border-radius: var(--radius); display: block; max-width: 100%; height: auto; }
.art-main figure.wp-block-image figcaption{
  margin: 8px 2px 0; color: var(--muted);
  font-size: 12.5px; font-family: 'Lora', serif; font-style: italic; line-height: 1.45;
}

/* pullquote — застосовується до УСІХ blockquote у статтях.
   Жовта ліва лінія 4px + бежевий фон + italic Lora 24px. Однаково для:
   - native core/quote (з is-style чи без)
   - legacy <blockquote class="pullquote">
   - звичайного <blockquote> з імпортованих постів */
.art-main blockquote,
.art-main .wp-block-quote,
.pullquote{
  margin: 32px 0; padding: 28px 32px;
  border: 0; border-left: 4px solid var(--yellow);
  background: var(--paper-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: normal;
}
.art-main blockquote p,
.art-main blockquote q,
.art-main .wp-block-quote p,
.pullquote p,
.pullquote q{
  font-family: 'Lora', serif; font-style: italic; font-weight: 500;
  font-size: 24px; line-height: 1.35; color: var(--ink);
  quotes: "«" "»";
  margin: 0 0 12px;
}
.art-main blockquote p:last-child,
.art-main blockquote q:last-child,
.art-main .wp-block-quote p:last-child,
.pullquote p:last-child{ margin-bottom: 0; }
.art-main blockquote cite,
.art-main .wp-block-quote cite,
.pullquote cite,
.pullquote .by{
  display: block; margin-top: 14px;
  font-family: 'Manrope', sans-serif; font-style: normal;
  font-size: 13px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

/* fact-box */
.fact-box{
  margin: 28px 0;
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: 24px 26px;
  position: relative; overflow: hidden;
}
.fact-box::before{
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 140px; height: 140px; border-radius: 50%; background: var(--yellow); opacity: .9;
}
.fact-box .label{
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 10px;
}
.fact-box .big{
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: 48px; line-height: 1; letter-spacing: -.02em;
}
.fact-box .dek-f{ font-size: 14px; color: #cfc9b9; margin-top: 6px; position: relative; z-index: 2; max-width: 520px; }

/* inline image */
.inline-img{ margin: 32px 0; }
.inline-img-media{
  position: relative;
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #ffd400 0%, #f4c100 100%);
}
.inline-img svg{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.inline-img img.ph{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.inline-img .cap{
  display: block;
  margin: 10px 2px 0;
  font-size: 12.5px; color: var(--muted);
  font-family: 'Lora', serif; font-style: italic; line-height: 1.45;
}

/* Bridge: native core/image with блок-стиль "Inline image · wide / full" — без .inline-img-media wrapper */
.art-main figure.wp-block-image.inline-img > img,
.art-main figure.wp-block-image.inline-img picture > img{
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
}
.art-main figure.wp-block-image.inline-img.full > img,
.art-main figure.wp-block-image.inline-img.full picture > img{
  border-radius: 0;
}
.art-main figure.wp-block-image.inline-img figcaption{
  display: block; margin: 10px 2px 0;
  font-size: 12.5px; color: var(--muted);
  font-family: 'Lora', serif; font-style: italic; line-height: 1.45;
  text-align: left;
}

/* Bridge: native core/gallery with блок-стиль "Gallery · 3 в ряд" */
.art-main .wp-block-gallery.gallery-3{
  margin: 32px 0 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  border-radius: 0;
}
@media (max-width: 720px){ .art-main .wp-block-gallery.gallery-3{ grid-template-columns: 1fr; } }
.art-main .wp-block-gallery.gallery-3 .wp-block-image{
  display: flex; flex-direction: column; gap: 8px;
  margin: 0; flex-basis: auto; width: auto;
}
.art-main .wp-block-gallery.gallery-3 .wp-block-image img{
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
  border-radius: 12px; background: var(--paper-3);
}
.art-main .wp-block-gallery.gallery-3 .wp-block-image figcaption{
  padding: 0 2px; color: var(--muted); font-size: 12px;
  font-family: 'Lora', serif; font-style: italic; line-height: 1.4;
  text-align: left; background: none; position: static;
}

/* ============================================================
 * Bridges for native Gutenberg blocks → стиль як у дизайні
 * Підтримуємо ОБИДВІ форми:
 *   • стара (wp:html, hard-coded HTML — у вже опублікованих постах)
 *   • нова (Group/Quote/Columns + is-style + className на дітях)
 * ============================================================ */

/* Callout: іконка через ::before pseudo-element для native Group форми
   (стара wp:html має <span class="ic"> — :has() ховає pseudo там, де є span) */
.callout:not(:has(.ic))::before{
  content: ""; flex-shrink: 0;
  width: 34px; height: 34px;
  background: var(--paper) center/16px 16px no-repeat;
  border-radius: 9px;
}
.callout.info:not(:has(.ic))::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232aabee' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 8v.01M11 12h1v5h1'/></svg>");
}
.callout.warn:not(:has(.ic))::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e5322a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 2 22h20z'/><path d='M12 9v5M12 17v.01'/></svg>");
}
.callout.ok:not(:has(.ic))::before{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232a7b3a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5 9-9'/></svg>");
}
/* Native callout: paragraphs з className lbl/txt мають той самий вигляд, що й .body div-и */
.callout > .lbl, .callout .body .lbl{
  font-family: 'Manrope', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2);
  margin: 0 0 4px;
}
.callout > .txt, .callout .body .txt{
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
  margin: 0;
}
.callout > .txt strong, .callout .body .txt strong,
.callout > .txt b, .callout .body .txt b{ font-weight: 700; color: var(--ink); }
/* Native form: paragraphs replace .body wrapper — обгортаємо як column */
.callout > .lbl + .txt{ margin-top: 0; }

/* Pullquote стилізація — основне правило вище у `.art-main blockquote`. */

/* Fact box — native paragraphs .label / .big / .dek-f всередині .fact-box / .is-style-fact-box.
   Існуючі rules `.fact-box .label` etc. уже працюють, бо paragraph зберігає className.
   Просто переконаємось що margin зануляється для native paragraph. */
.fact-box > .label,
.fact-box > .big,
.fact-box > .dek-f{ margin: 0; }
.fact-box > .label{ margin-bottom: 4px; }
.fact-box > .big{ margin-top: 0; margin-bottom: 0; }
.fact-box > .dek-f{ margin-top: 6px; }

/* Stats-trio — native Columns(3) з .stat / .stat.hl на колонках.
   render_block додає `stats-trio` клас → existing `.stats-trio .stat` працює. */
.wp-block-columns.stats-trio,
.wp-block-columns.is-style-stats-trio{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 28px 0;
}
@media (max-width: 720px){
  .wp-block-columns.stats-trio,
  .wp-block-columns.is-style-stats-trio{ grid-template-columns: 1fr; }
}
.stats-trio .wp-block-column.stat{
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
  flex-basis: auto; flex-grow: 0;
}
.stats-trio .wp-block-column.stat.hl{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.stats-trio .wp-block-column.stat .v{
  font-family: 'Unbounded'; font-weight: 800;
  font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--ink);
  margin: 0;
}
.stats-trio .wp-block-column.stat.hl .v{ color: var(--yellow); }
.stats-trio .wp-block-column.stat .l{
  margin: 8px 0 0; font-family: 'Manrope', sans-serif;
  font-size: 12.5px; line-height: 1.35; color: var(--muted);
}
.stats-trio .wp-block-column.stat.hl .l{ color: #cfc9b9; }
.stats-trio .wp-block-column.stat .delta{
  margin: 6px 0 0; font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 4px; color: #2a7b3a;
}
.stats-trio .wp-block-column.stat.hl .delta{ color: #5fd07a; }

/* Compare — native Columns(2) з .col.before / .col.after на колонках */
.wp-block-columns.compare,
.wp-block-columns.is-style-compare{
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  margin: 28px 0;
}
@media (max-width: 720px){
  .wp-block-columns.compare,
  .wp-block-columns.is-style-compare{ grid-template-columns: 1fr; }
}
.compare .wp-block-column.col,
.compare .col{
  padding: 24px 26px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius);
  flex-basis: auto; flex-grow: 0;
}
.compare .wp-block-column.col.before, .compare .col.before{ border-left: 4px solid var(--muted-2); }
.compare .wp-block-column.col.after,  .compare .col.after{ border-left: 4px solid var(--yellow); }
.compare .col .lbl{
  margin: 0 0 6px;
  font-family: 'Manrope'; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2);
}
.compare .col h4{
  margin: 0 0 14px;
  font-family: 'Unbounded'; font-weight: 700; font-size: 18px;
  line-height: 1.2; letter-spacing: -.005em; color: var(--ink);
}
.compare .col ul{ list-style: none; margin: 0; padding: 0; }
.compare .col ul li{
  position: relative; padding: 4px 0 4px 22px;
  font-family: 'Manrope'; font-size: 14px; color: var(--ink-2); line-height: 1.45;
}
.compare .col.before ul li::before{
  content: "−"; position: absolute; left: 4px; top: 4px;
  color: var(--muted-2); font-weight: 800;
}
.compare .col.after ul li::before{
  content: "+"; position: absolute; left: 4px; top: 4px;
  color: var(--yellow-deep); font-weight: 800;
}

/* Steps — native Columns(3) з .step на кожній колонці */
.wp-block-columns.steps,
.wp-block-columns.is-style-steps{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin: 28px 0;
  counter-reset: step-counter;
}
@media (max-width: 720px){
  .wp-block-columns.steps,
  .wp-block-columns.is-style-steps{ grid-template-columns: 1fr; }
}
.steps .wp-block-column.step,
.steps .step{
  position: relative;
  padding: 22px 22px 20px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
  counter-increment: step-counter;
  flex-basis: auto; flex-grow: 0;
}
.steps .step .n{
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 10px;
  font-family: 'Unbounded'; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--yellow-deep);
}
.steps .step .n::after{
  content: counter(step-counter, decimal-leading-zero);
  font-size: 13px; color: var(--ink); margin-left: 4px;
}
.steps .step h4{
  margin: 0 0 8px;
  font-family: 'Unbounded'; font-weight: 700; font-size: 17px;
  line-height: 1.25; letter-spacing: -.005em; color: var(--ink);
}
.steps .step p{
  margin: 0; font-family: 'Manrope'; font-size: 13.5px; line-height: 1.5;
  color: var(--ink-2);
}

/* callout */
.callout{
  margin: 28px 0; padding: 16px 20px;
  border-left: 4px solid var(--yellow);
  background: var(--paper-2);
  border-radius: 0 12px 12px 0;
  display: flex; gap: 14px; align-items: flex-start;
}
.callout.warn{ border-color: var(--red); background: var(--red-soft); }
.callout.info{ border-color: var(--tg); background: rgba(42,171,238,.10); }
.callout.ok{ border-color: #2a7b3a; background: rgba(42,123,58,.10); }
.callout .ic{
  width: 34px; height: 34px; flex-shrink: 0;
  background: var(--paper); border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
}
.callout.warn .ic{ color: var(--red); }
.callout.info .ic{ color: var(--tg); }
.callout.ok .ic{ color: #2a7b3a; }
.callout .body{ flex: 1; min-width: 0; }
.callout .lbl{
  font-family: 'Manrope', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2); margin-bottom: 4px;
}
.callout .txt{
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
}
.callout .txt b{ font-weight: 700; color: var(--ink); }

/* stats-trio */
.stats-trio{
  margin: 28px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
@media (max-width: 720px){ .stats-trio{ grid-template-columns: 1fr; } }
.stats-trio .stat{
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 18px;
}
.stats-trio .stat.hl{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.stats-trio .stat .v{
  font-family: 'Unbounded'; font-weight: 800;
  font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--ink);
}
.stats-trio .stat.hl .v{ color: var(--yellow); }
.stats-trio .stat .l{
  margin-top: 8px; font-family: 'Manrope', sans-serif;
  font-size: 12.5px; line-height: 1.35; color: var(--muted);
}
.stats-trio .stat.hl .l{ color: #cfc9b9; }
.stats-trio .stat .delta{
  margin-top: 6px;
  font-size: 11px; font-weight: 800;
  display: inline-flex; align-items: center; gap: 4px;
  color: #2a7b3a;
}
.stats-trio .stat .delta.down{ color: var(--red); }
.stats-trio .stat.hl .delta{ color: #5fd07a; }

/* timeline */
.timeline{
  margin: 28px 0; padding: 22px 24px;
  background: var(--paper-2); border-radius: var(--radius);
  border: 1px solid var(--line);
}
.timeline .h{
  font-family: 'Unbounded'; font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase;
  margin: 0 0 14px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.timeline .h::after{ content: ""; flex: 1; height: 1px; background: var(--line); }
.timeline ol{
  list-style: none; margin: 0; padding: 0 0 0 22px; position: relative;
}
.timeline ol::before{
  content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px;
  width: 2px; background: var(--line);
}
.timeline li{
  position: relative; padding: 4px 0 14px;
  font-family: 'Manrope', sans-serif;
}
.timeline li::before{
  content: ""; position: absolute; left: -22px; top: 8px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--ink);
}
.timeline li.done::before{ background: var(--ink); }
.timeline li.now::before{ background: var(--yellow); border-color: var(--yellow-deep); box-shadow: 0 0 0 4px rgba(255,212,0,.18); }
.timeline li .when{
  font-size: 11.5px; font-weight: 800; letter-spacing: .05em;
  color: var(--muted-2); text-transform: uppercase;
}
.timeline li .what{
  font-size: 15px; font-weight: 600; color: var(--ink-2);
  line-height: 1.4; margin-top: 2px;
}

/* expert-quote */
.expert-quote{
  margin: 32px 0; padding: 24px 26px;
  background: var(--paper-2); border-radius: var(--radius);
  border: 1px solid var(--line);
  display: flex; gap: 18px; align-items: flex-start;
}
.expert-quote .ava{
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--yellow), var(--yellow-deep));
  display: inline-flex; align-items: center; justify-content: center;
  font-family: 'Unbounded'; font-weight: 700; font-size: 18px; color: var(--ink);
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--yellow);
}
.expert-quote .ava img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.expert-quote .body{ flex: 1; min-width: 0; }
.expert-quote .body q{
  font-family: 'Lora', serif; font-style: italic; font-weight: 500;
  font-size: 22px; line-height: 1.32; color: var(--ink);
  quotes: "«" "»"; display: block;
}
.expert-quote .who{
  margin-top: 10px; font-family: 'Manrope';
  font-size: 13px; font-weight: 700; color: var(--ink-2);
}
.expert-quote .role{
  font-size: 12px; font-weight: 500; color: var(--muted);
  display: block; margin-top: 2px;
}
@media (max-width: 640px){
  .expert-quote{ padding: 20px; }
  .expert-quote .ava{ width: 48px; height: 48px; font-size: 15px; }
  .expert-quote .body q{ font-size: 19px; }
}

/* gallery-3 */
.gallery-3{
  margin: 32px 0 8px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 720px){ .gallery-3{ grid-template-columns: 1fr; } }
.gallery-3 .ph{
  display: flex; flex-direction: column; gap: 8px;
  margin: 0;
}
.gallery-3 .ph img{
  width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block;
  border-radius: 12px; background: var(--paper-3);
}
.gallery-3 .ph .cap{
  padding: 0 2px; color: var(--muted); font-size: 12px;
  font-family: 'Lora', serif; font-style: italic; line-height: 1.4;
}
.gallery-cap{
  margin: 0 0 32px;
  font-size: 12.5px; color: var(--muted); font-style: italic;
  font-family: 'Lora', serif;
}

/* clear floats around full-width blocks (after .note-block float:right) */
.art-main .gallery-3,
.art-main .fact-box,
.art-main .poll,
.art-main .location-card,
.art-main .section-card,
.art-main .inline-img.full,
.art-main .inline-img.wide,
.art-main .alignfull,
.art-main .alignwide,
.art-main .tag-row{ clear: both; }

/* note-block: float-right grey side note, body text wraps around it */
.art-main .note-block{
  float: right; clear: both;
  width: 38%;
  margin: 28px -150px 28px 32px;
  padding: 26px 32px 28px;
  background: #ededeb;
  border-radius: 14px;
  font-family: 'Manrope', system-ui, sans-serif;
}
.art-main .note-block.left{ float: left; margin: 28px 32px 28px -150px; }
.art-main .note-block h4{
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: 22px; line-height: 1.18; letter-spacing: -.01em;
  margin: 0 0 16px;
  color: var(--ink);
}
.art-main .note-block p{
  font-family: 'Manrope', system-ui, sans-serif;
  font-size: 16px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 12px;
  padding: 0;
}
.art-main .note-block p:last-child{ margin-bottom: 0; }
.art-main .note-block p::before{ content: none; }
@media (max-width: 1080px){
  .art-main .note-block,
  .art-main .note-block.left{
    margin-left: 0; margin-right: 0;
    width: 46%;
  }
  .art-main .note-block{ margin: 28px 0 28px 28px; }
  .art-main .note-block.left{ margin: 28px 28px 28px 0; }
}
@media (max-width: 720px){
  .art-main .note-block,
  .art-main .note-block.left{
    float: none; width: auto;
    margin: 24px 0;
    padding: 22px 22px 24px;
  }
}

/* section-card: wide tinted card with H2 + body, optional illustration */
.art-main .section-card{
  position: relative;
  margin: 40px -120px;
  padding: 56px 64px 48px;
  background: var(--paper-3);
  border-radius: 28px;
  overflow: hidden;
}
.art-main .section-card.tan{ background: #e2d4ac; }
.art-main .section-card.cream{ background: var(--paper-2); }
.art-main .section-card > h2,
.art-main .section-card > h3{
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: -.01em; line-height: 1.1;
  margin: 0 0 22px;
  color: var(--ink);
  max-width: 760px;
}
.art-main .section-card > p,
.art-main .section-card > ul li{
  font-family: 'Lora', serif; font-size: 18px; line-height: 1.6;
  color: var(--ink-2);
  max-width: 720px;
}
.art-main .section-card > p:first-of-type::first-letter{
  font: inherit; float: none; padding: 0; margin: 0; color: inherit;
}
.art-main .section-card .illu{
  position: absolute;
  right: 32px; bottom: 0;
  width: 280px; height: auto; max-height: 80%;
  pointer-events: none;
  opacity: .95;
}
.art-main .section-card .illu svg,
.art-main .section-card .illu img{
  width: 100%; height: 100%; display: block;
}
.art-main .section-card.has-illu{ padding-right: 340px; }
.art-main .section-card.has-illu > p,
.art-main .section-card.has-illu > ul{ max-width: 540px; }
@media (max-width: 1080px){
  .art-main .section-card{
    margin-left: 0; margin-right: 0;
    padding: 36px 28px 32px;
    border-radius: 22px;
  }
  .art-main .section-card.has-illu{ padding-right: 28px; padding-bottom: 0; }
  .art-main .section-card.has-illu > p,
  .art-main .section-card.has-illu > ul{ max-width: none; }
  .art-main .section-card .illu{
    position: static;
    width: 220px; max-height: none;
    display: block;
    margin: 18px auto -8px;
  }
}
@media (max-width: 600px){
  .art-main .section-card{
    padding: 28px 22px 26px;
    border-radius: 18px;
  }
}

/* poll: visual results card (read-only in v1) */
.poll{
  margin: 28px 0; padding: 22px 24px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.poll .q{
  font-family: 'Unbounded'; font-weight: 700; font-size: 17px;
  margin: 0 0 4px; line-height: 1.25; letter-spacing: -.005em;
}
.poll .total{
  font-size: 12px; color: var(--muted); margin-bottom: 14px;
}
.poll .opt{
  position: relative; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px;
  overflow: hidden;
  background: var(--paper);
}
.poll .opt:last-child{ margin-bottom: 0; }
.poll .opt .fill{
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--p, 0%);
  background: var(--yellow-soft); z-index: 0;
}
.poll .opt.win .fill{ background: var(--yellow); }
.poll .opt .row{
  position: relative; z-index: 1;
  display: flex; gap: 12px; align-items: center;
  font-family: 'Manrope'; font-weight: 600; font-size: 14.5px;
  color: var(--ink-2);
}
.poll .opt .pct{
  margin-left: auto;
  font-family: 'Unbounded'; font-weight: 700; font-size: 13px;
  color: var(--ink); min-width: 42px; text-align: right;
}

/* doc-link */
.doc-link{
  margin: 24px 0; display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .15s, transform .15s;
}
.doc-link:hover{ border-color: var(--line-strong); transform: translateY(-1px); }
.doc-link .ic{
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--red-soft); color: var(--red-deep);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.doc-link .body{ flex: 1; min-width: 0; }
.doc-link .t{
  font-family: 'Manrope'; font-weight: 700; font-size: 14.5px;
  color: var(--ink); line-height: 1.25;
}
.doc-link .meta{
  font-size: 12px; color: var(--muted); margin-top: 3px;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.doc-link .meta .ext{
  font-family: 'Unbounded'; font-weight: 800; font-size: 10px;
  letter-spacing: .06em; padding: 2px 6px; border-radius: 4px;
  background: var(--paper-2); color: var(--ink-2);
}
.doc-link .arr{ color: var(--muted-2); flex-shrink: 0; }

/* compare */
.compare{
  margin: 32px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 720px){ .compare{ grid-template-columns: 1fr; } }
.compare .col{
  padding: 18px 20px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
}
.compare .col.before{ background: var(--paper-2); }
.compare .col.after{ border-color: var(--ink); }
.compare .col .lbl{
  font-family: 'Unbounded'; font-weight: 800; font-size: 11px;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 10px; display: inline-flex; align-items: center; gap: 6px;
}
.compare .col.before .lbl{ color: var(--muted); }
.compare .col.after .lbl{ color: var(--red); }
.compare .col.after .lbl::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red);
}
.compare .col h4{
  font-family: 'Manrope'; font-size: 16px; font-weight: 700;
  margin: 0 0 10px; line-height: 1.25;
}
.art-main .compare .col ul{ list-style: none; padding: 0; margin: 0; }
.art-main .compare .col ul li{
  font-family: 'Manrope', sans-serif; font-size: 14px;
  color: var(--ink-2); padding: 5px 0 5px 22px;
  position: relative; line-height: 1.4;
}
.art-main .compare .col.before ul li::before{
  content: "–"; position: absolute; left: 4px; top: 4px;
  width: auto; height: auto; background: transparent;
  color: var(--muted); font-weight: 700;
}
.art-main .compare .col.after ul li::before{
  content: "+"; position: absolute; left: 4px; top: 4px;
  width: auto; height: auto; background: transparent;
  color: var(--red); font-weight: 800;
}

/* steps */
.steps{
  margin: 28px 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  counter-reset: step;
}
@media (max-width: 720px){ .steps{ grid-template-columns: 1fr; } }
.steps .step{
  position: relative; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper);
}
.steps .step .n{
  font-family: 'Unbounded'; font-weight: 800; font-size: 13px;
  letter-spacing: .04em; color: var(--red);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.steps .step .n::before{
  content: counter(step, decimal-leading-zero);
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: var(--yellow);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; counter-increment: step;
}
.steps .step h4{
  font-family: 'Manrope'; font-size: 15.5px; font-weight: 700;
  margin: 0 0 6px; line-height: 1.25; color: var(--ink);
}
.steps .step p{
  font-family: 'Manrope', sans-serif !important;
  font-size: 13.5px !important; line-height: 1.45 !important;
  color: var(--muted) !important; margin: 0 !important;
}
.steps .step p::first-letter{
  font-family: inherit !important; font-size: inherit !important;
  float: none !important; padding: 0 !important; color: inherit !important;
}

/* location-card */
.location-card{
  margin: 28px 0;
  display: grid; grid-template-columns: 200px 1fr; gap: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
@media (max-width: 640px){ .location-card{ grid-template-columns: 1fr; } }
.location-card .map{
  position: relative; min-height: 140px;
  background:
    radial-gradient(circle at 60% 50%, rgba(229,50,42,.10) 0, transparent 50%),
    linear-gradient(135deg, #e8e0cb 0%, #d6cdb5 100%);
  overflow: hidden;
}
.location-card .map svg{
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5;
}
.location-card .map .pin{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(229,50,42,.4));
  color: var(--red);
}
.location-card .info{
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.location-card .info .lbl{
  font-family: 'Unbounded'; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}
.location-card .info h4{
  font-family: 'Manrope'; font-size: 15.5px; font-weight: 700;
  margin: 0; line-height: 1.25;
}
.location-card .info .addr{
  font-size: 13px; color: var(--ink-2); line-height: 1.4;
}
.location-card .info .meta{
  font-size: 12px; color: var(--muted);
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px;
}
.location-card .info .meta b{ color: var(--ink); font-weight: 700; }
.location-card .info .open-btn{
  margin-top: auto; align-self: flex-start;
  padding: 8px 12px; border-radius: 9px;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px;
}

/* tg banner inside article — однаковий, але з відступами */
.art-main .tg-thin{ margin: 32px 0; }
/* Збільшуємо специфічність, щоб правило `.tg-thin.dismissed{ margin:0 }` з chrome.css
 * не перебивалося `.art-main .tg-thin{ margin:32px 0 }`. */
.art-main .tg-thin.dismissed{ margin: 0; padding: 0; max-height: 0; }
.embed-tg-wrap.dismissed{
  max-height: 0; opacity: 0; margin: 0; padding: 0; overflow: hidden;
  transition: max-height .3s, opacity .25s, margin .25s, padding .25s;
}

/* ============================ RELATED MINI ============================ */
.related-mini{
  margin: 36px 0 18px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-2);
}
body[data-theme="dark"] .related-mini{ background: var(--paper-2); }
.related-mini h5{
  font-family: 'Unbounded'; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 10px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.related-mini h5::after{
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.related-mini .rmini-row{
  display: flex; gap: 14px; padding: 10px 0;
  border-top: 1px dashed var(--line);
  align-items: baseline;
  transition: padding-left .15s;
}
.related-mini .rmini-row:first-of-type{ border-top: 0; }
.related-mini .rmini-row:hover{ padding-left: 6px; }
.related-mini .rmini-title{
  flex: 1; font-family: 'Manrope'; font-weight: 700; font-size: 14.5px;
  color: var(--ink-2); line-height: 1.3;
}
.related-mini .rmini-row:hover .rmini-title{ color: var(--red); }
.related-mini .rmini-meta{
  font-size: 12px; color: var(--muted); flex-shrink: 0; white-space: nowrap;
}

/* tags + react */
.tag-row{
  display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 0 18px;
}
.tag-row .t{
  padding: 6px 12px; border-radius: 999px; background: var(--paper-2);
  font-size: 13px; color: var(--ink-2); font-weight: 600;
}
.tag-row .t:hover{ background: var(--paper-3); }

/* Post footer — горизонтальний ряд: Підсумувати + Корисно */
.post-footer{
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-top: 18px;
}
.post-footer > *{ margin-top: 0; }

/* Спільний pill-стиль для обох блоків нижньої панелі */
.ai-summarize,
.react-bar{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--paper-2);
  width: fit-content;
}
.ai-summarize .ai-label,
.react-bar .q{
  font-family: 'Unbounded'; font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
}

/* Іконки AI */
.ai-summarize .ai-btns{ display: flex; gap: 4px; align-items: center; }
.ai-summarize .ai-btn{
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  color: var(--ink); text-decoration: none; box-shadow: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.ai-summarize .ai-btn::after,
.ai-summarize .ai-btn::before{ display: none; }
.ai-summarize .ai-btn svg{ width: 17px; height: 17px; display: block; }
.ai-summarize .ai-btn[data-ai="grok"] svg{ width: 14px; height: 14px; }
.ai-summarize .ai-btn:hover{
  background: var(--paper); border-color: var(--line-strong); transform: translateY(-1px);
}
body[data-theme="dark"] .ai-summarize .ai-btn:hover{ background: var(--paper-3); }

/* Кнопки реакції — іконка + лічильник */
.react-bar .btns{ display: flex; gap: 4px; align-items: center; }
.react-bar .btns button{
  min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  gap: 5px; padding: 0 9px; border-radius: 999px; background: transparent;
  color: var(--ink); border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.react-bar .btns button:hover{
  background: var(--paper); border-color: var(--line-strong); transform: translateY(-1px);
}
.react-bar .btns button.on{ background: var(--yellow); border-color: transparent; }
.react-bar .btns button .n{
  font-size: 12px; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--ink-2);
}
.react-bar .btns button.on .n{ color: var(--ink); }
body[data-theme="dark"] .react-bar .btns button:hover{ background: var(--paper-3); }

/* ============================ SIDEBAR ============================ */
.art-side{ position: sticky; top: 130px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.side-card{
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px;
}
body[data-theme="dark"] .side-card{ background: var(--paper-2); }
.side-card h5{
  font-family: 'Unbounded'; font-size: 13px; letter-spacing: .02em; margin: 0 0 12px;
  text-transform: uppercase;
}
.toc ol{ list-style: none; padding: 0; margin: 0; counter-reset: toc; }
.toc li{
  counter-increment: toc;
  padding: 8px 0 8px 28px; position: relative;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  border-top: 1px dashed var(--line);
  cursor: pointer;
  line-height: 1.35;
}
.toc li:first-child{ border-top: 0; }
.toc li::before{
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 8px;
  font-family: 'Unbounded'; font-size: 11px; font-weight: 700; color: var(--muted);
}
.toc li.active{ color: var(--ink); }
.toc li.active::before{ color: var(--red); }
.toc li:hover{ color: var(--ink); }

.service-mini{
  display: flex; gap: 10px; padding: 10px 0; border-top: 1px dashed var(--line);
  align-items: center;
}
.service-mini:first-of-type{ border-top: 0; }
.service-mini .ico{
  width: 36px; height: 36px; border-radius: 10px; background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink);
  flex-shrink: 0;
  transition: background .15s ease;
}
.service-mini.hl .ico{ background: var(--yellow); }
.service-mini:hover .ico{ background: var(--yellow); }
.service-mini .n{ font-weight: 700; font-size: 13px; line-height: 1.1; }
.service-mini .d{ font-size: 11px; color: var(--muted); }

.side-subs{
  background: var(--ink); color: var(--paper);
  border-radius: var(--radius); padding: 18px;
  position: relative; overflow: hidden;
}
.side-subs::before{
  content: ""; position: absolute; right: -30px; top: -30px;
  width: 110px; height: 110px; border-radius: 50%; background: var(--yellow); opacity: .9;
}
.side-subs h5{
  font-family: 'Unbounded'; font-size: 15px; margin: 0 0 8px; position: relative; z-index: 2;
  color: var(--paper);
}
.side-subs p{ font-size: 13px; color: #d4cdba; margin: 0 0 14px; position: relative; z-index: 2; }
.side-subs form{ display: flex; gap: 8px; position: relative; z-index: 2; }
.side-subs input{
  flex: 1; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--paper); outline: 0;
  font-size: 13px;
}
.side-subs input::placeholder{ color: #a9a294; }
.side-subs button{
  background: var(--yellow); color: var(--ink); padding: 10px 14px;
  border-radius: 10px; font-weight: 800; font-size: 13px;
  border: 0; cursor: pointer;
}
.side-subs form{ flex-wrap: wrap; }
.side-subs__msg{
  flex: 0 0 100%;
  font-size: 12px; line-height: 1.4; margin-top: 4px;
  color: #d4cdba;
}
.side-subs__msg:empty{ display: none; }
.side-subs__msg.is-error{ color: #ffb3b3; }
.side-subs__msg.is-success{ color: var(--yellow); }

/* ============================ RELATED FULL ============================ */
.single section.block{ padding: 56px 0 0; border-top: 1px solid var(--line); margin-top: 24px; }
.single .sec-head{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px;
}
.single .sec-head h2{
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 26px;
  letter-spacing: -.01em; margin: 0;
}
.single .sec-head h2 em{ font-style: normal; color: var(--muted); font-weight: 500; }
.related{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 860px){ .related{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px){
  .related{
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
    gap: 12px;
    margin: 0 -16px;
    padding: 4px 16px 14px;
    scrollbar-width: none;
  }
  .related::-webkit-scrollbar{ display: none; }
  .related .r-card{
    flex: 0 0 78%;
    scroll-snap-align: start;
    min-width: 240px; max-width: 320px;
  }
}
.r-card{
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; transition: transform .15s, border-color .15s;
}
body[data-theme="dark"] .r-card{ background: var(--paper-2); }
.r-card:hover{ transform: translateY(-2px); border-color: var(--line-strong); }
.r-card .t{
  aspect-ratio: 16/10; position: relative;
  background: linear-gradient(135deg, #d9cfb1, #b8a97f);
}
.r-card .t.k1{ background: linear-gradient(135deg, #ffd400 0%, #f4c100 100%); }
.r-card .t.k2{ background: linear-gradient(160deg, #1b1b1d 0%, #3a3a3f 100%); }
.r-card .t.k3{ background: linear-gradient(135deg, #e5322a 0%, #b3261e 100%); }
.r-card .t.k4{ background: linear-gradient(135deg, #c7d7e8 0%, #8aa6c2 100%); }
.r-card .t.k5{ background: linear-gradient(135deg, #e8e0cb 0%, #c4b896 100%); }
.r-card .t .cat{
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  padding: 5px 9px; border-radius: 999px; background: var(--paper); color: var(--ink);
}
.r-card .t img.ph{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.r-card .body{ padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.r-card h3{
  font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 17px; line-height: 1.2; margin: 0;
  text-wrap: balance;
}
.r-card .meta{ font-size: 12px; color: var(--muted); margin-top: auto; }

/* article divider — між постами в infinite-scroll */
.article-divider-wrap{ margin: 56px auto 24px; }
.article-divider{
  display: flex; align-items: center; gap: 12px;
  font-family: 'Unbounded'; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}
.article-divider::before,
.article-divider::after{
  content: ""; flex: 1 1 0; min-width: 24px; height: 1px; background: var(--line);
}
.article-divider .dot{
  width: 6px; height: 6px; border-radius: 50%; background: var(--red);
  flex: 0 0 auto;
}
.article-divider .lab{ flex: 0 0 auto; }

/* ============================ ONE-COLUMN HERO (single-onecolumn.php) ============================ */
.hero1-block{
  background: var(--paper-2);
  margin: 0;
  padding: 0;
}
.hero1-block .hero-img{ margin: 0; }
.hero1-block .hero-img-media{
  aspect-ratio: 21/9;
  border-radius: 0;
  background: linear-gradient(160deg, #1b1b1d 0%, #3a3a3f 100%);
}
.hero1-block .hero-img-media::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  background: linear-gradient(180deg,
    rgba(14,14,15,0) 0%,
    rgba(14,14,15,0) 30%,
    rgba(14,14,15,.45) 70%,
    rgba(14,14,15,.82) 100%);
  z-index: 2; pointer-events: none;
}
.hero-overlay{
  position: absolute;
  left: 0; right: 0; bottom: clamp(28px, 5vw, 72px);
  z-index: 3;
  padding: 0 32px;
  text-align: center;
  color: #fff;
}
.hero-eyebrow{
  display: inline-flex; gap: 14px; align-items: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.86);
  margin: 0 0 18px;
}
.hero-eyebrow .dot{
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.5);
}
.hero-eyebrow a{ color: inherit; }
.hero-eyebrow a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.hero1-block .hero-title{
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.08; letter-spacing: -.02em;
  color: #fff;
  text-wrap: balance;
  text-shadow: 0 2px 28px rgba(0,0,0,.45);
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}
.hero1-block .hero-title .hl{
  display: inline;
  padding: .04em .14em;
  color: #0e0e0f;
  background-color: var(--yellow);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 4px;
  text-shadow: none;
  position: static;
}
.hero1-block .hero-title .hl::before{ content: none; display: none; }
@media (max-width: 720px){
  .hero1-block .hero-img-media{ aspect-ratio: 4/5; }
  .hero-overlay{ bottom: 24px; padding: 0 18px; }
  .hero-eyebrow{ font-size: 11px; gap: 10px; margin-bottom: 12px; }
  .hero1-block .hero-title{ font-size: clamp(22px, 6.6vw, 36px); }
}

/* hero-byline (between hero and first paragraph) */
.hero-byline{
  max-width: 720px;
  margin: 22px auto 8px;
  padding: 14px 0 18px;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  color: var(--muted);
}
.hero-byline .hb-cell{
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
}
.hero-byline .hb-cell + .hb-cell::before{
  content: "·"; color: var(--muted-2); margin-right: 12px;
}
.hero-byline .hb-label{
  text-transform: uppercase; letter-spacing: .1em;
  font-size: 11px; font-weight: 700;
  color: var(--muted-2);
}
.hero-byline .hb-name{
  color: var(--ink); font-weight: 700;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
}
.hero-byline .hb-name:hover{ border-color: var(--ink); }
.hero-byline .hb-date{
  text-transform: uppercase; letter-spacing: .08em;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}
.hero-byline .hb-read svg{ flex-shrink: 0; opacity: .65; margin-right: 2px; }
.hero-byline .hb-share{ margin-left: auto; }
@media (max-width: 720px){
  .hero-byline{
    gap: 6px 14px;
    padding: 12px 0 14px;
    margin: 16px 18px 0;
  }
  .hero-byline .hb-cell + .hb-cell::before{ margin-right: 8px; }
  .hero-byline .hb-share{ margin-left: 0; }
}

/* one-column body: no sidebar, centered column, dropcap span */
.single-onecolumn .article-layout{
  display: block;
  padding: 16px 0 36px;
}
.single-onecolumn .art-main{ max-width: 720px; margin: 0 auto; }
.art-main .dropcap{
  font-family: 'Unbounded', sans-serif; font-weight: 800;
  font-size: 82px; float: left;
  line-height: .82;
  padding: 7px 14px 0 0;
  margin: 6px 0 -6px;
  color: var(--red);
  letter-spacing: -.03em;
}
@media (max-width: 720px){
  .art-main .dropcap{ font-size: 66px; padding-right: 10px; }
}
/* у one-column — клас .dropcap працює замість :first-letter */
.single-onecolumn .art-main p:first-of-type::first-letter{
  font: inherit; float: none; padding: 0; margin: 0; color: inherit;
}

/* H1 highlight — жовтий «маркер» позаду 1 ключового слова/фрази у заголовку.
 * .hl-wrap клеїть .hl з пунктуацією, що йде після (кома, двокрапка, тире через
 * пробіл тощо), щоб ці знаки не «зривалися» на наступний рядок при wrap'і. */
h1.title .hl-wrap{ white-space: nowrap; }
h1.title .hl{
  position: relative;
  display: inline-block;
  padding: 0 .08em;
  isolation: isolate;
}
h1.title .hl::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: .08em;
  height: .32em;
  background: var(--yellow);
  z-index: -1;
  border-radius: 6px;
  transform: skewX(-4deg);
}
body[data-theme="dark"] h1.title .hl::before{
  background: rgba(255, 212, 0, .85);
}

/* keyword highlight у параграфі (sans-serif uppercase emphasis inside Lora) */
.art-main .kw{
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: .78em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(transparent 62%, var(--yellow-soft) 62%);
  padding: 0 .18em;
  border-radius: 2px;
  white-space: normal;
}
body[data-theme="dark"] .art-main .kw{
  color: var(--ink);
  background: linear-gradient(transparent 62%, rgba(255,212,0,.45) 62%);
}

/* clear floats around dropcap — wide блоки повинні не обтікати */
.art-main .stats-trio,
.art-main .timeline,
.art-main .compare,
.art-main .steps,
.art-main .gallery-3,
.art-main .fact-box,
.art-main .location-card,
.art-main .related-mini,
.art-main .tag-row,
.art-main .post-footer,
.art-main figure.hero-img,
.art-main figure.inline-img,
.art-main figure.wp-block-image,
.art-main h2,
.art-main h3{ clear: both; }

/* ============================== GEO patterns ============================== *
 * TL;DR (answer-first), FAQ pair, Source cite — підключаються через
 * is-style-* у inc/blocks.php; render_block мапить класи на geo-tldr / geo-faq-pair / geo-source-cite.
 * Дизайн: спираємось на існуючі токени (--paper-2, --line, --ink, --yellow, --tg).
 */
.geo-tldr{
	border-left: 3px solid var(--yellow-deep);
	background: var(--paper-2);
	border-radius: var(--radius-sm);
	padding: 14px 18px;
	margin: 22px 0 26px;
}
.geo-tldr .lbl{
	font-family: 'Unbounded', system-ui, sans-serif;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 6px;
}
.geo-tldr .answer{
	font-family: 'Lora', Georgia, serif;
	font-size: 18px;
	line-height: 1.5;
	color: var(--ink);
	margin: 0;
}

.geo-faq-pair{
	border-top: 1px solid var(--line);
	padding: 18px 0 14px;
	margin: 18px 0;
}
.geo-faq-pair > h3{
	font-family: 'Unbounded', system-ui, sans-serif;
	font-size: 19px;
	line-height: 1.3;
	margin: 0 0 10px;
	color: var(--ink);
}
.geo-faq-pair > h3::before{
	content: "Q · ";
	color: var(--red);
	font-weight: 700;
}
.geo-faq-pair > p{
	font-family: 'Lora', Georgia, serif;
	font-size: 17px;
	line-height: 1.55;
	margin: 0;
	color: var(--ink-2);
}

.geo-source-cite{
	background: rgba(42,171,238,.08);
	border-left: 3px solid var(--tg);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	margin: 18px 0;
	font-size: 14px;
	color: var(--ink-2);
}
.geo-source-cite p{ margin: 0; }
.geo-source-cite a{
	color: var(--tg);
	text-decoration: underline;
	text-underline-offset: 2px;
}