/* ============================================================
   Apex — блок «Наши отели для проживания», десктоп (Figma 73:497)
   Токены и размеры сняты 1:1 с макета:
   file mSYllUW4H5FrvWRUZH1C88, node 73:497
   ============================================================ */

.hotels {
  /* цвета из переменных Figma */
  --hotels-ink: #1f1f1f;        /* Black */
  --hotels-surface: #e4e2db;    /* Gray light */
  --hotels-accent: #fd4a22;     /* обводка активного превью */
  --hotels-page: #f3f2ee;       /* фон страницы под блоком */
  --hotels-white: #ffffff;

  /* геометрия */
  --hotels-content: 1280px;     /* контент-контейнер */
  --hotels-gutter: 80px;        /* поля 1440 → 1280 */
  --hotels-radius-lg: 20px;     /* большое фото и карточка */
  --hotels-radius-md: 16px;     /* превью */
  --hotels-radius-pill: 32px;   /* таб */

  /* шрифты: заголовки Bebas Neue Bold, текст Inter.
     В Bebas Neue с Google Fonts нет кириллицы, поэтому вторым идёт
     Alumni Sans — браузер подставит его только под русские глифы.
     По ширине он почти совпадает с кириллическим Bebas из макета
     (599 против 590 px на заголовке H2), Oswald был шире на 43%.
     Если есть лицензионный Bebas Neue Cyrillic — подключите его
     через @font-face и уберите Alumni Sans из стека. */
  --hotels-display: "Bebas Neue", "Alumni Sans", "Arial Narrow", sans-serif;
  --hotels-text: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  background: var(--hotels-page);
  color: var(--hotels-ink);
}

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

.hotels__inner {
  width: 100%;
  max-width: calc(var(--hotels-content) + var(--hotels-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--hotels-gutter);
}

/* ---------- заголовок: H2 = Bebas Neue Bold 60/65 ---------- */
.hotels__title {
  margin: 0;
  font-family: var(--hotels-display);
  font-weight: 700;
  font-size: 60px;
  line-height: 65px;
  text-align: center;
  text-transform: uppercase;
  color: var(--hotels-ink);
}

/* ---------- табы ---------- */
.hotels__tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 40px;   /* заголовок 65 → табы на y=105 */
}

.hotels__tab {
  flex: 1 0 0;
  min-width: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px 8px;         /* оптическая центровка Bebas */
  border: 0;
  border-radius: var(--hotels-radius-pill);
  background: var(--hotels-surface);
  color: var(--hotels-ink);
  font-family: var(--hotels-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;              /* в макете line-height равен кеглю */
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.hotels__tab:hover { background: #dad7cf; }          /* состояния hover в макете не заданы */
.hotels__tab:focus-visible { outline: 2px solid var(--hotels-accent); outline-offset: 2px; }

.hotels__tab[aria-selected="true"],
.hotels__tab[aria-selected="true"]:hover {
  background: var(--hotels-ink);
  color: var(--hotels-white);
}

/* ---------- панель: фото + карточка ---------- */
.hotels__panel { margin-top: 40px; }   /* табы 153 → контент на y=193 */

.hotels__stage {
  display: grid;
  grid-template-columns: 812fr 460fr;   /* на 1280 даёт ровно 812 и 460 */
  gap: 8px;
  min-height: 500px;                    /* между 1024 и 1440 колонки ужимаются пропорционально */
}

.hotels__photo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--hotels-radius-lg);
  background: var(--hotels-surface);
}

/* кроп из макета передаётся через --iw/--ih/--il/--it,
   по умолчанию — обычный cover */
.hotels__photo-img,
.hotels__thumb-img {
  position: absolute;
  left: var(--il, 0);
  top: var(--it, 0);
  width: var(--iw, 100%);
  height: var(--ih, 100%);
  max-width: none;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.hotels__photo-img { transition: opacity .2s ease; }
.hotels__photo.is-swapping .hotels__photo-img { opacity: 0; }

/* ---------- стрелки ---------- */
.hotels__arrows {
  position: absolute;
  left: 32px;
  bottom: 32px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.hotels__arrow {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 100px;
  background: var(--hotels-white);
  cursor: pointer;
  transition: background-color .16s ease;
}

.hotels__arrow:hover { background: #f0efeb; }
.hotels__arrow:focus-visible { outline: 2px solid var(--hotels-accent); outline-offset: 2px; }

.hotels__arrow-icon {
  width: 24px;
  height: 24px;
  display: block;
}

.hotels__arrow--prev .hotels__arrow-icon { transform: rotate(180deg); }

/* ---------- карточка с описанием ---------- */
.hotels__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  min-height: 500px;
  padding: 32px;
  border-radius: var(--hotels-radius-lg);
  background: var(--hotels-surface);
}

/* H3 = Bebas Neue Bold 32 */
.hotels__card-title {
  margin: 0;
  font-family: var(--hotels-display);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;              /* в макете line-height равен кеглю */
  text-transform: uppercase;
  color: var(--hotels-ink);
}

.hotels__card-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 396px;
  max-width: 100%;
}

.hotels__card-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hotels__lead {
  margin: 0;
  font-family: var(--hotels-text);
  font-weight: 500;
  font-size: 20px;
  line-height: 20px;
  letter-spacing: -0.02em;   /* −0.4px на 20px, как в макете */
  color: var(--hotels-ink);
}

/* Body = Inter Regular 16/20 */
.hotels__text {
  margin: 0;
  font-family: var(--hotels-text);
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: var(--hotels-ink);
}

/* ---------- лента превью ---------- */
.hotels__thumbs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 24px;   /* фото 500 → превью на y=524 */
}

.hotels__thumb {
  position: relative;
  height: 140px;
  padding: 0;
  border: 0;
  border-radius: var(--hotels-radius-md);
  overflow: hidden;
  background: var(--hotels-surface);
  cursor: pointer;
  /* активное превью в макете — рамка 2px со смещением 4px,
     радиус 16 + 4 = 20, как у прямоугольника image 91 */
  outline: 2px solid transparent;
  outline-offset: 4px;
  transition: outline-color .16s ease;
}

.hotels__thumb[aria-current="true"] { outline-color: var(--hotels-accent); }
.hotels__thumb:focus-visible { outline-color: var(--hotels-ink); }


/* ============================================================
   ПЛАНШЕТ — Figma 79:1895, 768 / контент 736, поля 16
   Большого фото и стрелок нет: карточка на всю ширину,
   под ней горизонтальная лента фото 736×500 (первое 710).
   ============================================================ */
@media (max-width: 1023px) {

  .hotels__inner {
    max-width: 768px;
    padding: 0 16px;
  }

  .hotels__title {
    font-size: 40px;
    line-height: 40px;
  }

  /* табы не растягиваются, а идут по контенту и скроллятся вбок */
  .hotels__tabs {
    margin-top: 36px;
    overflow-x: auto;
    margin-right: -16px;
    padding-right: 16px;
    scrollbar-width: none;
  }

  .hotels__tabs::-webkit-scrollbar { display: none; }

  .hotels__tab {
    flex: 0 0 auto;
  }

  .hotels__panel { margin-top: 24px; }

  /* фото уходит, карточка занимает всю ширину */
  .hotels__stage {
    display: block;
    height: auto;
    min-height: 0;   /* иначе ПК-шная высота 500 добавит пустоту под карточкой */
  }

  .hotels__photo { display: none; }

  .hotels__card {
    height: auto;
    min-height: 384px;
  }

  /* лента превью превращается в ленту больших кадров */
  .hotels__thumbs {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    margin-top: 24px;
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .hotels__thumbs::-webkit-scrollbar { display: none; }

  .hotels__thumb {
    flex: 0 0 736px;
    max-width: calc(100vw - 32px);
    height: 500px;
    border-radius: var(--hotels-radius-lg);
    outline: none;
    scroll-snap-align: start;
  }

  /* первый кадр в макете чуть уже — из-под него выглядывает следующий */
  .hotels__thumb:first-child { flex-basis: 710px; }

  .hotels__thumb[aria-current="true"] { outline: none; }
  .hotels__thumb:focus-visible { outline: 2px solid var(--hotels-ink); outline-offset: -4px; }
}


/* ============================================================
   МОБИЛЬНАЯ — Figma 77:555, 360 / контент 328, поля 16
   ============================================================ */
@media (max-width: 767px) {

  .hotels__inner {
    max-width: none;
    padding: 0 16px;
  }

  .hotels__title {
    font-size: 36px;
    line-height: 36px;
  }

  .hotels__tabs { margin-top: 32px; }

  .hotels__tab {
    height: 36px;
    padding: 12px 12px 8px;
    font-size: 16px;
  }

  .hotels__panel { margin-top: 24px; }

  .hotels__card { padding: 32px 16px; }

  .hotels__card-title { font-size: 24px; }

  .hotels__card-body {
    width: 285px;
    gap: 16px;
  }

  .hotels__card-group { gap: 8px; }

  /* на мобильной кегль в макете меньше, интерлиньяж тот же 20 */
  .hotels__lead { font-size: 16px; }
  .hotels__text { font-size: 14px; }

  .hotels__thumbs {
    gap: 8px;
    margin-top: 16px;
  }

  .hotels__thumb {
    flex-basis: 310px;
    height: 240px;
  }

  .hotels__thumb:first-child { flex-basis: 310px; }
}


/* ============================================================
   Integration with the Moto Africa landing
   The landing applies padding to every <section>, so the block
   explicitly controls its own outer spacing and preserves the
   site's existing continuous section rhythm.
   ============================================================ */
.hotels {
  padding: 0 0 100px;
}

#hotels + #motorcycles {
  padding-top: 0;
}

@media (max-width: 1023px) {
  .hotels { padding-bottom: 80px; }
}

@media (max-width: 767px) {
  .hotels { padding-bottom: 64px; }
}