/* ========================================================
   ВТоп77 – Guide / Article (smyslokod-style structure)
   Использует токены из styles.css (--paper, --ink, --terracotta, --serif…)
   ======================================================== */

.container--narrow{ max-width: 840px; }

.guide{
  padding-top: calc(var(--header-h) + var(--space-12));
  padding-bottom: var(--space-16);
  position: relative;
  z-index: 1;
}

/* ---- заголовок и метаданные ---- */
.guide__title{
  font-family: var(--serif);
  font-size: var(--fs-h1);
  line-height: 1.08;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 18px 0 26px;
  text-wrap: pretty;
}
.guide__title em{
  font-style: italic;
  font-weight: 400;
  color: var(--terracotta);
  position: relative;
  white-space: nowrap;
}
.guide__title em .ink-underline{
  position: absolute;
  left: -2%;
  bottom: -0.16em;
  width: 104%;
  height: 0.32em;
  color: var(--terracotta);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.guide-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-10);
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-mute);
}
.guide-meta__author{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--ink);
}
.guide-meta__author img{
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.guide-meta__item{ position: relative; padding-left: 17px; }
.guide-meta__item::before{
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-faint);
  transform: translateY(-50%);
}

/* ---- лид «Что вы поймёте» ---- */
.guide-lead{
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 26px;
}
.guide-lead__title{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.guide-lead ul{ display: grid; gap: 11px; }
.guide-lead li{
  position: relative;
  padding-left: 24px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.guide-lead li::before{
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--terracotta);
  font-family: var(--serif);
}
.guide-lead a{ color: var(--ink); border-bottom: 1px solid var(--line); }
.guide-lead a:hover{ color: var(--terracotta); border-color: var(--terracotta); }
.guide-lead__benefit{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-mute);
}

.guide-note{
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-mute);
  background: var(--paper-3);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: var(--space-12);
}
.guide-note a{ color: var(--terracotta); border-bottom: 1px solid currentColor; }

/* ---- проза ---- */
.guide-prose{ font-family: var(--sans); }
.guide-prose h2{
  font-family: var(--serif);
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 56px 0 18px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.guide-prose h2 em{ font-style: italic; font-weight: 400; color: var(--terracotta); }
.guide-prose h3{
  font-family: var(--serif);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--ink);
  margin: 30px 0 12px;
}
.guide-prose p{
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.guide-prose strong{ color: var(--ink); font-weight: 700; }
.guide-prose a{ color: var(--terracotta); border-bottom: 1px solid rgba(184,88,66,0.30); }
.guide-prose a:hover{ border-color: var(--terracotta); }
.guide-prose ul{ display: grid; gap: 10px; margin: 0 0 22px; padding-left: 0; }
.guide-prose ul li{
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.guide-prose ul li::before{
  content: "";
  position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--sage);
}

/* ---- врезка «Главное» ---- */
.guide-key{
  background: linear-gradient(180deg, rgba(139,156,126,0.12), rgba(139,156,126,0.05));
  border: 1px solid rgba(139,156,126,0.32);
  border-left: 3px solid var(--sage);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin: 22px 0 42px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.guide-key strong{ color: #5d6b51; font-weight: 700; }

/* ---- таблицы ---- */
.guide-table{
  margin: 8px 0 42px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.guide-table table{ width: 100%; border-collapse: collapse; font-size: 14.5px; }
.guide-table th, .guide-table td{
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.45;
}
.guide-table thead th{
  background: var(--paper-2);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.guide-table tbody tr:last-child td{ border-bottom: none; }
.guide-table tbody tr:hover{ background: rgba(42,37,32,0.02); }
.guide-table td:first-child{ font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ---- нумерованные шаги ---- */
.guide-steps{
  display: grid;
  gap: 14px;
  margin: 8px 0 42px;
  padding: 0;
  counter-reset: step;
}
.guide-steps li{
  position: relative;
  list-style: none;
  padding: 18px 22px 18px 66px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.guide-steps li::before{
  counter-increment: step;
  content: counter(step);
  position: absolute; left: 18px; top: 16px;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 17px;
}
.guide-steps strong{ color: var(--ink); }

/* ---- чек-лист ---- */
.guide-check{
  margin: 8px 0 42px;
  padding: 26px 28px;
  background: var(--paper-3);
  border: 1px dashed var(--ink-faint);
  border-radius: var(--radius-lg);
}
.guide-check__title{
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.guide-check ul{ display: grid; gap: 12px; padding: 0; }
.guide-check li{
  position: relative;
  list-style: none;
  padding-left: 32px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.guide-check li::before{
  content: "";
  position: absolute; left: 0; top: 0;
  width: 19px; height: 19px;
  border: 1.5px solid var(--sage);
  border-radius: 4px;
  background: rgba(139,156,126,0.10);
}

/* ---- промо-врезка в середине ---- */
.guide-promo{
  background: linear-gradient(135deg, #1F1A16 0%, #2A2520 55%, #3a2520 100%);
  color: #EBE1D0;
  border-radius: 10px;
  padding: clamp(28px, 3.5vw, 44px);
  margin: 16px 0 44px;
  position: relative;
  overflow: hidden;
}
.guide-promo::before{
  content: "";
  position: absolute; top: -30%; right: -8%;
  width: 50%; height: 160%;
  background: radial-gradient(ellipse at center, rgba(184,88,66,0.22), transparent 65%);
  pointer-events: none;
}
.guide-promo__inner{ position: relative; z-index: 1; }
.guide-promo__title{
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.15;
  color: #F4EDE0;
  margin-bottom: 12px;
}
.guide-promo p{ font-family: var(--sans); font-size: 15px; line-height: 1.6; color: rgba(235,225,208,0.80); margin: 0 0 16px; max-width: 60ch; }
.guide-promo p strong{ color: #F4EDE0; }
.guide-promo__contacts{
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  font-family: var(--sans); font-size: 14px;
  color: rgba(235,225,208,0.88);
  margin-bottom: 22px;
}
.guide-promo__contacts a{ color: var(--terracotta-2); border-bottom: 1px solid currentColor; }
.guide-promo .btn--primary{ background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.guide-promo .btn--primary:hover{ background: var(--rust); border-color: var(--rust); }

/* ---- обратная связь Да/Нет ---- */
.guide-feedback{
  text-align: center;
  margin: 52px 0;
  padding: 30px 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.guide-feedback__q{
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 18px;
}
.guide-feedback__btns{ display: inline-flex; gap: 12px; }
.guide-feedback__btn{
  min-width: 92px;
  padding: 10px 26px;
  border: 1px solid var(--ink-mute);
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.guide-feedback__btn:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---- карточка автора ---- */
.guide-author{
  display: flex;
  gap: 22px;
  align-items: flex-start;
  padding: 28px 30px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: 34px;
}
.guide-author img{
  width: 74px; height: 74px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}
.guide-author__name{
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.guide-author__role{
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.guide-author__bio{ font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin-bottom: 14px; }
.guide-author__links{ display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; }
.guide-author__links a{ color: var(--terracotta); border-bottom: 1px solid currentColor; }

/* ---- связанные материалы ---- */
.guide-related{ margin-bottom: var(--space-8); }
.guide-related__title{ font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); margin-bottom: 16px; }
.guide-related ul{ display: grid; gap: 11px; padding: 0; }
.guide-related li{ position: relative; padding-left: 24px; font-size: 15.5px; line-height: 1.5; }
.guide-related li::before{ content: "↗"; position: absolute; left: 0; top: 0; color: var(--terracotta); }
.guide-related a{ color: var(--ink); border-bottom: 1px solid var(--line); }
.guide-related a:hover{ color: var(--terracotta); border-color: var(--terracotta); }

/* ---- адаптив ---- */
@media (max-width: 720px){
  .guide-lead{ padding: 22px; }
  .guide-author{ flex-direction: column; gap: 16px; padding: 22px; }
  .guide-prose h2{ margin-top: 42px; }
  .guide-prose p{ font-size: 16px; }
  .guide-steps li{ padding: 16px 18px 16px 60px; }
}