/* =========================================================================
   Страницы направлений (/servers/ …) — собирает tools/make-pages.py.
   Основа — main.css и site.css главной; здесь только то, чего на главной нет.
   Правила DESIGN.md те же: теней нет, фоны секций чередуются, карточка
   контрастна секции, межстрочный — только безразмерный.
   ========================================================================= */

/* Герой страницы: хлебные крошки над сеткой «текст + картинка» (.about с главной) */
.page-hero { padding-top: clamp(28px, 4vw, 48px); }
.page-hero .about { margin-top: 0; align-items: center; }
.page-hero .h1 { margin-top: 12px; font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.page-hero .lead { margin-top: 20px; max-width: 46ch; font-size: clamp(1.0625rem, 1.35vw, 1.1875rem); line-height: 1.5; letter-spacing: -.012em; }
.page-hero .actions { justify-content: flex-start; gap: 16px 24px; margin-top: 28px; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline;
  margin-bottom: clamp(24px, 3vw, 40px);
  font-size: .875rem; line-height: 1.43; letter-spacing: -.016em; color: var(--ink-3);
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

/* Текстовые карточки направления; ссылка внизу (кабели А1 → a1da.ru) — как у карточек направлений на главной */
.pcard p { margin-top: 10px; }
.pcard .link { margin-top: auto; padding-top: 8px; align-self: flex-start; font-size: .9375rem; }

/* Логотипы брендов — сетка вместо бегущей ленты: по 5 или 10 штук, 5 → 2 колонки */
.brandset { margin-top: clamp(40px, 5vw, 64px); }
.brandset .h3 { margin-bottom: 16px; }
.brandgrid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px;
  margin: 0 0 clamp(28px, 3vw, 40px); padding: 0; list-style: none;
}
.brandgrid:last-child { margin-bottom: 0; }
.brandgrid .logo {
  display: flex; align-items: center; justify-content: center;
  min-height: 96px; padding: 20px;
  background: var(--bg-card); border-radius: var(--r-card);
}
.sec--alt .brandgrid .logo { background: var(--bg); }
.brandgrid .logo img { max-width: 100%; height: auto; }

/* Ссылка внутри текста шага или ответа (на соседние страницы направлений) — размером с текст, без переноса блоком */
.steps p .link, .faq__item p .link { display: inline; font-size: inherit; letter-spacing: inherit; }

/* Интервью с производителем под сеткой брендов — .podcast с главной; обложка RuTube 640 px, колонка картинки уже */
.podcast--one { margin-top: clamp(40px, 5vw, 64px); }
@media (min-width: 861px) { .podcast--one { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.podcast--one p { hyphens: manual; }   /* подпись короткая, а название компании в кавычках переносом рвётся («Басти-он») */

/* Вопросы и ответы — карточки-раскрывашки; плюс поворачивается в крестик, как на apple.com */
.faq { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 12px; }
.faq__item { background: var(--bg-card); border-radius: var(--r-card); }
.sec--alt .faq__item { background: var(--bg); }
.faq__item summary {
  position: relative; cursor: pointer; list-style: none;
  padding: 22px 60px 22px 24px;
  font-size: 1.0625rem; font-weight: 600; line-height: 1.4; letter-spacing: -.016em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; position: absolute; right: 24px; top: 50%;
  font-size: 1.5rem; font-weight: 400; line-height: 1; color: var(--ink-3);
  transform: translateY(-50%); transition: transform .2s var(--ease);
}
.faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq__item p { margin-top: -6px; padding: 0 24px 22px; font-size: 1rem; line-height: 1.5; letter-spacing: -.018em; color: var(--ink-2); }

@media (max-width: 860px) {
  .brandgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brandgrid .logo:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* нечётный остаток — на всю ширину, без сироты */
}
@media (prefers-reduced-motion: reduce) {
  .faq__item summary::after { transition: none; }
}