/* ============================================================
   COVERPRESS — preview-about.css (ВРЕМЕННЫЙ ФАЙЛ)
   Отдельная страница «Как устроено»: сравнение · как это работает ·
   для чего подходит · вопросы и ответы.

   Раскладку самих блоков задаёт preview-home.css (десктопный вид на
   горизонтальных экранах, компактный — на вертикальных). Здесь только
   то, что относится к странице: заголовок, поля и две колонки
   в «Вопросах и ответах».
   ============================================================ */

.about-main {
  padding: 0 var(--ap-edge) 8px;
}

.about-title {
  padding: 22px 0 4px;
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* Блоки перенесены с главной вместе с классом .reveal — там их
   показывал наблюдатель прокрутки из main.js. Здесь его нет,
   поэтому блоки видны сразу. */
.about-page .reveal { opacity: 1; transform: none; }

/* Блоки идут во всю ширину страницы: поля задаёт .about-main. */
.about-page .compare,
.about-page .how,
.about-page .use-cases,
.about-page .faq {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* ============================================================
   ВОПРОСЫ И ОТВЕТЫ — ДВЕ КОЛОНКИ
   Компьютер, планшет горизонтально и вертикально, смартфон
   горизонтально. Вертикальный смартфон — одна колонка.
   ============================================================ */
.about-page .faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  border-top: none;
}

/* Верхняя черта у каждой колонки своя — иначе она рисуется одна
   на всю ширину и вторая колонка начинается без неё. */
.about-page .faq-item:nth-child(1),
.about-page .faq-item:nth-child(2) {
  border-top: 1px solid var(--border);
}

@media (max-width: 1068px) {
  .about-page .faq-list { column-gap: 28px; }
}

/* Смартфон вертикально — одна колонка. */
@media (max-width: 734px) {
  .about-page .faq-list { grid-template-columns: 1fr; }
  .about-page .faq-item:nth-child(2) { border-top: none; }
  .about-title { padding: 16px 0 2px; }
}

/* Смартфон горизонтально: высоты мало — заголовок компактнее,
   колонки остаются две. */
@media (max-height: 500px) and (orientation: landscape) {
  .about-title { padding: 12px 0 2px; font-size: 24px; }
  .about-page .faq-list { column-gap: 24px; }
}

/* ============================================================
   ЕДИНЫЙ ЗАГОЛОВОК И ПОДЗАГОЛОВОК У ВСЕХ БЛОКОВ РАЗДЕЛА
   Было: у «сравнения» свой кегль и вес, по центру; у остальных — свой,
   по левому краю. Стало: одна шапка блока на все четыре.
   ============================================================ */
.about-page .compare-head,
.about-page .section-head {
  text-align: left;
  max-width: none;
  margin: 0 0 24px;
}

.about-page .compare-title,
.about-page .section-title {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 8px;
}

.about-page .compare-sub,
.about-page .section-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-2);
  margin-top: 0;
  max-width: 720px;
}

/* Одинаковые поля у всех четырёх блоков. */
.about-page .compare,
.about-page .how,
.about-page .use-cases,
.about-page .faq { padding-top: 32px; padding-bottom: 24px; }

@media (max-width: 734px) {
  .about-page .compare-head,
  .about-page .section-head { margin-bottom: 16px; }
  .about-page .compare-title,
  .about-page .section-title { font-size: 22px; }
  .about-page .compare-sub,
  .about-page .section-sub { font-size: 13px; }
}

/* ============================================================
   ТАБЛИЦА СРАВНЕНИЯ НА ВЕРТИКАЛЬНОМ ПЛАНШЕТЕ
   main.css с 900 px подменяет таблицу карточками. На планшете ширины
   хватает — показываем ту же таблицу, что на горизонтальных экранах.
   ============================================================ */
@media (min-width: 735px) {
  .about-page .compare-table { display: table !important; }
  .about-page .compare-cards { display: none !important; }
}

/* На 768 колонки узкие — чуть уменьшаем шрифт и поля ячеек. */
@media (min-width: 735px) and (max-width: 1023px) {
  .about-page .compare-table th,
  .about-page .compare-table td { padding: 8px 10px; font-size: 12.5px; }
  .about-page .compare-table .th-name { font-size: 13px; }
  .about-page .compare-table .th-list { font-size: 10px; }
}

/* ============================================================
   ТАБЛИЦА СРАВНЕНИЯ НА ВЕРТИКАЛЬНОМ СМАРТФОНЕ
   Та же таблица, что на больших экранах. Двигается пальцем вбок внутри
   своего блока — страница при этом стоит. Колонка с названием параметра
   приклеена слева, поэтому всегда видно, о какой строке речь.
   ============================================================ */
@media (max-width: 734px) {
  .about-page .compare-cards { display: none !important; }

  .about-page .compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: var(--r-card);
  }
  .about-page .compare-table-wrap::-webkit-scrollbar { display: none; }

  .about-page .compare-table {
    display: table !important;
    table-layout: fixed;
    width: 620px;               /* шире экрана — отсюда и прокрутка вбок */
    border-radius: 0;
  }
  .about-page .compare-table th,
  .about-page .compare-table td {
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.22;
    width: 160px;
    vertical-align: middle;
  }
  .about-page .compare-table thead th { padding-top: 6px; padding-bottom: 6px; }
  .about-page .compare-table .th-list { margin-top: 2px; }
  /* приклеенная первая колонка */
  .about-page .compare-table thead th:first-child,
  .about-page .compare-table tbody th {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 140px;
    background: #fafafa;
    box-shadow: 1px 0 0 var(--border);
  }
  .about-page .compare-table thead th:first-child { background: #f7f7f7; }
  .about-page .compare-table .th-name { font-size: 12px; }
  .about-page .compare-table .th-list { font-size: 9.5px; }
  .about-page .compare-foot { font-size: 12.5px; }
}

/* ============================================================
   «КАК ЭТО РАБОТАЕТ» НА ВЕРТИКАЛЬНОМ ПЛАНШЕТЕ
   Четыре шага в ряд — так же, как на всех горизонтальных экранах.
   main.css с 1100 px ставит две колонки, перебиваем.
   ============================================================ */
@media (min-width: 735px) and (max-width: 1068px) {
  .about-page .steps {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
  }
  .about-page .step {
    display: block !important;
    padding: 14px 12px !important;
    border-radius: var(--r-card) !important;
  }
  .about-page .step-num { margin-bottom: 8px !important; font-size: 12px !important; }
  .about-page .step-title { font-size: 14px !important; margin-bottom: 6px !important; }
  .about-page .step-text { font-size: 12.5px !important; line-height: 1.4 !important; }
}

/* ============================================================
   «ДЛЯ ЧЕГО ПОДХОДИТ» НА ВЕРТИКАЛЬНЫХ ЭКРАНАХ
   Описания карточек возвращены: на планшете-портрете четыре колонки,
   на смартфоне — две, текст остаётся везде.
   ============================================================ */
@media (max-width: 1023px) {
  .about-page .use-card p { display: block !important; }
}

@media (min-width: 735px) and (max-width: 1068px) {
  .about-page .use-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 12px !important; }
  .about-page .use-card { padding: 14px 12px !important; }
  .about-page .use-card h3 { font-size: 14px !important; margin-bottom: 6px !important; }
  .about-page .use-card p { font-size: 12.5px !important; line-height: 1.4 !important; }
}

@media (max-width: 734px) {
  .about-page .use-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .about-page .use-card { padding: 12px 12px !important; }
  .about-page .use-card h3 { font-size: 13.5px !important; margin-bottom: 4px !important; }
  .about-page .use-card p { font-size: 12px !important; line-height: 1.35 !important; }
}