/* =========================================================
   📄 BLOG ARTICLE — TYPOGRAPHY (FULL RESET)
   /public_html/styles_core/front/blog_article.css
   ========================================================= */


/* =========================================================
   BLOG ARTICLE — LAYOUT (ВНЕШНЯЯ ГЕОМЕТРИЯ)
   ========================================================= */

.blog-article{
  padding-top: calc(var(--space-16));
  padding-bottom: var(--space-16);
}

/* === TITLE === */
.blog-article__title{
  max-width:720px;
  margin:0 auto var(--space-8);

  font-size: clamp(2.4rem, 4vw, 3.2rem);
  line-height: 1.15;

  font-weight: 600;
  letter-spacing: -0.01em;

  color: var(--color-primary);
}


/*    BLOG TITLE SUBLINE  */

.blog-article__subtitle{
  display:block;

  font-size:0.65em;
  font-weight:400;

  opacity:0.8;
  margin-top:var(--space-2);
}


/* === COVER === */
.blog-article__figure{
  max-width:720px;
  margin:0 auto var(--space-8);
}

.blog-article__figure img{
  width:100%;
  height:auto;
  border-radius:var(--radius-md);
  cursor:pointer;
}

/* === COVER CAPTION === */
.blog-article__caption{
  margin-top:var(--space-1);

  font-size:0.90rem;
  line-height:1.4;

  color:var(--color-muted);
  text-align:left;
}


/* === CONTENT BASE === */
.blog-article__content{
  max-width:720px;
  margin:0 auto;

  color:var(--color-fg);
  line-height:var(--lh-default);
}

.blog-article__header{
  max-width: 720px;
  margin: 0 auto var(--space-12);
}

/* =========================================================
   BLOG META (дата / автор)
   ========================================================= */

.blog-article__meta{
  max-width:720px;
  margin:0 auto var(--space-4);

  font-size:0.9rem;
  color:var(--color-muted);
}


/* =========================================================
   BLOG CHIPS (категории)
   ========================================================= */

.blog-article__chips{
  max-width:720px;
  margin:0 auto var(--space-8);

  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}


/* =========================================================
   TEXT FLOW
   ========================================================= */

/* базовый ритм */
.blog-article__content > * + *{
  margin-top:var(--space-4);
}

/* 🔥 усиление именно для абзацев */
.blog-article__content p + p{
  margin-top:var(--space-4);
}
.blog-article__content > h2{
  margin-top:var(--space-12);
}

.blog-article__content > h3{
  margin-top:var(--space-8);
}

/* подтягиваем текст после подзаголовка */
.blog-article__content h3 + p{
  margin-top:0;
}

/* =========================================================
   PARAGRAPHS
   ========================================================= */

.blog-article__content p{
  margin:0;
}




/* =========================================================
   HEADINGS
   ========================================================= */

/* --- H2 --- */
.blog-article__content h2{
  font-size:1.7rem;
  font-weight:700;

  line-height:var(--lh-heading);
  color:var(--color-fg);
}

/* =========================================================
   SUBTITLE / TERM
   ========================================================= */

.blog-article__content p.orda-subtitle{

  margin-top:-0.35rem;
  margin-bottom:0.25rem;

  display:inline-block;

  padding:0.18rem 0.7rem;

  border-radius:999px;

  background:rgba(0,0,0,0.045);

  font-size:0.92rem;
  line-height:1.2;

  color:var(--color-fg);

  font-weight:500;

  letter-spacing:0.01em;

  opacity:0.82;
}

/* --- H3 --- */
.blog-article__content h3{
  font-size:1.3rem;
  font-weight:600;

  line-height:var(--lh-heading);

  color:var(--color-fg);
  opacity:0.8;
  
  margin-bottom:var(--space-2);
}

/* --- H4 / label heading --- */
.blog-article__content h4{
  margin-top:var(--space-6);
  margin-bottom:0;

margin-left:0;

  font-size:1rem;
  font-weight:700;

  line-height:1.4;

  color:var(--color-fg);
}


/* =========================================================
   LISTS
   ========================================================= */

.blog-article__content ul,
.blog-article__content ol{
  margin:var(--space-2) 0 var(--space-6);

    margin-left:var(--space-8); /* ВОТ ЭТО ДВИГАЕТ */
}


.blog-article__content ul,
.blog-article__content ol{
  list-style-position:outside;
}

.blog-article__content li{
  margin-bottom:var(--space-1);

  line-height:1.55;

  font-weight:500;
}
/* маркеры */
.blog-article__content li::marker{
 color:rgba(0,0,0,.35);
  font-weight:600;
}


/* =========================================================
   IMAGES INSIDE TEXT
   ========================================================= */

.blog-article__content img{
  width:100%;
  height:auto;

  margin:0;

  border-radius:var(--radius-md);
}

/* =========================================================
   ACCENT TEXT
   ========================================================= */

.blog-article__content p.accent{
  margin:0;

  font-size:1.12rem;
  line-height:1.7;

  font-weight:600;

  color:color-mix(in srgb, var(--color-fg) 82%, black 18%);

  letter-spacing:-0.01em;

  opacity:0.96;
}

/* компактный ритм вокруг accent */
.blog-article__content > p.accent{
  margin-top:var(--space-2);
}

.blog-article__content > p.accent + *{
  margin-top:var(--space-2);
}

.blog-article__content p.accent + ul,
.blog-article__content p.accent + ol{
  margin-top:0;
}

/* =========================================================
   EMPHASIS / ITALIC
   ========================================================= */

.blog-article__content em,
.blog-article__content i{
  font-style:italic;

  color:color-mix(in srgb, var(--color-fg) 88%, black 12%);

  opacity:0.96;
  font-weight:600;
}

/* =========================================================
   BLOCKQUOTE
   ========================================================= */

.blog-article__content blockquote{
  margin:var(--space-8) 0;

  padding:var(--space-4) var(--space-6);

  border-left:4px solid var(--color-accent);
  background:var(--color-accent-light);

  border-radius:var(--radius-md);

  font-style:italic;
  color:var(--color-fg);
}


/* =========================================================
   LINKS
   ========================================================= */

.blog-article__content a{
color:var(--color-primary);
  text-decoration:underline;
  text-underline-offset:2px;
}

.blog-article__content a:hover{
  text-decoration:none;
}

.blog-inline-gallery{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--space-4);
}

.blog-inline-gallery__item{
  margin:0;
}

.blog-inline-photo{
  margin:var(--space-6) auto;

}

/* =========================================================
   скрол
   ========================================================= */
.dictionary-scroll{
  max-height: 70vh;
  overflow-y: auto;

  padding-right: 12px;
}

/* =========================================================
   BLOG DICTIONARY SEARCH
   ========================================================= */

.blog-search-input{

  width:50%;

  height:48px;

  padding:
    0
    var(--space-4);

  border:1px solid rgba(0,0,0,0.06);

  border-radius:var(--radius-xl);

  background:
    rgba(255,255,255,0.55);

  color:var(--color-fg);

  font-size:0.98rem;

  line-height:1;

  box-shadow:
    0 2px 8px rgba(0,0,0,0.04);

  backdrop-filter:blur(8px);

  transition:
    border-color var(--transition-base),
    box-shadow var(--transition-base),
    background var(--transition-base);

  outline:none;

  margin:
    var(--space-6)
    0;
}


/* === placeholder === */

.blog-search-input::placeholder{
  color:var(--color-muted);
}


/* === hover === */

.blog-search-input:hover{
  box-shadow:var(--shadow-md);
}


/* === focus === */

.blog-search-input:focus{
  background:#fff;

  box-shadow:
    0 0 0 3px rgba(223,79,40,0.15),
    var(--shadow-md);
}


/* =========================================================
   DICTIONARY SCROLL
   ========================================================= */

.dictionary-scroll{

  max-height:70vh;

  overflow-y:auto;

  padding:
    var(--space-4)
    var(--space-4);

  border-radius:var(--radius-xl);

  background:rgba(255,255,255,0.35);

  backdrop-filter:blur(6px);

 box-shadow:
  0 1px 0 rgba(255,255,255,0.55) inset,
  0 10px 24px rgba(61,41,3,0.08),
  0 2px 6px rgba(61,41,3,0.06);
}


/* =========================================================
   HIGHLIGHT
   ========================================================= */

#altai-dictionary mark{

  background:#ffe08a;

  color:#1f1e1d;

  padding:0 2px;

  border-radius:4px;
}

/* =========================================================
   TABLE — MOBILE FIX
   ========================================================= */

.table-wrap{
  width:100%;
  overflow-x:auto;
}

.table-wrap table{
  width:100%;
  min-width:480px; /* 💥 чтобы не ломалась */
  border-collapse:collapse;
}

.table-wrap th,
.table-wrap td{
  padding:var(--space-2) var(--space-4);
  text-align:left;
  border-bottom:1px solid var(--color-border);
}

.table-wrap th{
  font-weight:600;
  color:var(--color-fg);
}

.table-wrap td{
  color:var(--color-muted);
}
/* =========================================================
   BLOG — VIDEO RESET
   ========================================================= */

.blog-article .tour-video-horizontal{
  background:transparent;
}

/* =========================================================
   BLOG — VIDEO SPACING FIX
   ========================================================= */

.blog-article .tour-video-horizontal{
  margin-top:0;
  margin-bottom:0;
}

/* =========================================================
   BLOG — VIDEO RESET
   ========================================================= */

.blog-article .tour-video-horizontal{
  padding:0;
  margin-top:0;
}

/* =========================================================
   BLOG ARTICLE — SHARE POSITION
========================================================= */

.blog-article .ui-share-btn{
  margin-left:auto;
}