/* =====================================================================
   ARTICLE PAGE — PERFECT PIXEL VERSION (CLEAN)
   ===================================================================== */

.article{
  padding:var(--space-48) 0 var(--space-72);
  
}

.article-inner{
  margin:0 auto;
}

/* ===========================
   HERO
   =========================== */

.article-hero{
  margin:0 0 var(--space-40);
  text-align:center;
}

.article-hero__media img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}

.article-hero__line{
  height:1px;
  background:rgba(187,140,85,.35);
  margin:var(--space-20) auto;
  width:100%;
}

/* ===========================
   META
   =========================== */

.article-head{
  margin-bottom:var(--space-40);
  display:flex;
  flex-direction:column;
  gap:var(--space-20);
}

.article-meta{
  font-family:"Source Sans 3",sans-serif !important;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#8b7f74;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.article-meta__sep{
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 10px;
    background: rgba(195, 150, 98, .95);
    transform: translateY(+5px);
}

.article-title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(34px,3.2vw,48px);
  line-height:1.25;
  color:var(--accent-primary);
}

.article-meta--secondary{
  font-size:11px;
  letter-spacing:.16em;
  color:#8b7f74;
}

/* ===========================
   LEAD QUOTE (excerpt under title)
   =========================== */

.article-lead{
  text-align:left;
  margin:var(--space-40) 0 var(--space-56);
  font-style:italic;
  font-size:19px;
  line-height:1.6;
}

.article-lead__line{
  height:1px;
  background:rgba(187,140,85,.35);
  width:100%;
  max-width:none;
  margin:var(--space-16) 0;
}

.article-lead__text{
  margin:0;
  font-family:var(--font-body);
  font-style:italic;
  font-size:clamp(20px,2vw,28px);
  line-height:1.5;
  color:var(--text-primary);
}

/* ===========================
   BODY TEXT
   =========================== */

.article-body{
  font-family:var(--font-body);
  font-size:clamp(18px,1.1vw,20px);
  line-height:1.7;
  color:var(--text-primary);
}

.article-body p{
  margin:0 0 var(--space-20);
}

/* =========================================================
   DROP CAP — wraps next paragraphs (LIKE REFERENCE)
   ========================================================= */

/* первый абзац — обычный вес */
.article-body > p:first-of-type{
  margin-top:0;
  font-weight:400;
}

.article-body > p:first-of-type strong{
  font-weight:400;
}

/* ВАЖНО: убираем любые clear/overflow, которые ломают обтекание */
.article-body > p{
  clear:none !important;
  overflow:visible !important;
}

/* fallback (float): следующий абзац тоже обтекает */
.article-body > p:first-of-type::first-letter{
  float:left;
  font-family:var(--font-display);
  font-weight:400;
  color:var(--text-primary);

  /* капитель ~3 строки */
  font-size:5.3em;
  line-height:0.98;

  /* воздух справа, и чуть "высота" чтобы точно не обрывалось */
  margin:0.02em 0.22em 0.06em 0;

  padding:0;
}

/* идеальный режим: ровно 3 строки (если поддерживается) */
@supports (-webkit-initial-letter: 3) or (initial-letter: 3){
  .article-body > p:first-of-type::first-letter{
    float:none;
    -webkit-initial-letter:3;
    initial-letter:3;

    font-size:1em;
    line-height:1;
    margin:0 0.24em 0 0;
  }
}

/* мобилка: выключаем */
@media (max-width:520px){
  .article-body > p:first-of-type::first-letter{
    float:none;
    -webkit-initial-letter:initial;
    initial-letter:initial;
    font-size:inherit;
    line-height:inherit;
    margin:0;
  }
}

/* ===========================
   BLOCKQUOTE (vertical line)
   =========================== */

.article-body blockquote{
  margin:var(--space-32) 0;
  margin-left: 2vw;
  padding:var(--space-16) var(--space-24);
  border-left:3px solid var(--accent-primary);
  background:none;
  font-style:italic;
  font-size:19px;
  line-height:1.6;
  color:var(--text-primary);
}

.article-body blockquote p{
  margin:0;
}

/* ===========================
   CUSTOM GALLERY
   =========================== */

.sp-gallery{
  margin:var(--space-56) 0;
}

.sp-gallery__img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:2px;
  display:block;
}

.sp-gallery__caption{
  margin-top:var(--space-12);
  font-family:var(--font-ui);
  font-size:14px;
  color:#7c6e60;
  text-align:left;
}

.sp-gallery__nav{
  margin-top:var(--space-16);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}

.sp-gallery__arrow{
  width:44px;
  height:44px;
  border:1px solid var(--accent-primary);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
  transition:background .25s, color .25s, border-color .25s;
}

.sp-gallery__arrow-icon{
  font-family:var(--font-ui);
  font-size:40px;
  font-weight:100;
  line-height:1;
  padding-bottom:5px;
  color:var(--accent-primary);
}

.sp-gallery__arrow:hover{
  background:var(--accent-primary);
}

.sp-gallery__arrow:hover .sp-gallery__arrow-icon{
  color:#fff;
}

.sp-gallery__dots{
  display:flex;
  gap:10px;
}

.sp-gallery__dot{
  width:11px;
  height:11px;
  border:1px solid var(--accent-primary);
  border-radius:2px;
  background:transparent;
  cursor:pointer;
  padding:0;
  outline:none;
  transition:background .25s, opacity .25s;
  opacity:.4;
}

.sp-gallery__dot--active{
  background:var(--accent-primary);
  opacity:1;
}
/* =========================================================
   RELATED ("Читайте также") — layout как на макете
   1 большой слева + 2 маленьких справа
   ========================================================= */

.related{
  margin:var(--space-64) 0 var(--space-40);
}

.related-title{
  font-family:var(--font-display);
  font-size:clamp(30px, 3.2vw, 44px);
  margin:0 0 var(--space-28);
  color:var(--accent-primary);
}

/* сетка: левый широкий + правый узкий */
.related-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  grid-auto-rows: auto;
  gap: 28px 36px;
  align-items:start;
}

/* первый пост занимает всю левую колонку по высоте двух рядов */
.related-grid .related-item:nth-child(1){
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* 2-й и 3-й в правой колонке */
.related-grid .related-item:nth-child(2){
  grid-column: 2;
  grid-row: 1;
}
.related-grid .related-item:nth-child(3){
  grid-column: 2;
  grid-row: 2;
}

/* общая карточка */
.related-item{
  display:flex;
  flex-direction:column;
  gap: 0;
}

/* картинка */
.related-item a{
  display:block;
}
.related-item img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:2px;
  display:block;
}

/* базовый стиль */
.related-item__meta{
  font-family: "Source Sans 3",sans-serif !important;
  font-size: 12px;
  color: #7c6e60;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* desktop only */
@media (min-width: 769px){

  /* левая карточка */
  .related-item:first-child .related-item__meta{
    margin-top: 10px;
    margin-bottom: 0;
  }

  /* две правые */
  .related-item:not(:first-child) .related-item__meta{
    margin-top: 0;
    margin-bottom: 10px;
  }
}


/* title */
.related-item__title{
  margin:0;
  font-family:var(--font-display);
  line-height:1.22;
}
.related-item__title a{
  color:var(--accent-primary);
  text-decoration:none;
}
.related-item__title a:hover{
  color:var(--accent-soft);
}

/* ====== первый (большой) — крупный заголовок ====== */
.related-grid .related-item:nth-child(1) .related-item__title{
  font-size:clamp(26px, 2.7vw, 36px);
  line-height:1.18;
}


/* ====== правые (малые) — meta сверху, тонкая линия как в макете ====== */
.related-grid .related-item:nth-child(2),
.related-grid .related-item:nth-child(3){
  padding-top: 14px;
  border-top:1px solid rgba(187,140,85,.35);
}

/* перекидываем meta вверх (у тебя в HTML meta после картинки) */
.related-grid .related-item:nth-child(2) .related-item__meta,
.related-grid .related-item:nth-child(3) .related-item__meta{
  order: -2;
}

/* картинку тоже чуть ниже meta */
.related-grid .related-item:nth-child(2) a,
.related-grid .related-item:nth-child(3) a{
  order: -1;
}

/* правые заголовки меньше */
.related-grid .related-item:nth-child(2) .related-item__title,
.related-grid .related-item:nth-child(3) .related-item__title{
  line-height:1.28;
  margin-top: 10px;
}

/* ===========================
   RELATED — MOBILE (1 column, same layout)
   =========================== */
@media (max-width: 900px){

  /* 1 колонка, но остаёмся GRID (ничего не ломаем) */
  .related-grid{
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
    /* ОДИНАКОВЫЕ заголовки для всех 3 на мобилке */
  .related-grid .related-item__title{
    font-size: 20px !important;   /* выбери: 18/19/20 */
    line-height: 1.22 !important;
    margin-top: 10px !important;
  }

  /* убираем десктопные grid-координаты */
  .related-grid .related-item:nth-child(1),
  .related-grid .related-item:nth-child(2),
  .related-grid .related-item:nth-child(3){
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* убираем десктопные “правые” стили */
  .related-grid .related-item:nth-child(2),
  .related-grid .related-item:nth-child(3){
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  /* делаем разделитель между карточками одинаковый */
  .related-grid .related-item + .related-item{
    padding-top: 14px !important;
    border-top: 1px solid rgba(187,140,85,.35) !important;
  }

  /* возвращаем нормальный порядок (meta/image/title как у первой) */
  .related-grid .related-item:nth-child(2) .related-item__meta,
  .related-grid .related-item:nth-child(3) .related-item__meta{
    order: 0 !important;
  }
  .related-grid .related-item:nth-child(2) a,
  .related-grid .related-item:nth-child(3) a{
    order: 0 !important;
  }

  /* одинаковые превьюшки */
  .related-item img{
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* компактные отступы текста (чтоб не было “простыней”) */
  .related-item__meta{ margin: 10px 0 6px !important; }
  .related-item__title{ margin: 0 !important; }
  .related-item__title a{ display: inline; }
}

@media (max-width: 520px){
  .related-item__title{ font-size: 17px !important; }
}

/* выключаем старый first-letter */
.article-body > p:first-of-type::first-letter{
  float:none !important;
  -webkit-initial-letter: initial !important;
  initial-letter: initial !important;
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
}

/* новый стабильный dropcap */
.sp-dropcap{
  float:left;
  font-family:var(--font-display);
  font-weight:400;
  font-size:4.9em;
  line-height:0.86;
  margin:0 0.1em 0 0;
  padding:0;
}


/* ARTICLE container mobile шире */
@media (max-width: 768px){
  .article > .sp-container{
    max-width: 90% !important;
    width: 90% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
/* META: одна строка, но ужимается (без ellipsis/hidden) */
@media (max-width: 520px){
  .article-meta{
    flex-wrap: nowrap !important;
    align-items: center;
    white-space: nowrap;

    /* ужимаем шрифт плавно */
    font-size: clamp(9px, 2.8vw, 12px) !important;

    /* ужимаем трекинг плавно */
    letter-spacing: clamp(.06em, 0.8vw, .12em) !important;

    /* уменьшаем расстояния между элементами */
    gap: clamp(4px, 1.2vw, 8px) !important;

    /* НИЧЕГО НЕ СКРЫВАЕМ */
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .article-meta__sep{
    width: clamp(4px, 1.2vw, 6px);
    height: clamp(4px, 1.2vw, 6px);
    margin: 0 clamp(4px, 1.2vw, 8px);
    transform: translateY(0); /* без магии, центрится через align-items */
  }
}