/* Start:/local/templates/skypark/css/blog-extra.css?179334916721178*/
/* Версия 2026-10-30.2. Меняется с каждым выкатом этого файла: по ней видно, что стоит на сайте. */
/* Блог skypark.ru: стили шаблонов статьи news.detail/blogg и списка блога news.list_and_search/blogg.
   Подключается из их component_epilog.php. styles.css собран gulp'ом в 2021-2023 годах, сборщик не
   работает, поэтому свои правила держим отдельным файлом, как styles-extra.css. */

/* Карточки списка блога (индекс, блок на /news/, «Другие статьи»): обложка и аватар теперь <img
   loading="lazy">, а не фон (шаг 31 техаудита блога). Обложка лежит внизу карточки на всю ширину, как
   раньше фон (background-position-y: bottom, background-size: 100%), и под текстом: z-index: -1 внутри
   собственного контекста карточки, поэтому текст и стрелка остаются поверх. */
.press__item_pic {
  z-index: 0;
}
.press__item_pic .press__img {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  margin: 0;
  pointer-events: none;
}
/* 30.10.2026: обложка, прибитая к низу карточки, ложилась на длинный анонс (у статей конвейера он в четыре
   строки, а отступ под текстом на телефоне 10vh, меньше высоты обложки). Теперь она идёт в карточке блоком
   после текста и на всю её ширину до нижнего края, стрелка остаётся поверх обложки. */
/* два класса: styles.css шаблона подключается после этого файла, и его .press__item { display: block }
   перебивал правило с одним классом */
.press__item.press__item_pic {
  display: flex;
  flex-direction: column;
}
.press__item_pic .press__img {
  position: relative;
  order: 10;
  z-index: auto;
  width: calc(100% + 80px);
  margin: auto -40px -100px;
}
.person-card__avatar .person-card__img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

/* Слайдеры статьи: картинка теперь <img>, а не фон. Коробка .photo-slider__photo держит
   пропорцию 1200x672 (padding-bottom: 56%), картинка вписывается в неё так же, как раньше
   фон с background-size: contain. */
.photo-slider__photo .photo-slider__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

/* Блок «Источники» после текста (ТЗ Д.13): один вид у блока из свойств статьи и у
   section.article-sources, который конвейер кладёт в сам текст. Заголовок наследует h2
   статьи, ссылки наследуют цвет ссылок текста. */
.text_article .article-sources {
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid #E5E5E5;
}
.text_article .article-sources:first-child {
  margin-top: 0;
}
.text_article .article-sources-list {
  margin: 20px 0 0;
  padding-left: 1.5em;
  font-size: 15px;
  line-height: 1.6em;
}
.text_article .article-sources-list li + li {
  margin-top: 10px;
}

/* Блок следующего шага: из статьи на аттракционы (шаг 21 техаудита блога). Серая плашка сайта
   (#F2F2F2, радиус 10px), кнопка штатная .button.button_blue. */
.blog-next-step {
  margin: 30px 0;
  padding: 30px;
  border-radius: 10px;
  background: #F2F2F2;
}
.blog-next-step__title {
  font-size: 20px;
  line-height: 1.25em;
  font-weight: 700;
}
.blog-next-step__text {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6em;
}
.blog-next-step__button {
  margin-top: 20px;
}

@media (max-width: 767px) {
  .text_article .article-sources {
    margin-top: 30px;
    padding-top: 20px;
  }
  .blog-next-step {
    margin: 20px 0;
    padding: 20px;
  }
  .blog-next-step__title {
    font-size: 17px;
  }
  .blog-next-step__button {
    display: block;
  }
}

/* Перенесено без изменений из встроенного <style> шаблона списка блога (шаг 35 техаудита блога). Тот <style>
   стоял в <body> и действовал на всю страницу: на индексе, на /news/ и в статьях (виджет «Другие статьи»).
   Этот файл подключают те же страницы, и порядок тот же: после styles.css. */
.person-card__avatar {
  width: 30px !important;
  height: 30px !important;
}
.person-card__header {
  margin-left: auto;
  padding: 15px 30px 0px;
  z-index: 0;
}
.person-card__name, .text_showcase {
  font-size: 14px !important;
}
.press__col {
  margin-bottom: 60px;
}
.press__item {
  background-position-y: bottom;
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: transparent;
}
.press__text {
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .person-card__header {
    margin-right: auto;
    padding: 15px 0px 0px !important;
  }
  .press__col {
    padding: 15px;
  }
  .press__text {
    margin-bottom: 10vh;
  }
  .press__item_pic .press__text {
    margin-bottom: 20px;
  }
  .press__item_pic .press__img {
    width: calc(100% + 26px);
    margin: auto -13px -85px;
  }
}

/* Из встроенного <style> шаблона статьи действовало только это правило: стрелки слайдеров статьи видны всегда
   (jQuery .hide() у слайдера из одного фото его не перебивает). Ограничено слайдером, чтобы не задеть другие
   страницы с этим файлом. */
.photo-slider .opener_white {
  display: block !important;
}

/* Время чтения и просмотры в карточке блога: был серый #7b8691 на белом, контраст 3,7:1; теперь 4,9:1 (шаг 36). */
.blog-card__meta {
  color: #67727d;
}

/* Рубрики блога над списком статей (шаг 23): индекс блога и страницы рубрик. Синий темнее фирменного #00A3E0:
   у текста на белом контраст 5:1, у фирменного 2,9:1. */
.blog-rubrics {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 30px;
}
.blog-rubrics__item {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid #0077a8;
  border-radius: 20px;
  color: #0077a8;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .2s linear, color .2s linear;
}
.blog-rubrics__item:hover,
.blog-rubrics__item:focus-visible,
.blog-rubrics__item_active {
  background-color: #0077a8;
  color: #fff;
}
/* На телефоне восемь кнопок в несколько строк заняли бы треть экрана до первой статьи: один ряд с прокруткой
   вбок, текущую рубрику в нём показывает blog.js. */
@media (max-width: 767px) {
  .blog-rubrics {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .blog-rubrics::-webkit-scrollbar {
    display: none;
  }
  .blog-rubrics__item {
    flex: 0 0 auto;
    padding: 7px 12px;
    font-size: 14px;
    white-space: nowrap;
  }
}

/* Новый вид статьи (макет утверждён владельцем 27.10.2026), шаблон news.detail/blogg. На компьютере (от 1025 px)
   две колонки: слева шапка, обложка и текст, справа карточка аттракциона и оглавление, которые едут вместе с
   прокруткой. На планшете и телефоне одна колонка в порядке разметки: шапка, обложка, карточка, оглавление,
   текст. Серый текст #67727d (контраст 4,9:1), ссылки #0077a8 (5:1), как у рубрик; кнопка покупки #E0004A
   с белым текстом (4,9:1). */
.blog-article {
  max-width: 1260px;
  margin: 0 auto 80px;
  padding: 40px 30px 0;
}
.blog-article .page-header {
  margin: 0 0 24px;
}
.blog-article__head .breadcrumbs {
  justify-content: flex-start;
  margin-bottom: 16px;
}
.blog-article__title.heading_h2 {
  margin: 0 0 14px;
  font-size: 36px;
  line-height: 1.2;
  text-align: left;
  text-wrap: balance;
}
/* Точка-разделитель стоит перед каждым пунктом, а ряд сдвинут влево на её ширину: у первого пункта каждой
   строки точка уходит за край и обрезается, перенос не начинает строку с «·» */
.blog-article__meta {
  overflow: hidden;
  color: #67727d;
  font-size: 15px;
  line-height: 1.5;
}
.blog-article__meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin-left: -20px;
}
.blog-article__meta-item::before {
  content: '·';
  display: inline-block;
  width: 20px;
  color: #67727d;
  text-align: center;
}
.blog-article__rubric {
  color: #0077a8;
  text-decoration: none;
}
.blog-article__rubric:hover,
.blog-article__rubric:focus-visible {
  text-decoration: underline;
}
.blog-article__author {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  color: #67727d;
  font-size: 14px;
  line-height: 1.4;
}
.blog-article__author-img {
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}
.blog-article__author-name {
  color: #000;
  font-weight: 600;
}
/* Слайдеры внутри колонки статьи: без собственных полей и ширины страницы, отступ под ними меньше прежних 80 px */
.blog-article .photo-slider__inner {
  max-width: none;
  padding: 0;
}
.blog-article .photo-slider_margin_bottom {
  margin-bottom: 30px;
}
.blog-article__aside-block + .blog-article__aside-block {
  margin-top: 20px;
}
/* Заголовки разделов мельче прежних 40 px: в узкой колонке и на телефоне они занимали по три строки */
.blog-article .text_article h2 {
  margin-top: 40px;
  font-size: 32px;
  line-height: 1.25;
  scroll-margin-top: 20px;
}
.blog-article .text_article h2:first-child {
  margin-top: 0;
}
.blog-article .text_article h3 {
  font-size: 23px;
  line-height: 1.3;
}

/* Карточка аттракциона */
.blog-attraction {
  overflow: hidden;
  border: 1px solid #E5E5E5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
}
.blog-attraction__img {
  display: block;
  aspect-ratio: 16 / 9;
  background: #F2F2F2;
}
.blog-attraction__img img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.blog-attraction__body {
  padding: 16px 18px 18px;
}
.blog-attraction__eyebrow {
  color: #67727d;
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-attraction__title {
  margin-top: 4px;
  font-family: BodyGrotesqueFit, "San Francisco", sans-serif;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 700;
}
.blog-attraction__text {
  margin: 8px 0 0;
  color: #3d4650;
  font-size: 14px;
  line-height: 1.5;
}
.blog-attraction__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  margin-top: 14px;
}
.blog-attraction__price-value {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
}
.blog-attraction__price-old {
  color: #67727d;
  font-size: 16px;
}
.blog-attraction__price-note {
  flex-basis: 100%;
  color: #67727d;
  font-size: 13px;
}
.blog-attraction__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.blog-attraction__buy,
.blog-attraction__more,
.blog-buybar__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 20px;
  border: 2px solid;
  border-radius: 40px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .2s linear, border-color .2s linear, color .2s linear;
}
.blog-attraction__buy,
.blog-buybar__button {
  border-color: #E0004A;
  background: #E0004A;
  color: #fff;
}
/* обе кнопки тянутся: на телефоне встают в ряд поровну, в узкой колонке компьютера друг под другом во всю ширину */
.blog-attraction__buy,
.blog-attraction__more {
  flex: 1 1 auto;
}
.blog-attraction__buy:hover,
.blog-attraction__buy:focus-visible,
.blog-buybar__button:hover,
.blog-buybar__button:focus-visible {
  border-color: #B8003D;
  background: #B8003D;
  color: #fff;
}
.blog-attraction__more {
  border-color: #0077a8;
  color: #0077a8;
}
.blog-attraction__more:hover,
.blog-attraction__more:focus-visible {
  background: #0077a8;
  color: #fff;
}
/* Блок следующего шага справа от текста (статьи без карточки): компактнее, на телефоне не нужен, там есть
   такой же блок в тексте */
.blog-next-step_aside {
  margin: 0;
  padding: 20px;
}
.blog-next-step_aside .blog-next-step__title {
  font-size: 18px;
}
.blog-next-step_aside .blog-next-step__text {
  font-size: 14px;
}

/* Оглавление */
.blog-toc__details {
  border: 1px solid #E5E5E5;
  border-radius: 12px;
  background: #fff;
}
.blog-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.blog-toc__summary::-webkit-details-marker {
  display: none;
}
.blog-toc__summary::after,
.blog-faq__q::after {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 4px 4px 0;
  border-right: 2px solid #0077a8;
  border-bottom: 2px solid #0077a8;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.blog-toc__details[open] > .blog-toc__summary::after,
.blog-faq__item[open] > .blog-faq__q::after {
  margin-bottom: -4px;
  transform: rotate(-135deg);
}
.blog-toc__list {
  margin: 0;
  padding: 0 16px 14px 36px;
  font-size: 14px;
  line-height: 1.45;
}
.blog-toc__list li + li {
  margin-top: 8px;
}
.blog-toc__link {
  color: #0077a8;
  text-decoration: none;
}
.blog-toc__link:hover,
.blog-toc__link:focus-visible {
  text-decoration: underline;
}
.blog-toc__link_active {
  color: #000;
  font-weight: 600;
}

/* «Частые вопросы»: blog.js собирает вопросы в раскрывающиеся details */
.text_article .blog-faq__item {
  border-top: 1px solid #E5E5E5;
}
.text_article .blog-faq__item_last {
  border-bottom: 1px solid #E5E5E5;
}
.blog-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
}
.blog-faq__q::-webkit-details-marker {
  display: none;
}
.blog-article .text_article .blog-faq__q > h3,
.blog-article .text_article .blog-faq__q > h4 {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
}
.blog-faq__a {
  padding: 0 0 18px;
}

/* Сверка фактов под текстом статьи конвейера */
.blog-verified {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #EEF7F1;
}
.blog-verified__icon {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1E7F4F;
}
.blog-verified__icon::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 5px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.blog-verified__text {
  margin: 0;
  color: #24312a;
  font-size: 14px;
  line-height: 1.55;
}

/* Липкая кнопка «Купить билет»: только телефон, показывает blog.js */
.blog-buybar {
  display: none;
}

@media (min-width: 1025px) {
  .blog-article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "head aside" "cover aside" "body aside";
    column-gap: 60px;
  }
  .blog-article__head {
    grid-area: head;
  }
  .blog-article__cover {
    grid-area: cover;
  }
  .blog-article__aside {
    grid-area: aside;
  }
  .blog-article__body {
    grid-area: body;
  }
  /* Карточка и оглавление едут вместе с прокруткой; если не помещаются по высоте, прокручиваются внутри */
  .blog-article__aside-inner {
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    margin: 0 -10px;
    padding: 0 10px 10px;
    overflow-y: auto;
    scrollbar-width: thin;
  }
}
@media (max-width: 1024px) {
  .blog-article__aside-block {
    margin-bottom: 20px;
  }
  .blog-article__aside-block + .blog-article__aside-block {
    margin-top: 0;
  }
  .blog-article__aside-block_cta {
    display: none;
  }
  /* фото аттракциона на телефоне и планшете не нужно: карточка стоит сразу под обложкой статьи (30.10.2026) */
  .blog-attraction__img {
    display: none;
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .blog-article {
    padding: 30px 20px 0;
  }
  .blog-article__title.heading_h2 {
    font-size: 32px;
  }
}
@media (max-width: 767px) {
  .blog-article {
    margin-bottom: 45px;
    padding: 5px 13px 0;
  }
  .blog-article .page-header {
    margin-bottom: 16px;
  }
  /* в крошках на телефоне только «Наш блог» и рубрика: «Главная» и «Новости и события» занимали строку */
  .blog-article__head .breadcrumbs {
    margin-bottom: 10px;
  }
  .blog-article__head .breadcrumbs__nobr:nth-child(-n+2) {
    display: none;
  }
  .blog-article__title.heading_h2 {
    margin-bottom: 10px;
    font-size: 24px;
    line-height: 1.25;
  }
  .blog-article__meta {
    font-size: 13px;
  }
  .blog-article__meta-row {
    margin-left: -16px;
  }
  .blog-article__meta-item::before {
    width: 16px;
  }
  .blog-article .photo-slider_margin_bottom {
    margin-bottom: 20px;
  }
  .blog-article .text_article h2 {
    margin-top: 28px;
    font-size: 24px;
  }
  .blog-article .text_article h3 {
    margin-bottom: 12px;
    font-size: 19px;
  }
  .blog-attraction__title {
    font-size: 19px;
  }
  .blog-article .text_article .blog-faq__q > h3,
  .blog-article .text_article .blog-faq__q > h4 {
    font-size: 17px;
  }
  .blog-faq__q {
    padding: 14px 0;
  }
  .blog-buybar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 13px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #E5E5E5;
    background: #fff;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .08);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform .25s ease, visibility 0s linear .25s;
  }
  .blog-buybar_visible {
    transform: none;
    visibility: visible;
    transition: transform .25s ease, visibility 0s;
  }
  .blog-buybar__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .blog-buybar__name {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .blog-buybar__price {
    font-size: 14px;
    line-height: 1.3;
  }
  .blog-buybar__note {
    color: #67727d;
    font-size: 12px;
  }
  .blog-buybar__button {
    flex: none;
    padding: 8px 18px;
  }
  /* кнопка чата Битрикс24 в правом нижнем углу поднимается над липкой кнопкой */
  .blog-buybar-on .b24-widget-button-wrapper {
    bottom: 84px !important;
    transition: bottom .25s ease;
  }
}
@media (prefers-reduced-motion: reduce) {
  .blog-buybar,
  .blog-buybar_visible,
  .blog-toc__summary::after,
  .blog-faq__q::after {
    transition: none;
  }
}

/* End */
/* /local/templates/skypark/css/blog-extra.css?179334916721178 */