/* Модуль benefits («Преимущества в ряд») — tshop_3, все варианты.
 *   default      (.t3-bnf--row)  лента: ячейки одной панели на линейках, иконка сверху
 *   ikonka_sleva (.t3-bnf--side) карточки: иконка слева, текст справа
 * Ручки дизайнера стилей на корне блока (.idblock-N):
 *   --title-size, --title-color  заголовок блока (.t3-head)
 *   --card-min                   минимальная ширина ячейки/карточки (колонки — auto-fill)
 *   --ico-size, --ico-bg, --ico-color  плитка иконки (.t3-ico)
 *   --items-gap                  промежуток между карточками (ikonka_sleva)
 */
@layer modules {
  .t3-bnf { --card-min: 180px; --ico-size: 52px; --items-gap: var(--s-4); }
  .t3-bnf--side { --card-min: 300px; --ico-size: 48px; }

  .t3-bnf__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--fs-l); line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
  [data-style="editorial"] .t3-bnf__name { text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-m); }
  .t3-bnf__text { color: var(--text-2); font-size: var(--fs-s); }
  .t3-bnf__text > * { margin: 0; }
  .t3-bnf__text > * + * { margin-top: .5em; }
  .t3-bnf__text a { color: var(--brand-text); text-decoration: underline; text-underline-offset: .2em; position: relative; z-index: 2; }
  .t3-bnf__body { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }

  .is-link .t3-bnf__name { transition: color var(--dur) var(--ease); }
  .is-link:hover .t3-bnf__name { color: var(--brand-text); }

  /* ── default: лента ── */
  .t3-bnf__strip {
    overflow: hidden;
    background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  }
  [data-style="quiet"] .t3-bnf__strip { background: none; border-radius: 0; border-block: var(--line-w) solid var(--line); }
  [data-style="editorial"] .t3-bnf__strip { border: var(--line-w) solid var(--line); }

  /* линейки — у ячеек (сверху и слева); внешние уходят под край за счёт отрицательного отступа списка */
  /* --n — число пунктов (из шаблона): пока ширины хватает, колонка = 1/n ряда, т. е. все пункты в одну строку */
  .t3-bnf__list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--card-min), 100% / var(--n, 4))), 1fr));
    margin: calc(-1 * var(--line-w)) 0 0 calc(-1 * var(--line-w)); padding: 0; list-style: none;
  }
  .t3-bnf__item {
    position: relative; display: grid; align-content: start; gap: var(--s-4); min-width: 0;
    padding: clamp(20px, 2.4vw, 32px);
    border-top: var(--line-w) solid var(--line); border-left: var(--line-w) solid var(--line);
    transition: background-color var(--dur) var(--ease);
  }
  [data-style="quiet"] .t3-bnf__item { padding-inline: clamp(16px, 2vw, 28px); }
  .t3-bnf__item.is-link:hover { background: color-mix(in srgb, var(--surface-2) 50%, transparent); }
  /* узкий блок (телефон, колонка рядом с меню): одна колонка — пункт в строку, иконка слева */
  .t3-bnf__strip { container-type: inline-size; }
  @container (max-width: 459px) {
    .t3-bnf__item { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s-4); padding: var(--s-4) var(--s-5); }
    .t3-bnf__item .t3-ico { --ico-size: 44px; }
  }

  /* ── ikonka_sleva: карточки ── */
  .t3-bnf__cards {
    display: grid; gap: var(--items-gap);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
    margin: 0; padding: 0; list-style: none;
  }
  .t3-bnf__card {
    position: relative; display: flex; align-items: flex-start; gap: var(--s-4);
    padding: var(--s-5); border-radius: var(--radius-l);
    background: var(--surface); box-shadow: var(--shadow-1);
    transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  [data-style="quiet"] .t3-bnf__card { border: var(--line-w) solid var(--line); }
  [data-style="editorial"] .t3-bnf__card { border: var(--line-w) solid var(--line); }
  .t3-bnf__card.is-link:hover { box-shadow: var(--shadow-pop); }
  [data-style="quiet"] .t3-bnf__card.is-link:hover { border-color: var(--line-strong); }
  [data-style="editorial"] .t3-bnf__card.is-link:hover { transform: translate(-3px, -3px); }
  .t3-bnf__card .t3-bnf__body { padding-top: 2px; }
}