/* ============================================================
   COVERPRESS — preview-home.css (ВРЕМЕННЫЙ ФАЙЛ)
   Главная = библиотека. Здесь только первый экран: заголовок с
   анимацией и подзаголовок над полками. Раскладку полок, сайдбара
   и верхнего меню задаёт preview-lib.css.
   ============================================================ */

.home-hero {
  padding: 8px var(--ap-edge) 0;
  text-align: center;
}

.home-title {
  font-size: clamp(30px, 4.4vw, 52px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.home-sub {
  margin-top: 10px;
  font-size: clamp(14px, 1.4vw, 18px);
  color: var(--ap-muted);
}

/* На главной сайдбар начинается сразу под hero — заголовок «Библиотека»
   в нём не нужен: он уже есть крупно сверху. */
.lib-side .lib-title { display: none; }

.lib-layout { padding-top: 18px; }

@media (max-width: 1068px) {
  .home-hero { padding-top: 4px; }
  .lib-layout { padding-top: 12px; }
}

/* Смартфон в альбоме: высоты мало. Ужимаем шапку и hero, а поиск и
   меню разделов ставим в одну строку — чтобы обложки попали в первый
   экран, а не начинались за его нижним краем. */
@media (max-height: 500px) and (orientation: landscape) {
  .header { padding: 8px 14px; }
  .home-hero { padding-top: 0; }
  .home-title { font-size: 22px; }
  .home-sub { margin-top: 4px; font-size: 12px; }
  .lib-layout { padding-top: 6px; }
  .lib-side { flex-direction: row; align-items: center; gap: 8px; padding: 6px 0 2px; }
  .lib-search { flex: 0 1 220px; padding: 5px 10px; }
  .lib-topbar { flex: 1 1 auto; justify-content: flex-start; }
  .lib { padding-top: 8px; }
  .lib-shelf { padding-top: 8px; padding-bottom: 12px; }
  .lib-shelf-head { font-size: 16px; margin-bottom: 8px; }
}

/* ============================================================
   ВЕРХНЯЯ ПАНЕЛЬ НА ПЛАНШЕТЕ И СМАРТФОНЕ (десктоп не трогаем)
   Одна строка: поиск · основное меню · «Разделы» справа.
   При прокрутке поиск исчезает, строка липнет к верху экрана.
   ============================================================ */

/* Основное меню — на десктопе его роль играет сайдбар, там оно не нужно. */
.lib-mainmenu { display: none; }

@media (max-width: 1068px) {
  .lib-side {
    position: sticky;
    top: 0;
    z-index: 50;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    background: var(--bg, #fafafa);
  }

  /* поиск слева, фиксированной доли строки */
  .lib-search { flex: 0 1 min(320px, 42%); }

  /* меню и «Разделы» — в одной строке, разделы прижаты вправо */
  .lib-topbar { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; }

  /* Меню сайта живёт в шапке (см. preview-lib.css) — в строке разделов
     его дублировать не нужно: здесь только лупа и «Разделы». */
  .lib-mainmenu { display: none; }
  .lib-mainmenu-item {
    padding: 6px 14px;
    border: 1px solid var(--ap-rule);
    border-radius: 100px;
    background: #fff;
    color: var(--ap-muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.28;
    text-decoration: none;
    white-space: nowrap;
  }
  .lib-mainmenu-item.active { background: #111; border-color: #111; color: #fff; }

  /* Полки как пузырьки в строке не показываем — они в «Разделах» */
  .lib-topbar .lib-tabs { display: none; }
  .lib-sections { margin-left: auto; }

  /* Прокрутили вниз — сворачивается только раскрытое поле; сама лупа
     остаётся в строке всегда. */
  body.is-scrolled .lib-search.is-open {
    flex: 0 0 auto;
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  body.is-scrolled .lib-search.is-open input,
  body.is-scrolled .lib-search.is-open .lib-search-clear { display: none; }
  .lib-search { transition: width .25s ease, padding .25s ease, background .2s ease; }
}

/* Липкая строка должна перекрывать шапку по всей ширине окна, а не только
   по колонке контента — иначе из-под неё просвечивает кнопка входа. */
@media (max-width: 1068px) {
  .lib-side::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: calc(-1 * var(--ap-edge));
    right: calc(-1 * var(--ap-edge));
    background: var(--bg, #fafafa);
    z-index: -1;
  }
  .lib-side { position: sticky; }
}

/* У карточки-анонса название и метка полки лежали друг на друге —
   метка не нужна, название уже есть. */
.lib-card.is-soon .lib-shelf-tag { display: none; }

/* ============================================================
   ПОРЯДОК В ВЕРХНЕЙ СТРОКЕ (планшет): меню · поиск · Разделы справа
   ============================================================ */
@media (max-width: 1068px) {
  .lib-side { display: flex; }
  .lib-topbar { order: 1; flex: 0 0 auto; }
  .lib-search { order: 2; flex: 1 1 auto; max-width: 320px; }
  .lib-sections { order: 3; margin-left: auto; }
}

@media (max-width: 734px) {
  /* На смартфоне меню ТОЛЬКО снизу — сверху лупа и «Разделы», без дублей. */
  .lib-mainmenu { display: none; }
  .lib-search { order: 1; flex: 0 0 auto; }
  .lib-sections { order: 2; margin-left: auto; }

}

/* ============================================================
   ПОИСК НА ПЛАНШЕТЕ И СМАРТФОНЕ — ЛУПОЙ, БЕЗ СЛОВА «ПОИСК»
   В строке это кнопка-лупа; по нажатию раскрывается в поле ввода.
   ============================================================ */
@media (max-width: 1068px) {
  .lib-search {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    justify-content: center;
    border-radius: 100px;
    cursor: pointer;
    transition: width .25s ease, padding .25s ease, background .2s ease;
  }
  .lib-search input { display: none; }
  .lib-search-clear { display: none; }

  .lib-search.is-open {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: 420px;
    padding: 7px 12px;
    justify-content: flex-start;
    cursor: text;
  }
  .lib-search.is-open input { display: block; }
  .lib-search.is-open .lib-search-clear { display: block; }
}

/* ============================================================
   ПОРЯДОК СТРОКИ ПО СХЕМЕ ВЛАДЕЛЬЦА:
   главная / журнал / лупа ————— разделы (прижаты в правый угол)
   .lib-topbar раскрываем (display: contents), иначе его дети не могут
   встать в общий ряд и «Разделы» оказываются перед лупой.
   ============================================================ */
@media (max-width: 1068px) {
  .lib-topbar { display: contents; }
  .lib-search   { order: 1; }
  .lib-sections { order: 2; margin-left: auto; }
}

/* Смартфон в альбоме — тоже смартфон: меню уходит вниз, наверху остаются
   лупа и «Разделы». Ловим по высоте экрана, а не по ширине. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1068px) {
  /* Смартфон в альбоме — тоже смартфон: меню снизу, сверху лупа и «Разделы». */
  .lib-mainmenu { display: none; }
  .lib-search { order: 1; }
  .lib-sections { order: 2; margin-left: auto; }

}

/* Пункт «Как устроено» живёт в основном меню шапки — на компьютере там же,
   где «Главная» и «Журнал». В сайдбаре его нет: сайдбар — это полки. */



/* Cookie-баннер на смартфоне поднимаем над нижней панелью меню —
   иначе он перекрывает пункты и по ним нельзя нажать. */
@media (max-width: 734px) {
  .cookie { bottom: calc(62px + env(safe-area-inset-bottom)); }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1068px) {
  .cookie { bottom: calc(48px + env(safe-area-inset-bottom)); }
}

/* ============================================================
   СМАРТФОН: сверху НИЧЕГО, всё управление в нижней панели
   Порядок: Главная · Журнал · Как устроено · Поиск · Разделы
   ============================================================ */
@media (max-width: 734px), (max-height: 500px) and (orientation: landscape) and (max-width: 1068px) {
  /* строка управления сверху убирается целиком */
  .lib-side { display: none; }

}

/* «Как устроено» в верхней строке планшета — кнопка того же вида, что
   «Главная» и «Журнал». */
.lib-mainmenu-about {
  border: 1px solid var(--ap-rule);
  border-radius: 100px;
  background: #fff;
  color: var(--ap-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.28;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.lib-mainmenu-about.active { background: #111; border-color: #111; color: #fff; }

/* ============================================================
   РАЗДЕЛ «КАК УСТРОЕНО» НА ВЕРТИКАЛЬНОМ ПЛАНШЕТЕ И СМАРТФОНЕ
   Десктоп и планшет-альбом (≥1024) не трогаем — там блоки как были.
   Ниже 1024 те же блоки разваливались в стопки на 6158 px, поэтому
   для узких экранов даём компактные раскладки.
   ============================================================ */
@media (max-width: 1023px) {

  /* ── Сравнение: две колонки вместо стопки карточек ─────────────────── */
  .compare { padding: 24px 0 8px; }
  .compare-head { margin-bottom: 18px; }
  .compare-title { font-size: 22px; line-height: 1.2; }
  .compare-sub { font-size: 14px; margin-top: 8px; }

  /* Строка сравнения: слева параметр, справа наш ответ. Конкуренты —
     одной серой строкой под ними, а не тремя отдельными плашками:
     три плашки на строку давали 1671 px на смартфоне. */
  .cc-row { padding: 9px 12px; margin-bottom: 6px; }
  .cc-title {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .cc-opts { gap: 2px; }
  .cc-opt { padding: 3px 8px; background: none; }
  .cc-us { padding: 5px 9px; }
  .cc-name { font-size: 12px; }
  .cc-val { font-size: 12.5px; line-height: 1.3; }

  /* конкуренты компактнее и приглушённее — они здесь фон, не главное */
  .cc-opt:not(.cc-us) .cc-name,
  .cc-opt:not(.cc-us) .cc-val { color: var(--ap-muted); font-size: 12px; }

  .compare-foot { font-size: 13px; margin-top: 12px; }

  /* ── Как это работает: список вместо четырёх карточек ──────────────── */
  .how { padding: 24px 0 8px; }
  .steps { grid-template-columns: 1fr; gap: 8px; }
  .step {
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: 12px;
    align-items: baseline;
    padding: 12px 14px;
    border-radius: 12px;
  }
  .step-num { margin-bottom: 0; grid-row: 1 / span 2; font-size: 13px; }
  .step-title { font-size: 15px; margin-bottom: 2px; }
  .step-text { font-size: 13px; line-height: 1.45; }

  /* ── Для чего подходит: две колонки, только названия ───────────────── */
  .use-cases { padding: 24px 0 8px; }
  .use-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .use-card { padding: 12px 12px; border-radius: 12px; }
  .use-card h3 { font-size: 14px; margin-bottom: 0; }
  .use-card p { display: none; }

  /* ── Вопросы и ответы ──────────────────────────────────────────────── */
  .faq { padding: 24px 0 24px; }
}

/* ============================================================
   «КАК УСТРОЕНО» НА ГОРИЗОНТАЛЬНЫХ ЭКРАНАХ — КАК НА ДЕСКТОПЕ
   Горизонтальный планшет (1024×768) и горизонтальный смартфон
   (844×390) показывают блоки ровно в десктопном виде: таблица
   сравнения, четыре шага в ряд, четыре колонки применений.
   Перебиваем и main.css (там ломается на 900), и компакт выше.
   ============================================================ */
@media (orientation: landscape) and (min-width: 844px) {
  .compare-table { display: table !important; }
  .compare-cards { display: none !important; }

  .compare { padding: 40px 0 16px !important; }
  .compare-title { font-size: 30px !important; }
  .compare-sub { font-size: 15px !important; }

  .how { padding: 40px 0 16px !important; }
  .steps { grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }
  .step {
    display: block !important;
    padding: 22px 20px !important;
    border-radius: var(--r-card) !important;
  }
  .step-num { margin-bottom: 12px !important; font-size: 14px !important; }
  .step-title { font-size: 17px !important; margin-bottom: 8px !important; }
  .step-text { font-size: 14px !important; line-height: 1.5 !important; }

  .use-cases { padding: 40px 0 16px !important; }
  .use-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
  .use-card { padding: 20px 18px !important; }
  .use-card h3 { font-size: 16px !important; margin-bottom: 8px !important; }
  .use-card p { display: block !important; font-size: 13px !important; }

  .faq { padding: 40px 0 32px !important; }
}




/* ============================================================
   ПЛАНШЕТ: МЕНЮ ПУЗЫРЬКАМИ В ШАПКЕ
   Пункты, лупа и «Разделы» — одной строкой пузырьков. Фон прозрачный.
   При прокрутке логотип и вход уезжают вверх, пузырьки остаются.
   ============================================================ */
@media (min-width: 735px) and (max-width: 1068px) {
  .lib-side { display: none; }

  .header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: none;
    padding: 10px 24px;
  }
  .header-nav { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }

  /* поиск: лупа, раскрывается в поле */
  .controls-in-menu .header-nav .lib-search {
    flex: 0 0 auto; width: 38px; height: 38px; padding: 0;
    justify-content: center; cursor: pointer; background: rgba(0,0,0,.05);
  }
  .controls-in-menu .header-nav .lib-search.is-open {
    width: auto; max-width: 240px; padding: 7px 12px; justify-content: flex-start;
  }
  .controls-in-menu .header-nav .lib-sections { display: block; margin-left: 0; }

  /* Пузырьки непрозрачные — под ними проезжают обложки, текст должен читаться. */
  .header-nav .header-link,
  .controls-in-menu .header-nav .lib-search,
  .controls-in-menu .header-nav .lib-sections-btn,
  .header-account {
    background: #fff;
    border-color: var(--ap-rule, #d6d6d6);
  }
  .header-account { color: var(--accent); border-color: var(--accent); }

  /* Прокрутили — уезжает логотип, меню остаётся на своём месте справа. */
  body.is-scrolled .logo { display: none; }
  body.is-scrolled .header-inner { justify-content: flex-end; }
  body.is-scrolled .header { padding-top: 6px; padding-bottom: 6px; }
}

/* ============================================================
   СМАРТФОН: МЕНЮ ВНИЗУ, КНОПКИ КРУГЛЫЕ
   Панель остаётся внизу. Каждый пункт — белый кружок: внутри SVG-иконка,
   под ней мелкая подпись. Фон панели прозрачный. В альбоме кружки теснее.
   ============================================================ */
@media (max-width: 734px), (max-height: 500px) {
  .header-nav { display: none; }
  .lib-side { display: none; }

  /* Шапка на смартфоне не прилипает: логотип и «Войти» уезжают вместе
     со страницей. Внизу остаётся только панель меню. */
  .header { position: static; }

}

/* Заголовок на смартфоне: буквы «превращается» имеют фиксированную ширину,
   поэтому строка не переносится — уменьшаем кегль, иначе уезжает за край. */
@media (max-width: 734px) {
  .home-title { font-size: 24px; }
  .home-sub { font-size: 13px; }
}