/* =============================================================================
   guide.css  ·  ?v=guide-1
   Слой раздела «Гид по лазерной эпиляции» (/laser/guide/, /he/laser/guide/).
   Грузится ТОЛЬКО на страницах гида, ПОСЛЕ main.css (и rtl.css на HE).

   Правила безопасности:
   - НЕТ !important;
   - только новые классы .guide-* / .article-* — существующие компоненты не переопределяются;
   - direction-neutral: логические свойства (margin-inline / padding-inline / text-align:start),
     поэтому RTL работает без отдельной ветки;
   - НИКАКОЙ логики: калькулятор, цены, WhatsApp, GA4 не затрагиваются;
   - токены берём из main.css / design-upgrade-v2.css, новых цветов не вводим.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1 · Хлебные крошки (видимые, соответствуют BreadcrumbList)
----------------------------------------------------------------------------- */
.guide-crumbs{
  padding-block:18px 0;
  font-size:13px;
  color:var(--muted);
}
.guide-crumbs ol{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 8px;
  margin:0; padding:0; list-style:none;
}
.guide-crumbs li{display:inline-flex; align-items:center; gap:8px; min-width:0;}
.guide-crumbs li + li::before{
  content:"·";
  color:var(--line);
  font-weight:700;
}
.guide-crumbs a{
  color:var(--muted);
  border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.guide-crumbs [aria-current="page"]{
  color:var(--ink);
  font-weight:600;
  /* длинный H1 в крошке не должен ломать строку на 360px */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:min(100%, 34ch);
}
@media (hover:hover) and (pointer:fine){
  .guide-crumbs a:hover{color:var(--gold); border-bottom-color:var(--line);}
}

/* -----------------------------------------------------------------------------
   2 · Hero статьи и хаба — типографический, без изображения (нулевой CLS)
----------------------------------------------------------------------------- */
.guide-hero{
  padding-block:clamp(22px, 3.2vw, 34px) 0;
}
.guide-hero__inner{
  max-width:820px;
}
.guide-hero h1{
  font-size:clamp(30px, 5.2vw, 46px);
  line-height:1.1;
  margin:0 0 14px;
}
.guide-hero .guide-standfirst{
  font-size:clamp(16px, 2vw, 18.5px);
  line-height:1.6;
  color:var(--muted);
  max-width:64ch;
  margin:0;
}
.guide-hero__rule{
  height:1px; border:0; margin:clamp(22px, 2.8vw, 30px) 0 0;
  background:var(--grad-hair); opacity:.75;
  max-width:820px;
}

/* -----------------------------------------------------------------------------
   2b · Обложка статьи (hero image)
   Кадры широкие: аппарат с одного края, люди с другого — поэтому НИЧЕГО не
   обрезаем ни на одном брейкпоинте. Собственные пропорции файлов ровно 16:9
   (1600×900), контейнер задан тем же 16/9 → object-fit:cover не режет кадр,
   но страхует, если картинку когда-нибудь заменят на другую пропорцию.
   width/height в разметке + aspect-ratio здесь = нулевой CLS.
----------------------------------------------------------------------------- */
.guide-cover{
  max-width:820px;
  margin:clamp(22px, 2.8vw, 30px) 0 0;
}
.guide-cover img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:var(--r-md);
  border:1px solid var(--line-soft);
  box-shadow:var(--shadow-card);
  background:var(--soft);   /* тёплая подложка до декодирования — без белой вспышки */
}
/* обложка сама отбивает hero от текста — декоративная линия стала бы вторым
   разделителем подряд, поэтому в этом случае её убираем */
.guide-cover + .guide-hero__rule{ display:none; }

/* -----------------------------------------------------------------------------
   3 · Тело статьи — читаемая колонка 760px (в диапазоне 720–820)
----------------------------------------------------------------------------- */
.article{
  padding-block:clamp(24px, 3vw, 34px) var(--section-y);
}
.article__body{
  max-width:760px;
  font-size:17px;
  line-height:1.68;
  color:var(--ink);
}
@media (max-width:560px){
  .article__body{font-size:16.5px; line-height:1.66;}
}

.article__body > * + *{margin-top:1.05em;}
.article__body p{margin:0;}
.article__body strong,
.article__body b{font-weight:700; color:var(--ink);}

.article__body h2{
  font-size:clamp(24px, 3.6vw, 32px);
  line-height:1.15;
  margin-top:clamp(34px, 4vw, 48px);
  margin-bottom:.5em;
  scroll-margin-top:88px;
}
.article__body h3{
  font-family:var(--font-body);
  font-weight:700;
  letter-spacing:-.005em;
  font-size:clamp(17px, 2.1vw, 19.5px);
  line-height:1.35;
  margin-top:clamp(24px, 2.8vw, 32px);
  margin-bottom:.45em;
  color:var(--ink);
  scroll-margin-top:88px;
}

/* Списки: маркер золотой, отступ логический (RTL-safe) */
.article__body ul,
.article__body ol{
  margin:0; padding:0;
  padding-inline-start:1.35em;
  list-style-position:outside;
}
.article__body ul{list-style:disc;}
.article__body ol{list-style:decimal;}
.article__body li{margin-top:.42em;}
.article__body li::marker{color:var(--gold); font-weight:600;}
.article__body li > ul,
.article__body li > ol{margin-top:.42em;}

/* Цитата / выделенный вопрос */
.article__body blockquote{
  margin:clamp(20px, 2.4vw, 26px) 0;
  padding:16px 20px;
  border:0;
  border-inline-start:3px solid var(--gold-soft);
  background:var(--pearl);
  border-radius:var(--r-sm);
  color:var(--ink);
  font-size:17px;
  line-height:1.55;
}
.article__body blockquote p{margin:0;}
.article__body blockquote + *{margin-top:1.05em;}

/* Ссылки внутри текста */
.article__body a{
  color:var(--bronze);
  font-weight:600;
  border-bottom:1px solid var(--line);
  transition:color .2s ease, border-color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .article__body a:hover{color:var(--gold); border-bottom-color:var(--gold-soft);}
}

/* -----------------------------------------------------------------------------
   4 · Таблицы — скролл внутри своего контейнера, страница не едет вбок
----------------------------------------------------------------------------- */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin-block:clamp(18px, 2.2vw, 24px);
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--pearl);
}
.table-wrap table{
  width:100%;
  min-width:420px;
  border-collapse:collapse;
  font-size:15.5px;
  line-height:1.45;
}
.table-wrap th,
.table-wrap td{
  padding:12px 14px;
  text-align:start;
  vertical-align:top;
  border-bottom:1px solid var(--line-soft);
}
.table-wrap thead th{
  font-size:12px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--bronze);
  background:var(--soft);
  white-space:nowrap;
}
.table-wrap tbody tr:last-child td{border-bottom:0;}
/* Числовая колонка: выравнивание по концу строки + табличные цифры */
.table-wrap .num{
  text-align:end;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.table-wrap thead th.num{text-align:end;}

/* -----------------------------------------------------------------------------
   5 · Встроенный CTA к калькулятору — 2–3 точки на страницу, не баннер-спам
----------------------------------------------------------------------------- */
.guide-cta{
  margin-block:clamp(26px, 3.2vw, 34px);
  padding:clamp(18px, 2.2vw, 24px);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:linear-gradient(145deg,#fff7ea,#f7ecda);
  box-shadow:var(--shadow-card);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
}
/* 240px — это basis ПО ГЛАВНОЙ ОСИ. В row (desktop) он задаёт ширину и работает
   как задумано; в column (мобильный блок ниже) он бы задавал ВЫСОТУ, поэтому
   там basis обязательно сбрасывается в auto — см. @media (max-width:520px). */
.guide-cta__text{flex:1 1 240px; min-width:0;}
.guide-cta__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(19px, 2.4vw, 23px);
  line-height:1.2;
  color:var(--ink);
  margin:0 0 5px;
}
.guide-cta__note{
  font-size:14.5px;
  line-height:1.5;
  color:var(--muted);
  margin:0;
}
.guide-cta .btn{flex:0 0 auto;}
@media (max-width:520px){
  .guide-cta{flex-direction:column; align-items:stretch;}
  /* КРИТИЧНО: в column главная ось — вертикальная, и flex-basis:240px из правила
     выше превращался в фиксированную ВЫСОТУ текстового блока (~240px при
     реальном контенте 66–89px). Отсюда была огромная пустота между текстом и
     кнопкой. Возвращаем высоту по содержимому. */
  .guide-cta__text{flex:0 1 auto;}
  .guide-cta .btn{width:100%;}
}

/* -----------------------------------------------------------------------------
   6 · Блок «Читайте также» — перелинковка внутри пачки
----------------------------------------------------------------------------- */
.guide-related{
  max-width:760px;
  margin-top:clamp(36px, 4.4vw, 52px);
  padding-top:clamp(22px, 2.6vw, 28px);
  border-top:1px solid var(--line-soft);
}
.guide-related__head{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze);
  margin:0 0 14px;
}
.guide-related__list{
  display:grid; gap:10px;
  margin:0; padding:0; list-style:none;
}
.guide-related__list a{
  display:block;
  padding:14px 16px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--pearl);
  font-weight:600;
  font-size:15.5px;
  line-height:1.4;
  color:var(--ink);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
@media (hover:hover) and (pointer:fine){
  .guide-related__list a:hover{border-color:var(--gold-soft); color:var(--bronze); transform:translateY(-1px);}
}

/* -----------------------------------------------------------------------------
   7 · Подвал статьи: «Обновлено» + источники (компактно)
----------------------------------------------------------------------------- */
.article-foot{
  max-width:760px;
  margin-top:clamp(30px, 3.6vw, 40px);
  padding-top:clamp(18px, 2.2vw, 22px);
  border-top:1px solid var(--line-soft);
  font-size:13.5px;
  line-height:1.6;
  color:var(--muted);
}
.article-foot p{margin:0 0 .55em;}
.article-foot p:last-child{margin-bottom:0;}
.article-foot b{color:var(--ink); font-weight:700;}
.article-foot a{
  color:var(--muted);
  border-bottom:1px solid var(--line-soft);
  overflow-wrap:anywhere;
}
@media (hover:hover) and (pointer:fine){
  .article-foot a:hover{color:var(--bronze); border-bottom-color:var(--line);}
}

/* -----------------------------------------------------------------------------
   8 · Hub: карточки опубликованных материалов
----------------------------------------------------------------------------- */
.guide-cards{
  display:grid;
  gap:var(--grid-gap);
  grid-template-columns:1fr;
  margin:0; padding:0; list-style:none;
}
@media (min-width:760px){
  .guide-cards{grid-template-columns:repeat(3,1fr);}
}
.guide-card{
  display:flex; flex-direction:column;
  height:100%;
  padding:var(--card-padding);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  background:var(--pearl);
  box-shadow:var(--shadow-card);
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.guide-card__kicker{
  font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bronze);
  margin:0 0 10px;
}
.guide-card__title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(20px, 2.4vw, 24px);
  line-height:1.18;
  color:var(--ink);
  margin:0 0 10px;
}
.guide-card__text{
  font-size:15px;
  line-height:1.55;
  color:var(--muted);
  margin:0 0 16px;
}
.guide-card__more{
  margin-top:auto;
  font-size:14.5px; font-weight:700;
  color:var(--bronze);
  display:inline-flex; align-items:center; gap:7px;
}
.guide-card__more svg{
  width:15px; height:15px; flex:none;
  transition:transform .22s ease;
}
/* стрелка смотрит «вперёд» в обоих направлениях письма */
html[dir="rtl"] .guide-card__more svg{transform:scaleX(-1);}
@media (hover:hover) and (pointer:fine){
  .guide-card:hover{border-color:var(--gold-soft); box-shadow:var(--shadow-soft); transform:translateY(-2px);}
  .guide-card:hover .guide-card__more svg{transform:translateX(3px);}
  html[dir="rtl"] .guide-card:hover .guide-card__more svg{transform:scaleX(-1) translateX(3px);}
}

/* -----------------------------------------------------------------------------
   8b · Общий Гид (/guide/, /he/guide/) — секция направления
   Каркас рассчитан на несколько направлений: каждое новое — ещё один
   .guide-topic. Пустых категорий и карточек «скоро» здесь принципиально нет.
----------------------------------------------------------------------------- */
.guide-topic + .guide-topic{
  margin-top:clamp(38px, 4.6vw, 56px);
  padding-top:clamp(30px, 3.6vw, 42px);
  border-top:1px solid var(--line-soft);
}
.guide-topic__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:14px 24px;
  margin-bottom:clamp(18px, 2.2vw, 26px);
}
/* basis относится к главной оси; здесь всегда row, но при переносе колонка
   должна тянуться по содержимому — поэтому auto, а не фиксированная база */
.guide-topic__head > div{flex:1 1 300px; min-width:0;}
.guide-topic__head .btn{flex:0 0 auto;}
.guide-topic__kicker{
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--bronze); margin:0 0 8px;
}
.guide-topic__title{
  font-size:clamp(26px, 3.6vw, 36px);
  line-height:1.12;
  margin:0 0 10px;
}
.guide-topic__lead{
  font-size:clamp(15px, 1.8vw, 16.5px);
  line-height:1.6;
  color:var(--muted);
  max-width:60ch;
  margin:0;
}
@media (max-width:560px){
  .guide-topic__head .btn{width:100%;}
}

/* Hub: короткие ответы «о чём этот раздел» */
.guide-points{
  max-width:820px;
  display:grid; gap:12px;
  margin:clamp(22px, 2.6vw, 28px) 0 0;
  padding:0; list-style:none;
}
@media (min-width:720px){
  .guide-points{grid-template-columns:repeat(3,1fr);}
}
.guide-points li{
  padding:16px 18px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:var(--pearl);
  font-size:15px;
  line-height:1.5;
  color:var(--muted);
}
.guide-points b{display:block; color:var(--ink); font-weight:700; margin-bottom:4px;}

/* Возврат на основной лендинг лазера */
.guide-back{
  max-width:820px;
  margin-top:clamp(28px, 3.4vw, 38px);
  padding-top:clamp(18px, 2.2vw, 24px);
  border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px;
}
.guide-back p{
  flex:1 1 240px; min-width:0;
  margin:0;
  font-size:15px; line-height:1.55; color:var(--muted);
}

/* Подъём из раздела в общий Гид — навигационная строка, а не CTA-карточка */
.guide-uplink{
  max-width:820px;
  margin:clamp(18px, 2.2vw, 24px) 0 0;
  font-size:14.5px;
}
.guide-uplink a{
  display:inline-flex; align-items:center; gap:8px;
  color:var(--bronze); font-weight:600;
  border-bottom:1px solid var(--line-soft);
  padding-block:2px;
  transition:color .2s ease, border-color .2s ease;
}
.guide-uplink a::before{
  content:"←";
  font-weight:700;
}
html[dir="rtl"] .guide-uplink a::before{content:"→";}
@media (hover:hover) and (pointer:fine){
  .guide-uplink a:hover{color:var(--gold); border-bottom-color:var(--gold-soft);}
}

/* -----------------------------------------------------------------------------
   9 · Motion — уважаем reduced-motion (движение только у .reveal из main.css)
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .guide-card,
  .guide-card__more svg,
  .guide-related__list a,
  .guide-crumbs a,
  .article__body a{transition:none;}
  .guide-card:hover{transform:none;}
  .guide-related__list a:hover{transform:none;}
}