/* ============================================================
   Логопрофистор — правки Андрея п.2 (заголовок + ссылка секции)
   и п.5 (витрина разделов на корне каталога).

   Отдельный файл, потому что lp-final.css правят параллельно
   другие агенты. Подключается из шаблона агрегатора
   netcat_module_netshop_aggregator/short/FormPrefix.html,
   то есть на главной и на /katalog-tovarov/ — там, где нужен.
   Селекторы начинаются с html body, чтобы перебить lp-final.css
   не порядком подключения, а специфичностью.
   ============================================================ */

/* ------------------------------------------------------------
   1. П.2. Заголовок секции и ссылка «Все ... →».
   Было: .lp-sec-head — flex с justify-content:space-between,
   ссылка уезжала к правому краю и на широком экране висела
   в 700+ px от заголовка: непонятно, к какому разделу она.
   Стало: сетка. Ссылка стоит в одной строке с заголовком,
   сразу за ним, подзаголовок уходит строкой ниже под обоими.
   Обёртку заголовка и подзаголовка распускаем display:contents,
   иначе h2 и p не станут ячейками сетки.
   ------------------------------------------------------------ */
html body.tpl-body-site-1 .lp-sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
  align-items: start;
  row-gap: 6px;
  column-gap: 16px;
}
html body.tpl-body-site-1 .lp-sec-head > div { display: contents; }

html body.tpl-body-site-1 .lp-sec-head > div > :is(h1, h2, h3, h4) {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
html body.tpl-body-site-1 .lp-sec-head .lp-sec-link {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  /* ссылка-«пилюля»: видно, что это один элемент с заголовком,
     а не случайный текст в другом углу экрана */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(21, 94, 84, .08);
  color: #155E54;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s, color .15s;
}
html body.tpl-body-site-1 .lp-sec-head .lp-sec-link:hover {
  background: rgba(21, 94, 84, .16);
  color: #0D453D;
}
html body.tpl-body-site-1 .lp-sec-head .lp-sec-sub {
  grid-column: 1;
  grid-row: 3;
  margin: 2px 0 0;
}
/* у секции без ссылки (например «Лидеры продаж») второй ряд пустой
   и добавлял лишний межстрочный отступ — поднимаем подзаголовок */
html body.tpl-body-site-1 .lp-sec-head:not(:has(.lp-sec-link)) .lp-sec-sub {
  grid-row: 2;
}

@media (min-width: 760px) {
  html body.tpl-body-site-1 .lp-sec-head {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    row-gap: 4px;
  }
  html body.tpl-body-site-1 .lp-sec-head .lp-sec-link {
    grid-column: 2;
    grid-row: 1;
  }
  html body.tpl-body-site-1 .lp-sec-head .lp-sec-sub {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 4px 0 0;
  }
}

/* ------------------------------------------------------------
   2. П.5. Витрина разделов каталога.
   Плитка = обложка карточки: тот же фирменный градиент,
   белый текст, скруглание 20px, подъём при наведении.
   ------------------------------------------------------------ */
html body.tpl-body-site-1 .lp-cat2 { margin: 0; }

html body.tpl-body-site-1 .lp-cat2-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
  margin: 0 0 38px;
  padding: 0;
  list-style: none;
}
html body.tpl-body-site-1 .lp-cat2-tile { display: flex; margin: 0; }

html body.tpl-body-site-1 .lp-cat2-tile__link {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-height: 186px;
  padding: 22px 22px 20px;
  border-radius: 20px;
  overflow: hidden;
  color: #fff !important;
  text-decoration: none !important;
  background-image: linear-gradient(140deg, #0D453D, #2E8272);
  transition: transform .18s, box-shadow .18s;
}
html body.tpl-body-site-1 .lp-cat2-tile__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(46, 42, 35, .18);
}
/* круг-подложка: та же декорация, что на обложках карточек */
html body.tpl-body-site-1 .lp-cat2-tile__link::after {
  content: "";
  position: absolute;
  right: -44px;
  bottom: -64px;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}
html body.tpl-body-site-1 .lp-cat2-tile__name {
  position: relative;
  z-index: 1;
  font-family: 'Lora', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
}
html body.tpl-body-site-1 .lp-cat2-tile__descr {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  font-size: 14.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
}
html body.tpl-body-site-1 .lp-cat2-tile__count {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .20);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
/* раздел ещё не наполнен: метка «скоро» и приглушённая заливка,
   чтобы плитка не обещала того, чего внутри нет */
html body.tpl-body-site-1 .lp-cat2-tile--soon .lp-cat2-tile__link { filter: saturate(.62); }
html body.tpl-body-site-1 .lp-cat2-tile__count--soon {
  background: rgba(255, 255, 255, .14);
  font-weight: 600;
}

/* фирменные цвета плиток — те же градиенты, что у обложек карточек */
html body.tpl-body-site-1 .lp-cat2-tile--1 .lp-cat2-tile__link { background-image: linear-gradient(140deg, #0D453D, #2E8272); }
html body.tpl-body-site-1 .lp-cat2-tile--2 .lp-cat2-tile__link { background-image: linear-gradient(140deg, #8A4520, #DE8A5C); }
html body.tpl-body-site-1 .lp-cat2-tile--3 .lp-cat2-tile__link { background-image: linear-gradient(140deg, #1F4E5E, #5C97A8); }
html body.tpl-body-site-1 .lp-cat2-tile--4 .lp-cat2-tile__link { background-image: linear-gradient(140deg, #3D3D20, #8A8A50); }
html body.tpl-body-site-1 .lp-cat2-tile--5 .lp-cat2-tile__link { background-image: linear-gradient(140deg, #5E2E42, #A85C7C); }
html body.tpl-body-site-1 .lp-cat2-tile--6 .lp-cat2-tile__link { background-image: linear-gradient(140deg, #6B4A0F, #C9A227); }

@media (max-width: 520px) {
  html body.tpl-body-site-1 .lp-cat2-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 28px;
  }
  html body.tpl-body-site-1 .lp-cat2-tile__link { min-height: 0; padding: 18px; }
  html body.tpl-body-site-1 .lp-cat2-tile__name { font-size: 20px; }
}

/* Вуаль под текстом плитки: у тёмного края градиента её нет, к светлому
   краю она густеет. Белый текст держит контраст на всех шести тонах. */
html body.tpl-body-site-1 .lp-cat2-tile__link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: linear-gradient(140deg, rgba(20, 14, 8, 0) 0%, rgba(20, 14, 8, 0.34) 100%);
    pointer-events: none;
}