/*
 * catalog.css — стили страницы каталога СФЕРА
 *
 * Использует только переменные из sfera-base.css (--purple, --gray-*, --rl, --sh2 и т.д.) —
 * новых цветов/радиусов не вводится, чтобы каталог визуально оставался тем же продуктом,
 * что и главная страница, но с более просторной, премиальной Apple/Linear/Stripe компоновкой.
 *
 * Архитектура аккордеона:
 * Один и тот же набор классов (.tree-node, .tree-node-card, .tree-children, .tree-children-inner)
 * используется рекурсивно на ЛЮБОЙ глубине вложенности. Раскрытие/закрытие — чистый CSS Grid
 * (grid-template-rows: 0fr → 1fr), без max-height и без JS-измерения высоты.
 * Глубина визуально различается только отступом и масштабом карточки через --tree-depth,
 * который проставляет catalog.js инлайн-стилем при рендере узла.
 */

/* ── PAGE CONTAINER ── */
.catalog-main{padding-bottom:80px}
.catalog-container{max-width:1280px;margin:0 auto;padding:0 24px}

/* ── BREADCRUMBS ── */
.breadcrumbs{padding:20px 0}
.breadcrumbs-inner{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text-muted)}
.breadcrumbs-inner a{color:var(--text-muted);transition:color .2s}
.breadcrumbs-inner a:hover{color:var(--purple)}
.breadcrumbs-sep{color:var(--gray-200)}
.breadcrumbs-current{color:var(--purple);font-weight:700}

/* ── CATALOG HERO ── */
.catalog-hero{padding:24px 0 56px}
.catalog-hero h1{font-family:var(--fh);font-size:clamp(28px,3.4vw,42px);font-weight:900;color:var(--purple);letter-spacing:-.3px;line-height:1.15;margin-bottom:16px;max-width:760px}
.catalog-hero p{font-size:17px;color:var(--text-muted);line-height:1.65;font-weight:500;max-width:640px}

/* ── SEARCH (not sticky, plain block) ── */
.catalog-search{padding-bottom:56px}
.catalog-search-box{position:relative;max-width:560px}
.catalog-search-box svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--gray-400);pointer-events:none;transition:color .2s}
.catalog-search-input{width:100%;height:52px;padding:0 18px 0 50px;border:1.5px solid var(--gray-100);border-radius:var(--rl);background:var(--white);font-family:var(--fb);font-size:15px;font-weight:600;color:var(--text);transition:border-color .2s,box-shadow .2s}
.catalog-search-input::placeholder{color:var(--gray-400);font-weight:500}
.catalog-search-input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 4px rgba(46,43,126,.08)}
.catalog-search-box:focus-within svg{color:var(--purple)}

/* ── CATALOG GRID — top level ── */
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px;padding-bottom:72px}

/* ── TREE NODE — recursive unit, used at every depth ──
   catalog.js sets style="--tree-depth: N" on .tree-node at render time.
   Depth 0 = top-level category card. Depth 1+ = nested children, rendered
   smaller and with extra top padding before the row, while remaining full
   cards (never rows/lists/tables). */
.tree-node{display:flex;flex-direction:column}

.tree-node-card{
  background:var(--white);
  border:1.5px solid var(--gray-100);
  border-radius:var(--rl);
  padding:28px 24px;
  cursor:pointer;
  position:relative;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.tree-node-card:hover{border-color:var(--purple);box-shadow:var(--sh2);transform:translateY(-3px)}
.tree-node-card:active{transform:translateY(-1px)}

.tree-node-icon{width:52px;height:52px;border-radius:var(--r);background:rgba(46,43,126,.08);display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:background .25s}
.tree-node-icon svg{width:26px;height:26px;color:var(--purple)}
.tree-node-card:hover .tree-node-icon{background:var(--purple)}
.tree-node-card:hover .tree-node-icon svg{color:var(--white)}

.tree-node-title{font-family:var(--fh);font-size:18px;font-weight:800;color:var(--purple);line-height:1.3;margin-bottom:8px;padding-right:32px}
.tree-node-desc{font-size:13px;color:var(--text-muted);line-height:1.6;font-weight:500}

/* Chevron toggle — only present on nodes that have children */
.tree-node-toggle{position:absolute;top:28px;right:24px;width:28px;height:28px;border-radius:50%;background:var(--gray-50);display:flex;align-items:center;justify-content:center;transition:background .25s,transform .35s cubic-bezier(.4,0,.2,1)}
.tree-node-toggle svg{width:14px;height:14px;color:var(--text-muted);transition:color .25s}
.tree-node-card:hover .tree-node-toggle{background:rgba(46,43,126,.1)}
.tree-node.is-open > .tree-node-card .tree-node-toggle{transform:rotate(180deg)}

/* Leaf nodes (no children) — plain arrow instead of chevron, no rotation */
.tree-node-arrow{position:absolute;top:30px;right:24px;font-size:18px;color:var(--gray-200);transition:color .25s,transform .25s}
.tree-node-card:hover .tree-node-arrow{color:var(--purple);transform:translate(2px,-2px)}

/* ── ACCORDION MECHANISM — pure CSS Grid, no max-height, no JS measuring ──
   Works identically at any depth: wrap children in .tree-children, animate
   the row track between 0fr (closed) and 1fr (open). The inner wrapper
   (.tree-children-inner) carries overflow:hidden so content stays clipped
   while the row track is collapsing/expanding. */
.tree-children{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1);
}
.tree-node.is-open > .tree-children{grid-template-rows:1fr}

.tree-children-inner{overflow:hidden}

/* Children container: still a card grid, never a list/table. */
.tree-children-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:16px;
  padding-top:24px;
  margin-top:4px;
}

/* Depth-based visual scale-down — deeper levels read as "lighter weight"
   children while remaining full cards. Selector targets any depth >= 1
   via attribute substring match on the inline style catalog.js sets. */
.tree-node[data-depth="1"] > .tree-node-card,
.tree-node[data-depth="2"] > .tree-node-card,
.tree-node[data-depth="3"] > .tree-node-card{
  padding:20px 18px;
  border-radius:var(--r);
}
.tree-node[data-depth="1"] .tree-node-icon,
.tree-node[data-depth="2"] .tree-node-icon,
.tree-node[data-depth="3"] .tree-node-icon{
  width:40px;height:40px;margin-bottom:14px;
}
.tree-node[data-depth="1"] .tree-node-icon svg,
.tree-node[data-depth="2"] .tree-node-icon svg,
.tree-node[data-depth="3"] .tree-node-icon svg{
  width:20px;height:20px;
}
.tree-node[data-depth="1"] .tree-node-title,
.tree-node[data-depth="2"] .tree-node-title,
.tree-node[data-depth="3"] .tree-node-title{
  font-size:15px;padding-right:24px;
}
.tree-node[data-depth="1"] .tree-node-arrow,
.tree-node[data-depth="1"] .tree-node-toggle,
.tree-node[data-depth="2"] .tree-node-arrow,
.tree-node[data-depth="2"] .tree-node-toggle,
.tree-node[data-depth="3"] .tree-node-arrow,
.tree-node[data-depth="3"] .tree-node-toggle{
  top:20px;right:18px;
}

/* ── CTA: send request — separate block, does not replace category links ── */
.catalog-cta{
  background:var(--purple);
  border-radius:var(--rl);
  padding:48px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.catalog-cta::after{content:'';position:absolute;right:-60px;top:-60px;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.04);pointer-events:none}
.catalog-cta h2{font-family:var(--fh);font-size:clamp(22px,2.6vw,30px);font-weight:900;color:var(--white);margin-bottom:12px;position:relative}
.catalog-cta p{font-size:15px;color:rgba(255,255,255,.75);line-height:1.6;font-weight:500;max-width:520px;margin:0 auto 28px;position:relative}
.catalog-cta .btn-request{position:relative;display:inline-flex;align-items:center;gap:8px;padding:14px 32px;font-size:15px}

/* ── EMPTY SEARCH STATE ── */
.catalog-empty{display:none;text-align:center;padding:64px 24px;color:var(--text-muted)}
.catalog-empty.is-visible{display:block}
.catalog-empty p{font-size:15px;font-weight:600}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .catalog-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
  .tree-children-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .catalog-cta{padding:36px 24px}
}

@media(max-width:600px){
  .catalog-grid{grid-template-columns:1fr}
  .tree-children-grid{grid-template-columns:1fr}
  .catalog-hero h1{font-size:26px}
  .catalog-search-box{max-width:100%}
}

/* Подбор по задаче (catalog.html) */
.task-picker{margin:4px 0 32px}
.task-picker h2{font-family:var(--fh);font-size:clamp(20px,2.2vw,26px);font-weight:900;color:var(--purple);margin:0 0 14px}
.task-picker-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.task-chip{display:flex;align-items:center;gap:12px;background:var(--white);border:1.5px solid var(--gray-100);border-radius:14px;padding:8px 14px 8px 8px;transition:border-color .2s,transform .2s,box-shadow .2s}
.task-chip:hover{border-color:var(--purple);transform:translateY(-2px);box-shadow:var(--sh2)}
.task-chip img{width:58px;height:58px;border-radius:10px;object-fit:cover;flex:0 0 58px}
.task-chip span{display:flex;flex-direction:column;font-family:var(--fh);font-weight:800;font-size:14.5px;color:var(--purple);line-height:1.25}
.task-chip em{font-style:normal;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent)}
@media(max-width:1000px){.task-picker-list{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.task-picker-list{grid-template-columns:1fr}}