/* ============================================================
   РАЗДЕЛ «КЛИЧКИ» — /klichki
   Подключается только страницами раздела. Опирается на переменные
   и утилиты assets/css/style.css (.btn, .crumbs, .section, .mt-l).
   Свои классы — с префиксом .kl-.
   ============================================================ */

/* ---------- Обложка ---------- */
.kl-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,#FFF7F0 0%,#FCEDE3 58%,#F8E3DA 100%)}
.kl-hero::after{content:'';position:absolute;right:-80px;top:-90px;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,rgba(196,64,47,.17),transparent 68%);pointer-events:none}
.kl-hero::before{content:'';position:absolute;left:-60px;bottom:-130px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(184,106,30,.13),transparent 70%);pointer-events:none}
.kl-hero__inner{position:relative;z-index:2;padding:42px 0 34px}
.kl-hero__title{font-family:var(--ff-display);font-size:clamp(29px,3.5vw,45px);font-weight:800;
  letter-spacing:-.02em;margin:12px 0 0;line-height:1.16}
.kl-hero__lead{max-width:760px;margin-top:14px;font-size:clamp(15.5px,1.2vw,18px);color:var(--ink-2);line-height:1.64}
.kl-hero__stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.kl-stat{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;background:rgba(255,255,255,.84);
  border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.kl-stat b{font-size:15px;color:var(--brand-dark)}
.kl-pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand-dark);background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:999px;padding:6px 13px}

/* ---------- Переключатель подборок ---------- */
.kl-tabs{display:flex;flex-wrap:wrap;gap:7px;margin-top:22px}
.kl-tab{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;background:#fff;
  border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink);transition:.15s ease}
.kl-tab:hover{border-color:var(--brand);color:var(--brand-dark);background:var(--brand-soft)}
.kl-tab.is-on{background:var(--ink);border-color:var(--ink);color:#fff}
.kl-tab .ico{width:15px;height:15px}

/* ---------- Генератор ---------- */
.kl-gen{background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);padding:26px 26px 22px;
  box-shadow:var(--shadow-s)}
.kl-gen__head h2{display:flex;align-items:center;gap:10px;font-family:var(--ff-display);
  font-size:clamp(19px,1.9vw,24px);font-weight:800;margin:0;color:var(--ink)}
.kl-gen__head h2 .ico{width:21px;height:21px;color:var(--brand)}
.kl-gen__head p{margin:9px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted);max-width:640px}
.kl-gen__controls{display:grid;gap:11px;margin-top:20px}
.kl-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.kl-row__label{flex:0 0 92px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.kl-row__opts{display:flex;flex-wrap:wrap;gap:7px}
.kl-opt{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;
  font-size:13.5px;font-weight:600;color:var(--ink-2);transition:.14s ease;font-family:inherit}
.kl-opt:hover{border-color:var(--brand);color:var(--brand-dark)}
.kl-opt.is-on{background:var(--brand);border-color:var(--brand);color:#fff}
.kl-gen__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px;padding-top:18px;
  border-top:1px dashed var(--line)}
.kl-gen__count{margin-left:auto;font-size:13px;color:var(--muted)}
.kl-gen__out{margin-top:18px}
.kl-gen__empty{margin-top:14px;padding:14px 16px;border-radius:var(--radius);background:var(--danger-soft);
  border:1px solid #F2CFCA;color:#8A2A22;font-size:14px;line-height:1.55}

/* Результат подбора */
.kl-results{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.kl-result{position:relative;background:var(--brand-soft);border:1px solid var(--brand-line);border-radius:var(--radius);
  padding:15px 15px 13px;display:flex;flex-direction:column;gap:5px}
.kl-result b{font-family:var(--ff-display);font-size:20px;font-weight:800;color:var(--ink);line-height:1.2}
.kl-result small{font-size:12px;color:var(--muted)}
.kl-result__tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:3px}
.kl-result__tags i{font-style:normal;font-size:11px;padding:3px 8px;border-radius:999px;background:#fff;
  border:1px solid var(--brand-line);color:var(--brand-dark)}
.kl-result__acts{display:flex;gap:6px;margin-top:8px}
.kl-result__acts button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 9px;cursor:pointer;
  font-size:11.5px;font-family:inherit;color:var(--ink-2);transition:.14s ease}
.kl-result__acts button:hover{border-color:var(--brand);color:var(--brand-dark)}
.kl-result__acts button.is-on{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- Список имён ---------- */
.kl-chips{margin:14px 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:8px}
.kl-chip{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:10px 13px}
.kl-chip b{font-size:15px;font-weight:600;color:var(--ink)}
.kl-chip>span{font-size:11.5px;color:var(--muted)}
.kl-chip__note{font-style:normal;font-size:11.5px;color:var(--brand-dark);opacity:.85;flex-basis:100%}

/* ---------- Карточки подборок ---------- */
.kl-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.kl-card{display:flex;flex-direction:column;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-l);padding:18px 20px;transition:.16s ease}
.kl-card:hover{border-color:var(--brand);box-shadow:var(--shadow-s);transform:translateY(-2px)}
.kl-card b{font-family:var(--ff-display);font-size:17px;color:var(--ink)}
.kl-card span{font-size:13.5px;line-height:1.55;color:var(--muted)}
.kl-card i{font-style:normal;margin-top:auto;font-size:12px;font-weight:700;color:var(--brand-dark)}

/* ---------- Текстовый блок и примечание ---------- */
.kl-prose{font-size:16.5px;line-height:1.72;color:var(--ink-2);max-width:820px}
.kl-prose>*+*{margin-top:16px}
.kl-prose h2{font-family:var(--ff-display);font-size:clamp(20px,1.9vw,25px);font-weight:800;color:var(--ink);
  margin-top:34px}
.kl-prose h3{font-family:var(--ff-display);font-size:18px;font-weight:700;color:var(--ink);margin-top:24px}
.kl-prose p{margin:0}
.kl-prose ul,.kl-prose ol{margin:0;padding-left:0;list-style:none;display:grid;gap:10px}
.kl-prose ul li,.kl-prose ol li{position:relative;padding-left:29px}
.kl-prose ul li::before{content:'';position:absolute;left:6px;top:.62em;width:8px;height:8px;border-radius:50%;
  background:var(--brand);opacity:.55}
.kl-prose ol{counter-reset:kl}
.kl-prose ol li{counter-increment:kl}
.kl-prose ol li::before{content:counter(kl);position:absolute;left:0;top:.06em;width:21px;height:21px;border-radius:50%;
  background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand-dark);font-size:12px;font-weight:700;
  display:grid;place-items:center}
.kl-note{background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;font-size:14.5px;line-height:1.6;color:var(--muted)}

/* ---------- Избранное ---------- */
.kl-fav{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-l);padding:20px 22px}
.kl-fav h2{font-family:var(--ff-display);font-size:18px;margin:0 0 7px}
.kl-fav>p{margin:0;font-size:14px;color:var(--muted)}
.kl-fav__list{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.kl-fav__list li{display:inline-flex;align-items:center;gap:7px;background:var(--brand-soft);border:1px solid var(--brand-line);
  border-radius:999px;padding:6px 8px 6px 14px;font-size:14px;font-weight:600;color:var(--ink)}
.kl-fav__list button{border:0;background:transparent;cursor:pointer;color:var(--brand-dark);font-size:16px;line-height:1;
  padding:0 4px}

/* ---------- Миша рядом с генератором ----------
   Он не «украшение»: после каждого подбора выбирает одно имя из девяти
   и объясняет выбор по свойствам самого имени. Реплика и кнопки-подсказки
   живут в одной карточке, чтобы не спорить с результатами за внимание. */
.kl-misha{display:flex;gap:14px;align-items:flex-start;margin-top:18px}
.kl-misha[hidden]{display:none}
.kl-misha__ava{width:64px;height:64px;flex:none;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 4px 8px rgba(43,24,19,.16));animation:kl-bob 4.5s ease-in-out infinite}
@keyframes kl-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.kl-misha__say{position:relative;flex:1 1 auto;min-width:0;background:var(--brand-soft);
  border:1px solid var(--brand-line);border-radius:4px var(--radius-l) var(--radius-l) var(--radius-l);
  padding:14px 18px 15px}
.kl-misha__say::before{content:'';position:absolute;left:-7px;top:16px;width:12px;height:12px;
  background:var(--brand-soft);border-left:1px solid var(--brand-line);border-bottom:1px solid var(--brand-line);
  transform:rotate(45deg)}
.kl-misha__name{display:flex;align-items:baseline;gap:7px;font-family:var(--ff-display);font-size:14px;
  font-weight:800;color:var(--brand-dark)}
.kl-misha__name .ico{width:15px;height:15px;align-self:center}
.kl-misha__name span{font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;opacity:.6}
.kl-misha__say p{margin:7px 0 0;font-size:15px;line-height:1.6;color:var(--ink-2)}
.kl-misha__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.kl-say-chip{border:1px solid var(--brand-line);background:#fff;border-radius:999px;padding:7px 13px;
  cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--brand-dark);transition:.14s ease}
.kl-say-chip:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* Карточка, которую Миша советует. */
.kl-result--misha{background:#fff;border-color:var(--brand);box-shadow:0 10px 26px rgba(196,64,47,.16)}
.kl-result__badge{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-bottom:2px;
  padding:3px 9px;border-radius:999px;background:var(--brand);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase}

/* ---------- Адаптив ---------- */
@media(max-width:760px){
  .kl-hero__inner{padding:30px 0 26px}
  .kl-misha{gap:10px}
  .kl-misha__ava{width:50px;height:50px}
  .kl-misha__say{padding:12px 14px 13px}
  .kl-misha__say p{font-size:14.5px}
  .kl-gen{padding:20px 18px 18px}
  .kl-row__label{flex:0 0 100%}
  .kl-results{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .kl-chips{grid-template-columns:1fr 1fr}
  .kl-cards{grid-template-columns:1fr}
  .kl-gen__count{margin-left:0;flex-basis:100%}
}
@media(max-width:460px){
  .kl-chips{grid-template-columns:1fr}
  .kl-results{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .kl-tab,.kl-opt,.kl-card,.kl-result__acts button{transition:none}
  .kl-card:hover{transform:none}
  .kl-misha__ava{animation:none}
}