/*
 * Главная страница сайта (/).
 *
 * Шапка, меню разделов и подвал берутся из общего layout сайта
 * (new_frontend.master) — здесь только стили содержимого страницы.
 *
 * Файл намеренно не участвует в сборке mix (public/new_frontend/all.css):
 * он подключается напрямую из шаблона черновика и не может задеть боевые
 * страницы. Все классы имеют префикс .ti- и живут внутри .ti-page.
 */

.ti-page {
  --ti-primary: #5d4be0;
  --ti-primary-dark: #4b39c4;
  --ti-primary-soft: #efecfd;
  --ti-text: #171a26;
  --ti-muted: #6e7385;
  --ti-border: #e7e9f2;
  --ti-bg: #f5f6fb;
  --ti-white: #fff;
  --ti-radius: 16px;
  --ti-radius-sm: 10px;
  --ti-shadow: 0 2px 10px rgba(23, 26, 38, .06);
  --ti-shadow-hover: 0 8px 24px rgba(23, 26, 38, .12);
  --ti-container: 1200px;

  color: var(--ti-text);
  background: var(--ti-white);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Локальный сброс: на странице действуют общие стили сайта и bootstrap,
   поэтому базовые свойства задаём явно для всего, что лежит внутри .ti-page. */
.ti-page *,
.ti-page *::before,
.ti-page *::after {
  box-sizing: border-box;
}

.ti-page img {
  max-width: 100%;
}

.ti-page a {
  color: inherit;
  text-decoration: none;
}

.ti-page a:hover {
  text-decoration: none;
}

.ti-page h1,
.ti-page h2,
.ti-page h3,
.ti-page p,
.ti-page ul,
.ti-page ol {
  margin: 0;
  padding: 0;
  font-family: inherit;
}

.ti-page ul,
.ti-page ol {
  list-style: none;
}

.ti-page h1,
.ti-page h2,
.ti-page h3 {
  color: inherit;
  text-transform: none;
}

.ti-page button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.ti-page input,
.ti-page select {
  font-family: inherit;
}

.ti-container {
  width: 100%;
  max-width: var(--ti-container);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------------------------------------------------------------- кнопки */

.ti-page .ti-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .15s, box-shadow .15s, color .15s;
}

.ti-page .ti-btn--primary {
  color: var(--ti-white);
  background: var(--ti-primary);
}

.ti-page .ti-btn--primary:hover {
  color: var(--ti-white);
  background: var(--ti-primary-dark);
}

.ti-page .ti-btn--light {
  color: var(--ti-white);
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.ti-page .ti-btn--light:hover {
  background: rgba(255, 255, 255, .28);
}

/* ---------------------------------------------------------------- первый экран */

.ti-hero {
  position: relative;
  /* Низ блока задаёт полоса фактов (.ti-hero__facts) своими отступами. */
  padding: 64px 0 0;
  background-color: #2a2745;
  background-position: center;
  background-size: cover;
  color: var(--ti-white);
}

.ti-hero__text {
  max-width: 560px;
}

.ti-page .ti-hero h1 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--ti-white);
}

.ti-hero__text p {
  margin-top: 16px;
  font-size: 15px;
  color: rgba(255, 255, 255, .88);
}

.ti-searchbox {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 56px;
  padding: 10px;
  border-radius: 999px;
  background: var(--ti-white);
  box-shadow: 0 10px 30px rgba(16, 14, 40, .18);
}

.ti-searchbox__field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ti-muted);
  background: var(--ti-bg);
}

.ti-searchbox__field--geo {
  flex: 1 1 40%;
}

.ti-searchbox__field--entity {
  flex: 1 1 32%;
}

.ti-page .ti-searchbox__field input {
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ti-text);
  font-size: 14px;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}

/* ------------------------------------------------- список «Что вы ищете?» */

.ti-select {
  position: relative;
  width: 100%;
}

.ti-page .ti-select__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--ti-text);
  text-align: left;
}

.ti-select__value {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ti-select.is-empty .ti-select__value {
  color: var(--ti-muted);
}

.ti-select__caret {
  flex: 0 0 auto;
  color: var(--ti-muted);
  transition: transform .15s;
}

.ti-select.is-open .ti-select__caret {
  transform: rotate(180deg);
}

.ti-select__list {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  right: -14px;
  z-index: 40;
  max-height: 300px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-white);
  box-shadow: 0 16px 40px rgba(16, 14, 40, .22);
}

.ti-select__list[hidden] {
  display: none;
}

.ti-select__option {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ti-text);
  cursor: pointer;
  outline: none;
}

.ti-select__option:hover,
.ti-select__option:focus {
  background: var(--ti-primary-soft);
}

.ti-select__option.is-selected {
  color: var(--ti-white);
  background: var(--ti-primary);
}

/* Плейсхолдер остаётся приглушённым, даже когда он «выбран», —
   заливкой отмечаем только реальную услугу. */
.ti-select__option[data-value=""],
.ti-select__option[data-value=""].is-selected {
  color: var(--ti-muted);
  background: none;
}

.ti-select__option[data-value=""]:hover,
.ti-select__option[data-value=""]:focus {
  background: var(--ti-primary-soft);
}

.ti-searchbox__submit {
  flex: 0 0 auto;
  min-width: 130px;
}

/* Кнопка «Найти» — в цвет шапки сайта (.header, #6061aa из all.css). */
.ti-page .ti-searchbox__submit {
  background: #6061aa;
}

.ti-page .ti-searchbox__submit:hover {
  background: #545596;
}

.ti-searchbox__pin,
.ti-searchbox__lens,
.ti-searchbox__caret {
  flex: 0 0 auto;
}

.ti-page .ti-searchbox__field--geo .js-ti-geo-input {
  cursor: pointer;
}

/* ------------------------------------------------- выбор страны и города */

.ti-geo {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 40;
  width: 720px;
  max-width: calc(100vw - 32px);
  padding: 18px 20px 20px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-white);
  box-shadow: 0 16px 40px rgba(16, 14, 40, .22);
  color: var(--ti-text);
  cursor: default;
}

.ti-geo[hidden] {
  display: none;
}

.ti-geo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ti-geo__title {
  font-size: 18px;
  font-weight: 700;
}

.ti-page .ti-geo__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--ti-white);
  background: var(--ti-primary);
}

.ti-geo__close:hover {
  background: var(--ti-primary-dark);
}

.ti-geo__search {
  position: relative;
  margin-top: 14px;
}

.ti-page .ti-geo__search input {
  width: 100%;
  height: 40px;
  padding: 0 38px 0 14px;
  border: 1px solid var(--ti-border);
  border-radius: 999px;
  background: var(--ti-white);
  font-size: 14px;
  color: var(--ti-text);
  outline: none;
}

.ti-page .ti-geo__search input:focus {
  border-color: var(--ti-primary);
}

.ti-geo__search svg {
  position: absolute;
  top: 50%;
  right: 14px;
  margin-top: -7px;
  color: var(--ti-muted);
  pointer-events: none;
}

.ti-geo__reset-row {
  margin-top: 10px;
}

.ti-geo__reset-row[hidden] {
  display: none;
}

.ti-page .ti-geo__reset {
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  color: var(--ti-primary);
  text-decoration: underline;
}

.ti-geo__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 14px;
}

.ti-geo__col-title {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ti-muted);
}

.ti-geo__list {
  max-height: 230px;
  overflow-y: auto;
  padding-right: 4px;
}

.ti-geo__list li {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
}

.ti-geo__list li:hover {
  background: var(--ti-primary-soft);
}

.ti-geo__list li.is-active {
  color: var(--ti-white);
  background: var(--ti-primary);
}

.ti-geo__list li.is-all {
  font-weight: 600;
  color: var(--ti-primary);
}

.ti-geo__list li b {
  color: var(--ti-primary);
}

.ti-geo__list li.is-active b {
  color: var(--ti-white);
}

.ti-geo__list small {
  display: block;
  font-size: 11px;
  color: var(--ti-muted);
}

.ti-geo__list li.is-active small {
  color: rgba(255, 255, 255, .8);
}

/* Селектор с .ti-page — иначе отступы перебивает сброс .ti-page ul выше. */
.ti-page .ti-hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 36px;
  margin-top: 10px;
  padding-bottom: 10px;
  font-size: 15px;
  line-height: 1.2;
  color: rgba(255, 255, 255, .92);
}

.ti-hero__facts li {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ti-hero__facts svg {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  opacity: .85;
}

/* ---------------------------------------------------------------- секции */

.ti-section {
  padding: 44px 0;
}

.ti-section--tight {
  padding: 12px 0;
}

.ti-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.ti-page .ti-section__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.2px;
}

.ti-page .ti-section__title--center {
  margin-bottom: 24px;
  text-align: center;
}

/* Ссылки «Все …» во всех секциях выглядят одинаково. Состояния :link/:visited
   перечислены явно и селектор усилен тегом: иначе посещённая ссылка окрашивалась
   стилями браузера и общего all.css, и одинаковые по разметке ссылки выглядели
   по-разному — крупнее и серым вместо фиолетового. */
.ti-page a.ti-section__more,
.ti-page a.ti-section__more:link,
.ti-page a.ti-section__more:visited {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ti-primary);
  text-decoration: none;
}

.ti-page a.ti-section__more:hover {
  color: var(--ti-primary-dark);
}

.ti-section__more::after {
  content: "›";
  font-size: 16px;
  line-height: 1;
}

/* ------------------------------------------- две секции в ряд (экскурсии/туры) */

.ti-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

/* Если один из блоков пуст — второй занимает всю ширину. */
.ti-duo--single {
  grid-template-columns: 1fr;
}

.ti-duo__col {
  min-width: 0;
}

.ti-duo .ti-section__head {
  margin-bottom: 14px;
}

.ti-duo .ti-section__title {
  font-size: 20px;
}

/*
 * В половинной колонке показываем по три карточки — и у городов, и у туров:
 * на четырёх название тура разваливается на четыре строки.
 */
@media (min-width: 901px) {
  .ti-duo:not(.ti-duo--single) .ti-city,
  .ti-duo:not(.ti-duo--single) .ti-tour {
    flex: 0 0 calc((100% - 28px) / 3);
    width: auto;
    /* Карточка — колонка: подпись прижата вниз, остальное отдано фотографии. */
    display: flex;
    flex-direction: column;
  }

  /*
   * Колонки грида и так одной высоты, поэтому растягиваем на неё карусель и
   * карточки, а излишек отдаём фотографии: обе ленты заканчиваются на одной
   * линии, сколько бы строк ни занимали названия.
   */
  .ti-duo:not(.ti-duo--single) .ti-duo__col {
    display: flex;
    flex-direction: column;
  }

  .ti-duo:not(.ti-duo--single) .ti-carousel {
    flex: 1 1 auto;
  }

  .ti-duo:not(.ti-duo--single) .ti-carousel__track {
    height: 100%;
  }

  .ti-duo:not(.ti-duo--single) .ti-city__image,
  .ti-duo:not(.ti-duo--single) .ti-tour__image {
    flex: 1 1 auto;
    height: auto;
    min-height: 118px;
  }

  .ti-duo:not(.ti-duo--single) .ti-city__body,
  .ti-duo:not(.ti-duo--single) .ti-tour__body {
    flex: 0 0 auto;
  }
}

/* ---------------------------------------------------------------- рубрики */

.ti-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ti-category {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-white);
  transition: box-shadow .15s, transform .15s;
}

.ti-category:hover {
  transform: translateY(-2px);
  box-shadow: var(--ti-shadow-hover);
}

.ti-category__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.ti-category__icon--violet { color: #5d4be0; background: #eeeafd; }
.ti-category__icon--orange { color: #e8783a; background: #fdeee3; }
.ti-category__icon--green  { color: #2fa36b; background: #e3f6ec; }
.ti-category__icon--blue   { color: #3b82d6; background: #e6f0fc; }
.ti-category__icon--teal   { color: #1f9c9c; background: #e0f5f5; }
.ti-category__icon--yellow { color: #c99a12; background: #fcf3dc; }
.ti-category__icon--indigo { color: #6455c9; background: #ebe9fa; }
.ti-category__icon--pink   { color: #d4508f; background: #fbe8f1; }

.ti-category__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.ti-category__text {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ti-muted);
}

/* ---------------------------------------------------------------- баннер запроса */

/* Иллюстрация — фон всего блока: слева фотография с дудлами, справа небо,
   на котором и лежит текст. Первая колонка сетки пустая — она отдана фото. */
.ti-request {
  position: relative;
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr) auto;
  align-items: center;
  min-height: 290px;
  overflow: hidden;
  border-radius: var(--ti-radius);
  background-color: #e9eefa;
  background-image: url("../img/request-banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* Сдвиг вверх: так в кадр попадают и дудлы, и лица героев. */
  background-position: left 40%;
}

/* Правая часть засветляется до пастельной: небо и горы на фотографии слишком
   насыщенные, тёмный текст на них не читался бы. Слева снимок остаётся ярким. */
.ti-request::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 30%,
      rgba(255, 255, 255, .55) 46%,
      rgba(255, 255, 255, .85) 64%,
      rgba(255, 255, 255, .92) 100%);
  pointer-events: none;
}

/* Та же картинка отдельным элементом — показывается только на узких экранах,
   где широкий фон превратился бы в полоску. */
.ti-request__photo {
  display: none;
}

.ti-request__body {
  position: relative;
  z-index: 1;
  grid-column: 2;
  padding: 26px 24px;
}

.ti-request__lead {
  font-size: 20px;
  line-height: 1.25;
  color: var(--ti-muted);
}

.ti-request__title {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
}

.ti-request__text {
  margin-top: 12px;
  max-width: 460px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ti-muted);
}

.ti-request__action {
  position: relative;
  z-index: 1;
  grid-column: 3;
  padding: 26px 32px 26px 12px;
  text-align: center;
}

.ti-request__note {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--ti-muted);
}

/* ---------------------------------------------------------------- карусели */

.ti-carousel {
  position: relative;
}

.ti-carousel__track {
  display: flex;
  align-items: stretch;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.ti-carousel__track::-webkit-scrollbar {
  display: none;
}

.ti-carousel__track > * {
  scroll-snap-align: start;
}

.ti-page .ti-carousel__nav {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  padding: 0;
  border: 1px solid var(--ti-border);
  border-radius: 50%;
  color: var(--ti-text);
  background: var(--ti-white);
  box-shadow: var(--ti-shadow);
}

.ti-carousel__nav:hover {
  color: var(--ti-primary);
}

.ti-carousel__nav--prev { left: -14px; }
.ti-carousel__nav--next { right: -14px; }

.ti-carousel.is-scrollable .ti-carousel__nav {
  display: flex;
}

/* В начале и в конце ленты лишнюю стрелку прячем, а не гасим. */
.ti-carousel.is-scrollable .ti-carousel__nav[disabled] {
  display: none;
}

/* ------------------------------------------- карточка гида (как на главной) */

/*
 * Сама карточка — .guide-item из all.css, та же, что в блоке «Гиды» на
 * текущей главной. Здесь только её ширина в ленте (та же, что на черновике
 * города, redesign/css/place.css) и откат локального сброса .ti-page button,
 * который задел бы кнопку «Отправить запрос».
 */
.ti-page .ti-carousel .guide-item {
  flex: 0 0 300px;
  width: 300px;
}

.ti-page .guide-item .send-message-list-guide {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

/* ---------------------------------------------------------------- карточка города */

/* Карточка города устроена как карточка тура: фото сверху, подпись под ним. */
.ti-city {
  display: block;
  flex: 0 0 190px;
  width: 190px;
  overflow: hidden;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  color: var(--ti-text);
  background: var(--ti-white);
  transition: box-shadow .15s;
}

.ti-city:hover {
  box-shadow: var(--ti-shadow-hover);
}

.ti-city__image {
  display: block;
  width: 100%;
  height: 130px;
  object-fit: cover;
}

.ti-city__body {
  display: block;
  padding: 10px 12px 12px;
}

.ti-city__name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.ti-city:hover .ti-city__name {
  color: var(--ti-primary);
}

.ti-city__count {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ti-muted);
}

/* ---------------------------------------------------------------- карточка тура */

.ti-tour {
  flex: 0 0 216px;
  width: 216px;
  overflow: hidden;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-white);
  transition: box-shadow .15s;
}

.ti-tour:hover {
  box-shadow: var(--ti-shadow-hover);
}

.ti-tour__image {
  display: block;
  height: 130px;
}

.ti-tour__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ti-tour__body {
  padding: 12px 14px 14px;
}

.ti-tour__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.ti-tour__name:hover {
  color: var(--ti-primary);
}

.ti-tour__city {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ti-muted);
}

.ti-tour__price {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ti-primary);
}

.ti-tour__price span {
  font-size: 12px;
  font-weight: 400;
  color: var(--ti-muted);
}

/* ---------------------------------------------------------------- направления */

.ti-direction {
  position: relative;
  flex: 0 0 226px;
  width: 226px;
  height: 160px;
  overflow: hidden;
  border-radius: var(--ti-radius);
  color: var(--ti-white);
}

.ti-direction__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.ti-direction:hover .ti-direction__image {
  transform: scale(1.05);
}

/*
 * Подписи лежат прямо на фотографии, а фотографии бывают светлые (флаги, небо),
 * поэтому затемнение должно набирать плотность выше строки с названием.
 */
.ti-direction__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 16px 14px;
  background: linear-gradient(180deg,
      rgba(16, 14, 40, 0) 0%,
      rgba(16, 14, 40, .45) 40%,
      rgba(16, 14, 40, .78) 70%,
      rgba(16, 14, 40, .92) 100%);
  text-shadow: 0 1px 3px rgba(16, 14, 40, .5);
}

.ti-direction__name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--ti-white);
}

.ti-direction__count {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: rgba(255, 255, 255, .84);
}

/* ---------------------------------------------------------------- инфо-плитки */

.ti-info-links {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 16px;
  border-radius: var(--ti-radius);
  background: var(--ti-bg);
}

.ti-info-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: var(--ti-radius-sm);
  background: var(--ti-white);
  transition: box-shadow .15s;
}

.ti-info-link:hover {
  box-shadow: var(--ti-shadow);
}

/* Плитка без ссылки: ведёт себя как обычный блок, без реакции на наведение. */
.ti-info-link--static:hover {
  box-shadow: none;
}

.ti-info-link__icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.ti-info-link__icon--violet { color: #5d4be0; background: #eeeafd; }
.ti-info-link__icon--orange { color: #e8783a; background: #fdeee3; }
.ti-info-link__icon--green  { color: #2fa36b; background: #e3f6ec; }
.ti-info-link__icon--pink   { color: #d4508f; background: #fbe8f1; }

.ti-info-link__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
}

.ti-info-link__text {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ti-muted);
}

/* ---------------------------------------------------------------- почему выбирают */

.ti-why {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  align-items: center;
  padding: 28px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-white);
}

.ti-why__list ul {
  margin-top: 16px;
  display: grid;
  gap: 9px;
}

.ti-why__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  color: var(--ti-text);
}

.ti-why__list svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #2fa36b;
}

.ti-why__numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* Цифры лежат прямо на общей подложке блока: без своих карточек, с иконкой. */
.ti-number {
  text-align: center;
}

.ti-number__icon {
  display: block;
  margin-bottom: 10px;
  color: var(--ti-primary);
}

.ti-number__icon--orange {
  color: #f2693c;
}

.ti-number__value {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.5px;
  color: var(--ti-text);
}

.ti-number__label {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ti-muted);
}

/* ---------------------------------------------------------------- как это работает */

/* Шаги — такие же карточки, как плитки рубрик: белый фон, рамка, подъём при
   наведении. Серой подложки под ними нет: вместе с белыми карточками она
   давала полосатый фон, из-за которого блок выпадал из общего ритма. */
.ti-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 44px;
}

.ti-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-white);
  transition: box-shadow .15s, transform .15s;
}

.ti-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--ti-shadow-hover);
}

/* Переход к следующему шагу: тонкий пунктир со стрелкой в промежутке сетки. */
.ti-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -44px;
  width: 44px;
  height: 10px;
  margin-top: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M2 5h26' fill='none' stroke='%23c3c8dc' stroke-width='1.4' stroke-linecap='round' stroke-dasharray='2 5'/%3E%3Cpath d='M31 1.6L34.6 5 31 8.4' fill='none' stroke='%23c3c8dc' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 40px 10px;
}

.ti-step__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--ti-white);
  background: var(--ti-primary);
  font-size: 14px;
  font-weight: 700;
}

.ti-step__title {
  display: block;
  padding-top: 5px;
  font-size: 15px;
  font-weight: 600;
}

.ti-step__text {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ti-muted);
}

/* ---------------------------------------------------------------- статьи */

.ti-articles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.ti-article {
  overflow: hidden;
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-white);
  transition: box-shadow .15s;
}

.ti-article:hover {
  box-shadow: var(--ti-shadow-hover);
}

.ti-article__image {
  position: relative;
  display: block;
  height: 150px;
}

.ti-article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ti-article__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  font-size: 11px;
  font-weight: 600;
  color: var(--ti-primary);
}

.ti-article__body {
  padding: 14px;
}

.ti-article__name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}

.ti-article__name:hover {
  color: var(--ti-primary);
}

.ti-article__meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ti-muted);
}

/* ---------------------------------------------------------------- вопросы */

.ti-faq {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.ti-faq__item {
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius-sm);
  background: var(--ti-white);
  overflow: hidden;
}

.ti-page .ti-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 14px;
  font-weight: 600;
}

.ti-faq__question[aria-expanded="true"] {
  color: var(--ti-primary);
}

.ti-faq__icon {
  flex: 0 0 auto;
  color: var(--ti-muted);
  transition: transform .15s;
}

.ti-faq__question[aria-expanded="true"] .ti-faq__icon {
  transform: rotate(180deg);
}

.ti-faq__answer {
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ti-muted);
}

.ti-faq__answer[hidden] {
  display: none;
}

/* ---------------------------------------------------------------- нижний призыв */

.ti-cta {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 20px;
  min-height: 150px;
  padding: 24px 0;
  /* Без overflow: hidden — иначе окно выбора страны и списка услуг из
     нижней формы обрезается по границе блока. Вуаль ::before и фон за
     пределы блока не выходят и без него. */
  background-color: #4b39c4;
  background-image: url("../img/cta-banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* Кадр 3.2:1, в полосу 150px попадает около четверти его высоты — фигура
     целиком не помещается (для этого блоку нужно ~320px). 62% по вертикали —
     срез, где видны горы, кромка озера и узнаваемый силуэт справа: шляпа,
     плечи и рюкзак. Ниже голова уходит за кадр, выше остаётся пустое небо. */
  background-position: center 62%;
  color: var(--ti-white);
}

.ti-cta > .ti-container {
  width: 100%;
}

/* Фиолетовая вуаль поверх фотографии: слева плотная — там белый заголовок,
   справа заметно легче, чтобы озеро и горы остались видны. */
.ti-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
      rgba(58, 41, 155, .74) 0%,
      rgba(70, 52, 185, .56) 30%,
      rgba(96, 70, 212, .28) 62%,
      rgba(106, 75, 226, .1) 100%);
  pointer-events: none;
}

.ti-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.ti-cta__text {
  flex: 0 1 auto;
}

.ti-page .ti-cta h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ti-white);
}

/* Подпись в две строки, как на макете, — иначе она тянется во всю ширину. */
.ti-cta__text p {
  max-width: 300px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .88);
}

/* Компактный вариант формы: не растягивается, прижат вправо, поля внутри
   белой пилюли разделены тонкой чертой, а не серыми заливками. */
.ti-searchbox--compact {
  flex: 0 1 560px;
  gap: 0;
  margin-top: 0;
  padding: 6px;
}

.ti-searchbox--compact .ti-searchbox__field {
  height: 40px;
  border-radius: 0;
  background: none;
}

.ti-searchbox--compact .ti-searchbox__field--geo {
  flex: 1 1 46%;
  padding-left: 12px;
}

.ti-searchbox--compact .ti-searchbox__field--entity {
  flex: 1 1 40%;
  border-left: 1px solid var(--ti-border);
}

/* Нижняя форма стоит у самого подвала — снизу места нет, поэтому окно
   выбора страны и список услуг раскрываются вверх, над полем. */
.ti-searchbox--compact .ti-geo,
.ti-searchbox--compact .ti-select__list {
  top: auto;
  bottom: calc(100% + 10px);
  box-shadow: 0 -12px 40px rgba(16, 14, 40, .22);
}

.ti-searchbox--compact .ti-select__button {
  height: 40px;
}

.ti-page .ti-searchbox--compact .ti-searchbox__submit {
  min-width: 104px;
  height: 40px;
  margin-left: 8px;
}

/* ---------------------------------------------------------------- адаптив */

@media (max-width: 1100px) {
  .ti-categories,
  .ti-info-links,
  .ti-articles,
  .ti-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  /* В два столбца стрелка нужна только внутри строки. */
  .ti-step:nth-child(2n)::after {
    display: none;
  }

  /* Широкий просвет остаётся между колонками — под стрелку, по вертикали он ни к чему. */
  .ti-steps {
    gap: 20px 44px;
  }

  .ti-why {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 900px) {
  .ti-hero {
    padding-top: 44px;
  }

  /* Колонки экскурсий и туров встают друг под друга. */
  .ti-duo {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .ti-page .ti-hero h1 {
    font-size: 30px;
  }

  .ti-searchbox {
    flex-wrap: wrap;
    margin-top: 32px;
    border-radius: var(--ti-radius);
  }

  .ti-searchbox__field {
    flex: 1 1 100%;
  }

  .ti-searchbox__submit {
    flex: 1 1 100%;
  }

  /* Компактная форма встаёт в столбик: разделитель между полями не нужен,
     возвращаем им обычные заливки и высоту. */
  .ti-searchbox--compact {
    flex: 1 1 100%;
    gap: 10px;
    padding: 10px;
  }

  .ti-searchbox--compact .ti-searchbox__field {
    height: 44px;
    border-left: 0;
    border-radius: 999px;
    background: var(--ti-bg);
  }

  .ti-searchbox--compact .ti-select__button,
  .ti-page .ti-searchbox--compact .ti-searchbox__submit {
    height: 44px;
  }

  .ti-page .ti-searchbox--compact .ti-searchbox__submit {
    margin-left: 0;
  }

  /* Места под кнопку справа уже нет — она уходит под текст, фото остаётся фоном. */
  .ti-request {
    grid-template-columns: 38% minmax(0, 1fr);
    min-height: 270px;
  }

  .ti-request__body {
    padding-bottom: 0;
  }

  .ti-request__action {
    grid-column: 2;
    padding: 14px 24px 26px;
    text-align: left;
  }
}

@media (max-width: 760px) {
  /* Широкая иллюстрация фоном превратилась бы в полоску: показываем её
     отдельной картинкой сверху, а текст кладём на ровный светлый фон. */
  .ti-request {
    grid-template-columns: 1fr;
    min-height: 0;
    background-image: linear-gradient(90deg, #ece7fb 0%, #f2eefe 55%, #f9f1f7 100%);
  }

  .ti-request::before {
    display: none;
  }

  .ti-request__photo {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: left 40%;
  }

  .ti-request__body,
  .ti-request__action {
    grid-column: 1;
  }

  .ti-request__body {
    padding: 20px 20px 0;
  }

  .ti-request__action {
    padding: 14px 20px 22px;
  }

  /* Три колонки в ширину экрана не помещаются — показываем их друг под другом. */
  .ti-geo__cols {
    grid-template-columns: 1fr;
  }

  .ti-geo__list {
    max-height: 150px;
  }

  .ti-section {
    padding: 32px 0;
  }

  .ti-page .ti-section__title {
    font-size: 19px;
  }

  .ti-categories,
  .ti-info-links,
  .ti-articles,
  .ti-steps,
  .ti-why__numbers {
    grid-template-columns: 1fr;
  }

  /* В одну колонку шаги идут сверху вниз — горизонтальные стрелки убираем. */
  .ti-step::after {
    display: none;
  }

  .ti-steps {
    gap: 14px;
  }

  .ti-page .ti-carousel__nav {
    display: none !important;
  }

  /* Лента во всю ширину экрана с внутренним отступом под край контейнера.
     scroll-padding обязателен: без него snap-точка start выравнивает первую
     карточку по краю самого трека, игнорируя padding, и лента сама уезжает
     на 16px влево — карточки оказываются левее заголовков. */
  .ti-carousel__track {
    margin: 0 -16px;
    padding: 0 16px 4px;
    scroll-padding: 0 16px;
  }

  .ti-cta {
    min-height: 0;
  }

  .ti-cta__inner {
    gap: 20px;
  }

  .ti-page .ti-cta h2 {
    font-size: 22px;
  }
}

@media (max-width: 520px) {
  .ti-page .ti-hero h1 {
    font-size: 25px;
  }

  .ti-page .ti-hero__facts {
    gap: 8px 18px;
    font-size: 13px;
  }

  .ti-tour {
    flex-basis: 200px;
    width: 200px;
  }

  .ti-page .ti-carousel .guide-item {
    flex-basis: 260px;
    width: 260px;
  }

  .ti-direction {
    flex-basis: 180px;
    width: 180px;
    height: 130px;
  }
}