/* =========================================================
   News styles (SAFE override)
   - НЕ ламає header/footer (не чіпає глобальний .container)
   - Стилить блоки конструктора в .article-content
   ========================================================= */

:root{
  /* Stud tokens (OK to keep globally) */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #fcfaff;
  --color-bg-stroke: #e5dff1;

  --color-text-title: #0d0a23;
  --color-text-body: #39363f;
  --color-text-caption: #81779e;

  --purple-10: #f2ecfe;
  --purple-20: #e6d9fd;
  --purple-40: #ccb4fc;
  --purple-60: #b38efa;
  --purple-80: #9969f9;
  --purple-100: #8043f7;

  --pink-10: #ffeff4;
  --pink-100: #ff6496;

  --blue-10: #e5f8ff;
  --blue-100: #00b7ff;

  --yellow-10: #fff7e5;
  --yellow-100: #ffb200;

  --success-10: #e6f8f4;
  --success-20: #caece8;
  --success-100: #01b58b;

  --error-10: #fdf0ef;
  --error-20: #fce1e0;
  --error-100: #f06b64;

  --r-md: 22px;
  --r-sm: 11px;
  --shadow-card: 0px 2px 10px 0px rgba(89, 62, 141, 0.04);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ВАЖЛИВО: не конфліктуємо з глобальним --container із style.css */
  --news-container: 90%;
}

/* =========================================================
   Scope: only NEWS page
   ========================================================= */

/* Контейнер тільки всередині <main> (header/footer не чіпаємо) */
body[data-page="news"] main .container{
  width: min(var(--news-container), 64vw);
  margin-inline: auto;
  padding-inline: 14px;
}

/* =========================================================
   Article layout (під твій поточний HTML: .article-*)
   ========================================================= */

body[data-page="news"] .article{
  padding-top: 8px;
}

/* badge */
body[data-page="news"] .article-badge{
  width: fit-content;
  margin: 0 auto 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(128, 67, 247, 0.10);
  border: 1px solid rgba(128, 67, 247, 0.12);
  color: rgba(13, 10, 35, 0.88);

  font-size: 14px;
  font-weight: var(--fw-semibold);
  line-height: 1;
}

/* title */
body[data-page="news"] .article-title{
  margin: 0 0 18px;
  text-align: center;
  color: var(--color-text-title);
  font-weight: var(--fw-bold);

  font-size: clamp(32px, calc(26px + 1.55vw), 46px);
  line-height: 1.05;
  letter-spacing: -0.2px;
}

/* cover */
body[data-page="news"] .article-hero{
  border-radius: var(--r-md);
  overflow: hidden;

  background: rgba(128, 67, 247, 0.06);
  border: 1px solid rgba(128, 67, 247, 0.08);
  box-shadow: var(--shadow-card);
  margin: 0 0 18px;
}
body[data-page="news"] .article-hero img{
  width: 100%;
  height: clamp(240px, 34vw, 360px);
  object-fit: cover;
  display: block;
}

/* grid: meta left + content right */
body[data-page="news"] .article-grid{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/* meta sticky */
body[data-page="news"] .article-meta{
  position: sticky;
  top: 18px;
  align-self: start;
}
body[data-page="news"] .meta-row{
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--color-text-caption);
  font-weight: var(--fw-medium);
  font-size: 14px;
  line-height: 1.2;

  padding: 10px 4px;
}
body[data-page="news"] .meta-row + .meta-row{
  border-top: 1px solid var(--color-bg-stroke);
}
body[data-page="news"] .meta-ico{
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: 0 0 18px;
  line-height: 0;
}

/* =========================================================
   Content typography + Blocks from constructor
   IMPORTANT: підтримуємо і .article-content, і .blog-article__content
   ========================================================= */

body[data-page="news"] .article-content,
body[data-page="news"] .blog-article__content{
  color: var(--color-text-body);
  min-width: 0;
}

/* Headings */
body[data-page="news"] .article-content h2,
body[data-page="news"] .blog-article__content h2{
  margin: 0 0 12px;
  color: var(--color-text-title);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 1.6vw + 18px, 34px);
  line-height: 1.15;
  letter-spacing: -0.2px;
}

body[data-page="news"] .article-content h3,
body[data-page="news"] .blog-article__content h3{
  margin: 22px 0 12px;
  color: var(--color-text-title);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 1.1vw + 14px, 26px);
  line-height: 1.2;
  letter-spacing: -0.1px;
}

body[data-page="news"] .article-content h4,
body[data-page="news"] .blog-article__content h4{
  margin: 18px 0 10px;
  color: var(--color-text-title);
  font-weight: var(--fw-semibold);
  font-size: clamp(18px, 0.6vw + 14px, 22px);
  line-height: 1.25;
}

body[data-page="news"] .article-content p,
body[data-page="news"] .blog-article__content p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(57, 54, 63, 0.96);
}

body[data-page="news"] .article-content a,
body[data-page="news"] .blog-article__content a{
  color: rgba(128, 67, 247, 0.98);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
body[data-page="news"] .article-content a:hover,
body[data-page="news"] .blog-article__content a:hover{
  text-decoration: underline;
}

/* Sections */
body[data-page="news"] .article-content .blog-section,
body[data-page="news"] .blog-article__content .blog-section{
  margin: 10px 0 16px;
}

/* Features list */
body[data-page="news"] .article-content .blog-features,
body[data-page="news"] .blog-article__content .blog-features{
  list-style: none;
  padding-left: 0;
  margin: 14px 0 18px;
}
body[data-page="news"] .article-content .blog-features li,
body[data-page="news"] .blog-article__content .blog-features li{
  position: relative;
  padding-left: 30px;
  margin: 10px 0;
  line-height: 1.55;
}
body[data-page="news"] .article-content .blog-features li::before,
body[data-page="news"] .blog-article__content .blog-features li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(1, 181, 139, 0.10);
  border: 1px solid rgba(1, 181, 139, 0.18);
}
body[data-page="news"] .article-content .blog-features li::after,
body[data-page="news"] .blog-article__content .blog-features li::after{
  content: "✓";
  position: absolute;
  left: 4px;
  top: 0.06em;
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: rgba(1, 181, 139, 0.95);
}

/* Actions */
body[data-page="news"] .article-content .blog-actions,
body[data-page="news"] .blog-article__content .blog-actions{
  margin-top: 22px;
}
body[data-page="news"] .article-content .blog-actions__title,
body[data-page="news"] .blog-article__content .blog-actions__title{
  margin: 0 0 10px;
  color: var(--color-text-title);
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 1.25;
}

/* Buttons grid */
body[data-page="news"] .article-content .blog-buttons,
body[data-page="news"] .blog-article__content .blog-buttons{
  display: grid;
  gap: 12px;
  margin-top: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body[data-page="news"] .article-content .blog-buttons--one,
body[data-page="news"] .blog-article__content .blog-buttons--one{ grid-template-columns: 1fr; }
body[data-page="news"] .article-content .blog-buttons--three,
body[data-page="news"] .blog-article__content .blog-buttons--three{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-page="news"] .article-content .blog-buttons--grid4,
body[data-page="news"] .blog-article__content .blog-buttons--grid4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Button base */
body[data-page="news"] .article-content .blog-btn,
body[data-page="news"] .blog-article__content .blog-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 14px 14px;
  border-radius: 18px;

  border: 1px solid rgba(128, 67, 247, 0.14);
  background: var(--purple-100);
  box-shadow: var(--shadow-card);

  color: rgba(255, 255, 255, 0.96);
  font-weight: var(--fw-semibold);
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;

  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}
body[data-page="news"] .article-content .blog-btn:hover,
body[data-page="news"] .blog-article__content .blog-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(128, 67, 247, 0.08);
  filter: brightness(0.95);
}
body[data-page="news"] .article-content .blog-btn:active,
body[data-page="news"] .blog-article__content .blog-btn:active{
  transform: translateY(-1px);
}

/* Button variants */
body[data-page="news"] .article-content .blog-btn--blue,
body[data-page="news"] .blog-article__content .blog-btn--blue{
  background: var(--blue-100);
  border-color: rgba(0, 183, 255, 0.18);
}
body[data-page="news"] .article-content .blog-btn--green,
body[data-page="news"] .blog-article__content .blog-btn--green{
  background: var(--success-100);
  border-color: rgba(1, 181, 139, 0.18);
}
body[data-page="news"] .article-content .blog-btn--yellow,
body[data-page="news"] .blog-article__content .blog-btn--yellow{
  background: var(--yellow-100);
  border-color: rgba(255, 178, 0, 0.20);
  color: rgba(13, 10, 35, 0.96);
}
body[data-page="news"] .article-content .blog-btn--red,
body[data-page="news"] .blog-article__content .blog-btn--red{
  background: var(--error-100);
  border-color: rgba(240, 107, 100, 0.20);
}
body[data-page="news"] .article-content .blog-btn--purple,
body[data-page="news"] .blog-article__content .blog-btn--purple{
  background: var(--purple-100);
  border-color: rgba(128, 67, 247, 0.18);
}

/* Callout */
body[data-page="news"] .article-content .blog-callout,
body[data-page="news"] .blog-article__content .blog-callout{
  margin: 18px 0;
  padding: 14px 16px;
  border-radius: 18px;

  border: 1px solid rgba(128, 67, 247, 0.12);
  background: rgba(242, 236, 254, 0.60);
  color: rgba(57, 54, 63, 0.96);
}
body[data-page="news"] .article-content .blog-callout--blue,
body[data-page="news"] .blog-article__content .blog-callout--blue{
  border-color: rgba(0, 183, 255, 0.18);
  background: rgba(229, 248, 255, 0.75);
}
body[data-page="news"] .article-content .blog-callout--green,
body[data-page="news"] .blog-article__content .blog-callout--green{
  border-color: rgba(1, 181, 139, 0.18);
  background: rgba(230, 248, 244, 0.80);
}
body[data-page="news"] .article-content .blog-callout--yellow,
body[data-page="news"] .blog-article__content .blog-callout--yellow{
  border-color: rgba(255, 178, 0, 0.20);
  background: rgba(255, 247, 229, 0.90);
}
body[data-page="news"] .article-content .blog-callout--red,
body[data-page="news"] .blog-article__content .blog-callout--red{
  border-color: rgba(240, 107, 100, 0.20);
  background: rgba(253, 240, 239, 0.90);
}

/* Quote */
body[data-page="news"] .article-content blockquote,
body[data-page="news"] .blog-article__content blockquote{
  position: relative;
  margin: 22px 0;
  padding: 48px 18px 18px;

  border-radius: 20px;
  border: 1px solid rgba(128, 67, 247, 0.14);
  background: rgba(242, 236, 254, 0.85);

  color: rgba(57, 54, 63, 0.96);
  font-weight: var(--fw-semibold);

  white-space: pre-line;
  overflow: hidden;
}
body[data-page="news"] .article-content blockquote::before,
body[data-page="news"] .blog-article__content blockquote::before{
  content: "“";
  position: absolute;
  left: 14px;
  top: 10px;

  font-size: 64px;
  line-height: 1;
  color: rgba(128, 67, 247, 0.18);

  z-index: 0;
  pointer-events: none;
}
body[data-page="news"] .article-content blockquote > *,
body[data-page="news"] .blog-article__content blockquote > *{
  position: relative;
  z-index: 1;
}

/* Divider */
body[data-page="news"] .article-content .blog-divider,
body[data-page="news"] .blog-article__content .blog-divider{
  height: 1px;
  border: 0;
  background: var(--color-bg-stroke);
  margin: 22px 0;
}

/* Inline image */
body[data-page="news"] .article-content .blog-inline-image,
body[data-page="news"] .blog-article__content .blog-inline-image{
  display: block;
  width: 100%;
  margin: 22px auto;

  border-radius: var(--r-md);
  overflow: hidden;

  border: 1px solid var(--color-bg-stroke);
  box-shadow: var(--shadow-card);
}

/* Tables */
body[data-page="news"] .article-content .blog-table,
body[data-page="news"] .blog-article__content .blog-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  overflow: hidden;
  border-radius: 18px;

  border: 1px solid var(--color-bg-stroke);
  background: var(--color-bg-primary);
  box-shadow: var(--shadow-card);

  margin: 18px 0;
}
body[data-page="news"] .article-content .blog-table th,
body[data-page="news"] .article-content .blog-table td,
body[data-page="news"] .blog-article__content .blog-table th,
body[data-page="news"] .blog-article__content .blog-table td{
  padding: 12px 12px;
  font-size: 14px;
  border-bottom: 1px solid var(--color-bg-stroke);
  vertical-align: top;
}
body[data-page="news"] .article-content .blog-table th,
body[data-page="news"] .blog-article__content .blog-table th{
  color: var(--color-text-title);
  background: rgba(242, 236, 254, 0.60);
  font-weight: var(--fw-semibold);
  text-align: left;
}
body[data-page="news"] .article-content .blog-table tr:last-child td,
body[data-page="news"] .blog-article__content .blog-table tr:last-child td{
  border-bottom: 0;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 980px){
  body[data-page="news"] .article-grid{
    grid-template-columns: 220px minmax(0, 1fr);
  }
}

@media (max-width: 820px){
  body[data-page="news"] .article-grid{
    grid-template-columns: 1fr;
  }

  body[data-page="news"] .article-meta{
    position: static;
    order: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  body[data-page="news"] .meta-row{
    padding: 12px 8px;
  }

  body[data-page="news"] .meta-row + .meta-row{
    border-top: 0;
    border-left: 1px solid var(--color-bg-stroke);
  }
}

@media (max-width: 640px){
  body[data-page="news"] .article-content .blog-buttons,
  body[data-page="news"] .blog-article__content .blog-buttons{
    grid-template-columns: 1fr !important;
  }
}
body[data-page="news"] .article-breadcrumbs{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 14px;
  font-size:16px;
  line-height:1.25;
}

body[data-page="news"] .article-breadcrumbs__link{
  color: rgba(128, 67, 247, 0.98);
  text-decoration:none;
  font-weight: var(--fw-semibold);
}
body[data-page="news"] .article-breadcrumbs__link:hover{ text-decoration: underline; }

body[data-page="news"] .article-breadcrumbs__sep{
  color: rgba(129, 119, 158, 0.8);
}

body[data-page="news"] .article-breadcrumbs__current{
  color: rgba(13, 10, 35, 0.9);
  font-weight: var(--fw-medium);
}
/* Центруємо бейдж */
body[data-page="news"] .article-badge{
  width: fit-content;
  margin: 0 auto 12px;     /* авто зліва/справа = по центру */
}

/* Якщо бейдж лежить у flex-контейнері — підстрахуємося */
body[data-page="news"] .article > .article-badge{
  align-self: center;       /* працює коли parent = display:flex */
}

/* Якщо parent не flex, але хочеш "гарантовано" */
body[data-page="news"] .article{
  text-align: center;       /* центрує inline/inline-block */
}
body[data-page="news"] .article-grid,
body[data-page="news"] .article-hero{
  text-align: initial;      /* щоб сітка/контент не стали centered */
}
body[data-page="news"] .article-badge{
  display: block;
  width: fit-content;
  margin: 0 auto 12px;
  margin-top: 32px;
}

/* =========================================================
   News Index v4 (PROD)
   - fixes huge top spacing near H1
   - 90vw container with sane max width
   - 3-col responsive grid
   - disables rail UX, keeps normal grid
   Paste at the END of news.css
   ========================================================= */

/* ---------- Page spacing fixes (H1 "Новини") ---------- */
body[data-page="news"] main{
  /* трошки компактніше, щоб не було “порожнечі” під хедером */
  padding-top: 0;
}

/* секція з новинами (у тебе: <section class="section section--alt">) */
body[data-page="news"] main .section{
  /* перекриваємо базові великі падінги, якщо вони є в style.css */
  padding-top: 28px;
  padding-bottom: 42px;
}

/* контейнер сторінки: <div class="container page newsV2"> */
body[data-page="news"] main .container.page.newsV2{
  /* 90% ширини екрану, але не безмежно */
  width: min(90vw, 1440px);
  margin-inline: auto;

  /* забираємо зайві внутрішні відступи, якщо page їх додає */
  padding-top: 0;
  padding-bottom: 0;
}

/* заголовок сторінки */
body[data-page="news"] .pageHead{
  margin: 0 0 14px;
  padding: 0;
}

body[data-page="news"] .pageTitle{
  margin: 0;
  line-height: 1.12;
  font-weight: var(--fw-bold);
  color: var(--color-text-title);
  /* виглядає добре на різних екранах */
  font-size: clamp(28px, 2.2vw, 40px);
}

/* ---------- Layout ---------- */
body[data-page="news"] .newsV2__layout{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (max-width: 980px){
  body[data-page="news"] .newsV2__layout{
    grid-template-columns: 1fr;
  }
}

/* ---------- Aside card ---------- */
body[data-page="news"] .newsV2__asideCard{
  background: var(--color-bg-primary);
  border: 1px solid var(--color-bg-stroke);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 16px;
}

body[data-page="news"] .newsV2__asideTitle{
  margin: 0 0 1rem 0;
  color: var(--text);
  font-weight: 600;
}

body[data-page="news"] .newsV2__pills{
  display: grid;
  gap: 1rem;
}

body[data-page="news"] .newsV2__pill{
  display: flex;
  align-items: center;

  padding: 1rem 1rem;
  border-radius: 22px;

  background: var(--solid);
  border: 1px solid var(--color-bg-stroke);

  text-decoration: none;
  color: rgba(13, 10, 35, 0.90);
  font-size: var(--fs-16);
  font-weight: 400;
}

body[data-page="news"] .newsV2__pill:hover{
  background: rgba(128, 67, 247, 0.06);
  border-color: rgba(128, 67, 247, 0.20);
  text-decoration: none;
}

body[data-page="news"] .newsV2__pill.is-active{
  background: rgba(128, 67, 247, 0.10);
  border-color: rgba(128, 67, 247, 0.22);
  color: rgba(128, 67, 247, 0.95);
  font-weight: var(--fw-semibold);
}

/* ---------- Main card ---------- */
body[data-page="news"] .newsV2__mainCard{
  background: var(--color-bg-primary);
  border: 1px solid var(--color-bg-stroke);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: 16px;

  /* FIX: не роздуваємо/не ламаємо ширину */
  min-width: 0;
}

body[data-page="news"] .newsV2__mainTop{
  margin: 0 0 10px;
}

body[data-page="news"] .newsV2__mainTitle{
  margin: 0 0 1rem 0;
  color: var(--text);
  font-weight: 600;
}

/* ---------- Toolbar (1 row, search grows) ---------- */
body[data-page="news"] .newsV2__toolbar{
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(229, 223, 241, 0.95);
}

@media (max-width: 820px){
  body[data-page="news"] .newsV2__toolbar{
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  body[data-page="news"] .newsV2__reset{
    width: 100%;
  }
}

body[data-page="news"] .newsV2__label{
  font-size: var(--fs-14);
  color: var(--muted);
  font-weight: 400;
  margin-bottom: .5rem;
}

body[data-page="news"] .newsV2__select,
body[data-page="news"] .newsV2__input{
  height: 44px;
  width: 100%;
  padding: 0 1rem;
  border-radius: 22px;
  border: 1px solid var(--color-bg-stroke);
  background: var(--solid);
  color: var(--text);
  outline: none;
  font-size: var(--fs-14);
}

body[data-page="news"] .newsV2__select:focus,
body[data-page="news"] .newsV2__input:focus{
  border-color: rgba(128, 67, 247, 0.30);
  box-shadow: 0 0 0 4px rgba(128, 67, 247, 0.10);
}

body[data-page="news"] .newsV2__reset{
  height: 44px;
  align-self: end;
  white-space: nowrap;
}

/* ---------- Disable rail UX (arrows/scroll) ---------- */
body[data-page="news"] .newsV2__railBar{
  display: none !important;
}

body[data-page="news"] .newsV2__rail{
  overflow: visible !important;
  border-radius: 0;
  /* щоб клавіатурний фокус не малював дивний outline */
  outline: none;
}

/* ---------- Grid: 3 cols (2 -> 1 responsive) ---------- */
body[data-page="news"] .newsV2__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 18px;
  padding: 14px 0 8px;
  align-items: stretch;
}

@media (max-width: 1200px){
  body[data-page="news"] .newsV2__grid{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

@media (max-width: 820px){
  body[data-page="news"] .newsV2__grid{
    grid-template-columns: 1fr;
  }
}

/* ---------- Tile card ---------- */
body[data-page="news"] .newsTile{
  height: 100%;
  border-radius: 18px;
  border: 1px solid var(--color-bg-stroke);
  background: var(--color-bg-primary);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 140ms ease, border-color 140ms ease;
}

body[data-page="news"] .newsTile:hover{
  transform: translateY(-2px);
  border-color: rgba(128, 67, 247, 0.22);
}

body[data-page="news"] .newsTile__link{
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
}

body[data-page="news"] .newsTile__media{
  width: 100%;
  height: 160px;
  background: rgba(128, 67, 247, 0.06);
}

body[data-page="news"] .newsTile__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body[data-page="news"] .newsTile__body{
  padding: 12px 12px 14px;
  display: grid;
  gap: 8px;
}

body[data-page="news"] .newsTile__title{
  margin: 0;
  color: var(--color-text-title);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-page="news"] .newsTile__excerpt{
  margin: 0;
  color: rgba(57, 54, 63, 0.92);
  font-size: 14px;
  line-height: 1.45;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body[data-page="news"] .newsTile__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

body[data-page="news"] .newsChip{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(128, 67, 247, 0.12);
  background: rgba(128, 67, 247, 0.08);
  color: rgba(128, 67, 247, 0.95);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  line-height: 1;
}

body[data-page="news"] .newsChip--muted{
  border-color: rgba(229, 223, 241, 0.90);
  background: rgba(252, 250, 255, 0.90);
  color: rgba(13, 10, 35, 0.86);
  font-weight: var(--fw-medium);
}

/* ---------- Pager + Empty ---------- */
body[data-page="news"] .newsV2__pager{
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-top: 10px;
}

body[data-page="news"] .newsV2__pageDot{
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--color-bg-stroke);
  background: var(--color-bg-primary);
  color: rgba(13, 10, 35, 0.86);
  cursor: pointer;
  font-weight: var(--fw-semibold);
}

body[data-page="news"] .newsV2__pageDot.is-active{
  background: rgba(128, 67, 247, 0.95);
  border-color: rgba(128, 67, 247, 0.95);
  color: #fff;
}

body[data-page="news"] .newsV2__empty{
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--color-bg-stroke);
  background: rgba(252, 250, 255, 0.90);
  color: rgba(57, 54, 63, 0.92);
}
/* =========================================================
   TOC / Extended TOC (blog-toc)
   ========================================================= */

body[data-page="news"] .article-content .blog-toc,
body[data-page="news"] .blog-article__content .blog-toc{
  margin: 18px 0 22px;
  padding: 14px 16px;

  border-radius: 18px;
  border: 1px solid rgba(128, 67, 247, 0.14);
  background: rgba(242, 236, 254, 0.70);
  box-shadow: var(--shadow-card);

  position: relative;
  overflow: hidden;
}

/* легкий акцент-заливка зверху */
body[data-page="news"] .article-content .blog-toc::before,
body[data-page="news"] .blog-article__content .blog-toc::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 54px;
  background: rgba(128, 67, 247, 0.10);
  pointer-events: none;
}

body[data-page="news"] .article-content .blog-toc__title,
body[data-page="news"] .blog-article__content .blog-toc__title{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0 0 10px;
  color: var(--color-text-title);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1.2;
}

/* маленька “іконка” зліва */
body[data-page="news"] .article-content .blog-toc__title::before,
body[data-page="news"] .blog-article__content .blog-toc__title::before{
  content: "☰";
  display: grid;
  place-items: center;

  width: 28px;
  height: 28px;
  border-radius: 10px;

  background: rgba(128, 67, 247, 0.14);
  border: 1px solid rgba(128, 67, 247, 0.16);
  color: rgba(128, 67, 247, 0.95);

  font-size: 14px;
  line-height: 1;
}

/* список */
body[data-page="news"] .article-content .blog-toc__list,
body[data-page="news"] .blog-article__content .blog-toc__list{
  position: relative;
  margin: 0;
  padding: 0 0 0 22px; /* місце під нумерацію */
  padding-top: 22px;
}

/* пункти */
body[data-page="news"] .article-content .blog-toc__item,
body[data-page="news"] .blog-article__content .blog-toc__item{
  margin: 8px 0;
  padding-left: 6px;
  line-height: 1.35;
}

/* посилання */
body[data-page="news"] .article-content .blog-toc__item a,
body[data-page="news"] .blog-article__content .blog-toc__item a{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 12px;

  background: rgba(255, 255, 255, 0.70);
  border: 1px solid rgba(229, 223, 241, 0.95);

  color: rgba(128, 67, 247, 0.98);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  font-size: 14px;
}

.blog-toc__title{
  margin-bottom: 14px; /* або 12px / 16px — під смак */
}

body[data-page="news"] .article-content .blog-toc__item a:hover,
body[data-page="news"] .blog-article__content .blog-toc__item a:hover{
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(128, 67, 247, 0.22);
  text-decoration: none;
}

/* Extended TOC: H1 пункт зробимо трохи “головнішим” */
body[data-page="news"] .article-content .blog-toc__item--h1 a,
body[data-page="news"] .blog-article__content .blog-toc__item--h1 a{
  background: rgba(128, 67, 247, 0.12);
  border-color: rgba(128, 67, 247, 0.20);
  color: rgba(13, 10, 35, 0.90);
}

body[data-page="news"] .blog-article__content .blog-toc__item--h1 a{
  background: rgba(128, 67, 247, 0.12);
  border-color: rgba(128, 67, 247, 0.20);
  color: rgba(13, 10, 35, 0.90);
}

/* щоб на мобілці не було “сходинок” */
@media (max-width: 640px){
  body[data-page="news"] .article-content .blog-toc__list,
  body[data-page="news"] .blog-article__content .blog-toc__list{
    padding-left: 18px;
  }
  body[data-page="news"] .article-content .blog-toc__item a,
  body[data-page="news"] .blog-article__content .blog-toc__item a{
    display: block;
  }
}
/* =========================================================
   Embed / iframe block
   ========================================================= */

/* Загальна обгортка (вигляд як у карток/картинок) */
body[data-page="news"] .article-content .blog-embed,
body[data-page="news"] .blog-article__content .blog-embed{
  margin: 22px 0;
  border-radius: var(--r-md);
  overflow: hidden;

  border: 1px solid var(--color-bg-stroke);
  box-shadow: var(--shadow-card);
  background: rgba(128, 67, 247, 0.06);
}

/* Загальний iframe/embed/object */
body[data-page="news"] .article-content .blog-embed iframe,
body[data-page="news"] .article-content .blog-embed embed,
body[data-page="news"] .article-content .blog-embed object,
body[data-page="news"] .blog-article__content .blog-embed iframe,
body[data-page="news"] .blog-article__content .blog-embed embed,
body[data-page="news"] .blog-article__content .blog-embed object{
  width: 100%;
  display: block;
  border: 0;
}

body[data-page="news"] .article-content .blog-embed--video,
body[data-page="news"] .blog-article__content .blog-embed--video{
  aspect-ratio: 16 / 9;
}
body[data-page="news"] .article-content .blog-embed--video iframe,
body[data-page="news"] .blog-article__content .blog-embed--video iframe{
  height: 100%;
}

body[data-page="news"] .article-content .blog-embed--doc,
body[data-page="news"] .blog-article__content .blog-embed--doc{
  height: var(--embed-doc-h, 680px);
}
body[data-page="news"] .article-content .blog-embed--doc iframe,
body[data-page="news"] .blog-article__content .blog-embed--doc iframe{
  height: 100%;
}

@media (max-width: 640px){
  body[data-page="news"] .article-content .blog-embed--doc,
  body[data-page="news"] .blog-article__content .blog-embed--doc{
    height: var(--embed-doc-h-sm, 520px);
  }
}

/* =========================================================
   Slider controls (universal for blog-banner sliders)
   - JS injects buttons if missing (news.js -> NewsBanners)
   ========================================================= */

body[data-page="news"] .article-content .blog-banner__slider,
body[data-page="news"] .blog-article__content .blog-banner__slider{
  position: relative;
}

/* injected nav buttons */
body[data-page="news"] .article-content .blog-banner__navBtn,
body[data-page="news"] .blog-article__content .blog-banner__navBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;

  width: 42px;
  height: 42px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(229, 223, 241, 0.98);
  box-shadow: 0 10px 24px rgba(13, 10, 35, 0.10);

  color: rgba(13, 10, 35, 0.86);
  cursor: pointer;

  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease, opacity 140ms ease;
  -webkit-tap-highlight-color: transparent;
}

body[data-page="news"] .article-content .blog-banner__navBtn:hover,
body[data-page="news"] .blog-article__content .blog-banner__navBtn:hover{
  background: rgba(255, 255, 255, 0.92);
  border-color: var(--banner-accent-border);
  transform: translateY(-50%) scale(1.04);
}

body[data-page="news"] .article-content .blog-banner__navBtn:active,
body[data-page="news"] .blog-article__content .blog-banner__navBtn:active{
  transform: translateY(-50%) scale(0.98);
}

body[data-page="news"] .article-content .blog-banner__navBtn:focus-visible,
body[data-page="news"] .blog-article__content .blog-banner__navBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(128, 67, 247, 0.16), 0 10px 24px rgba(13, 10, 35, 0.10);
}

body[data-page="news"] .article-content .blog-banner__navBtn[disabled],
body[data-page="news"] .blog-article__content .blog-banner__navBtn[disabled]{
  opacity: 0.45;
  cursor: default;
  transform: translateY(-50%);
}

body[data-page="news"] .article-content .blog-banner__navBtn--prev,
body[data-page="news"] .blog-article__content .blog-banner__navBtn--prev{ left: 10px; }

body[data-page="news"] .article-content .blog-banner__navBtn--next,
body[data-page="news"] .blog-article__content .blog-banner__navBtn--next{ right: 10px; }

/* keep nav buttons visible but less intrusive on small screens */
@media (max-width: 640px){
  body[data-page="news"] .article-content .blog-banner__navBtn,
  body[data-page="news"] .blog-article__content .blog-banner__navBtn{
    width: 38px;
    height: 38px;
    opacity: 0.96;
  }

  body[data-page="news"] .article-content .blog-banner__navBtn--prev,
  body[data-page="news"] .blog-article__content .blog-banner__navBtn--prev{ left: 6px; }

  body[data-page="news"] .article-content .blog-banner__navBtn--next,
  body[data-page="news"] .blog-article__content .blog-banner__navBtn--next{ right: 6px; }
}

/* dots: bigger hit-area + accessible focus */
body[data-page="news"] .article-content .blog-banner__dot,
body[data-page="news"] .blog-article__content .blog-banner__dot{
  position: relative;
}

body[data-page="news"] .article-content .blog-banner__dot::before,
body[data-page="news"] .blog-article__content .blog-banner__dot::before{
  content: "";
  position: absolute;
  inset: -8px; /* hit area */
}

body[data-page="news"] .article-content .blog-banner__dot:focus-visible,
body[data-page="news"] .blog-article__content .blog-banner__dot:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(128, 67, 247, 0.14);
}

/* =========================================================
   Blog banner + Slider (FIX)
   Problem this fixes:
   - slider markup exists, but there were no base layout styles for
     .blog-banner / __track / __slideWrap / __dots / __nav
   - JS (newsPage.js) injects .blog-banner__nav + .blog-banner__dots,
     so we style both __nav and legacy __navBtn variants.
   Paste at the END of news.css
   ========================================================= */

/* ---- Banner base (card) ---- */
body[data-page="news"] .article-content .blog-banner,
body[data-page="news"] .blog-article__content .blog-banner{
  border-radius: var(--r-md);
  border: 1px solid var(--color-bg-stroke);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--color-bg-primary);
  margin: 18px 0;
}

body[data-page="news"] .article-content .blog-banner__inner,
body[data-page="news"] .blog-article__content .blog-banner__inner{
  padding: 18px;
}

body[data-page="news"] .article-content .blog-banner__title,
body[data-page="news"] .blog-article__content .blog-banner__title{
  margin: 0 0 10px;
  color: var(--color-text-title);
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 1.1vw + 14px, 22px);
  line-height: 1.25;
}

body[data-page="news"] .article-content .blog-banner__text,
body[data-page="news"] .blog-article__content .blog-banner__text{
  color: rgba(57, 54, 63, 0.96);
  font-size: 15px;
  line-height: 1.65;
}

body[data-page="news"] .article-content .blog-banner__text p,
body[data-page="news"] .blog-article__content .blog-banner__text p{
  margin: 0 0 10px;
}

body[data-page="news"] .article-content .blog-banner__ctaRow,
body[data-page="news"] .blog-article__content .blog-banner__ctaRow{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body[data-page="news"] .article-content .blog-banner__cta,
body[data-page="news"] .blog-article__content .blog-banner__cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  height: 44px;
  padding: 0 16px;
  border-radius: 999px;

  background: var(--purple-100);
  color: rgba(255,255,255,0.98);
  border: 1px solid rgba(128, 67, 247, 0.18);

  font-weight: var(--fw-semibold);
  font-size: 14px;
  line-height: 1;

  transition: transform 160ms ease, filter 160ms ease;
}

body[data-page="news"] .article-content .blog-banner__cta:hover,
body[data-page="news"] .blog-article__content .blog-banner__cta:hover{
  transform: translateY(-1px);
  filter: brightness(0.96);
}

/* ---- Slider layout ---- */
body[data-page="news"] .article-content .blog-banner__slider,
body[data-page="news"] .blog-article__content .blog-banner__slider{
  position: relative;
  border-radius: var(--r-md);
}

body[data-page="news"] .article-content .blog-banner__track,
body[data-page="news"] .blog-article__content .blog-banner__track{
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  /* avoids "half next slide" peeking when padding exists */
  padding: 0;
  margin: 0;

  /* hide scrollbar */
  scrollbar-width: none;
}
body[data-page="news"] .article-content .blog-banner__track::-webkit-scrollbar,
body[data-page="news"] .blog-article__content .blog-banner__track::-webkit-scrollbar{
  width: 0;
  height: 0;
}

body[data-page="news"] .article-content .blog-banner__slideWrap,
body[data-page="news"] .blog-article__content .blog-banner__slideWrap{
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: start;
}

/* inside slider: remove extra margins so slides don't "grow" vertically */
body[data-page="news"] .article-content .blog-banner.is-in-slider,
body[data-page="news"] .blog-article__content .blog-banner.is-in-slider{
  margin: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
body[data-page="news"] .article-content .blog-banner.is-in-slider .blog-banner__inner,
body[data-page="news"] .blog-article__content .blog-banner.is-in-slider .blog-banner__inner{
  padding: 18px;
}

/* ---- Nav buttons (JS injects .blog-banner__nav; legacy CSS used __navBtn) ---- */
body[data-page="news"] .article-content .blog-banner__nav,
body[data-page="news"] .blog-article__content .blog-banner__nav,
body[data-page="news"] .article-content .blog-banner__navBtn,
body[data-page="news"] .blog-article__content .blog-banner__navBtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;

  width: 42px;
  height: 42px;
  border-radius: 999px;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(229, 223, 241, 0.98);
  box-shadow: 0 10px 24px rgba(13, 10, 35, 0.10);

  color: rgba(13, 10, 35, 0.86);
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;
}

body[data-page="news"] .article-content .blog-banner__nav--prev,
body[data-page="news"] .blog-article__content .blog-banner__nav--prev,
body[data-page="news"] .article-content .blog-banner__navBtn--prev,
body[data-page="news"] .blog-article__content .blog-banner__navBtn--prev{
  left: 8px;
}

body[data-page="news"] .article-content .blog-banner__nav--next,
body[data-page="news"] .blog-article__content .blog-banner__nav--next,
body[data-page="news"] .article-content .blog-banner__navBtn--next,
body[data-page="news"] .blog-article__content .blog-banner__navBtn--next{
  right: 8px;
}

/* ---- Dots (JS injects .blog-banner__dots + .blog-banner__dot) ---- */
body[data-page="news"] .article-content .blog-banner__dots,
body[data-page="news"] .blog-article__content .blog-banner__dots{
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 4;

  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;

  padding: 8px 10px;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(229, 223, 241, 0.95);
  backdrop-filter: blur(6px);
}

body[data-page="news"] .article-content .blog-banner__dot,
body[data-page="news"] .blog-article__content .blog-banner__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(129, 119, 158, 0.55);
  background: rgba(129, 119, 158, 0.18);
  padding: 0;
  cursor: pointer;
}

body[data-page="news"] .article-content .blog-banner__dot.is-active,
body[data-page="news"] .blog-article__content .blog-banner__dot.is-active{
  border-color: rgba(128, 67, 247, 0.85);
  background: rgba(128, 67, 247, 0.85);
}

/* Mobile: keep nav reachable */
@media (max-width: 640px){
  body[data-page="news"] .article-content .blog-banner__nav,
  body[data-page="news"] .blog-article__content .blog-banner__nav{
    width: 38px;
    height: 38px;
  }
}

/* =========================================================
   NEWS ARTICLE BLOCKS — ADMIN PARITY PATCH
   This block brings front-end news.css in line with the styles
   used inside news_admin.php preview/export for:
   - blog banners (all variants + slider)
   - embeds (iframe video/doc)
   - action buttons color variants
   Scope: only inside body[data-page="news"] content.
   ========================================================= */

body[data-page="news"] :is(.article-content,.blog-article__content){
  /* banner palette expected by admin banner CSS */
  --title: var(--text, #23252A);
  --text: var(--text, #23252A);
  --muted: rgba(22,36,41,.70);
  --stroke: rgba(72, 17, 191, .22);
  --purple10: rgba(72,17,191,.08);
  --bg2: #F6F7FA;
  --accent-border: rgba(128,67,247,.22);
}

/* Buttons (exported by builder "buttons" block) */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;

  height: 46px;
  padding: 0 18px;
  border-radius: 999px;

  border: 1px solid rgba(22,36,41,.10);
  background: rgba(255,255,255,.62);
  color: rgba(22,36,41,.92);

  font-weight: 700;
  font-size: 14px;
  letter-spacing: .2px;
  text-decoration:none;

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background .12s ease, border-color .12s ease;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-btn:hover{ transform: translateY(-1px); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-btn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(140,92,242,.22);
}

/* Variants (match admin palette) */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-btn--purple{
  background: linear-gradient(135deg, rgba(72,17,191,.92), rgba(140,92,242,.88));
  border-color: rgba(72,17,191,.18);
  color:#fff;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-btn--blue{
  background: linear-gradient(135deg, rgba(0,183,255,.92), rgba(72,17,191,.78));
  border-color: rgba(0,183,255,.22);
  color:#fff;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-btn--green{
  background: linear-gradient(135deg, rgba(1,181,139,.92), rgba(9,166,3,.78));
  border-color: rgba(1,181,139,.22);
  color:#fff;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-btn--yellow{
  background: linear-gradient(135deg, rgba(255,178,0,.95), rgba(241,135,0,.88));
  border-color: rgba(255,178,0,.22);
  color:#1a1406;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-btn--red{
  background: linear-gradient(135deg, rgba(240,107,100,.95), rgba(255,100,150,.82));
  border-color: rgba(240,107,100,.22);
  color:#fff;
}

/* Embeds (exported as <div class="blog-embed" data-kind="...">) */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-embed{
  margin: 18px 0;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-embed iframe{
  width: 100%;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #fcfaff;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-embed[data-kind="video"] > div{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 18px;
  overflow: hidden;
  background: #fcfaff;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-embed[data-kind="video"] iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

/* ===== Admin banner CSS (from news_admin.php) — scoped to news page ===== */
/* ===== Blog banners (preview in admin). Paste the same block into the blog page CSS. ===== */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner{
  --accent:#8043f7;
  --accent-bg:rgba(179,142,250,.55);
  position:relative;
  border:1px solid var(--stroke);
  border-radius:28px;
  padding:22px;
  background:#fff;
  overflow:hidden;
  isolation:isolate;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--banner-bg);
  background-size:cover;
  background-position:center;
  opacity:.14;
  pointer-events:none;
  z-index:0;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-overlay::before{ opacity:.28; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__inner{ position:relative; z-index:1; display:flex; gap:22px; align-items:center; min-height:160px; }

/* sizing */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-size-sm{ padding:16px; border-radius:22px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-size-sm .blog-banner__inner{ min-height:130px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-size-lg{ padding:28px; border-radius:32px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-size-lg .blog-banner__inner{ min-height:190px; }

/* themes */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark{
  background:#0d0a23;
  border-color:rgba(229,223,241,.18);
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark::before{ opacity:.22; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark .blog-banner__title, body[data-page="news"] :is(.article-content,.blog-article__content) 
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark .blog-banner__text, body[data-page="news"] :is(.article-content,.blog-article__content) 
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark .blog-banner__statVal, body[data-page="news"] :is(.article-content,.blog-article__content) 
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark .blog-banner__statLab, body[data-page="news"] :is(.article-content,.blog-article__content) 
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark .blog-banner__author{ color:#fff; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark .blog-banner__text{ opacity:.92; }

body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-glass{
  background:rgba(255,255,255,.58);
  backdrop-filter:saturate(180%) blur(10px);
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-glass::before{ opacity:.18; }

/* content */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__content{ max-width:820px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__title{ font-weight:900; font-size:28px; color:var(--title); line-height:1.15; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__text{ margin-top:8px; font-size:16px; color:var(--text); line-height:1.4; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__text p{ margin:0 0 8px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__text p:last-child{ margin-bottom:0; }

/* buttons */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__ctaRow{ margin-top:18px; display:flex; gap:12px; flex-wrap:wrap; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__ctaRow.is-center{ justify-content:center; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__ctaRow.is-left{ justify-content:flex-start; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__ctaRow.is-right{ justify-content:flex-end; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__ctaRow.is-two .blog-banner__cta{ min-width:220px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:50px;
  padding:0 26px;
  font-weight:900;
  border-radius:14px;
  border:1px solid var(--accent-border);
  min-width:280px;
  text-decoration:none;
  color:var(--title);
  background:var(--accent-bg);
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__cta.is-secondary{
  background:#fff;
  border:2px solid var(--accent);
  color:var(--title);
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark .blog-banner__cta.is-secondary{
  background:rgba(255,255,255,.92);
  color:#0d0a23;
}
/* accent vars */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner{ --accent-border:rgba(128,67,247,.28); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-accent-purple{ --accent:#8043f7; --accent-bg:rgba(179,142,250,.55); --accent-border:rgba(128,67,247,.28); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-accent-blue{ --accent:#00b7ff; --accent-bg:rgba(0,183,255,.16); --accent-border:rgba(0,183,255,.30); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-accent-pink{ --accent:#ff6496; --accent-bg:rgba(255,100,150,.14); --accent-border:rgba(255,100,150,.30); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-accent-yellow{ --accent:#ffb200; --accent-bg:rgba(255,178,0,.16); --accent-border:rgba(255,178,0,.35); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-accent-green{ --accent:#01b58b; --accent-bg:rgba(1,181,139,.16); --accent-border:rgba(1,181,139,.35); }
/* CTA align variants */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner--cta.is-center .blog-banner__inner{ justify-content:center; text-align:center; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner--cta.is-left .blog-banner__inner{ justify-content:flex-start; text-align:left; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner--cta.is-right .blog-banner__inner{ justify-content:flex-end; text-align:right; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner--cta.is-right .blog-banner__ctaRow{ justify-content:flex-end; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner--cta.is-center .blog-banner__ctaRow{ justify-content:center; }

/* links */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner--links .blog-banner__inner{ flex-direction:column; align-items:stretch; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__linksGrid{ display:grid; grid-template-columns:1fr 1px 1fr; gap:22px; margin-top:14px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__linksSep{ background:var(--stroke); border-radius:2px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__links{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__links a{ color:#1a66ff; text-decoration:none; font-weight:600; }

/* slider */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner--slider .blog-banner__inner{ flex-direction:column; align-items:stretch; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__slider{
  position:relative;
  overflow:hidden;
  border-radius:20px;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__track{
  display:flex;
  gap:0;
  width:100%;
  will-change:transform;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__slider{ min-height:240px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__slideWrap{
  flex:0 0 100%;
  min-width:100%;
  min-height:240px;
  scroll-snap-align:start;
  display:block;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__slideWrap > .blog-banner{ width:100%; height:100%; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-in-slider{ width:100%; height:100%; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-in-slider .blog-banner__inner{ min-height:100%; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(128,67,247,.25);
  background:rgba(255,255,255,.85);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:20px;
  z-index:2;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__nav.is-prev{ left:10px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__nav.is-next{ right:10px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark .blog-banner__nav{ background:rgba(13,10,35,.7); border-color:rgba(229,223,241,.18); color:#fff; }

body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__dots{ margin-top:14px; display:flex; gap:10px; justify-content:center; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__dot{
  width:14px; height:14px;
  border-radius:999px;
  border:2px solid rgba(128,67,247,.25);
  background:transparent;
  cursor:pointer;
  display:inline-block;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__dot.is-active{ background:rgba(128,67,247,.35); }
/* image + badges */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner--image .blog-banner__media{
  width:200px; height:140px;
  border-radius:16px;
  background:#d9d9d9;
  overflow:hidden;
  flex:0 0 auto;
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner--image .blog-banner__media img{ width:100%; height:100%; object-fit:cover; display:block; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__mediaPh{ width:100%; height:100%; background:#d9d9d9; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__topRow{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__badges{ display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__badge{
  display:inline-flex; align-items:center; height:34px; padding:0 16px;
  border-radius:999px; font-weight:800; font-size:14px; color:var(--title);
}
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__badge.is-yellow{ background:rgba(255,178,0,.75); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__badge.is-green{ background:rgba(1,181,139,.25); border:1px solid rgba(1,181,139,.35); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__badge.is-blue{ background:rgba(0,183,255,.18); border:1px solid rgba(0,183,255,.30); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__badge.is-pink{ background:rgba(255,100,150,.18); border:1px solid rgba(255,100,150,.30); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__badge.is-purple{ background:rgba(128,67,247,.16); border:1px solid rgba(128,67,247,.28); }

/* notice */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner--notice .blog-banner__icon{
  width:52px; height:52px; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(128,67,247,.12);
  border:1px solid rgba(128,67,247,.18);
  font-size:26px;
  flex:0 0 auto;
}

/* stats */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__statsGrid{ margin-top:14px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__stat{ border:1px solid rgba(229,223,241,.9); border-radius:16px; padding:12px; background:rgba(255,255,255,.55); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner.is-theme-dark .blog-banner__stat{ background:rgba(255,255,255,.06); border-color:rgba(229,223,241,.18); }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__statVal{ font-weight:900; font-size:18px; color:var(--title); line-height:1.1; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__statLab{ margin-top:4px; font-size:12px; color:var(--muted); line-height:1.2; }

/* quote banner */
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__quote{ font-size:18px; line-height:1.45; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__quote p{ margin:0 0 8px; }
body[data-page="news"] :is(.article-content,.blog-article__content) .blog-banner__author{ margin-top:10px; font-weight:800; color:var(--muted); }

/* Builder editor bits */
    .bannerEditor .grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bannerEditor .field{ min-width:0; }
    .bannerEditor input[type="text"], .bannerEditor textarea, .bannerEditor select{ width:100%; box-sizing:border-box; }
    .bannerEditor .rteInlineWrap, .bannerEditor .rteAreaWrap{ width:100%; }
    .bannerEditor .rteInlineEdit{ min-width:0; text-overflow:ellipsis; }
    .bannerEditor .rteAreaEdit{ white-space:pre-wrap; word-break:break-word; }
    .bannerEditor textarea{ max-height:240px; }

    .bannerEditor .beTitle{ font-weight:800; color:var(--title); margin:14px 0 8px; }
    .bannerEditor .beTitle:first-child{ margin-top:0; }
    .bannerEditor .beTitle .sub{ font-weight:600; color:var(--muted); font-size:12px; margin-left:8px; }

    .bannerPreview{ border:1px solid var(--stroke); border-radius:18px; padding:12px; background:var(--bg2); }
    .linkRow, .badgeRow{ display:grid; grid-template-columns: 1fr 1.2fr 40px; gap:10px; align-items:center; margin-bottom:10px; }
    .slidesEditor{ display:grid; gap:12px; }
    .slideRow{ border:1px dashed var(--stroke); border-radius:14px; padding:12px; background:rgba(242,236,254,.5); }
    .slideCtaRow{ display:grid; grid-template-columns: 1fr 1.2fr; gap:10px; }
    .btnIcon{ width:40px; height:40px; border-radius:11px; border:1px solid var(--stroke); background:#fff; cursor:pointer; }
/* Banner editor (extended) */
.bannerEditor .subEditor{ border:1px dashed var(--stroke); border-radius:14px; padding:12px; background:rgba(242,236,254,.35); margin-top:10px; }
.bannerEditor .miniList{ display:grid; gap:10px; margin-top:10px; }
.bannerEditor .miniRow{ display:grid; grid-template-columns: 1fr 1.2fr 40px; gap:10px; align-items:center; }
.bannerEditor .miniRow select, .bannerEditor .miniRow input{ width:100%; }
.bannerEditor .slidesList{ display:grid; gap:12px; margin-top:10px; }
.bannerEditor .slideCard{ border:1px dashed var(--stroke); border-radius:14px; padding:12px; background:rgba(242,236,254,.50); }
.bannerEditor .slideHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.bannerEditor .rowBtns{ display:flex; gap:8px; }
.bannerEditor .subMini{ margin-top:10px; }

    .btnIcon:hover{ background:var(--purple10); }