/* skbpa:product.materials — «Топ материалов прибора».

   A horizontal resource strip that sits between the product hero and the detail
   tabs. Namespaced and self-contained: it renders inside the Aspro product
   template, not inside the .skbpa-docs shell, so it declares its own tokens
   rather than inheriting ones that are not in scope.

   SPACING SCALE
   Deliberately a small fixed set, so the block reads as designed rather than as
   a pile of one-off margins:
     4px   icon/text micro gap
     8px   grid gutter, label to sub-label
     14px  card inner padding (vertical), head to grid
     20px  card inner padding (horizontal)
     28px  block separation from what sits above and below
   These match the theme's own 20px rhythm rather than importing a foreign one. */

.skbpa-mat {
  --mat-accent: #e36d38;
  --mat-accent-deep: #b14819;
  --mat-ink: #211d19;
  --mat-ink-soft: #5c564d;
  --mat-ink-faint: #918a7d;
  --mat-line: #e7e2da;
  --mat-line-soft: #f0ece6;
  --mat-surface: #fff;

  margin: 28px 0;
  color: var(--mat-ink);
}

/* --- head ------------------------------------------------------------- */

/* Title only. space-between and the wrapping gap existed for the auxiliary
   links that used to sit on the right; with those gone they would just be
   leftovers that do nothing. */
.skbpa-mat__head {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mat-line);
}

.skbpa-mat__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mat-ink);
}

/* --- grid -------------------------------------------------------------
   Fixed column counts rather than auto-fit. With auto-fit the last row
   stretches its one or two survivors across the full width, which makes a
   7-item block look broken; fixed columns keep every card the same size and
   simply leave the tail row short, which reads as intentional. */

.skbpa-mat__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

/* Column count follows the number of entries so the tail row is never a single
   stranded card. Real counts in this catalogue are 5, 6 and 7:
     7 -> 4 + 3      6 -> 3 + 3      5 -> 3 + 2
   A fixed 4-track grid would give 4+1 for a five-item product, which reads as a
   mistake rather than a layout. */
/* Scoped to the desktop range on purpose. An attribute selector out-specifies
   the plain .skbpa-mat__grid rules in the media queries below, so leaving this
   unscoped pinned six-item products to three columns even on a 390px phone. */
@media (min-width: 1200px) {
  .skbpa-mat[data-count="5"] .skbpa-mat__grid,
  .skbpa-mat[data-count="6"] .skbpa-mat__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.skbpa-mat__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 14px 20px 14px 14px;
  border: 1px solid var(--mat-line);
  border-radius: 8px;
  background: var(--mat-surface);
  color: var(--mat-ink);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.skbpa-mat__item:hover,
.skbpa-mat__item:focus-visible {
  border-color: var(--mat-accent);
  box-shadow: 0 2px 12px rgba(179, 72, 25, .10);
  color: var(--mat-ink);
  text-decoration: none;
}

.skbpa-mat__item:focus-visible {
  outline: 2px solid var(--mat-accent);
  outline-offset: 2px;
}

.skbpa-mat__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #fdf1ea;
  color: var(--mat-accent-deep);
}

.skbpa-mat__icon svg { width: 18px; height: 18px; }

/* The two always-present support routes are quieter than the documents. They
   are on every product, so making them as loud as a register map would train
   the eye to skip the whole strip. */
.skbpa-mat__item--support .skbpa-mat__icon {
  background: #eef1f6;
  color: #46536b;
}

.skbpa-mat__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.skbpa-mat__label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  /* Up to two lines. Software entries are now named by what the file actually
     is («Настройка MACX MCR-S-MUX в PACTware»), and on a single nowrap line the
     longest of them were ellipsised — cutting exactly the words that make two
     software cards tell each other apart. Uneven text height is harmless here:
     grid items stretch to the tallest in the row. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.skbpa-mat__second {
  font-size: 12px;
  line-height: 1.35;
  color: var(--mat-ink-faint);
  /* Two lines, not one nowrap line with an ellipsis. A document name cut at
     the card edge («Описание регистров протокола M…») costs the reader the
     word that identifies it and gives nothing back: the card is a fixed grid
     cell either way, and the row already stretches to its tallest item. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- responsive -------------------------------------------------------- */

@media (max-width: 1199px) {
  .skbpa-mat__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .skbpa-mat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .skbpa-mat { margin: 22px 0; }
  .skbpa-mat__head { margin-bottom: 12px; }
  .skbpa-mat__title { font-size: 16px; }
  /* Two columns stay on phones: these are short labelled targets, not reading
     content, and one per row would make the strip taller than the hero. */
  .skbpa-mat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .skbpa-mat__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: 0;
    padding: 12px;
  }
  .skbpa-mat__icon { width: 30px; height: 30px; }
  .skbpa-mat__label { white-space: normal; }
  .skbpa-mat__second { display: none; }
}

/* --- all connection schemes, in one window ------------------------------ */
/* A <dialog> rather than a new page: the reader is choosing a document, not
   navigating away from the product they are reading about. */

.skbpa-schemes {
  width: min(640px, calc(100vw - 32px));
  max-height: min(78vh, 720px);
  padding: 0;
  border: none;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(33, 29, 25, .28);
  overflow: hidden;
}
.skbpa-schemes::backdrop { background: rgba(33, 29, 25, .45); }

.skbpa-schemes__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--mat-line, #e6e8ec);
}
.skbpa-schemes__title { margin: 0; font-size: 17px; line-height: 1.3; }
.skbpa-schemes__sub { margin: 3px 0 0; font-size: 13px; color: var(--mat-ink-faint, #6b7280); }
.skbpa-schemes__close {
  flex-shrink: 0; width: 30px; height: 30px; border: none; border-radius: 8px;
  background: transparent; font-size: 22px; line-height: 1; color: var(--mat-ink-faint, #6b7280);
  cursor: pointer;
}
.skbpa-schemes__close:hover { background: #f2f4f7; }

.skbpa-schemes__list {
  margin: 0; padding: 6px 0; list-style: none;
  max-height: min(56vh, 460px); overflow-y: auto;
}
.skbpa-schemes__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 20px;
}
.skbpa-schemes__row + .skbpa-schemes__row { border-top: 1px solid #f0f2f5; }
.skbpa-schemes__name { font-size: 14px; line-height: 1.4; }
.skbpa-schemes__open {
  flex-shrink: 0; font-size: 13px; font-weight: 600; white-space: nowrap;
}
.skbpa-schemes__note {
  margin: 0; padding: 12px 20px 16px; font-size: 12px;
  color: var(--mat-ink-faint, #6b7280); border-top: 1px solid var(--mat-line, #e6e8ec);
}

@media (max-width: 560px) {
  .skbpa-schemes__row { flex-direction: column; align-items: flex-start; gap: 5px; }
}

/* The theme decorates every <li> with a dash pseudo-element. Inside this
   dialog that dash is noise, and because it takes width in a space-between
   row it also pushed the scheme names off the left edge. */
.skbpa-schemes__list li::before,
.skbpa-schemes__list li::marker {
  content: none !important;
  display: none !important;
}
.skbpa-schemes__row { padding-left: 20px; }
.skbpa-schemes__name { flex: 1 1 auto; text-align: left; }