/* ============================================================
   layout.css — сетка · header · hero · footer · мобильная шторка
   Только геометрия и позиционирование. Цвет/скин — в components.css.
   ============================================================ */

/* ============================================================
   ГЕОМЕТРИЯ БАННЕРА HERO
   Инсет общий: по нему выравнивается и контент hero, и содержимое шапки,
   которая лежит поверх баннера (иначе светлый текст уходит на белый фон страницы).
   ============================================================ */
:root{
  --hero-inset:var(--s-3);       /* баннер: 12px слева и справа */
  --hero-top:var(--s-3);         /* отступ сверху 12px — для шапки и hero */
  --hero-radius:var(--r-xl);
  --hero-gutter:calc(var(--hero-inset) + 50px);   /* поле от края баннера до контента: 50px */
}

/* Отступ сверху для шапки и hero: шапка лежит поверх баннера,
   поэтому сдвигается весь верхний блок страницы. */
body{padding-top:var(--hero-top);}

/* ============================================================
   ШАПКА — геометрия и sticky
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:var(--z-header);
  height:88px;
  transition:height var(--t-base) var(--ease),
             background-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease),
             color var(--t-base) var(--ease);
}
.site-header.is-scrolled{height:64px;}
.site-header.is-scrolled .site-header__logo{opacity:1;visibility:visible;}

/* Шапка — прозрачный оверлей поверх hero: sticky резервирует место в потоке,
   поэтому контент (hero) подтягивается под неё на высоту шапки. */
#main{margin-top:-88px;}

/* Контейнеры шапки и hero — почти во всю ширину баннера:
   без ограничения 1280px, поле от края баннера 20px. */
.site-header__inner,
.hero > .container{
  max-width:none;
  padding-inline:var(--hero-gutter);
}
.site-header__inner{
  display:flex;
  align-items:center;
  gap:var(--s-4);
  height:100%;
}

/* Логотип: на первом экране скрыт, проявляется в состоянии .is-scrolled.
   Место резервируется (visibility, не display) — меню не прыгает при скролле. */
.site-header__logo{
  opacity:0;
  visibility:hidden;
  transition:opacity var(--t-base) var(--ease), visibility var(--t-base) var(--ease);
  flex:0 0 auto;
  font-family:var(--font-display);
  font-weight:var(--fw-med);
  font-size:var(--fs-lg);
  letter-spacing:.08em;
  line-height:1;
  white-space:nowrap;
}
.site-header__logo span{font-weight:var(--fw-reg);opacity:.85;}

/* Навигация (десктоп): прижата вправо, до группы сервисов — 60px */
.site-nav{display:none;margin-left:auto;}
.site-nav__list{display:flex;align-items:center;gap:var(--s-6);}
.site-nav__item{position:static;}          /* мега-меню тянется по контейнеру */
.site-nav__link{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  font-size:var(--fs-sm);
  font-weight:var(--fw-med);
  line-height:1;
  padding-block:var(--s-2);
  white-space:nowrap;
}

/* Правая группа сервисов — выровнена по правому краю баннера */
.site-header__actions{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  margin-left:auto;                     /* без меню (мобильный/планшет) прижимается вправо сама */
}
@media (min-width:1024px){
  /* отступ от меню до телефона ровно 80px: вычитаем flex-gap контейнера */
  .site-header__actions{margin-left:calc(80px - var(--s-4));}
}
.site-header__phone{display:none;font-size:var(--fs-sm);font-weight:var(--fw-semi);white-space:nowrap;}
.lang-switch{display:none;align-items:center;gap:var(--s-1);font-size:var(--fs-xs);font-weight:var(--fw-semi);}
/* «Войти» и «Забронировать» — одинаковая геометрия, отличаются только иконкой */
.site-header__act{
  display:none;
  align-items:center;
  gap:var(--s-1);
  font-size:var(--fs-sm);
  font-weight:var(--fw-med);
  white-space:nowrap;
}

/* Бургер (мобильный) */
.burger{
  display:inline-flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;height:44px;
  padding:10px;
  margin-left:var(--s-1);
}
.burger span{display:block;height:2px;width:100%;background:currentColor;border-radius:var(--r-pill);transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);}

/* ——— МЕГА-МЕНЮ — позиционирование ——— */
.mega-menu{
  position:absolute;
  left:0;right:0;
  top:100%;
  z-index:var(--z-dropdown);
  padding-block:var(--s-4);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity var(--t-base) var(--ease),
             transform var(--t-base) var(--ease),
             visibility var(--t-base) var(--ease);
}
.mega-menu.is-open{opacity:1;visibility:visible;transform:none;}
.mega-menu__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--s-8);
}
.mega-menu__col-title{margin-bottom:var(--s-3);}
.mega-menu__list{display:flex;flex-direction:column;gap:var(--s-2);}
.mega-menu__link{display:flex;align-items:baseline;gap:var(--s-2);font-size:var(--fs-sm);padding-block:var(--s-1);}
.mega-menu__city{margin-left:auto;font-size:var(--fs-xs);}
.mega-menu__footer{margin-top:var(--s-5);padding-top:var(--s-4);}

/* ============================================================
   МОБИЛЬНАЯ ШТОРКА
   ============================================================ */
.drawer{
  position:fixed;
  inset:0;
  z-index:var(--z-overlay);
  display:flex;
  flex-direction:column;
  transform:translateX(100%);
  transition:transform var(--t-slow) var(--ease);
  visibility:hidden;
}
.drawer.is-open{transform:translateX(0);visibility:visible;}
.drawer__head{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;flex:0 0 auto;
  padding-inline:var(--s-4);
}
.drawer__body{flex:1 1 auto;overflow-y:auto;padding:var(--s-4);}
.drawer__foot{flex:0 0 auto;padding:var(--s-4);}
.drawer__foot .btn{width:100%;}

/* Аккордеон по брендам */
.acc__item{border-bottom:1px solid var(--th-accent-line);}
.acc__head{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding-block:var(--s-4);
  font-size:var(--fs-md);font-weight:var(--fw-semi);
  text-align:left;
}
.acc__icon{transition:transform var(--t-base) var(--ease);}
.acc__head[aria-expanded="true"] .acc__icon{transform:rotate(180deg);}
.acc__panel{overflow:hidden;max-height:0;transition:max-height var(--t-base) var(--ease);}
.acc__panel-inner{padding-bottom:var(--s-4);display:flex;flex-direction:column;gap:var(--s-2);}
.acc__link{display:flex;justify-content:space-between;gap:var(--s-2);padding-block:var(--s-1);font-size:var(--fs-sm);}
.drawer__simple{margin-top:var(--s-4);display:flex;flex-direction:column;gap:var(--s-1);}
.drawer__simple a{padding-block:var(--s-3);font-weight:var(--fw-med);}

/* ============================================================
   HERO — три слоя
   ============================================================ */
.hero{
  position:relative;
  z-index:1;                 /* весь hero (вкл. дропдауны поиска) выше заглушки, но ниже шапки */
  display:flex;
  flex-direction:column;
  min-height:calc(88svh - 20px);   /* мобильный — svh, чтобы не ломался на iOS; −20px по правке */
}
/* Клип-слой = сам баннер: обрезает оверсайз-параллакс по скруглённым границам,
   не затрагивая дропдауны формы */
.hero__bg{
  position:absolute;
  top:0;bottom:0;
  left:var(--hero-inset);
  right:var(--hero-inset);
  z-index:0;
  overflow:hidden;
  border-radius:var(--hero-radius);
  background:var(--c-ink-700);   /* цвет-плейсхолдер, чтобы макет не прыгал без фото */
}
/* Слой 1 — фото. Оверсайз для параллакса. */
.hero__media{
  position:absolute;
  left:0;right:0;top:-14%;
  height:128%;
  will-change:transform;
}
/* Слайдер кадров: слои друг над другом, смена по прозрачности */
.hero__slides{position:absolute;inset:0;}
.hero__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:left center;
  opacity:0;
  /* перелистывание плавное и слегка замедленное — вдвое дольше --t-slow */
  transition:opacity calc(var(--t-slow) * 2) var(--ease-out);
}
.hero__img.is-active{opacity:1;}

/* Элементы управления — под баннером, чтобы не перекрывать контент */
.hero__slider-ui{
  display:flex;
  align-items:center;
  gap:var(--s-3);
  padding-inline:var(--hero-gutter);
  margin-top:var(--s-5);
  color:var(--c-ink-600);
}
/* Слой 2 — вуаль. Тематический градиент (--th-hero-veil) + нейтральные скримы:
   слева — под левый текст оффера, сверху — под прозрачную шапку.
   Правая часть кадра остаётся открытой. */
.hero__veil{
  position:absolute;z-index:1;
  top:0;bottom:0;
  left:var(--hero-inset);
  right:var(--hero-inset);
  border-radius:var(--hero-radius);   /* повторяет форму баннера */
  background:
    linear-gradient(90deg, rgba(14,22,32,.62) 0%, rgba(14,22,32,.22) 44%, rgba(14,22,32,0) 70%),
    linear-gradient(180deg, rgba(14,22,32,.55) 0%, rgba(14,22,32,0) 26%),
    var(--th-hero-veil);
}
/* Слой 3 — контент, по левому краю, вертикально по центру со сдвигом вверх 40px */
.hero__content{
  position:relative;
  z-index:2;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:var(--s-5);
  /* ≥ высоты шапки — контент не заходит под прозрачный оверлей.
     На мобильном отступ больше, иначе логотип hero липнет к логотипу шапки. */
  padding-top:var(--s-32);
  padding-bottom:var(--s-16);
  transform:translateY(-42px);   /* подъём контент-модуля: 30px + 12px по правке */
  /* ширину ограничивают сами строки, а не контейнер —
     иначе блок центрируется и ломает выравнивание по левому краю контейнера */
}
.hero__title{max-width:44rem;line-height:1;}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-2);}

/* Логотип в hero — на месте текстового надзаголовка.
   Двойной класс: базовый .logo объявлен в components.css (подключается позже).
   Размер задан по ширине: 120px на десктопе (−15% от прежних ~141px). */
.logo.hero__logo{
  width:clamp(84px,6vw + 34px,120px);
  height:auto;
  margin-bottom:var(--s-2);
}

/* Логотипы суб-брендов — правый нижний угол баннера.
   Появление — через общий механизм [data-reveal] (стаггер 80ms по индексу). */
.hero__brands{
  position:absolute;
  z-index:2;
  right:var(--hero-gutter);
  bottom:var(--s-8);
  display:flex;
  align-items:center;
  gap:var(--s-6);
}
.hero__brand{
  height:clamp(30px,2.4vw + 12px,48px);
  width:auto;
}

/* Окраска hero-контента (белый текст поверх фото/вуали) */
.hero__content{color:var(--c-white);}
.hero__title{color:var(--c-white);}
.hero__subtitle{font-size:var(--fs-lg);font-weight:var(--fw-reg);line-height:1.4;color:var(--c-ink-100);max-width:36rem;}
.hero__presets{color:var(--c-ink-100);}
.hero__presets a{color:var(--c-white);font-weight:var(--fw-semi);}
.hero__presets a:hover{color:var(--th-deco);}

/* Панель бронирования — внутри контент-блока, под подзаголовком */
.hero__search{
  position:relative;
  z-index:2;
  width:100%;
  max-width:640px;
  margin-top:var(--s-4);
}
.hero__presets{
  margin-top:var(--s-4);
  font-size:var(--fs-sm);
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-3);align-items:center;
}

/* Контент держится внутри баннера */
.hero > .container{padding-inline:var(--hero-gutter);}

@media (min-width:768px){
  .hero__content{padding-top:var(--s-24);}
}
@media (min-width:1024px){
  .hero{min-height:calc(92vh - 20px);}   /* −20px по правке */
  /* Контент-модуль (логотип → заголовок → подзаголовок → панель → пресеты)
     прижат к низу баннера: нижняя кромка «Быстрого выбора» встаёт на одну
     линию с логотипами суб-брендов (у них bottom: var(--s-8)). */
  .hero__content{
    justify-content:flex-end;
    transform:translateY(-12px);   /* весь левый контент-модуль выше на 12px */
    padding-bottom:var(--s-8);
  }
  /* пресеты не должны заезжать под логотипы суб-брендов справа */
  .hero__presets{max-width:640px;}
  /* логотип поднят на 80px: transform не влияет на поток,
     поэтому заголовок, панель бронирования и пресеты остаются на месте */
  .logo.hero__logo{transform:translateY(-80px);}
}

/* ============================================================
   СЕКЦИЯ 2 «Направления» — баннерная мозаика
   Ширина как у баннера hero: инсет по бокам, скругления у плиток.
   ============================================================ */
.directions__inner{padding-inline:var(--hero-inset);}

/* Шапка секции: текст слева, переключатель справа.
   Отступ по горизонтали совпадает с контентом hero. */
.section-head{
  display:flex;
  flex-direction:column;
  gap:var(--s-5);
  padding-inline:50px;
  margin-bottom:var(--s-10);
}
.section-head__title{margin-top:var(--s-2);}
.section-head__lead{margin-top:var(--s-3);max-width:44rem;}

/* Ряды баннеров: на мобильном — колонка, дробление включается с планшета */
.banner-grid{display:flex;flex-direction:column;gap:var(--s-3);}
.banner-row{display:grid;grid-template-columns:1fr;gap:var(--s-3);}

@media (min-width:768px){
  .section-head{
    flex-direction:row;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--s-8);
  }
  .section-head__text{flex:1 1 auto;}
  /* несимметричное дробление ряда */
  .banner-row--1-1-3{grid-template-columns:1fr 1fr;}
  .banner-row--1-1-3 .banner--wide{grid-column:1 / -1;}
  .banner-row--3-2{grid-template-columns:3fr 2fr;}
}
@media (min-width:1024px){
  .banner-row--1-1-3{grid-template-columns:1fr 1fr 3fr;}
  .banner-row--1-1-3 .banner--wide{grid-column:auto;}
}

/* ============================================================
   СЕКЦИЯ 3 «Отели Коллекции» — сетка карточек
   ============================================================ */
.hotels__inner{padding-inline:var(--hero-inset);}
.hotels__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-6);
}
.hotels__foot{display:flex;justify-content:center;margin-top:var(--s-12);}

/* Плотность сетки задаётся переменной --cols (переключатель в шапке секции).
   На мобильном всегда одна колонка. */
@media (min-width:768px){
  .hotels__grid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));}
}
@media (min-width:1024px){
  .hotels__grid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));}
}

/* ============================================================
   СЕКЦИЯ 4 «Бренд-навигатор»
   ============================================================ */
.brands{background:var(--c-ink-050);}
.brands__inner{padding-inline:var(--hero-inset);}
.brands__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-3);
}
.brands__pipeline{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2) var(--s-3);
  margin-top:var(--s-10);
  padding-inline:50px;
  font-size:var(--fs-sm);
}

/* Вторая версия навигатора: карточки во всю ширину, друг под другом */
.brands--alt{background:var(--c-white);}
.brands__grid--stacked{grid-template-columns:1fr;}

@media (min-width:768px){
  .brands__grid{grid-template-columns:repeat(2,1fr);}
  .brands__grid--stacked{grid-template-columns:1fr;}   /* остаётся в одну колонку */
}
@media (min-width:1024px){
  .brands__grid{grid-template-columns:repeat(3,1fr);}   /* по трети ряда */
  .brands__grid--stacked{grid-template-columns:1fr;}
}

/* ============================================================
   ФУТЕР — сетка
   ============================================================ */
.site-footer{margin-top:0;}
/* контейнер футера — те же боковые отступы, что у контента баннера hero */
.site-footer > .container{max-width:none;padding-inline:var(--hero-gutter);}
.site-footer__brand{
  display:flex;
  align-items:center;
  padding-top:var(--section-py);
  padding-bottom:var(--s-8);
}
.site-footer__brand a{display:inline-flex;}
.site-footer__top{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--s-10);
  padding-block:var(--s-12);
}
.site-footer__col-title{margin-bottom:var(--s-4);}
.site-footer__list{display:flex;flex-direction:column;gap:var(--s-2);}
.site-footer__phone{display:block;font-family:var(--font-display);font-size:var(--fs-d3);line-height:1.1;margin-bottom:var(--s-3);}
.site-footer__socials{display:flex;gap:var(--s-3);margin-top:var(--s-4);}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6);
  padding-block:var(--s-5);
}
.site-footer__legal{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);}
/* кредит разработчика — правый нижний угол футера */
.site-footer__credit{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
}
@media (min-width:1024px){
  .site-footer__credit{margin-left:auto;}
}

@media (min-width:768px){
  .site-footer__top{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1024px){
  .site-footer__top{grid-template-columns:1.4fr 1fr 1fr 1.2fr;}
}

/* ============================================================
   БРЕЙКПОИНТЫ ШАПКИ / НАВИГАЦИИ
   ============================================================ */
@media (min-width:768px){
  .site-header__phone{display:inline-flex;}
  .site-header__act--book{display:inline-flex;}
}
@media (min-width:1024px){
  .site-nav{display:block;}
  .lang-switch{display:inline-flex;}
  .site-header__act{display:inline-flex;}
  .burger{display:none;}
}