/* ==========================================================================
   EXOTAG — страница «Детский день рождения».
   Все правила заскоплены обёрткой .exo-dr, классы с префиксом dr-.
   Файл общий для локального превью и прода — правится только он.
   ========================================================================== */

.exo-dr, .exo-dr *, .exo-dr *::before, .exo-dr *::after { box-sizing: border-box; }

.exo-dr {
  /* Токены-градиенты дизайн-системы: в разметке остались var(--grad-brand) и
     var(--grad-brand-diag), а colors_and_type.css на сайт не уезжает — без этих
     объявлений плашка «Рекомендуем» и рамка финального блока становятся прозрачными. */
  --grad-brand:      linear-gradient(90deg,  #05F7F1 0%, #308DFF 44%, #722BE3 100%);
  --grad-brand-diag: linear-gradient(135deg, #05F7F1 0%, #308DFF 44%, #722BE3 100%);
  --grad-brand-vert: linear-gradient(180deg, #05F7F1 0%, #308DFF 44%, #722BE3 100%);
  --grad-text-brand: linear-gradient(90deg,  #05F7F1, #308DFF 44%, #722BE3);

  background: #161920;
  color: #fff;
  font: 400 16px/150% 'Rubik', system-ui, sans-serif;
}
.exo-dr a { color: #308DFF; text-decoration: none; }
.exo-dr a:hover { color: #05F7F1; text-decoration: underline; }
.exo-dr ::selection { background: rgba(5,247,241,.3); }
.exo-dr img { max-width: 100%; }

/* -------- Кнопки -------- */
.exo-dr .dr-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 1000px;
  font: 500 16px/100% 'Rubik', sans-serif; cursor: pointer; border: 0;
  white-space: nowrap; text-decoration: none;
  transition: all 220ms cubic-bezier(.22,1,.36,1);
}
.exo-dr .dr-pill:hover { text-decoration: none; }
.exo-dr .dr-pill.primary { background: #308DFF; color: #fff; }
.exo-dr .dr-pill.primary:hover { background: #53A4FF; color: #fff; transform: translateY(-1px); }
.exo-dr .dr-pill.primary:active { background: #2374D9; transform: none; }
.exo-dr .dr-pill.ghost { background: transparent; color: #fff; border: 1px solid #fff; }
.exo-dr .dr-pill.ghost:hover { background: rgba(255,255,255,.08); color: #fff; }
.exo-dr .dr-pill.cyan { background: transparent; color: #05F7F1; border: 1px solid #05F7F1; }
.exo-dr .dr-pill.cyan:hover { background: rgba(5,247,241,.12); color: #05F7F1; }
.exo-dr .dr-pill.cyan.filled { background: #05F7F1; color: #161920; border: 0; }
.exo-dr .dr-pill.cyan.filled:hover { background: #2BE1F9; color: #161920; }
.exo-dr .dr-pill.lg { height: 56px; padding: 0 30px; font-size: 18px; }

/* -------- Чипы -------- */
.exo-dr .dr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 16px; border-radius: 1000px;
  font: 500 14px/120% 'Rubik', sans-serif; user-select: none;
  border: 1px solid rgba(255,255,255,.22); color: #fff; background: transparent;
  transition: all 140ms cubic-bezier(.22,1,.36,1);
}
.exo-dr .dr-chip.on { background: #308DFF; border-color: #308DFF; }

/* -------- Карточки -------- */
.exo-dr .dr-card {
  background: #1C202A; border-radius: 16px; padding: 20px;
  border: 1px solid #282C35;
  transition: all 220ms cubic-bezier(.22,1,.36,1);
}
.exo-dr .dr-card:hover {
  transform: translateY(-3px); border-color: #05F7F1;
  box-shadow: 0 0 24px rgba(5,247,241,.55), 0 0 1px rgba(5,247,241,.9);
}
.exo-dr a.dr-card:hover { text-decoration: none; }

/* -------- Градиентный текст -------- */
.exo-dr .dr-hero-collage { display: none; }

.exo-dr .dr-grad {
  background: linear-gradient(90deg, #05F7F1, #308DFF 44%, #722BE3);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* -------- Блок отзывов: заголовок над штатным блоком темы -------- */
.exo-dr .dr-reviews-head { max-width: 1280px; margin: 0 auto; padding: 96px 40px 0; }
.dr-main .reviews .container { max-width: 1280px; padding: 0 40px; }
.dr-main .reviews__wrap { margin-top: 24px; margin-bottom: 48px; }
/* слайды свайпера равны по высоте самому длинному отзыву — тянем карточку,
   иначе под короткими отзывами остаётся пустая дыра */
.dr-main .reviews .swiper-slide { height: auto; }
.dr-main .reviews .reviews-item { height: 100%; }   /* в теме 111/107px — под нашим заголовком это дыра */
@media (max-width: 900px) {
  .exo-dr .dr-reviews-head { padding-left: 20px; padding-right: 20px; }
  .dr-main .reviews .container { padding: 0 20px; }
}
@media (max-width: 600px) {
  .exo-dr .dr-reviews-head { padding: 56px 16px 0; }
  .dr-main .reviews .container { padding: 0 16px; }
}

/* ==========================================================================
   Отступ под абсолютной шапкой темы.
   Запас в потоке даёт блок хлебных крошек (.breadcrumbs{margin:170px 0 48px}) —
   для нашей страницы он избыточен, но меньше 150px (моб. 130px) нельзя —
   шапка занимает 72–182px на десктопе и 0–120px на мобильной, крошки уедут под неё.
   ========================================================================== */
body:has(.dr-main) .breadcrumbs { margin: 150px 0 24px; }
@media (max-width: 760px) {
  /* Шапка на мобильной — две строки: логотип (0–42) и ряд с телефоном и бургером (42–120),
     причём содержимое ряда заканчивается на ~71px, а сам ряд тянется до 120 и перехватывает
     клики. Поэтому крошки ниже 124px не опускаем, а тёмную пустую полосу закрываем фоном
     первого экрана: тянем секцию вверх отрицательным margin и возвращаем отступ паддингом.
     Крошки поднимаем над этим фоном z-index'ом. */
  body:has(.dr-main) .breadcrumbs { margin: 124px 0 0; position: relative; z-index: 3; }
  .dr-main .exo-dr > section:first-of-type { margin-top: -92px; padding-top: 104px !important; }
}

/* ==========================================================================
   Мобильные карусели
   ========================================================================== */
@media (max-width: 860px) {
  .exo-dr .dr-carousel {
    display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory;
    gap: 12px; padding-bottom: 10px; scrollbar-width: none;
  }
  .exo-dr .dr-carousel::-webkit-scrollbar { display: none; }
  .exo-dr .dr-carousel > * { flex: 0 0 calc(50% - 6px); scroll-snap-align: start; }

  .exo-dr .dr-peek {
    display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory;
    /* padding-top — запас под плашку «Рекомендуем»: она висит на -13px от карточки,
       а overflow-x:auto режет всё, что выходит за padding-box контейнера */
    gap: 12px; padding: 18px 11% 10px; scrollbar-width: none;
  }
  .exo-dr .dr-peek::-webkit-scrollbar { display: none; }
  .exo-dr .dr-peek > * { flex: 0 0 78%; scroll-snap-align: center; }

  .exo-dr .dr-card:hover { transform: none; box-shadow: none; border-color: #282C35; }

  /* карусель тематик — постеры вертикальные, влезает по два на экран */
  .exo-dr [style*="minmax(160px"] > * { flex: 0 0 calc(50% - 6px) !important; }
}

/* ==========================================================================
   Адаптив. Вёрстка пришла из дизайна на инлайновых стилях, поэтому здесь
   без !important не обойтись — инлайн иначе выигрывает.
   ========================================================================== */
@media (max-width: 900px) {
  .exo-dr section { padding-left: 20px !important; padding-right: 20px !important; }
  /* у первого экрана боковой отступ задан не секции, а внутреннему контейнеру —
     иначе на мобильной он складывается с отступом секции и съедает 56px по краям */
  .exo-dr [style*="padding:0 40px"] { padding-left: 0 !important; padding-right: 0 !important; }
  .exo-dr [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .exo-dr [style*="minmax(300px"], .exo-dr [style*="minmax(240px"] {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  }
  .exo-dr h1 { font-size: 40px !important; }
  .exo-dr h2 { font-size: 28px !important; }
  /* герои первого экрана: в дизайне 520/420px с наездом -90px — на узком экране это
     превращалось в две крошечные картинки друг на друге */
  .exo-dr [style*="min-height:520px"] { min-height: 0 !important; }
  .exo-dr [style*="height:520px"] { height: 320px !important; max-width: none; }
  .exo-dr [style*="height:420px"] { height: 260px !important; max-width: none; }
  .exo-dr [style*="margin-left:-90px"] { margin-left: -40px !important; }
}

@media (max-width: 600px) {
  /* длинные подписи на кнопках («Хотите праздник «всё включено» → EXO Максимум»)
     не влезают в одну строку — разрешаем перенос */
  .exo-dr .dr-pill { white-space: normal; height: auto; min-height: 44px; padding: 12px 18px; text-align: center; }
  .exo-dr .dr-pill.lg { height: auto; min-height: 48px; padding: 14px 22px; }

  /* фигура в финальном блоке — по центру, а не прижата к краю */
  .exo-dr #booking [style*="align-items:flex-end"] { justify-content: center !important; }

  .exo-dr section { padding-left: 16px !important; padding-right: 16px !important; padding-top: 56px !important; }
  .exo-dr h1 { font-size: 32px !important; }
  .exo-dr h2 { font-size: 24px !important; }
  .exo-dr p { font-size: 15px !important; }
  .exo-dr .dr-pill.lg { height: 48px; padding: 0 22px; font-size: 16px; }
  /* на узком экране вместо вырезанной фигуры — коллаж 2×2 из живых кадров:
     фигура в полный рост на 390px читается плохо */
  .exo-dr [style*="min-height:520px"] { display: block !important; width: 100% !important; }
  .exo-dr .dr-hero-figure { display: none !important; }
  .exo-dr .dr-hero-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .exo-dr .dr-hero-collage img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
  .exo-dr [style*="height:420px"] { display: none !important; }   /* вторая фигура не помещается */
  .exo-dr .dr-carousel > * { flex: 0 0 72%; }
  .exo-dr [style*="padding-bottom:96px"] { padding-bottom: 48px !important; }
  .exo-dr [style*="gap:48px"] { gap: 24px !important; }
  .exo-dr [style*="gap:40px"] { gap: 24px !important; }
}

/* ==========================================================================
   Светлая тема сайта: страница остаётся тёмной, но тема темы (app.css:4432)
   красит все p и h1..h6 в #161920 — возвращаем читаемость.
   ========================================================================== */
.white--theme .exo-dr h1, .white--theme .exo-dr h2, .white--theme .exo-dr h3,
.white--theme .exo-dr h4, .white--theme .exo-dr h5, .white--theme .exo-dr h6,
.white--theme .exo-dr p, .white--theme .exo-dr li, .white--theme .exo-dr span,
.white--theme .exo-dr div { color: inherit; }
.exo-dr .dr-grad { color: transparent; }
.white--theme .dr-main .reviews p { color: #fff; }
/* крошки лежат на нашем тёмном первом экране — в светлой теме тема красит их в #161920 */
body.white--theme:has(.dr-main) .breadcrumbs,
body.white--theme:has(.dr-main) .breadcrumbs a,
body.white--theme:has(.dr-main) .breadcrumbs span,
body.white--theme:has(.dr-main) .breadcrumbs p { color: #fff !important; }

/* На мобильной тема глушит абзацы жёстко: @media(max-width:767px){.white--theme p{color:#161920!important}}.
   Цвета из инлайновых стилей защищены своим !important на этапе сборки, здесь — те, у кого его нет. */
@media (max-width: 767px) {
  .white--theme .exo-dr p, .white--theme .exo-dr li,
  .white--theme .exo-dr h1, .white--theme .exo-dr h2, .white--theme .exo-dr h3 { color: inherit !important; }
  .white--theme .exo-dr { color: #fff !important; }
  .white--theme .exo-dr .dr-pill.cyan.filled { color: #161920 !important; }
  .white--theme .dr-main .reviews p, .white--theme .dr-main .reviews .reviews-item__txt { color: #fff !important; }
}