/* ==========================================================================
   Стили кластера гидов. Подключается ПОСЛЕ tokens.css и только после него.
   ==========================================================================
   Почему отдельный файл, а не blog.css: там другая дизайн-система (палитра
   zinc, бирюзовые ссылки, селекторы по тегам), и её мобильная деградация
   таблиц зашивает английские подписи прямо в CSS через content. Для пяти
   языков это смертельно.

   Почему не инлайн: сто с лишним статей блога носят по девять килобайт
   дубля, правка шаблона превращается в правку сотен файлов. Ровно от этого
   кластер и уходит.

   Префикс классов gd-, по образцу двухбуквенных префиксов в next/css.
   Все значения только из токенов. Своих цветов и отступов тут нет.
   Длинных тире в файле нет нигде, включая комментарии.
   ========================================================================== */

/* ---------- каркас страницы ---------- */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--c-bg);
  color:var(--c-text);
  font:400 var(--t-body-l) var(--f-sans);
}

.gd-wrap{
  max-width:760px;
  margin-inline:auto;              /* без auto прибивается влево на десктопе */
  padding:0 var(--s-4) var(--s-10);
}

.gd-prose{max-width:65ch}

.gd-prose p,
.gd-prose ul,
.gd-prose ol{margin:0 0 var(--s-5)}

.gd-prose li{margin-bottom:var(--s-2)}

.gd-prose a{color:var(--c-rose-400);text-decoration:underline;text-underline-offset:2px}
.gd-prose a:hover{color:var(--c-rose)}

/* ---------- шапка сайта ---------- */

.gd-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  padding:var(--s-3) var(--s-4);
  border-bottom:1px solid var(--c-border);
  background:var(--c-surface);
}
.gd-topbar__logo{
  color:var(--c-text);text-decoration:none;
  font:600 var(--t-title-s) var(--f-sans);
}
.gd-topbar__logo span{color:var(--c-gold)}
.gd-topbar__back{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:var(--tap);min-height:var(--tap);   /* у блога 34px, это мало */
  color:var(--c-muted);text-decoration:none;
  border-radius:var(--r-ctl);
}
.gd-topbar__back:hover{color:var(--c-text);background:var(--c-surface-high)}

/* ---------- хлебные крошки ---------- */

.gd-crumbs{padding:var(--s-4) 0 0;overflow-x:auto;white-space:nowrap}
.gd-crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:var(--s-2)}
.gd-crumbs li{
  font:600 var(--t-label-m) var(--f-mono);
  letter-spacing:var(--tr-label-m);
  color:var(--c-muted);
  text-transform:uppercase;
}
.gd-crumbs li+li::before{content:"/";margin-right:var(--s-2);color:var(--c-dim)}
.gd-crumbs a{color:var(--c-muted);text-decoration:none}
.gd-crumbs a:hover{color:var(--c-text)}
.gd-crumbs [aria-current]{color:var(--c-faint)}

/* ---------- плашка 18+ ---------- */
/* Баннер, а не гейт: статья уже в DOM, робот её видит, рендер не блокируется. */

.gd-adult{
  display:flex;align-items:flex-start;gap:var(--s-3);
  margin:var(--s-5) 0;
  padding:var(--s-3) var(--s-4);
  background:var(--c-surface-high);
  border:1px solid var(--c-border-strong,var(--c-border));
  border-radius:var(--r-md);
}
.gd-adult p{margin:0;font:400 var(--t-body-s) var(--f-sans);color:var(--c-muted)}
.gd-adult__mark{
  flex:none;
  padding:2px var(--s-2);
  border-radius:var(--r-tag);
  background:var(--g-mature,var(--c-spice));
  color:var(--c-text);
  font:600 var(--t-label-m) var(--f-mono);
  letter-spacing:var(--tr-label-m);
}
.gd-adult__x{
  flex:none;margin-left:auto;
  min-width:var(--tap);min-height:var(--tap);
  background:none;border:0;cursor:pointer;
  color:var(--c-faint);font-size:20px;line-height:1;
  border-radius:var(--r-ctl);
}
.gd-adult__x:hover{color:var(--c-text);background:var(--c-surface-alt)}

/* ---------- заголовок страницы ---------- */

.gd-head{padding:var(--s-5) 0 var(--s-4)}
.gd-head__eyebrow{
  margin:0 0 var(--s-3);
  font:600 var(--t-label-m) var(--f-mono);
  letter-spacing:var(--tr-eyebrow);
  text-transform:uppercase;
  color:var(--c-gold);
}
.gd-head__title{
  margin:0 0 var(--s-3);
  font:400 var(--t-display-s) var(--f-serif);
  color:var(--c-text);
}
.gd-head__sub{
  margin:0;
  font:400 var(--t-body-s) var(--f-sans);
  color:var(--c-faint);
}

/* ---------- герой ----------
   width и height на img обязательны: без них браузер не знает пропорцию до
   загрузки и страница дёргается. У героев блога их нет ни на одной странице
   из ста восьми, и это прямой источник сдвига макета. Здесь так не будет. */

.gd-hero{
  margin:0 0 var(--s-5);
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--c-surface);
}
.gd-hero img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
}

.gd-lead{
  font:400 var(--t-body-l) var(--f-sans);
  color:var(--c-text);
}
.gd-lead strong{color:var(--c-text)}

/* ---------- заголовки внутри текста ---------- */

.gd-prose h2{
  margin:var(--s-8) 0 var(--s-4);
  font:400 var(--t-title-l,var(--t-display-s)) var(--f-serif);
  color:var(--c-text);
}
.gd-prose h3{
  margin:var(--s-6) 0 var(--s-3);
  font:600 var(--t-title-s) var(--f-sans);
  color:var(--c-text);
}

/* ---------- таблица совместимости ----------
   Главная задача: экран 360px. Не разваливаем в блоки (теряются заголовки)
   и не подставляем подписи через content (пять языков). Вместо этого
   горизонтальная прокрутка с липкой первой колонкой: подписи живут в HTML,
   переверстки нет, сдвиг макета нулевой. */

.gd-tablewrap{
  margin:var(--s-5) 0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
  background:var(--c-surface);
}
.gd-tablewrap:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px}

.gd-table{
  width:100%;
  min-width:560px;                 /* ниже этого колонки схлопываются в кашу */
  border-collapse:separate;
  border-spacing:0;
}
.gd-table caption{
  padding:var(--s-3) var(--s-4);
  text-align:left;
  font:400 var(--t-body-s) var(--f-sans);
  color:var(--c-faint);
}
.gd-table th,
.gd-table td{
  padding:var(--s-3) var(--s-4);
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--c-border);
  font:400 var(--t-body-s) var(--f-sans);
}
.gd-table thead th{
  position:sticky;top:0;z-index:2;
  background:var(--c-surface-high);
  color:var(--c-muted);
  font:600 var(--t-label-l) var(--f-sans);
  white-space:nowrap;
}
.gd-table th[scope="row"]{
  position:sticky;left:0;z-index:1;
  min-width:132px;
  background:var(--c-surface);
  color:var(--c-text);
  font:600 var(--t-title-s) var(--f-sans);
}
.gd-table tbody tr:last-child th,
.gd-table tbody tr:last-child td{border-bottom:0}

/* Метки ответов. Смысл несёт ТЕКСТ, цвет только усиливает:
   при цветовой слепоте страница остаётся читаемой. */
.gd-yes{color:var(--c-done);font-weight:600}
.gd-no{color:var(--c-danger);font-weight:600}
.gd-care{color:var(--c-warn);font-weight:600}

/* ---------- выноска ---------- */

.gd-note{
  margin:var(--s-5) 0;
  padding:var(--s-4);
  background:var(--c-card-bg);
  border:1px solid var(--c-border);
  border-left:2px solid var(--c-gold);
  border-radius:var(--r-md);
}
.gd-note p:last-child{margin-bottom:0}
.gd-note__title{
  margin:0 0 var(--s-2);
  font:600 var(--t-title-s) var(--f-sans);
  color:var(--c-gold);
}

/* ---------- метод и источники ----------
   Обязательный блок: если мы сводим чужое, мы обязаны сказать это прямо. */

.gd-method{
  margin:var(--s-8) 0 0;
  padding:var(--s-4);
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:var(--r-md);
}
.gd-method h2{margin:0 0 var(--s-3);font:600 var(--t-title-s) var(--f-sans)}
.gd-method p,
.gd-method li{font:400 var(--t-body-s) var(--f-sans);color:var(--c-muted)}
.gd-method ul{margin:0;padding-left:var(--s-5)}

/* ---------- FAQ, нативный, без единой строки JS ---------- */

.gd-faq{margin:var(--s-8) 0 0}
.gd-faq__item{border-bottom:1px solid var(--c-border)}
.gd-faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  min-height:var(--tap);
  padding:var(--s-3) 0;
  cursor:pointer;
  list-style:none;
  font:600 var(--t-title-s) var(--f-sans);
  color:var(--c-text);
}
.gd-faq__item summary::-webkit-details-marker{display:none}
.gd-faq__item summary::after{
  content:"";flex:none;
  width:10px;height:10px;
  border-right:2px solid var(--c-faint);
  border-bottom:2px solid var(--c-faint);
  transform:rotate(45deg);
  transition:transform var(--m-standard) var(--m-ease,ease);
}
.gd-faq__item[open] summary::after{transform:rotate(-135deg)}
.gd-faq__a{padding:0 0 var(--s-4)}
.gd-faq__a p{margin:0;font:400 var(--t-body-m) var(--f-sans);color:var(--c-muted)}

/* ---------- партнёрская кнопка ----------
   На тестовой странице не используется: партнёрской программы ещё нет,
   а рисовать поддельную ссылку нельзя. Компонент лежит готовым. */

.gd-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  width:100%;min-height:var(--tap);
  padding:var(--s-3) var(--s-5);
  border:0;border-radius:var(--r-ctl);
  background:var(--g-flame,var(--c-gold));
  color:var(--c-on-gold);
  font:600 var(--t-title-s) var(--f-sans);
  text-decoration:none;
}
.gd-cta__ad{
  padding:1px var(--s-2);
  border-radius:var(--r-tag);
  background:rgba(33,24,3,.15);
  font:600 var(--t-label-s) var(--f-mono);
  letter-spacing:var(--tr-label-s);
  text-transform:uppercase;
}
.gd-disclosure{
  margin:var(--s-4) 0;
  padding-left:var(--s-3);
  border-left:2px solid var(--c-gold);
  font:400 var(--t-body-s) var(--f-sans);
  color:var(--c-muted);
}

/* ---------- читайте дальше ---------- */

.gd-related{margin:var(--s-10) 0 0}
.gd-related h2{margin:0 0 var(--s-4);font:600 var(--t-title-s) var(--f-sans)}
.gd-related__grid{display:grid;grid-template-columns:1fr;gap:var(--s-3)}
.gd-rel{
  display:block;
  padding:var(--s-4);
  background:var(--c-card-bg);
  border:1px solid var(--c-border);
  border-radius:var(--r-lg);
  color:var(--c-text);
  text-decoration:none;
}
.gd-rel:hover{border-color:var(--c-rose)}
.gd-rel__tag{
  display:inline-block;margin-bottom:var(--s-2);
  padding:2px var(--s-2);
  border-radius:var(--r-tag);
  background:var(--c-surface-alt);
  color:var(--c-muted);
  font:600 var(--t-label-s) var(--f-mono);
  letter-spacing:var(--tr-label-s);
  text-transform:uppercase;
}
.gd-rel strong{display:block;font:600 var(--t-title-s) var(--f-sans)}
.gd-rel span.gd-rel__sub{
  display:block;margin-top:var(--s-1);
  font:400 var(--t-body-s) var(--f-sans);color:var(--c-muted);
}

/* ---------- подвал ---------- */

.gd-footer{
  margin-top:var(--s-10);
  padding:var(--s-6) var(--s-4);
  border-top:1px solid var(--c-border);
  color:var(--c-faint);
  font:400 var(--t-body-s) var(--f-sans);
  text-align:center;
}
.gd-footer a{color:var(--c-faint);text-decoration:underline;text-underline-offset:2px}
.gd-footer a:hover{color:var(--c-muted)}
.gd-footer__links{margin-top:var(--s-2);display:flex;gap:var(--s-4);justify-content:center}

/* ---------- фокус, общий для всего кластера ---------- */

a:focus-visible,
button:focus-visible,
summary:focus-visible{outline:2px solid var(--c-gold);outline-offset:2px}

/* ---------- 640px и выше ---------- */

@media (min-width:640px){
  .gd-wrap{padding-inline:var(--s-6)}
  .gd-head__title{font:400 var(--t-display-m) var(--f-serif)}
  .gd-table{min-width:0}                 /* помещается целиком, прокрутка не нужна */
  .gd-table caption{display:none}        /* подсказка «листайте» только на мобильном */
  .gd-cta{width:auto}
  .gd-related__grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- 900px и выше ---------- */

@media (min-width:900px){
  .gd-head__title{font:300 var(--t-display-l) var(--f-serif)}
  .gd-related__grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- уважение к настройке «меньше движения» ---------- */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ---------- наведение только там, где оно есть ---------- */

@media (hover:none){
  .gd-rel:hover{border-color:var(--c-border)}
}