/*
 * Полировка bibliodetki.ru (Joomla 3.4, шаблон force1 на Gantry).
 * Те же правила, что на librari-biruch.ru, с поправкой на детскую библиотеку:
 * фирменный цвет сайта — оранжевый, его и держим.
 * Ничего в шаблоне не переписываем — накладываем поверх. Установлено 17.09.2026.
 */

:root {
  --detki-akcent: #e95815;
  --detki-akcent-temnee: #cf4a0e;
  --detki-ramka: #e8e2d9;
  --detki-fon-karty: #fffdfb;
  --detki-tekst: #3f3a35;
  --detki-priglushen: #857c72;
  --detki-plavno: cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===== 1. НИЧЕГО НЕ ВЫЛЕЗАЕТ ЗА ЭКРАН ===== */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, iframe, table { max-width: 100%; }
img { height: auto; }
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
iframe[src*="youtube"], iframe[src*="rutube"], iframe[src*="vk.com/video"] {
  display: block;
  width: 100% !important;
  max-width: 720px;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  margin: 14px 0;
}

/* ===== 2. КАРТОЧКИ МАТЕРИАЛОВ ===== */
#rt-main .item,
#rt-main .items-row .item,
.blog .item,
.blog-featured .item {
  box-sizing: border-box;
  background: var(--detki-fon-karty);
  border: 1px solid var(--detki-ramka);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 0 22px;
  transition: border-color 180ms var(--detki-plavno), transform 160ms var(--detki-plavno);
}
@media (hover: hover) and (pointer: fine) {
  #rt-main .item:hover, .blog .item:hover { border-color: #f0c3ab; transform: translateY(-2px); }
}
#rt-main .item .page-header,
.blog .item .page-header { margin: 0 0 8px; padding: 0; border: 0; }
#rt-main .item h2,
.blog .item h2 {
  margin: 0 0 6px !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
}
#rt-main .item h2 a, .blog .item h2 a {
  color: #24405c !important;
  text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
  #rt-main .item h2 a:hover { color: var(--detki-akcent) !important; }
}
/* строка сведений: дата, просмотры */
.article-info, .article-info dd {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  color: var(--detki-priglushen) !important;
}
.article-info { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px !important; }
.article-info dd { background: none !important; }
/* картинки внутри материала */
#rt-main .item img, .blog .item img {
  border-radius: 10px;
  margin: 6px 0;
}

/* ===== 3. КНОПКИ ===== */
.readon, a.readon, .readmore, .readmore a, .btn-primary, button.btn,
input[type="submit"], .button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: var(--detki-akcent) !important;
  background-image: none !important;
  color: #fff !important;
  font-size: 14.5px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background-color 170ms var(--detki-plavno), transform 130ms var(--detki-plavno);
}
@media (hover: hover) and (pointer: fine) {
  .readon:hover, .readmore a:hover, .btn-primary:hover, button.btn:hover {
    background: var(--detki-akcent-temnee) !important;
  }
}
.readon:active, .readmore a:active, .btn-primary:active { transform: scale(0.97); }
:focus-visible { outline: 3px solid var(--detki-akcent); outline-offset: 2px; }

/* ===== 4. ПОСТРАНИЧНАЯ НАВИГАЦИЯ ===== */
.pagination ul, ul.pagination {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 20px 0 8px !important;
  padding: 0 !important;
  list-style: none;
}
.pagination ul > li, ul.pagination > li {
  display: block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  list-style: none;
}
.pagination ul > li > a, .pagination ul > li > span,
ul.pagination > li > a, ul.pagination > li > span {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 40px;
  height: 40px;
  padding: 0 13px !important;
  border: 1px solid var(--detki-ramka) !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--detki-tekst) !important;
  font-size: 14px !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 170ms var(--detki-plavno), border-color 170ms var(--detki-plavno),
              transform 130ms var(--detki-plavno);
}
@media (hover: hover) and (pointer: fine) {
  .pagination ul > li > a:hover, ul.pagination > li > a:hover {
    background: #fdf1ea !important;
    border-color: #f0c3ab !important;
  }
}
.pagination ul > li > a:active { transform: scale(0.97); }
.pagination ul > li.active > span, ul.pagination > li.active > span {
  background: var(--detki-akcent) !important;
  border-color: var(--detki-akcent) !important;
  color: #fff !important;
  font-weight: 600;
}
.pagination .counter, .counter {
  margin: 14px 0 0 !important;
  text-align: center;
  font-size: 13px;
  color: var(--detki-priglushen);
}

/* ===== 5. БЛОКИ-МОДУЛИ ===== */
#rt-feature .rt-block,
#rt-utility .rt-block,
#rt-content-bottom .rt-block,
#rt-mainbottom .rt-block {
  box-sizing: border-box;
  background: var(--detki-fon-karty);
  border: 1px solid var(--detki-ramka);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 0 0 20px;
}
#rt-feature .rt-block .title,
#rt-utility .rt-block .title,
#rt-content-bottom .rt-block .title,
#rt-mainbottom .rt-block .title {
  margin: 0 0 12px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--detki-ramka);
  font-size: 17px !important;
  line-height: 1.3 !important;
  color: #24405c !important;
}
/* списки ссылок в модулях */
#rt-content-bottom ul, #rt-mainbottom ul, #rt-utility ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#rt-content-bottom ul > li, #rt-mainbottom ul > li, #rt-utility ul > li {
  position: relative;
  margin: 0 !important;
  padding: 9px 0 9px 17px !important;
  border: 0 !important;
  border-bottom: 1px solid #f4efe8 !important;
  background: none !important;
  list-style: none !important;
  line-height: 1.45;
}
#rt-content-bottom ul > li:last-child,
#rt-mainbottom ul > li:last-child { border-bottom: 0 !important; }
#rt-content-bottom ul > li::before, #rt-mainbottom ul > li::before {
  content: "";
  position: absolute;
  left: 2px; top: 17px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #f0a883;
}
/* картинки-баннеры в модулях — ровным столбцом со скруглением */
#rt-content-bottom img, #rt-mainbottom img, #rt-utility img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 10px;
  border-radius: 10px;
}

/* ===== 6. ПЛИТКИ БЫСТРЫХ РАЗДЕЛОВ (Афиша, Каталог, Экскурсия) ===== */
#rt-feature {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}
#rt-feature > [class*="rt-grid-"] { display: flex; }
#rt-feature > [class*="rt-grid-"] > * { width: 100%; display: flex; }
#rt-feature .rt-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 150px;
  text-align: center;
}
#rt-feature .custom { text-align: center; }
#rt-feature img { margin: 0 auto 8px; }

/* ===== 7. ШАПКА И МЕНЮ ===== */
#rt-header .rt-block, #rt-top .rt-block { padding: 0; margin: 0; }
#rt-header ul.menu > li > a,
#rt-header .menutop > li > a {
  border-radius: 8px;
  transition: background-color 170ms var(--detki-plavno);
}
/* поиск */
#rt-showcase input[type="text"], .search input[type="text"], input.inputbox {
  box-sizing: border-box;
  min-height: 42px;
  padding: 10px 16px !important;
  border: 1px solid var(--detki-ramka) !important;
  border-radius: 999px !important;
  background: #fff !important;
  font-size: 15px;
}
#rt-showcase input[type="text"]:focus, input.inputbox:focus {
  outline: 3px solid rgba(233, 88, 21, .3);
  outline-offset: 1px;
  border-color: var(--detki-akcent) !important;
}

/* ===== 8. ПОДВАЛ ===== */
#rt-copyright, #rt-footer {
  font-size: 13.5px;
  line-height: 1.6;
}
#rt-copyright a, #rt-footer a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  #rt-copyright a:hover, #rt-footer a:hover { text-decoration: underline; }
}

/* ===== 9. ТЕЛЕФОН ===== */
@media (max-width: 767px) {
  #rt-main .item, .blog .item { padding: 14px; margin-bottom: 16px; }
  #rt-feature .rt-block, #rt-utility .rt-block,
  #rt-content-bottom .rt-block, #rt-mainbottom .rt-block { padding: 14px; margin-bottom: 16px; }
  .readon, .readmore a, .btn-primary { width: 100%; }
  #rt-main .item h2, .blog .item h2 { font-size: 18px !important; }
  /* колонки шаблона складываем в одну */
  #rt-feature > [class*="rt-grid-"],
  #rt-utility > [class*="rt-grid-"],
  #rt-content-bottom > [class*="rt-grid-"],
  #rt-mainbottom > [class*="rt-grid-"] {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* плитки быстрых разделов — одной высоты, подписи по центру внизу */
#rt-feature > [class*="rt-grid-"] { align-items: stretch; }
#rt-feature .rt-block {
  min-height: 210px;
  justify-content: flex-start;
  padding-bottom: 18px;
}
#rt-feature .custom p { margin: 0 0 6px; }
#rt-feature .custom a { font-weight: 600; }

/* ===== 10. ОТДЕЛЬНАЯ СТРАНИЦА МАТЕРИАЛА ===== */
#rt-main .item-page,
.item-page {
  box-sizing: border-box;
  background: var(--detki-fon-karty);
  border: 1px solid var(--detki-ramka);
  border-radius: 14px;
  padding: 22px 26px;
  margin: 0 0 22px;
}
.item-page > h1, .item-page > h2, .item-page .page-header h2 {
  margin: 0 0 10px !important;
  font-size: 24px !important;
  line-height: 1.25 !important;
  color: #24405c !important;
}
.item-page p { line-height: 1.65; margin: 0 0 12px; }
.item-page img { border-radius: 10px; }
/* служебные значки печати и письма — приглушить */
.item-page .icons, .item-page .btn-group { opacity: .5; }
.item-page .icons:hover { opacity: 1; }
/* хлебные крошки */
.breadcrumb {
  margin: 0 0 14px !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  font-size: 13.5px;
}
.breadcrumb > li, .breadcrumb > * { color: var(--detki-priglushen); }
.breadcrumb a { color: #3f6ea8; text-decoration: none; }

@media (max-width: 767px) {
  #rt-main .item-page, .item-page { padding: 16px; }
  .item-page > h1, .item-page > h2 { font-size: 20px !important; }
}

/* ===== 11. НАВИГАЦИЯ И БАННЕРЫ ВНИЗУ =====
   Постраничная навигация упиралась в следующий блок, а баннеры в «Полезных
   ссылках» шли одной длинной колонкой. Даём навигации воздух, баннеры строим рядом. */
.pagination { margin: 20px 0 34px !important; clear: both; }
#rt-content-bottom, #rt-mainbottom { clear: both; }

/* баннеры в модулях — ряд плиток одинаковой ширины с переносом */
/* баннеры свёрстаны как <div align="center"> со ссылками подряд,
   поэтому рядом строим и сам блок, и вложенный div */
#rt-mainbottom .custom > div,
#rt-content-bottom .custom > div,
#rt-mainbottom .custom,
#rt-content-bottom .custom,
#rt-mainbottom .bannergroup,
#rt-content-bottom .bannergroup {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  justify-content: flex-start;
}
#rt-mainbottom .custom p,
#rt-content-bottom .custom p,
#rt-mainbottom .custom > div > a,
#rt-content-bottom .custom > div > a,
#rt-mainbottom .custom > a,
#rt-content-bottom .custom > a,
#rt-mainbottom .banneritem,
#rt-content-bottom .banneritem {
  flex: 0 1 160px;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
}
#rt-mainbottom .custom img,
#rt-content-bottom .custom img,
#rt-mainbottom .banneritem img,
#rt-content-bottom .banneritem img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: 92px !important;
  margin: 0 !important;
  object-fit: contain;
  background: #fff;
  border: 1px solid #f1ebe3;
  border-radius: 10px;
  padding: 6px;
  box-sizing: border-box;
  transition: border-color 170ms var(--detki-plavno), transform 170ms var(--detki-plavno);
}
@media (hover: hover) and (pointer: fine) {
  #rt-mainbottom .custom img:hover,
  #rt-content-bottom .custom img:hover,
  #rt-mainbottom .banneritem img:hover { border-color: #f0a883; transform: translateY(-2px); }
}
/* ссылки-списки внутри тех же блоков остаются столбиком */
#rt-mainbottom ul, #rt-content-bottom ul { display: block; }

@media (max-width: 767px) {
  #rt-mainbottom .custom p, #rt-content-bottom .custom p,
  #rt-mainbottom .banneritem, #rt-content-bottom .banneritem { flex: 0 1 calc(50% - 6px); }
  #rt-mainbottom .custom img, #rt-content-bottom .custom img { height: 80px; }
}

/* баннеры бывают вложены в несколько уровней div — ловим любой контейнер,
   внутри которого лежат ссылки с картинками, и строим их рядом */
#rt-mainbottom .custom div:has(> a > img),
#rt-content-bottom .custom div:has(> a > img),
#rt-mainbottom .custom:has(> a > img),
#rt-content-bottom .custom:has(> a > img) {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  justify-content: center;
}
#rt-mainbottom .custom div:has(> a > img) > a,
#rt-content-bottom .custom div:has(> a > img) > a,
#rt-mainbottom .custom:has(> a > img) > a,
#rt-content-bottom .custom:has(> a > img) > a {
  flex: 0 1 160px;
  display: block;
  margin: 0 !important;
}
#rt-mainbottom .custom a > img,
#rt-content-bottom .custom a > img {
  margin: 0 !important;
  width: 100% !important;
  height: 92px !important;
  object-fit: contain;
}

/* группы баннеров лежат в узких вложенных div (279 px) — из-за этого ряд
   переносился после первой картинки. Даём группам всю ширину блока,
   а сам .custom оставляем обычным блоком: группы идут одна под другой. */
#rt-mainbottom .custom,
#rt-content-bottom .custom {
  display: block !important;
}
#rt-mainbottom .custom > div,
#rt-content-bottom .custom > div {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 12px !important;
}

/* сами кнопки навигации лежат в отдельном списке, а не в .pagination —
   отступ снизу задаём и ему, иначе кнопки упираются в следующий блок */
ul.pagination, .pagination ul, .pagination-list {
  margin-bottom: 34px !important;
}
#rt-content-bottom { padding-top: 12px; }