/* ═══════════════════════════════════════════════════════════════════════════
   ДЕСКТОПНАЯ РАСКЛАДКА СТРАНИЦ ПОДБОРА (/help/... и /help/personal?leaf=...)

   Одна карточка на весь экран: слева — фото в дышащей рамке во всю высоту
   колонки, справа — название пункта, текст в панели и большая кнопка покупки.

   ВСЁ содержимое файла живёт внутри @media (min-width: 960px) — мобильная
   вёрстка не меняется ни на пиксель. Разметка обеих страниц приведена к общей
   схеме, поэтому правила ниже одинаково работают и для быстрого подбора,
   и для персонального листа:

     .nf-helpd-card
       ├── .nf-helpd-media   — фото (.kbc-cover / .nf-helpd-photos / заглушка)
       └── .nf-helpd-side    — пилюля с названием, текст, грибы, «Купить»

   ПОЧЕМУ ВЕЗДЕ ПРЕФИКС .nfd-screen: базовые (мобильные) стили .nf-helpd-*
   лежат в инлайновом <style> внутри {% block content %}, то есть ПОЗЖЕ этого
   файла в документе. При равной специфичности побеждали бы они. Префикс даёт
   вес (0,2,0) против (0,1,0) — файл выигрывает независимо от порядка.

   Цвета — наша нео-палитра: бирюза #3dd4e0 → фиолет #b85fa3 / #ff66d0.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Пилюля с названием — только для компьютера: на телефоне заголовок стоит
   в шапке над карточкой, второй раз он там не нужен. */
.nf-helpd-pill { display: none; }

@media (min-width: 960px) {

  /* ── Контейнер страницы ────────────────────────────────────────────────── */
  .nfd-screen .nf-helpd-body {
    max-width: min(1180px, 94vw);
    padding-top: 2.2rem;
    padding-bottom: 3rem;
    gap: 18px;
  }

  /* Шапка: оставляем только эмблему NF (это вход в кабинет). Название пункта
     переезжает внутрь карточки — как на образце. */
  .nfd-screen .nf-helpd-brand { margin: 2px 0 10px; }
  .nfd-screen .nf-helpd-brand-emblem { width: 56px; height: 56px; font-size: 20px; margin-bottom: 0; }
  .nfd-screen .nf-helpd-brand > .nf-helpd-title { display: none; }

  /* ── Карточка ──────────────────────────────────────────────────────────── */
  .nfd-screen .nf-helpd-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 0;
    border: 0;
    border-radius: 32px;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(120% 140% at 6% 8%, rgba(61, 212, 224, .10), transparent 46%),
      radial-gradient(120% 140% at 96% 92%, rgba(184, 95, 163, .12), transparent 48%),
      linear-gradient(160deg, #0a0d16 0%, #070a11 55%, #0a0c15 100%);
    box-shadow:
      0 30px 90px rgba(0, 0, 0, .55),
      0 0 60px rgba(61, 212, 224, .10);
  }
  /* Градиентная рамка в один пиксель — тем же приёмом, что у обложек статей. */
  .nfd-screen .nf-helpd-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    padding: 1.4px;
    background: linear-gradient(125deg,
      rgba(61, 212, 224, .70) 0%,
      rgba(63, 147, 255, .38) 38%,
      rgba(184, 95, 163, .48) 70%,
      rgba(255, 102, 208, .62) 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }

  /* ── Левая колонка: фото ───────────────────────────────────────────────── */
  .nfd-screen .nf-helpd-media {
    position: relative;
    display: flex;
    align-items: center;    /* рамка обнимает фото: без чёрных полей внутри */
    justify-content: center;
    min-width: 0;
    padding: 30px;
    background: radial-gradient(90% 90% at 50% 50%, rgba(61, 212, 224, .07), transparent 70%);
  }
  /* Рамка занимает всю ширину колонки и обнимает фото по высоте. Кадрировать
     фото нельзя (по углам плашки «1 флакон 30 мл» и «выгодная цена»), поэтому
     не object-fit: cover, а честные пропорции.
     --s пересчитан от ширины колонки, а не от 560px, как на мобильном. */
  .nfd-screen .nf-helpd-media .kbc-cover--fit {
    --s: calc(min(48vw, 640px) / 853);
    width: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Дыхание на компьютере чуть мягче: рамка теперь во всю высоту карточки,
       и при мобильных 4.5% она вылезала бы за скруглённый край. */
    animation: nfdFitBreathDesk 4.6s ease-in-out infinite;
  }
  .nfd-screen .nf-helpd-media .kbc-cover--fit > img {
    width: 100%;
    height: auto;
    max-height: 100%;
  }
  @keyframes nfdFitBreathDesk {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
  }
  @media (prefers-reduced-motion: reduce) {
    .nfd-screen .nf-helpd-media .kbc-cover--fit { animation: none; }
  }
  /* Несколько фото (микс) — вертикальной стопкой во всю ширину колонки.
     Высоту стопки задаёт правая колонка: снимаем min-height: auto у грид- и
     флекс-элементов и раздаём высоту поровну (flex: 1 1 0). Иначе три фото
     подряд вытягивали бы карточку вниз, а справа зияла бы пустота. */
  /* Стопка не должна тянуть карточку вниз: вынимаем рамку из потока, тогда
     высоту строки задаёт правая колонка, а фото просто делят её поровну. */
  .nfd-screen .nf-helpd-media:has(.nf-helpd-photos) { min-height: 560px; }
  .nfd-screen .nf-helpd-media:has(.nf-helpd-photos) .kbc-cover--fit {
    position: absolute;
    inset: 30px;
    width: auto;
    height: auto;
    min-height: 0;
  }
  .nfd-screen .nf-helpd-media .kbc-cover--fit > .nf-helpd-photos {
    display: grid;                 /* грид делит высоту поровну надёжнее флекса */
    grid-auto-rows: 1fr;
    gap: 10px;
    padding: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
  }
  .nfd-screen .nf-helpd-media .nf-helpd-photos img,
  .nfd-screen .nf-helpd-media .nf-helpd-photos img:not(:first-child),
  .nfd-screen .nf-helpd-media .nf-helpd-photos img:first-child,
  .nfd-screen .nf-helpd-media .nf-helpd-photos img:last-child,
  .nfd-screen .nf-helpd-media .nf-helpd-photos img:only-child {
    min-height: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    margin: 0;
    border-radius: 16px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  /* Нижняя граница высоты: если текста справа мало, фото не должно схлопнуться.
     Только когда фото реально есть — иначе пустая колонка раздувалась бы. */
  .nfd-screen .nf-helpd-media:has(.kbc-cover) { min-height: 480px; }
  .nfd-screen .nf-helpd-media .nf-helpd-photo { height: auto; object-fit: contain; }

  /* Фото нет (заглушка админа или у листа не назначены грибы с фото) — двух
     колонок не строим: карточка становится узкой и встаёт по центру. */
  .nfd-screen .nf-helpd-card:not(:has(.nf-helpd-media .kbc-cover)) {
    display: block;
    max-width: 760px;
    margin: 0 auto;
  }
  /* :not(:has(*)) вместо :empty — внутри блока остаются переводы строк
     и комментарии шаблона, из-за которых :empty не срабатывает. */
  .nfd-screen .nf-helpd-card:not(:has(.nf-helpd-media .kbc-cover)) .nf-helpd-media:not(:has(*)) {
    display: none;
  }
  /* Заглушка «фото добавит админ» — на широком экране пониже, чтобы не
     занимать пол-карточки. */
  .nfd-screen .nf-helpd-media .nf-helpd-photo-empty { aspect-ratio: 16 / 5; }

  /* ── Правая колонка: название, текст, кнопка ───────────────────────────── */
  .nfd-screen .nf-helpd-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    min-width: 0;
    padding: 34px 34px 34px 10px;
  }
  .nfd-screen .nf-helpd-card:not(:has(.nf-helpd-media .kbc-cover)) .nf-helpd-side { padding: 30px; }

  /* Пилюля с названием пункта — как на образце, только в нашей бирюзе. */
  .nfd-screen .nf-helpd-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    max-width: 100%;
    padding: 11px 20px;
    border-radius: 999px;
    background: rgba(6, 12, 18, .62);
    box-shadow: inset 0 0 0 1px rgba(61, 212, 224, .42), 0 0 26px rgba(61, 212, 224, .12);
    color: #d7f6fb;
    font-family: "Montserrat", "Inter", sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2;
  }
  .nfd-screen .nf-helpd-pill__ic {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
  }
  .nfd-screen .nf-helpd-pill__ic svg { width: 100%; height: 100%; }

  /* Текст пользователя — слово в слово, просто в панели с рамкой. */
  .nfd-screen .nf-helpd-side .nf-helpd-desc {
    padding: 22px 24px;
    border-radius: 22px;
    border: 1px solid rgba(61, 212, 224, .20);
    background: rgba(9, 13, 22, .55);
    font-size: 16.5px;
    line-height: 1.7;
    color: rgba(238, 242, 248, .92);
  }

  /* Заголовок «Микс из грибов» на персональном листе. */
  .nfd-screen .nf-helpd-side .nf-mix-title { margin: 0; }

  /* Карточки грибов с инструкциями — во всю ширину колонки. */
  .nfd-screen .nf-helpd-side .nf-mush-group { width: 100%; margin: 0; }

  /* Кнопка — во всю ширину колонки, скруглённый прямоугольник со стрелкой. */
  .nfd-screen .nf-helpd-side .nf-helpd-buy-wrap { padding: 0; }
  .nfd-screen .nf-helpd-side .nf-helpd-buy {
    width: 100%;
    min-height: 76px;
    border-radius: 24px;
    font-size: 19px;
  }
  /* Стрелку рисует иконка-шеврон в самой кнопке (partials/_helpd_buttons.html),
     отдельная ::after больше не нужна — иначе стрелок было две. */

  /* Футер под карточкой. */
  .nfd-screen .nf-login-legal-meta { max-width: 760px; }
}

/* Очень широкие экраны — карточка чуть просторнее. */
@media (min-width: 1500px) {
  .nfd-screen .nf-helpd-body { max-width: 1320px; }
  .nfd-screen .nf-helpd-media .kbc-cover--fit { --s: calc(min(44vw, 720px) / 853); }
  .nfd-screen .nf-helpd-side { padding: 40px 40px 40px 14px; }
  .nfd-screen .nf-helpd-side .nf-helpd-desc { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Кнопка «Получить схему курса в Telegram» и дисклеймер под ней.
   Появляются, когда в админке включён режим «схемы отдаём в боте».
   Правила вне медиазапроса — кнопка нужна и на телефоне, и на компьютере.
   ═══════════════════════════════════════════════════════════════════════════ */
.nf-helpd-dose-wrap { padding: 18px 18px 0; }
.nf-helpd-dose {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: clamp(54px, 11vw, 66px);
  padding: 0 clamp(18px, 4vw, 28px);
  border-radius: 999px;
  text-decoration: none;
  text-align: center;
  color: #d9fbff;
  font-size: clamp(15px, 4vw, 17px);
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid rgba(61, 212, 224, .55);
  background:
    radial-gradient(140% 220% at 10% 45%, rgba(61, 212, 224, .28), transparent 60%),
    linear-gradient(0deg, rgba(6, 16, 22, .62), rgba(6, 16, 22, .62));
  box-shadow: 0 0 26px rgba(61, 212, 224, .16);
  transition: transform .15s ease, filter .2s ease;
}
.nf-helpd-dose:hover { transform: translateY(-2px); filter: brightness(1.14); }
.nf-helpd-note {
  margin: 12px 18px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(232, 232, 232, .55);
  text-align: center;
}

@media (min-width: 960px) {
  .nfd-screen .nf-helpd-side .nf-helpd-dose-wrap { padding: 0; }
  .nfd-screen .nf-helpd-side .nf-helpd-dose { min-height: 66px; border-radius: 22px; font-size: 17px; }
  .nfd-screen .nf-helpd-side .nf-helpd-note { margin: 0; text-align: left; }
}