/* =========================================================
   Страницы для поиска: /uborshchitsa/, /nyanya/ и остальные.
   Это текстовые страницы, а не приложение: ни доски, ни модальных окон, ни
   перетаскивания. Оформление держится на тех же переменных, что и продукт
   (base.css), чтобы человек, пришедший из поиска, попал в тот же дом.
   ========================================================= */

.seo{background:var(--wall);}

.seo-head{padding:18px 0 10px;}

/* ---------- хлебные крошки: обычные ссылки, не скрипт ---------- */
.seo-crumbs{margin:6px 0 14px;}
.seo-crumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; padding:0;}
.seo-crumbs li{font-size:12.5px; color:var(--ink-faint);}
.seo-crumbs li + li::before{content:'→'; margin-right:6px; color:var(--line);}
.seo-crumbs a{color:var(--ink-soft); text-decoration:none;}
.seo-crumbs a:hover{color:var(--orange);}

/* ---------- текст ---------- */
.seo-main{
  background:#fff; border-radius:18px; padding:30px 28px 34px;
  box-shadow:0 18px 40px -34px rgba(43,58,74,.5);
}
/* Одна колонка на всё: заголовок, лид, абзацы, врезка и свёрнутые списки
   начинаются и кончаются в одних и тех же точках — страница читается
   прямоугольником. Выключка по формату держит правый край прямым, а чтобы
   пробелы не расползались, строка длинная: чем больше слов в строке, тем
   меньше добавка к каждому пробелу. */
.seo-main h1{
  font-size:28px; line-height:1.15; letter-spacing:-0.02em; margin-bottom:10px;
  text-wrap:balance;
}
.seo-type-title{
  display:grid; grid-template-columns:64px minmax(0, 1fr); gap:14px;
  align-items:center; min-height:64px; margin-bottom:10px;
}
.seo-type-title__icon{
  display:block; width:64px; height:64px; padding:4px; object-fit:contain;
  border-radius:50%; background:var(--orange-soft);
}
.seo-type-title h1{margin:0;}
.seo-lead{
  font-size:16.5px; line-height:1.5; color:var(--ink-soft); margin-bottom:18px;
  text-align:justify; text-wrap:pretty; hyphens:none;
}
.seo-main p{
  font-size:15px; line-height:1.62; margin-bottom:12px;
  text-align:justify; text-wrap:pretty; hyphens:none;
}
/* короткие подписи выключка по формату только растянет: два класса, чтобы
   правило было сильнее общего «.seo-main p» выше */
.seo-main p.seo-dim{text-align:left;}
.seo-main p.seo-cta{text-align:center;}
.seo-main h2{font-size:19px; margin:26px 0 10px; letter-spacing:-0.01em; text-wrap:balance;}
.seo-main h2 a{color:var(--ink); text-decoration:none;}
.seo-main h2 a:hover{color:var(--orange);}
.seo-main p a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
.seo-main p a:hover{color:var(--orange);}
/* кнопка внутри абзаца остаётся кнопкой: подчёркивание и цвет ссылки ей не нужны */
.seo-main p a.btn{text-decoration:none; color:#fff;}
.seo-main p a.btn:hover{color:#fff;}
.seo-main p a.btn-secondary, .seo-main p a.btn-secondary:hover{color:var(--ink);}
.seo-main h3{
  font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);
  margin:14px 0 8px;
}
.seo-dim{color:var(--ink-faint); font-weight:400; font-size:13.5px;}

/* врезка: короткий совет, а не рекламный блок */
.seo-tip{
  margin:16px 0 4px; padding:14px 16px;
  background:var(--orange-soft); border-radius:12px;
  font-size:14.5px; line-height:1.55; text-align:justify; hyphens:none;
}

.seo-block{margin-top:26px;}

/* ---------- длинные списки: свёрнуты ----------
   Состав библиотеки и чек-листы поиску нужны целиком, человеку — по желанию:
   семнадцать карточек с уточнениями это два экрана. Свёрнутый список занимает
   строку с заголовком и счётчиком, развёрнутый показывает всё, как раньше. */
.seo-parts{border-top:1px solid var(--line); padding-top:16px;}
/* заголовок слева, «Развернуть» справа. Стрелки перед заголовком нет: она
   сдвигала строку, и свёрнутый заголовок стоял не на одной линии с обычными */
.seo-parts summary{
  cursor:pointer; list-style:none; color:var(--ink);
  display:flex; align-items:center; gap:12px;
}
.seo-parts summary > h2{flex:1; min-width:0;}
/* заголовок остаётся заголовком: строка — это h2, просто внутри summary */
.seo-parts summary h2{
  display:inline; margin:0; font-size:18px; letter-spacing:-0.01em;
}
.seo-parts summary::-webkit-details-marker{display:none;}
.seo-parts summary:hover, .seo-parts summary:hover h2{color:var(--orange);}
.seo-parts > p{margin-top:10px;}

/* ---------- списки ---------- */
.seo-list{list-style:none; padding:0; display:grid; gap:10px;}
.seo-list > li{
  padding:12px 14px; background:var(--panel);
  border:1px solid var(--line); border-radius:12px; font-size:15px;
}
.seo-list a{color:var(--ink); font-weight:600; text-decoration:none;}
.seo-list a:hover{color:var(--orange);}
.seo-notes{display:block; margin-top:3px; font-size:13px; line-height:1.45; color:var(--ink-soft);}
.seo-no{color:var(--red);}

/* Каталог: один компактный визуальный маркер на категорию, сценарии остаются
   главными ссылками и не превращаются в галерею. */
.seo-catalog-head{
  display:grid; grid-template-columns:64px minmax(0, 1fr); gap:14px;
  align-items:center; min-height:64px; margin-bottom:12px;
}
.seo-catalog-icon{
  display:flex; width:64px; height:64px; align-items:center; justify-content:center;
  border-radius:50%; background:var(--orange-soft); text-decoration:none;
}
.seo-catalog-icon img{width:56px; height:56px; padding:4px; object-fit:contain;}
.seo-catalog-group .seo-catalog-head h2{margin:0 0 3px;}
.seo-catalog-group .seo-catalog-head p{margin:0; line-height:1.45;}
.seo-catalog-group .seo-list a{display:block;}

/* карточки чек-листа: значок и подпись, как в самой шпаргалке, но плоско */
.seo-cards{list-style:none; padding:0; display:grid; gap:6px 16px; grid-template-columns:1fr 1fr;}
.seo-cards-wide{grid-template-columns:1fr 1fr;}
.seo-card{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  padding:6px 0; font-size:14.5px;
}
.seo-card img{width:44px; height:34px; object-fit:contain;}
.seo-ic-wait{
  display:block; width:44px; height:34px; border-radius:8px;
  background:rgba(43,58,74,.06);
}
.seo-card b{font-weight:600;}

.seo-zone{margin-bottom:14px;}

/* ---------- кнопка страницы ---------- */
.seo-main .seo-cta{margin:18px 0 22px; text-align:center;}
.seo-main .seo-cta .btn{text-decoration:none; color:#fff;}
.seo-main .seo-cta-note{
  margin:8px 0 0; color:var(--ink-soft); font-size:13.5px;
  line-height:1.45; text-align:center;
}
.seo-template{
  padding:18px 20px; border:1px solid var(--line); border-radius:14px;
  background:var(--panel);
}
.seo-template > h2{margin:0 0 14px;}
.seo-template .seo-card{padding:7px 8px; border-radius:10px; background:#fff;}
.seo-prose{margin-top:28px; padding-top:22px; border-top:1px solid var(--line);}
.seo-prose > p:first-child{margin-top:0;}
.seo-main .seo-lost-own{text-align:center; font-size:13.5px; color:var(--ink-soft);}

/* «Развернуть» справа от заголовка: свёрнутая строка сама говорит, что за ней
   список, и её не принимают за подпись */
.seo-fold-hint{
  flex:none; margin-left:auto;
  padding:6px 13px; border:1px solid var(--line); border-radius:20px;
  font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--panel);
}
.seo-parts summary:hover .seo-fold-hint{color:var(--orange); border-color:var(--orange);}
.seo-parts[open] .seo-more-open, .seo-parts:not([open]) .seo-more-shut{display:none;}

.seo-related{margin-top:30px; padding-top:20px; border-top:1px solid var(--line);}
.seo-related ul{list-style:none; padding:0; display:grid; gap:8px;}
.seo-related a{color:var(--ink); font-weight:600; text-decoration:none;}
.seo-related a:hover{color:var(--orange);}

/* ---------- подвал: переход между библиотеками ---------- */
.seo-foot{
  display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center;
  margin-bottom:8px;
}
.seo-foot a{font-family:'Inter', sans-serif; font-size:13px; color:var(--ink-soft); text-decoration:none;}
.seo-foot a:hover{color:var(--orange);}

@media (max-width:600px){
  /* на телефоне строка короткая, и выключка по формату раздвигает пробелы до
     дыр: там текст выключен влево */
  .seo-lead, .seo-main p, .seo-tip{text-align:left; text-wrap:pretty;}
  .seo-main{padding:22px 16px 26px; border-radius:14px;}
  .seo-main h1{font-size:23px;}
  .seo-type-title{
    grid-template-columns:52px minmax(0, 1fr); gap:11px;
    min-height:52px; margin-bottom:10px;
  }
  .seo-type-title__icon{width:52px; height:52px; padding:3px;}
  .seo-lead{font-size:15.5px;}
  .seo-main p{font-size:15px;}
  .seo-main .seo-cta-note{text-align:center; font-size:13px;}
  .seo-template{padding:15px 12px;}
  .seo-catalog-head{
    grid-template-columns:52px minmax(0, 1fr); gap:11px; min-height:52px;
  }
  .seo-catalog-icon{width:52px; height:52px;}
  .seo-catalog-icon img{width:46px; height:46px; padding:3px;}
  /* на телефоне чек-лист одной колонкой: две дают по три слова в строке */
  .seo-cards, .seo-cards-wide{grid-template-columns:1fr;}
}