/* ===========================================================================
   Адаптивность шаблона Vkuslandiya.
   Подключается ПОСЛЕ style.css. Десктоп (>=1020px) не меняется, ниже —
   три брейкпоинта: <=1019 (планшет), <=767 (мобильный), <=480 (узкий).
   ======================================================================== */

/* --- База (все ширины): медиа-контент не должен вылезать из колонки --- */
#left img,
#left iframe,
#left video,
#left embed,
#left object,
#right img {
  max-width: 100%;
  height: auto;
}
.itemFullText table,
.itemIntroText table,
.itemBody table,
.catItemBody table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}
/* Счётчик LiveInternet (раньше — инлайновый стиль в index.php) */
.li-counter {
  margin-left: 910px;
  position: absolute;
}

/* =========================== Планшет: <=1019px ========================== */
@media (max-width: 1019px) {
  #wrapper {
    min-width: 0;
  }
  #header,
  #middle,
  .ban_block,
  #footer {
    width: auto;
    max-width: 1000px;
  }
  #middle {
    padding: 0 10px;
  }
  /* Колонки: px -> проценты */
  #left {
    width: 63%;
  }
  #right {
    width: 35%;
  }
  /* Заголовки и подложки статей — по ширине колонки */
  .itemListView h3.catItemTitle,
  h1.itemTitle,
  h2.itemTitle,
  .registration legend {
    width: auto;
  }
  .itemListView .catItemBot,
  .catItemBot {
    width: auto;
  }
  /* Анонс в списке: не фиксированная правая колонка, а обтекание картинки */
  .itemListView .catItemIntroBlock {
    float: none;
    width: auto;
    overflow: hidden;
  }
  .itemListView .catItemIntroBlock1 {
    width: auto;
    float: none;
    background: none;
    height: auto;
    overflow: hidden;
    padding: 5px 0 0 0;
  }
  /* Декоративные рамки фото статьи рассчитаны на 596px — скрываем */
  .itemImageBlock .catItemImage1,
  .itemImageBlock .catItemImage2 {
    display: none;
  }
  /* Баннеры не шире колонки */
  #ban1,
  #ban2 {
    max-width: 100%;
  }
  /* Формы */
  div.itemCommentsForm form textarea.inputbox {
    width: 100%;
    box-sizing: border-box;
  }
  div.itemTwitterButton1 {
    width: auto;
  }
  .jt-codebanner_right_1,
  .jt-codebanner_right_2 {
    max-width: 100%;
  }
  /* Сайдбар: блоки не шире своей колонки */
  .right_title {
    width: auto;
    max-width: 342px;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
  }
  .moduletable_login {
    width: auto;
    max-width: 300px;
  }
  /* Счётчик LiveInternet — в поток */
  .li-counter {
    position: static;
    margin: 5px auto;
    text-align: center;
  }
}

/* ========================== Мобильный: <=767px ========================== */
@media (max-width: 767px) {
  /* --- Одна колонка --- */
  #left,
  #right {
    float: none;
    width: auto;
  }
  #left {
    margin-top: 0;
  }
  #right {
    margin-top: 30px;
  }

  /* --- Шапка: из absolute-магии в обычный поток --- */
  #header {
    height: auto;
    padding: 10px 10px 0 10px;
    overflow: hidden;
  }
  #header .logo {
    position: static;
    float: none;
    width: 100%;
    max-width: 405px;
    height: auto;
    margin: 0 auto;
  }
  #header .logo a {
    width: 100%;
    max-width: 405px;
    height: 0;
    padding-bottom: 35%; /* пропорция logo.png 405x142 */
    background-size: contain;
    background-position: center top;
  }
  .social {
    float: none;
    margin: 10px auto;
  }
  .search_top {
    float: none;
    clear: both;
    margin: 0 auto;
  }
  .finder_top {
    margin-left: 0;
    text-align: center;
  }
  .finder_top button,
  .finder_top input {
    float: none;
    display: inline-block;
    vertical-align: middle;
  }

  /* --- Верхнее меню: перенос строк вместо одной линейки --- */
  #header #menu_top {
    top: 0;
    margin: 10px 0 0 0;
    overflow: hidden;
  }
  #header #menu_top li {
    height: auto;
  }
  #header #menu_top li a {
    height: auto;
    padding: 8px 10px;
  }
  #header #menu_top a.rss {
    margin: 8px 10px 0 0;
  }

  #menu_left {
    top: 0;
    margin: 10px;
  }

  /* --- Баннер под шапкой: из absolute в поток --- */
  #ban1 {
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    margin: 10px 0;
    text-align: center;
  }
  #ban2 {
    width: auto;
    height: auto;
  }

  /* --- Список статей: картинка сверху, текст под ней --- */
  .itemListView .catItemImageBlock {
    float: none;
    text-align: center;
  }
  .itemListView .catItemImage1,
  .itemListView .catItemImage2 {
    display: none;
  }
  .itemListView .catItemImageBlock img {
    margin-right: 0;
  }

  /* --- Сайдбар --- */
  .right_title {
    width: auto;
    max-width: 342px;
    margin-left: auto;
    margin-right: auto;
  }
  #right #right1 {
    padding-left: 0;
  }
  .right2 {
    text-align: center;
  }

  /* --- Комментарии --- */
  div.itemComments ul.itemCommentsList li img {
    float: none;
  }
  div.itemCommentsForm form label.formName,
  div.itemCommentsForm form label.formEmail {
    float: none;
    margin: 12px 0 0 2px;
  }
  div.k2ReportCommentFormContainer,
  div.k2ReportCommentFormContainer blockquote,
  div.k2ReportCommentFormContainer form textarea {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* --- Футер --- */
  #footer {
    height: auto;
    background-size: cover;
    padding: 10px;
    text-align: center;
  }
  #footer ul {
    width: auto;
    padding-top: 5px;
  }
  .copyright {
    position: static;
    float: none;
    width: auto;
    padding-top: 5px;
  }
  /* Служебный отступ между контентом и футером */
  .clearMain {
    height: 20px;
  }
}

/* ============================ Узкий: <=480px ============================ */
@media (max-width: 480px) {
  h1,
  h1 a {
    font-size: 24px;
  }
  h2,
  h2 a {
    font-size: 20px;
  }
  h3,
  h3 a {
    font-size: 18px;
  }
  .itemListView h3.catItemTitle a,
  h1.itemTitle a {
    font-size: 18px;
  }
  #header #menu_top li {
    background: none;
  }
  #header #menu_top li a {
    padding: 8px 8px;
    font-size: 13px;
  }
  .itemListView .catItemCommentsLink {
    margin-left: 20px;
  }
}