/* === 4. MODULES — каталог-конструктор ===
   Каталог модулей + липкая панель «Ваша подборка» (мини-конструктор). */

.modules__layout {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-6);
  align-items: start;
}

/* --- превью-сборка (картинка под текущий выбор) --- */
.modules__preview {
  grid-column: 1 / -1;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;        /* поле на всю ширину */
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* размытое «эхо» той же сборки — заполняет края, чтобы не было пустых полос */
.modules__preview-bg {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  filter: blur(34px) brightness(0.42);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.modules__preview-bg.is-on { opacity: 1; }
/* сама сборка — целиком, ничего не обрезаем */
.modules__preview-img {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;          /* та же ячейка, что и надпись — иначе грид кидает их в разные строки */
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* надпись-заглушка лежит ПОВЕРХ картинки в той же ячейке (z-index больше img) */
.modules__preview-ph { position: relative; z-index: 2; grid-area: 1 / 1; align-self: center; justify-self: center; }
.modules__preview-ph {
  padding: 14px 22px;
  text-align: center;
  color: var(--ink);
  font-family: var(--mono);
  font-size: var(--body-s);
  letter-spacing: 0.1em;
  line-height: 1.6;
  background: rgba(10, 11, 13, 0.5);
  border: 1px solid var(--border);
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

/* --- каталог --- */
.modules__catalog {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.module {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);            /* секция --alt → карточка темнее */
  overflow: hidden;
  transition: border-color var(--t-hover) var(--ease);
}
.module.is-selected { border-color: var(--accent); }

.module__photo {
  position: relative;
  width: 100%;
  min-height: 160px;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: var(--bg-secondary);
  color: var(--ink-dim);
  font: inherit;
  cursor: zoom-in;
}
.module__photo .zoom-badge {
  position: absolute;
  top: 8px; right: 8px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  color: var(--ink);
  background: rgba(10,11,13,0.6);
  border: 1px solid var(--border);
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--t-hover) var(--ease);
}
.module__photo .zoom-badge svg { width: 16px; height: 16px; }
.module__photo:hover .zoom-badge,
.module__photo:focus-visible .zoom-badge { opacity: 1; }
/* фото модуля — показываем целиком на белом фоне, не обрезаем (рефы на белом).
   display:block (не grid из .media-ph) + img абсолютом к боксу: иначе при
   aspect-ratio квадратная картинка тянет grid-трек и вылезает за бокс на заголовок. */
.module__photo { display: block; position: relative; overflow: hidden; background: #fff; aspect-ratio: 4 / 3; min-height: 0; }
.module__photo .media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }

.module__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  flex: 1;
}
.module__name { font-size: var(--h4); font-weight: 700; color: var(--ink); }
.module__desc { font-size: var(--body-s); line-height: 1.45; color: var(--ink-muted); flex: 1; }

.module__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.module__price { font-family: var(--mono); font-size: var(--body); color: var(--ink-muted); }
.module__price .bundle__num,
.module__price .module__cur { color: var(--accent); }

.module__add {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  white-space: nowrap;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease);
}
.module__add:hover { background: #fff; color: #000; border-color: #fff; }
.module.is-selected .module__add {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

/* плитка «ещё 24 модуля» — широкая низкая плашка на весь ряд */
.module--more {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: 4px;
  color: var(--ink-muted);
  min-height: 0;
  transition: border-color var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.module--more:hover { border-color: var(--accent); color: var(--ink); }
.module--more__plus { font-family: var(--mono); font-size: var(--h4); color: var(--accent); flex: none; }
.module--more__text { font-size: var(--body-s); line-height: 1.4; }

/* --- панель подборки --- */
.selection {
  position: sticky;
  top: calc(var(--header-h) + var(--space-3));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}
.selection__title {
  font-family: var(--mono);
  font-size: var(--caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.selection__count { font-size: var(--h3); font-weight: 700; color: var(--ink); line-height: 1; }
.selection__list {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-3) 0;
  min-height: 48px;
}
.selection__list li { font-size: var(--body-s); color: var(--ink-muted); display: flex; align-items: center; gap: 8px; }
.selection__list li::before { content: "—"; color: var(--accent); }
.selection__empty { color: var(--ink-dim) !important; }
.selection__empty::before { content: "" !important; }
.selection__total { font-size: var(--body-s); color: var(--ink-muted); }
.selection__total b { color: var(--ink); font-weight: 700; font-family: var(--mono); }
.selection__reset {
  background: none; border: none;
  font-family: var(--mono); font-size: var(--caption); letter-spacing: 0.08em;
  color: var(--ink-dim); text-decoration: underline; padding: 0; align-self: center;
  transition: color var(--t-hover) var(--ease);
}
.selection__reset:hover { color: var(--ink); }

/* --- адаптив --- */
@media (max-width: 1024px) {
  .modules__catalog { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .modules__layout { grid-template-columns: 1fr; }
  /* панель → липкая нижняя плашка */
  .selection {
    position: sticky;
    bottom: var(--space-2);
    top: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .selection__title { display: none; }
  .selection__list { display: none; }
  .selection__count { font-size: var(--h4); }
  .selection__total { margin-left: auto; }
  .selection .btn { width: auto; }
}
/* перенос во 2-ю строку заголовка — только на узких экранах */
.modules__title .brm { display: none; }

@media (max-width: 560px) {
  /* --- 2 модуля в ряд --- */
  .modules__catalog { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); }

  /* --- заголовок: «Кухня-конструктор:» и «соберите под себя» в две строки, помельче --- */
  .modules__title { font-size: 26px; line-height: 1.15; }
  .modules__title .brm { display: inline; }

  /* --- карточка модуля: фото → название → цена → [+], без описания --- */
  .module__desc { display: none; }
  .module__body { padding: var(--space-2); gap: 6px; }
  .module__name { font-size: 14px; line-height: 1.2; }
  .module__foot { margin-top: 4px; gap: 8px; align-items: center; }
  .module__price { font-size: var(--body-s); white-space: nowrap; }

  /* кнопка «В подборку» → компактный «+» (и «✓» когда выбрано) */
  .module__add {
    font-size: 0; flex: none; padding: 0;
    width: 34px; height: 34px; min-width: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
  }
  .module__add::after { content: "+"; font-size: 22px; line-height: 1; }
  .module.is-selected .module__add::after { content: "✓"; font-size: 15px; }

  /* «ещё 24 модуля» — на всю ширину под сеткой */
  .module--more { grid-column: 1 / -1; }

  /* --- всплывашка: кнопка в одну строку, без лишней высоты --- */
  .selection .btn { white-space: nowrap; font-size: 13px; padding: 11px 14px; min-height: 0; }
}