@charset "UTF-8";
/* ------------------------------------------------------------------
   cribs.me — временный адаптивный слой поверх style.css
   Подключается ПОСЛЕ style.css и только сужает макет: десктоп
   шире 1120px не затрагивается ни одним правилом.

   Нужен потому, что <meta viewport> сам по себе на макете с
   body{width:1080px} делает мобильную версию хуже: страница
   вылезает за экран и Google помечает её как «content wider
   than screen».

   Файл одноразовый — в волне 1 его заменяет нормальная
   дизайн-система (задача #16).
   ------------------------------------------------------------------ */

/* ── планшет и уже: резиновая ширина вместо жёстких 1080px ── */
@media (max-width: 1120px) {

  body {
    width: auto;
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 14px;
  }

  #navbar { min-width: 0; }

  img,
  table,
  iframe,
  embed,
  object {
    max-width: 100%;
  }

  img { height: auto; }

  /* Длинные формулы и таблицы в ответах прокручиваются внутри себя,
     а не растягивают страницу. */
  #content table,
  #content pre {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* ── телефон ── */
@media (max-width: 760px) {

  body { padding: 0 12px; }

  /* Фиксированная панель на маленьком экране съедает высоту. */
  #navbar { position: static; height: auto; padding: 6px 0; }
  #navbar .search,
  #navbar .mycomplects { float: none; width: auto; margin: 0 0 6px; padding-left: 0; }

  /* Колонки каталога перестают быть колонками. */
  #content .col,
  #content .col-2,
  #content .col-3,
  #content .col-3-1,
  #content .col.slide,
  #buying {
    float: none;
    width: auto;
    margin-left: 0;
    margin-right: 0;
    border-right: 0;
    padding-right: 0;
  }

  /* Ответ — выше боковой колонки.
     В разметке сайдбар (.col-3-1: соседние вопросы, скачивание, «Что это»)
     идёт первым, а основной текст (.col-3) вторым. На десктопе их разводят
     флоаты, но как только флоаты сняты, сайдбар отодвигает ответ примерно
     на 1300px вниз. Меняем порядок, не трогая разметку. */
  #content {
    display: flex;
    flex-direction: column;
    /* Читаемость длинных ответов — основной сценарий на телефоне:
       медиана ответа 2 681 символ. */
    font-size: 16px;
    line-height: 1.55;
  }

  #content .col-3,
  #buying { order: 1; }

  #content .col-3-1 { order: 2; }

  /* Распорки флоатов внутри flex-контейнера только плодят пустые строки. */
  #content > .clear { display: none; }

  #content .col.slide .wrap-slide {
    border-right: 0;
    padding-bottom: 16px;
  }

  #content .col ul,
  #content .col ol { padding-right: 0; }

  /* Поиск в шапке — на всю ширину. */
  #header .search,
  #header .search .wrap {
    float: none;
    width: auto;
    padding-left: 0;
    top: 0;
  }

  #header .search .input {
    width: 100%;
    box-sizing: border-box;
    float: none;
    margin: 10px 0;
    font-size: 16px; /* меньше 16px — iOS зумит поле при фокусе */
  }

  /* Алфавит переносится по строкам вместо горизонтальной ленты. */
  #header .alphabet,
  #navbar .alphabet { overflow: hidden; }

  #header .alphabet a,
  #navbar .alphabet a {
    float: none;
    display: inline-block;
    min-width: 30px;
    line-height: 30px;
  }

  .toplogo { float: none; margin-bottom: 8px; }
  .toplogo img { max-height: 30px; width: auto; }

  .banner-top .app { width: auto; }
  .banner-top .app img { float: none; margin: 0 0 10px; }

  #content .feedback { width: auto; }

  #footer .menu { padding-left: 0; text-align: left; }
  #footer .copyright,
  #footer .arrow { float: none; margin: 0 0 10px; }

  h2 { font-size: 24px; line-height: 1.2; margin-bottom: 18px; }
  h3 { font-size: 20px; margin-top: 26px; margin-bottom: 14px; }
  h4, .h4 { font-size: 18px; margin-left: 0; margin-bottom: 16px; }

  /* Ссылки-переходы между вопросами должны попадать пальцем. */
  .paginator a {
    height: 34px;
    line-height: 34px;
    min-width: 34px;
    width: auto;
    padding: 0 4px;
  }

  /* Рекламные блоки не должны распирать вёрстку. */
  ins.adsbygoogle { max-width: 100%; overflow: hidden; }
}