/*
 * Каталог обладнання (templates/materials_category/equipment.tpl).
 */

.equip-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px}

.equip-card{
  display:grid; grid-template-columns:170px 1fr; gap:20px;
  padding:20px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius);
}
/* фото не тягнеться на всю висоту картки: сусідній текст буває довгим,
   і порожня пляма поруч із ним виглядала як помилка верстки.
   Підкладки немає — у зображень пристроїв прозорий фон (файли *_nobg.png),
   тому mix-blend-mode більше не потрібен і темна тема виглядає правильно. */
.equip-photo{
  align-self:start; display:flex; align-items:center; justify-content:center;
  height:150px; padding:6px;
}
.equip-photo img{max-height:140px; width:auto; object-fit:contain}
.equip-body{min-width:0}
.equip-body h3{margin-bottom:10px; font-size:19px}

.equip-specs{display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-bottom:12px}
.equip-spec{font-size:13px; color:var(--ink-3)}
.equip-spec b{color:var(--ink); font-weight:600}

.equip-text{margin:0 0 14px; font-size:14.5px; color:var(--ink-2)}

/* технічний блок під розкриттям — щоб картка лишалась короткою */
.equip-fold{margin-bottom:14px; border-top:1px solid var(--line)}
.equip-fold>summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px;
  padding:11px 0; font-size:13.5px; font-weight:600; color:var(--brand);
}
.equip-fold>summary::-webkit-details-marker{display:none}
.equip-fold>summary::after{
  content:""; width:7px; height:7px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s ease;
}
.equip-fold[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.equip-setup{padding-bottom:14px}
.equip-setup h4{
  margin:0 0 8px; font-family:"IBM Plex Sans",sans-serif;
  font-size:11.5px; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.equip-setup h4+*{margin-bottom:16px}

.equip-conn{
  display:grid; grid-template-columns:auto 1fr; gap:4px 14px;
  margin:0; font-size:14px;
}
.equip-conn dt{color:var(--ink-3)}
.equip-conn dd{margin:0; font-weight:500}

/* перелік можливостей моделі — без синтаксису команд */
.equip-cmd-list{
  display:flex; flex-wrap:wrap; gap:6px 8px;
  margin:0 0 12px; padding:0; list-style:none;
}
.equip-cmd-list li{
  padding:3px 9px; font-size:13px; color:var(--ink-2);
  background:var(--surface-2); border-radius:2px;
}
.equip-sms-note{margin:0; font-size:13.5px; color:var(--ink-3)}
.equip-sms-note a{color:var(--brand); border-bottom:1px solid var(--brand-soft)}

.equip-cmds{width:100%; border-collapse:collapse; font-size:13.5px}
.equip-cmds td{padding:6px 0; border-bottom:1px solid var(--line); vertical-align:top}
.equip-cmds td:first-child{color:var(--ink-2); padding-right:14px}
.equip-cmds td.mono{color:var(--ink); white-space:nowrap}
.equip-cmds tr:last-child td{border-bottom:0}

/* Кнопки картки: однакова висота незалежно від типу й довжини підпису.
   Фіксуємо саме min-height, а не padding: у ghost є рамка, у primary — ні,
   і на padding'ах вони розходилися на пару пікселів. */
.equip-actions{display:flex; align-items:stretch; flex-wrap:wrap; gap:10px 16px}
.equip-actions .nbtn{
  min-height:38px; padding:0 16px; font-size:14px; line-height:1.2;
  align-items:center; justify-content:center;
}
.equip-buy{
  display:inline-flex; align-items:center; min-height:38px;
  font-size:14px; color:var(--ink-2);
}
.equip-buy span{border-bottom:1px solid var(--line-2)}
.equip-buy:hover{color:var(--brand)}
.equip-buy:hover span{border-bottom-color:var(--brand)}

/* кроки підключення */
.steps{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px;
  margin:0; padding:0; list-style:none; counter-reset:step;
}
.steps li{counter-increment:step; padding-top:14px; border-top:2px solid var(--brand)}
.steps li::before{
  content:counter(step); display:block; margin-bottom:8px;
  font-family:"Roboto Slab",Georgia,serif; font-size:13px; color:var(--brand);
}
.steps h3{margin-bottom:6px; font-size:17px}
.steps p{margin:0 0 10px; font-size:14.5px; color:var(--ink-2)}

.apn-table{width:100%; border-collapse:collapse; font-size:13.5px}
.apn-table td{padding:5px 0; border-bottom:1px solid var(--line)}
.apn-table td:first-child{color:var(--ink-2); padding-right:12px}
.apn-table tr:last-child td{border-bottom:0}

@media (max-width: 1100px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 900px){
  .equip-grid{grid-template-columns:1fr}
  .equip-card{grid-template-columns:1fr; gap:14px}
  .equip-photo{padding:16px}
  .steps{grid-template-columns:1fr; gap:20px}
}