/* soft.matrixov.pw — надстройка над дизайн-системой retail */

.portal .container{padding-bottom:40px}

/* Каталог: карточки шире стандартной сетки — иначе описание
   инструмента сжимается в узкую колонку и читается плохо. */
.portal .grid.cards{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
@media(max-width:900px){.portal .grid.cards{grid-template-columns:minmax(0,1fr)}}

/* ---------- карточка инструмента ---------- */
.tool{display:flex;gap:12px;align-items:flex-start;text-align:left;color:inherit;
  transition:transform .12s,box-shadow .15s,border-color .15s;border:1px solid rgba(0,0,0,.05)}
a.tool:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.13);
  border-color:rgba(167,252,0,.55)}
.tool-ico{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0B0F05;box-shadow:var(--glo)}
.tool-body{min-width:0;flex:1}
.tool-body h2{margin:0 0 4px;font-size:15.5px}
.tool-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.3px;
  text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.tool-body p{margin:0 0 8px;line-height:1.4}
.tool-badge{display:inline-block;font-size:11px;font-weight:900;padding:3px 10px;
  border-radius:999px;background:var(--ok-bg);color:var(--ok-ink)}
.tool-soon{opacity:.72}
.tool-soon .tool-ico{background:var(--neutral-bg);color:var(--neutral-ink);box-shadow:none}
.tool-soon:hover{transform:none;box-shadow:0 1px 3px rgba(0,0,0,.08);border-color:rgba(0,0,0,.05)}

.btn.ghost{background:transparent;color:var(--muted);box-shadow:none;border:1px solid #d8dce1}
.btn.ghost:hover{color:var(--label);border-color:#b9c0c8}

@media(max-width:560px){
  .tool{gap:10px;padding:11px}
  .tool-ico{width:38px;height:38px;border-radius:11px}
}

/* =====================================================================
   МОБИЛЬНЫЕ
   Дизайн-система retail прячет текст бренда на экранах до 700px. Здесь
   название нужно для ориентации, поэтому правило переопределяется, а на
   самых узких экранах сокращается.
   ===================================================================== */
.brand{flex:none}
.brand b{display:block;white-space:nowrap}
@media(max-width:420px){ .brand-tail{display:none} }

@media(max-width:860px){
  main.container{padding-bottom:36px}
  body.sb-open main.container{padding-bottom:24px}
}

@media(max-width:700px){
  .page-title{font-size:17px;margin:2px 0 8px}
  .page-title .small{display:block;font-weight:600}
  .card{padding:12px}
  .tool{gap:10px}
  .tool-ico{width:40px;height:40px}
}