/* Модуль simple_list («Списки стилизованные») — tshop_3, все варианты.
 *   default   (.t3-sl--list)  список возможностей на линейках, в широком блоке — две колонки
 *   grid3     (.t3-sl--steps) карточки-шаги: номер, картинка/иконка, название, описание
 *   version_2 (.t3-sl--tiles) плитки: иконка и название в строку, ниже описание
 * Ручки дизайнера стилей на корне блока (.idblock-N):
 *   --title-size, --title-color        заголовок блока (.t3-head)
 *   --card-min                         минимальная ширина карточки (grid3, version_2; колонки — auto-fill)
 *   --items-gap                        промежуток между карточками
 *   --ico-size, --ico-bg, --ico-color  плитка иконки (.t3-ico)
 *   --num-color                        цвет номера шага (grid3)
 */
@layer modules {
  .t3-sl { --card-min: 280px; --items-gap: var(--s-4); --ico-size: 48px; --num-color: var(--brand-text); }

  .t3-sl__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-sl__name { text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-m); }
  .t3-sl__text { color: var(--text-2); font-size: var(--fs-s); }
  .t3-sl__text > * { margin: 0; }
  .t3-sl__text > * + * { margin-top: .5em; }
  .t3-sl__text ul, .t3-sl__text ol { padding-left: 1.2em; }
  .t3-sl__text a { color: var(--brand-text); text-decoration: underline; text-underline-offset: .2em; position: relative; z-index: 2; }
  .t3-sl__body { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }

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

  /* ── default: список на линейках ── */
  .t3-sl__frame { container-type: inline-size; overflow: hidden; }
  .t3-sl--list .t3-sl__frame { background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--shadow-1); padding-inline: clamp(20px, 3vw, 40px); }
  [data-style="quiet"] .t3-sl--list .t3-sl__frame { background: none; border-radius: 0; box-shadow: none; padding-inline: 0; border-bottom: var(--line-w) solid var(--line); }
  [data-style="editorial"] .t3-sl--list .t3-sl__frame { background: none; border-radius: 0; padding-inline: 0; border-block: var(--line-w) solid var(--line); }
  /* в «Манифесте» шапка блока уже подчёркнута — вторая линейка не нужна */
  [data-style="editorial"] .t3-sl--list .t3-head + .t3-sl__frame { border-top: 0; margin-top: calc(-1 * clamp(24px, 3.5vw, 48px) + var(--s-2)); }

  /* верхняя линейка первой строки каждой колонки уходит под край за счёт отрицательного отступа */
  .t3-sl__list { display: grid; margin: calc(-1 * var(--line-w)) 0 0; padding: 0; list-style: none; }
  .t3-sl__row {
    position: relative; display: flex; align-items: flex-start; gap: var(--s-4);
    padding-block: var(--s-5); border-top: var(--line-w) solid var(--line);
  }
  [data-style="quiet"] .t3-sl--list .t3-sl__row { border-top-color: var(--line); }
  .t3-sl__row .t3-sl__lead { display: flex; }
  @container (min-width: 760px) {
    .t3-sl__list { grid-template-columns: 1fr 1fr; column-gap: clamp(32px, 5vw, 72px); }
  }

  /* ── общая карточка grid3 / version_2 ── */
  .t3-sl__grid {
    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-sl__card, .t3-sl__tile {
    --_pad: clamp(20px, 2.2vw, 28px);
    position: relative; display: flex; flex-direction: column; gap: var(--s-4); min-width: 0;
    padding: var(--_pad); border-radius: var(--radius-l); overflow: hidden;
    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"] :is(.t3-sl__card, .t3-sl__tile),
  [data-style="editorial"] :is(.t3-sl__card, .t3-sl__tile) { border: var(--line-w) solid var(--line); }
  :is(.t3-sl__card, .t3-sl__tile).is-link:hover { box-shadow: var(--shadow-pop); }
  [data-style="quiet"] :is(.t3-sl__card, .t3-sl__tile).is-link:hover { border-color: var(--line-strong); }
  [data-style="editorial"] :is(.t3-sl__card, .t3-sl__tile).is-link:hover { transform: translate(-3px, -3px); }

  /* ── grid3: шаги ── */
  .t3-sl__media { margin: calc(-1 * var(--_pad)) calc(-1 * var(--_pad)) 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-2); }
  .t3-sl__media img { width: 100%; height: 100%; object-fit: cover; }
  [data-style="editorial"] .t3-sl__media { border-bottom: var(--line-w) solid var(--line); }
  .t3-sl__card .t3-sl__lead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
  .t3-sl__num {
    font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
    font-size: clamp(2.25rem, 1.6rem + 2vw, 3.25rem); line-height: .9; color: var(--num-color); font-variant-numeric: tabular-nums;
  }
  [data-style="quiet"] .t3-sl__num { color: var(--text-3); font-weight: 400; }
  [data-style="editorial"] .t3-sl__num { color: var(--text); }
  .t3-sl__card .t3-sl__body { gap: var(--s-3); }
  /* grid3 — не больше трёх колонок, как у варианта в tshop_2 */
  .t3-sl--steps .t3-sl__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(var(--card-min), (100% - 2 * var(--items-gap)) / 3)), 1fr)); }

  /* ── version_2: плитки ── */
  .t3-sl__top { display: flex; align-items: center; gap: var(--s-4); }
  .t3-sl__tile .t3-sl__text { padding-top: var(--s-4); border-top: var(--line-w) solid var(--line); }
}