/* TurboPoisk Blog Article styles (v6)
   Scoped: body.page-blog-article
   Notes:
   - Stronger blue gradient spots like main page (uses gr*.svg from /assets/img)
   - TL;DR and CTA blocks have different styling (not the same card frame)
*/

html{
  background: #010409;
}

body.page-blog-article{
  position: relative;
  overflow-x: hidden;
  color: rgba(255,255,255,0.94);
  background-color: #010409;
}

/* Big background glows like on main sections */
body.page-blog-article::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  /* reuse existing "gr" assets for the same bright blobs */
  background-image:
    url("../img/gr1.svg"),
    url("../img/gr2.svg"),
    url("../img/gr3.svg");
  background-repeat: no-repeat;
  background-position:
    left top,
    center 46%,
    center bottom;
  background-size:
    100% auto,
    110% auto,
    100% auto;

  /* make blobs visible */
  opacity: 0.95;
  filter: saturate(1.15) contrast(1.05);
}

/* Extra subtle depth */
body.page-blog-article::after{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(900px 520px at 14% 12%, rgba(24, 54, 190, 0.35), transparent 62%),
    radial-gradient(820px 560px at 86% 18%, rgba(70, 40, 220, 0.24), transparent 62%),
    radial-gradient(920px 620px at 50% 92%, rgba(0, 140, 255, 0.18), transparent 62%),
    linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.35) 100%);
  background-repeat: no-repeat;
  opacity: 1;
}

/* HERO */
.page-blog-article .tp-article-hero{
  padding: 150px 0 34px;
}

.page-blog-article .tp-breadcrumbs{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  opacity: 0.82;
  margin-bottom: 16px;
}

.page-blog-article .tp-breadcrumbs a{
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  transition: opacity .18s ease;
}

.page-blog-article .tp-breadcrumbs a:hover{
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.page-blog-article .tp-breadcrumbs__sep{ opacity: 0.55; }

.page-blog-article .tp-article-hero__grid{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 26px;
  align-items: center;
}

.page-blog-article .tp-article-title{
  font-family: "Montserrat";
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 40px;
  line-height: 1.12;
  margin: 0;
  max-width: 24ch;
}

.page-blog-article .tp-article-lead{
  margin: 14px 0 0;
  max-width: 78ch;
  font-size: 18px;
  line-height: 1.68;
  opacity: 0.92;
}

.page-blog-article .tp-article-links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Pills */
.page-blog-article .tp-article-links a{
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: rgba(255,255,255,0.96);
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 22px rgba(0,0,0,0.20);
  transition: transform .16s ease, background .16s ease, border-color .16s ease;
}

.page-blog-article .tp-article-links a:hover{
  transform: translateY(-1px);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  border-color: rgba(255,255,255,0.16);
}

/* TOC */
.page-blog-article .tp-article-toc{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.page-blog-article .tp-article-toc a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  transition: transform .16s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
  opacity: 0.92;
}

.page-blog-article .tp-article-toc a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.16);
  opacity: 1;
}

.page-blog-article .tp-article-toc a::before{
  content: "•";
  opacity: 0.75;
}

/* Cover image - no frame */
.page-blog-article .tp-article-hero__media{
  border-radius: 18px;
  overflow: visible;
  background: transparent;
  border: none;
  box-shadow: none;
}

.page-blog-article .tp-article-hero__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  aspect-ratio: 16/10;
  object-fit: cover;
  box-shadow:
    0 18px 46px rgba(0,0,0,0.38),
    0 0 90px rgba(24, 54, 190, 0.18);
}

/* BODY */
.page-blog-article .tp-article-body{
  padding: 12px 0 30px;
}

/* Article container */
.page-blog-article .tp-article-content{
  max-width: 1040px;
  margin: 0 auto;
}

/* Flow with counter */
.page-blog-article .tp-article-flow{
  display: grid;
  gap: 16px;
  counter-reset: tpsec;
}

/* Premium cards for main sections */
.page-blog-article .tp-article-block{
  position: relative;
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.028));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 16px 44px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.page-blog-article .tp-article-block:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.16);
  background: linear-gradient(180deg, rgba(255,255,255,0.070), rgba(255,255,255,0.030));
  box-shadow:
    0 20px 54px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.07);
}

/* Accent line */
.page-blog-article .tp-article-block::before{
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(120,180,255,0.95), rgba(160,110,255,0.75));
  opacity: 0.92;
}

/* Number badge */
.page-blog-article .tp-article-block{
  counter-increment: tpsec;
}

.page-blog-article .tp-article-block::after{
  content: counter(tpsec);
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,0.92);
  background: linear-gradient(180deg, rgba(24,54,190,0.34), rgba(255,255,255,0.06));
  border: 1px solid rgba(120,180,255,0.18);
  box-shadow: 0 12px 26px rgba(0,0,0,0.22);
}

.page-blog-article .tp-article-block > *{
  margin-left: 18px;
  margin-right: 40px;
}

/* Titles */
.page-blog-article .tp-article-block h2{
  font-size: 26px;
  line-height: 1.2;
  font-weight: 900;
  margin: 0 0 12px;
}

/* Text */
.page-blog-article .tp-article-block p{
  font-size: 17px;
  line-height: 1.78;
  opacity: 0.94;
  margin: 0 0 12px;
}

/* Lists with custom bullets (since main.css removes list-style) */
.page-blog-article .tp-article-block ul,
.page-blog-article .tp-article-block ol{
  margin: 10px 0 0;
  padding: 0;
}

.page-blog-article .tp-article-block ul li{
  position: relative;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.74;
  opacity: 0.94;
  margin: 0 0 10px;
}

.page-blog-article .tp-article-block ul li::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  position: absolute;
  left: 0;
  top: 0.62em;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(120,180,255,0.95), rgba(24,54,190,0.95));
  box-shadow: 0 0 0 4px rgba(24,54,190,0.18);
}

/* Ordered list: keep numbers readable */
.page-blog-article .tp-article-block ol{
  counter-reset: tpol;
}

.page-blog-article .tp-article-block ol li{
  position: relative;
  padding-left: 30px;
  font-size: 17px;
  line-height: 1.74;
  opacity: 0.94;
  margin: 0 0 10px;
  counter-increment: tpol;
}

.page-blog-article .tp-article-block ol li::before{
  content: counter(tpol) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: rgba(120,180,255,0.95);
}

/* TL;DR strip (different from cards) */
.page-blog-article .tp-article-strip{
  padding: 18px 0 6px;
}

.page-blog-article .tp-article-strip__inner{
  padding: 18px 18px;
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(24,54,190,0.22), rgba(255,255,255,0.02));
  border: 1px solid rgba(120,180,255,0.16);
  box-shadow: 0 18px 50px rgba(0,0,0,0.22);
}

.page-blog-article .tp-article-strip__title{
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 10px;
  letter-spacing: 0.01em;
}

.page-blog-article .tp-article-strip__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}

.page-blog-article .tp-article-strip__grid ul{
  margin: 0;
  padding: 0;
}

.page-blog-article .tp-article-strip__grid li{
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.94;
  margin: 0 0 10px;
}

.page-blog-article .tp-article-strip__grid li::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  position: absolute;
  left: 0;
  top: 0.62em;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(120,180,255,0.95), rgba(24,54,190,0.95));
  box-shadow: 0 0 0 4px rgba(24,54,190,0.18);
}

/* CTA section (no card, centered) */
.page-blog-article .tp-article-cta-section{
  padding: 22px 0 8px;
  text-align: center;
}

.page-blog-article .tp-article-cta-title{
  font-size: 30px;
  line-height: 1.15;
  font-weight: 900;
  margin: 0;
}

.page-blog-article .tp-article-cta-subtitle{
  margin: 10px auto 0;
  max-width: 70ch;
  font-size: 16px;
  line-height: 1.65;
  opacity: 0.90;
}

.page-blog-article .tp-article-cta-actions{
  margin-top: 14px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.page-blog-article .tp-article-cta-actions a{
  min-width: 220px;
  justify-content: center;
}

/* APP anchor spacing */
.page-blog-article #app{ margin-top: 28px; }

/* Responsive */
@media (max-width: 991px){
  .page-blog-article .tp-article-hero{
    padding: 118px 0 26px;
  }
  .page-blog-article .tp-article-hero__grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page-blog-article .tp-article-title{
    font-size: 30px;
    max-width: 100%;
  }
  .page-blog-article .tp-article-block{
    padding: 18px 16px;
  }
  .page-blog-article .tp-article-block::before{
    left: 12px;
    top: 16px;
    bottom: 16px;
  }
  .page-blog-article .tp-article-block > *{
    margin-left: 16px;
    margin-right: 0;
  }
  .page-blog-article .tp-article-block::after{
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
  .page-blog-article .tp-article-block h2{
    font-size: 22px;
  }
  .page-blog-article .tp-article-lead{
    font-size: 16px;
  }
  .page-blog-article .tp-article-strip__grid{
    grid-template-columns: 1fr;
  }
  .page-blog-article .tp-article-cta-title{
    font-size: 26px;
  }
}

@media (max-width: 575px){
  .page-blog-article .tp-article-title{
    font-size: 26px;
  }
  .page-blog-article .tp-article-cta-actions a{
    width: 100%;
  }
}
/* === Background glow (v6.1) ===
   Делает фирменные "градиентные пятна" на всей странице статьи,
   как на главной. Ничего больше не трогаем.
*/
html{
  background: #010409;
}

body.page-blog-article{
  background: #010409; /* базовый цвет */
}

/* слой с пятнами */
body.page-blog-article::before{
  content: "";
  position: fixed;
  inset: -120px;
  z-index: -1;
  pointer-events: none;

  /* 3 фирменных пятна + мягкая подложка */
  background:
    url("/assets/img/gr1.svg") no-repeat 12% 12% / 620px 620px,
    url("/assets/img/gr2.svg") no-repeat 86% 10% / 680px 680px,
    url("/assets/img/gr3.svg") no-repeat 50% 92% / 860px 860px,
    radial-gradient(900px 520px at 18% 16%, rgba(24, 54, 190, 0.55), transparent 62%),
    radial-gradient(820px 560px at 84% 18%, rgba(88, 64, 255, 0.42), transparent 62%),
    radial-gradient(900px 620px at 52% 92%, rgba(0, 160, 255, 0.30), transparent 62%),
    linear-gradient(180deg, #010409 0%, #070B16 52%, #010409 100%);

  opacity: 0.95;
  filter: saturate(1.2);
  transform: translateZ(0);
}

/* чтобы фон не "резался" карточками при рендере */

/* TurboPoisk blog article background fix (v6.2)
   Purpose: remove "mosaic/puzzle" seams and make blue blobs like on main page.
   This file ONLY overrides the background layer. Nothing else is changed.
   Paste at the END of /assets/css/blog-articles.css or replace the existing background rules.
*/

/* Keep base color consistent */
html{ background: #010409; }

/* Create a clean stacking context for fixed pseudo-elements */
body.page-blog-article{
  background-color: #010409;
  isolation: isolate;
}

/* Base smooth gradient image (single, full-cover) */
body.page-blog-article::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;

  background-image: url("/assets/img/gr1.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  opacity: 0.95;
  filter: saturate(1.18) contrast(1.10);
  transform: translateZ(0);
}

/* Extra glow spots (blue-first, like main) */
body.page-blog-article::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    radial-gradient(900px 560px at 18% 14%, rgba(35, 120, 255, 0.42), transparent 62%),
    radial-gradient(860px 560px at 78% 16%, rgba(110, 70, 255, 0.28), transparent 62%),
    radial-gradient(900px 620px at 62% 72%, rgba(0, 190, 255, 0.22), transparent 64%),
    radial-gradient(760px 520px at 16% 80%, rgba(35, 120, 255, 0.26), transparent 64%),
    linear-gradient(180deg, rgba(1,4,9,0.25) 0%, rgba(1,4,9,0.55) 55%, rgba(1,4,9,0.65) 100%);

  background-repeat: no-repeat;
  opacity: 0.95;
  transform: translateZ(0);
}

/* Remove any visible frame/halo around the hero image */
.page-blog-article .tp-article-hero__media{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.page-blog-article .tp-article-hero__media img{
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  filter: none !important;
}
/* === Blog includes: "Популярные марки и модели" + "Читайте также" (cards + readable grid)
   ONLY for article pages. Background and other blocks untouched.
*/
.page-blog-article .tp-article-bottom,
.page-blog-article .tp-article-bottom-section{
  margin-top: 42px;
}

.page-blog-article .tp-article-bottom h2,
.page-blog-article .tp-article-bottom .h2,
.page-blog-article .tp-article-bottom-section h2{
  color: #fff;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 14px 0;
}

/* main.css has .needs-cards as a 24-col grid. For articles we override to 4/3/2/1 columns */
.page-blog-article .needs-cards{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;

  /* kill legacy MS grid from main.css (just in case) */
  -ms-grid-columns: 1fr 16px 1fr 16px 1fr 16px 1fr !important;
  -ms-grid-rows: auto !important;
}

@media (max-width: 1100px){
  .page-blog-article .needs-cards{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    -ms-grid-columns: 1fr 16px 1fr 16px 1fr !important;
  }
}
@media (max-width: 820px){
  .page-blog-article .needs-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    -ms-grid-columns: 1fr 14px 1fr !important;
    gap: 14px !important;
  }
}
@media (max-width: 520px){
  .page-blog-article .needs-cards{
    grid-template-columns: 1fr !important;
  }
}

/* Card look */
.page-blog-article .need-card{
  display: flex;
  flex-direction: column;
  gap: 8px;

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

  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);

  text-decoration: none !important;
  color: inherit;

  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.page-blog-article .need-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.16);
}

.page-blog-article .need-card:active{
  transform: translateY(0);
}

.page-blog-article .need-card__title{
  margin: 0;
  color: #fff !important;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.2;
}

.page-blog-article .need-card__text{
  margin: 0;
  color: rgba(255,255,255,0.78) !important;
  font-size: 13px;
  line-height: 1.35;
}

/* Optional: make cards a bit taller and consistent */
.page-blog-article .need-card__text{
  min-height: 2.7em;
}

/* Improve long titles wrapping */
.page-blog-article .need-card__title,
.page-blog-article .need-card__text{
  word-break: break-word;
}

/* Space between the two blocks inside the include */
.page-blog-article .tp-article-bottom .needs-cards + h2{
  margin-top: 34px;
}

/* ===== Premium polish for includes cards (v2) ===== */
.page-blog-article .needs-cards{
  margin-top: 28px;
}

/* карточка как "стекло" */
.page-blog-article .need-card{
  position: relative;
  border-radius: 18px;
  padding: 16px 16px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 14px 38px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  overflow: hidden;
}

/* мягкий блик сверху */
.page-blog-article .need-card::before{
  content:"";
  position:absolute;
  inset: 0;
  background:
    radial-gradient(520px 200px at 18% 0%, rgba(70,140,255,0.20), transparent 62%),
    radial-gradient(420px 180px at 92% 18%, rgba(150,90,255,0.14), transparent 60%);
  opacity: 0.9;
  pointer-events:none;
}



/* заголовок и аннотация */
.page-blog-article .need-card__title{
  font-weight: 800;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.96);
  line-height: 1.18;
  margin-left: 8px; /* чтобы не наезжало на акцентную линию */
}

.page-blog-article .need-card__text{
  color: rgba(255,255,255,0.78);
  line-height: 1.32;
  margin-top: 8px;
  margin-left: 8px;
}



/* кликабельность: делаем всю карточку "приятной" */
.page-blog-article .need-card a{
  text-decoration: none;
}
.page-blog-article .need-card a:hover{
  text-decoration: none;
}

/* чуть больше воздуха на мобиле */
@media (max-width: 560px){
  .page-blog-article .need-card{
    border-radius: 16px;
    padding: 14px 14px 12px;
  }
}


/* Make #app full width on article pages, independent from narrow content container */
.page-blog-article #app{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* keep normal inner max width, like main page */
.page-blog-article #app .container{
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* prevent phones overlapping QR */
.page-blog-article #app .app__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.page-blog-article #app .app__qr,
.page-blog-article #app .app__phones{
  position: relative;
  z-index: 1;
}

.page-blog-article #app .app__phones img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* responsive: stack columns earlier */
@media (max-width: 980px){
  .page-blog-article #app .app__inner{
    flex-direction: column;
    align-items: flex-start;
  }
}






/* === Article v8 additions: top row, theme toggle, callouts, FAQ, light theme === */

.page-blog-article .tp-article-hero__top{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.page-blog-article .tp-breadcrumbs{
  flex: 1 1 auto;
}

/* Title: more "media", less "banner" */
.page-blog-article .tp-article-title{
  text-transform: none;
  letter-spacing: 0;
  font-size: 44px;
  line-height: 1.08;
  max-width: 26ch;
}
@media (max-width: 991px){
  .page-blog-article .tp-article-title{
    font-size: 32px;
    max-width: 32ch;
  }
}

/* Theme toggle button */
.page-blog-article .tp-theme-toggle{
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  color: inherit;
  cursor: pointer;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  user-select: none;
}
.page-blog-article .tp-theme-toggle:hover{
  background: rgba(255,255,255,0.06);
}

/* Callouts: important / tip / error */
.page-blog-article .tp-callout{
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.page-blog-article .tp-callout__title{
  font-weight: 900;
  letter-spacing: 0.2px;
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
  opacity: 0.92;
}

.page-blog-article .tp-callout p{
  margin: 0;
}

.page-blog-article .tp-callout--important{
  border-color: rgba(120,180,255,0.22);
  background: linear-gradient(90deg, rgba(24,54,190,0.18), rgba(255,255,255,0.03));
}

.page-blog-article .tp-callout--tip{
  border-color: rgba(0,190,255,0.22);
  background: linear-gradient(90deg, rgba(0,160,255,0.16), rgba(255,255,255,0.03));
}

.page-blog-article .tp-callout--error{
  border-color: rgba(180,120,255,0.22);
  background: linear-gradient(90deg, rgba(110,70,255,0.16), rgba(255,255,255,0.03));
}

/* FAQ */
.page-blog-article .tp-article-faq{
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.page-blog-article .tp-faq-item{
  margin-bottom: 18px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}

.page-blog-article .tp-faq-item h3{
  margin: 0 0 6px;
  font-size: 16px;
}

.page-blog-article .tp-faq-item p{
  margin: 0;
  opacity: 0.9;
}

/* Light theme (toggle via body[data-theme="light"]) */
body.page-blog-article[data-theme="light"]{
  color: rgba(10,16,32,0.92);
  background-color: #f6f8ff;
}

body.page-blog-article[data-theme="light"]::before{
  opacity: 0.12;
}

body.page-blog-article[data-theme="light"] .tp-breadcrumbs,
body.page-blog-article[data-theme="light"] .tp-article-lead{
  color: rgba(10,16,32,0.78);
}

body.page-blog-article[data-theme="light"] .tp-theme-toggle{
  border-color: rgba(10,16,32,0.16);
  background: rgba(255,255,255,0.75);
}

body.page-blog-article[data-theme="light"] .tp-article-block{
  background: rgba(10,16,32,0.06);
  border-color: rgba(10,16,32,0.14);
  box-shadow: 0 16px 44px rgba(0,0,0,0.10);
}

body.page-blog-article[data-theme="light"] .tp-article-strip__inner{
  border-color: rgba(10,16,32,0.14);
}

body.page-blog-article[data-theme="light"] .tp-callout{
  border-color: rgba(10,16,32,0.14);
  background: rgba(255,255,255,0.75);
}

body.page-blog-article[data-theme="light"] .tp-faq-item{
  background: rgba(255,255,255,0.75);
  border-color: rgba(10,16,32,0.14);
}













/* Floating theme toggle */
.page-blog-article .tp-theme-toggle{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;

  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.32);
  backdrop-filter: blur(10px);

  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  cursor: pointer;
}

.page-blog-article .tp-theme-toggle:hover{
  background: rgba(255,255,255,0.08);
}







/* Light theme contrast fix */
body.page-blog-article[data-theme="light"]{
  color: rgba(12,18,32,0.92);
}

body.page-blog-article[data-theme="light"] .tp-article-lead,
body.page-blog-article[data-theme="light"] .tp-article-content p,
body.page-blog-article[data-theme="light"] .tp-article-content li{
  color: rgba(12,18,32,0.84);
}

body.page-blog-article[data-theme="light"] .tp-article-block,
body.page-blog-article[data-theme="light"] .tp-article-strip__inner{
  background: rgba(255,255,255,0.78);
  border-color: rgba(12,18,32,0.14);
  box-shadow: 0 14px 38px rgba(0,0,0,0.10);
}

body.page-blog-article[data-theme="light"] .tp-callout,
body.page-blog-article[data-theme="light"] .tp-faq-item{
  background: rgba(255,255,255,0.90);
  border-color: rgba(12,18,32,0.14);
}

/* Bullets in light theme */
body.page-blog-article[data-theme="light"] .tp-article-content ul li::marker{
  color: rgba(24,72,210,0.75);
}







/* FAQ better rhythm */
.page-blog-article .tp-article-faq h2{
  font-size: 28px;
  line-height: 1.15;
  margin-bottom: 16px;
}

.page-blog-article .tp-faq-item{
  padding: 14px 16px;
  border-radius: 14px;
}

.page-blog-article .tp-faq-item h3{
  font-size: 16px;
  margin-bottom: 8px;
}

.page-blog-article .tp-faq-item p{
  opacity: 0.92;
  line-height: 1.45;
}









/* === FAQ: question vs answer separation === */

.page-blog-article .tp-article-faq h2{
  margin-bottom: 14px;
}

/* each item */
.page-blog-article .tp-faq-item{
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 14px;
}

/* question */
.page-blog-article .tp-faq-item h3{
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}

/* small divider between question and answer */
.page-blog-article .tp-faq-item h3 + div{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* answer */
.page-blog-article .tp-faq-item p{
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.88;
}

/* light theme adjustments */
body.page-blog-article[data-theme="light"] .tp-faq-item{
  background: rgba(255,255,255,0.90);
  border-color: rgba(12,18,32,0.14);
}

body.page-blog-article[data-theme="light"] .tp-faq-item h3{
  color: rgba(12,18,32,0.92);
}

body.page-blog-article[data-theme="light"] .tp-faq-item h3 + div{
  border-top-color: rgba(12,18,32,0.12);
}

body.page-blog-article[data-theme="light"] .tp-faq-item p{
  color: rgba(12,18,32,0.80);
  opacity: 1;
}








/* === FAQ accordion === */

.page-blog-article .tp-article-faq h2{
  margin-bottom: 12px;
}

.page-blog-article details.tp-faq-item{
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.10);
  margin-bottom: 14px;
  overflow: hidden;
}

.page-blog-article .tp-faq-q{
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-blog-article .tp-faq-q::-webkit-details-marker{ display:none; }

.page-blog-article .tp-faq-q__text{
  font-size: 17px;
  line-height: 1.25;
  font-weight: 900;
  flex: 1 1 auto;
}

.page-blog-article .tp-faq-q__icon{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.18);
  position: relative;
  flex: 0 0 auto;
}

.page-blog-article .tp-faq-q__icon::before,
.page-blog-article .tp-faq-q__icon::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  background: rgba(255,255,255,0.85);
  transform: translate(-50%,-50%);
}

.page-blog-article .tp-faq-q__icon::after{
  transform: translate(-50%,-50%) rotate(90deg);
}

.page-blog-article details.tp-faq-item[open] .tp-faq-q__icon::after{
  display: none;
}

.page-blog-article .tp-faq-a{
  padding: 0 16px 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.page-blog-article .tp-faq-a p{
  margin: 12px 0 0 0;
  font-size: 15px;
  line-height: 1.5;
  opacity: 0.88;
}

/* light theme */
body.page-blog-article[data-theme="light"] details.tp-faq-item{
  background: rgba(255,255,255,0.90);
  border-color: rgba(12,18,32,0.14);
}

body.page-blog-article[data-theme="light"] .tp-faq-q__text{
  color: rgba(12,18,32,0.92);
}

body.page-blog-article[data-theme="light"] .tp-faq-q__icon{
  border-color: rgba(12,18,32,0.16);
  background: rgba(255,255,255,0.85);
}

body.page-blog-article[data-theme="light"] .tp-faq-q__icon::before,
body.page-blog-article[data-theme="light"] .tp-faq-q__icon::after{
  background: rgba(12,18,32,0.70);
}

body.page-blog-article[data-theme="light"] .tp-faq-a{
  border-top-color: rgba(12,18,32,0.12);
}

body.page-blog-article[data-theme="light"] .tp-faq-a p{
  color: rgba(12,18,32,0.82);
  opacity: 1;
}








/* === Article typography helpers === */

.page-blog-article .tp-article-block h3{
  margin-top: 18px;
  margin-bottom: 10px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: 0;
}

.page-blog-article .tp-article-block p{
  line-height: 1.55;
}

.page-blog-article .tp-lede{
  margin-top: 10px;
  margin-bottom: 14px;
  font-size: 16px;
  line-height: 1.5;
  opacity: 0.92;
}

.page-blog-article .tp-subcap{
  margin-top: 16px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.9;
}

.page-blog-article .tp-divider{
  border: 0;
  height: 1px;
  background: rgba(255,255,255,0.12);
  margin: 16px 0;
}

.page-blog-article .tp-strong{
  font-weight: 900;
  opacity: 0.98;
}

/* Light theme */
body.page-blog-article[data-theme="light"] .tp-divider{
  background: rgba(12,18,32,0.14);
}







/* Blog Article TOC (v1) */
body.page-blog-article .tp-article-toc{
  max-width: 1180px;
  margin: 18px auto 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
body.page-blog-article .tp-article-toc__title{
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}
body.page-blog-article .tp-article-toc__list{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}
body.page-blog-article .tp-article-toc__list a{
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
  text-decoration: none;
}
body.page-blog-article .tp-article-toc__list a:hover{
  background: rgba(255,255,255,.08);
}
@media (max-width: 720px){
  body.page-blog-article .tp-article-toc{
    margin: 14px 14px 8px;
  }
  body.page-blog-article .tp-article-toc__list{
    gap: 8px 10px;
  }
}