/*
 * Адаптивная резинка + золотой стандарт 2026 для librari-biruch.ru (Joomla 1.6, шаблон
 * RocketTheme Zephyr, сетка 960.gs с фиксированными пикселями).
 * Ничего не меняет в самом шаблоне — накладывается поверх, подключается последним файлом.
 * Установлено 16.09.2026.
 */

/* ===== токены ===== */
:root {
  --золото-радиус: 12px;
  --золото-радиус-м: 8px;
  --золото-рамка: #e4ded0;
  --золото-фон-карты: #fffdf8;
  --золото-акцент: #b5860f;
  --золото-текст: #4d4646;
  --золото-тень-нет: none;
  --золото-переход-быстро: 150ms cubic-bezier(0.23, 1, 0.32, 1);
  --золото-переход-средне: 220ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root { --золото-переход-быстро: 1ms; --золото-переход-средне: 1ms; }
}

/* ===== резиновый контейнер ===== */
/* у body стоит min-width:960px (защита старой вёрстки от схлопывания) — именно
   он держал всю страницу растянутой на телефоне, даже когда контейнер уже резиновый */
html, body {
  min-width: 0 !important;
}
.rt-container, #rt-menu .rt-container {
  box-sizing: border-box;
}
.rt-container {
  width: 100% !important;
  max-width: 960px;
  margin: 0 auto !important;
  padding: 0 16px;
}
#rt-header, #rt-navigation .nopill, #rt-showcase, #rt-feature,
#rt-body-surround, #rt-footer, .rt-shadowbar, #rt-drawer, #rt-top {
  max-width: 100%;
  box-sizing: border-box;
}

/* ===== резиновая сетка вместо фиксированных px (960.gs) =====
   было: .rt-grid-2{width:140px} — жёсткий пиксель, ломается при сужении экрана.
   стало: доля от (уже резинового) контейнера, гаттер остаётся фиксированным 20px. */
.rt-container .rt-grid-1  { width: calc(1  / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-2  { width: calc(2  / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-3  { width: calc(3  / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-4  { width: calc(4  / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-5  { width: calc(5  / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-6  { width: calc(6  / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-7  { width: calc(7  / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-8  { width: calc(8  / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-9  { width: calc(9  / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-10 { width: calc(10 / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-11 { width: calc(11 / 12 * 100% - 20px) !important; }
.rt-container .rt-grid-12 { width: calc(12 / 12 * 100% - 20px) !important; }

/* ===== планшет: контейнер и сетка уже резиновые сами по себе, только чиним меню ===== */
@media (max-width: 999px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overflow-x: hidden; }
}

/* ===== телефон: всё в одну колонку, узкие блоки нечитаемы долями — складываем стопкой =====
   правило поставлено ПОСЛЕ базового calc(), поэтому переопределяет его на этой ширине. */
@media (max-width: 640px) {
  .rt-container .rt-grid-1, .rt-container .rt-grid-2, .rt-container .rt-grid-3,
  .rt-container .rt-grid-4, .rt-container .rt-grid-5, .rt-container .rt-grid-6,
  .rt-container .rt-grid-7, .rt-container .rt-grid-8, .rt-container .rt-grid-9,
  .rt-container .rt-grid-10, .rt-container .rt-grid-11 {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 16px;
  }
  #rt-header .rt-grid-8, #rt-header .rt-grid-2 { text-align: center; }
}

/* ===== мобильное меню: гамбургер вместо горизонтальной полосы, которая резалась ===== */
@media (max-width: 768px) {
  #rt-navigation .nopill { position: relative; }
  #rt-navigation ul.menutop.level1 {
    display: none;
    flex-direction: column;
    width: 100%;
  }
  #rt-navigation.меню-открыто ul.menutop.level1 {
    display: flex;
  }
  #rt-navigation ul.menutop.level1 > li {
    width: 100% !important;
    float: none !important;
  }
  #rt-navigation ul.menutop.level1 > li > a {
    display: block;
    padding: 14px 16px;
    min-height: 44px;
    box-sizing: border-box;
  }
  .золото-гамбургер {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 44px;
    padding: 12px 16px;
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    box-sizing: border-box;
  }
  .золото-гамбургер span {
    display: block;
    width: 22px; height: 2px;
    background: currentColor;
    position: relative;
  }
  .золото-гамбургер span::before, .золото-гамбургер span::after {
    content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor;
    transition: transform var(--золото-переход-быстро);
  }
  .золото-гамбургер span::before { top: -7px; }
  .золото-гамбургер span::after { top: 7px; }
}
@media (min-width: 769px) {
  .золото-гамбургер { display: none; }
}

/* ===== карточки: рамка + тон вместо тени, скругления, отступы (золотой стандарт) ===== */
.rt-block, .rt-module-surround, .item-page, .blog-item, .rokstories-layout1 .feature-block,
.pagination, #roksearch_results .container-wrapper {
  border-radius: var(--золото-радиус-м);
}
.rt-block {
  transition: transform var(--золото-переход-быстро), border-color var(--золото-переход-быстро);
}
@media (hover: hover) and (pointer: fine) {
  a.rt-block:hover, .rt-block:hover {
    transform: translateY(-2px);
  }
}

/* появление секций при прокрутке — один раз, только transform+opacity, коротко */
.золото-появление {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--золото-переход-средне), transform var(--золото-переход-средне);
}
.золото-появление.золото-видно {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .золото-появление { opacity: 1; transform: none; }
}

/* картинки не должны вылезать за карточку на любой ширине */
.rt-module-surround img, .item-page img, .blog-item img, #rt-mainbody img {
  max-width: 100%;
  height: auto;
}

/* ===== контент статей: таблицы, iframe — не должны ломать резинку =====
   слайдер (nivo/amazing) НЕ трогаем изнутри: у него JS считает точные пиксели для
   кроссфейда слайдов, любое width/height!important на детях ломает анимацию (было
   проверено и откачено 16.09.2026 — слайды схлопывались в пустоту). Только прячем
   переполнение снаружи, сам виджет остаётся на своих исходных пикселях. */
.slider-wrapper, .nivoSlider {
  max-width: 100%;
  overflow: hidden;
}
iframe {
  max-width: 100%;
}
/* таблицы где угодно на сайте: если реально не влезают — горизонтальная прокрутка
   внутри себя, а не вся страница целиком */
table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.pagination { flex-wrap: wrap; }
.pagination li { max-width: 100%; }