/* Головна сторінка: hero-банер, пошукова панель, категорійні чіпи */
/* Токени кольорів живуть в одному місці — onedeal-tokens.css.
   Тут була їхня копія, яку все одно перебивав пізніший файл:
   правка в ній нічого не змінювала б. */

.home-hero {
  position: relative;
  background: #fff;
  padding: 0;
}

/* Фото займає праву половину екрана до самого краю. Абсолютне
   позиціювання, бо фото має вилазити за контейнер сторінки.

   Ліва межа — дуга кола, а не заокруглений кут: заміри макета дали
   рівно коло радіусом 473px із центром у точці (473; 116) від лівого
   верхнього кута фото. border-radius такого не вміє — він гне кожен
   кут своїм еліпсом, і дуга виходила надто «пузата» знизу, тому
   ріжемо clip-path-ом. Відсотки перелічені від коробки 721×506,
   тому дуга лишається тією самою на будь-якій ширині екрана. */
.home-hero__photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 56.8%;
  /* Кадр трохи нижчий за макетний (721x506) — щоб чіпи «Для неї»,
     «Для нього» тощо повністю вміщались на першому екрані. */
  aspect-ratio: 721 / 450;
  overflow: hidden;
  /* Те саме коло, що й було: радіус 473 і центр (473; 116) від лівого
     верхнього кута кадру. Записане через ellipse(), бо там радіуси
     рахуються окремо від ширини й від висоти — тому при зміні висоти
     кадру дуга лишається тією самою, просто обрізається знизу
     раніше. У circle() радіус залежить від обох сторін, і крива
     попливла б. */
  clip-path: ellipse(65.6% 105.1% at 65.6% 25.8%);
}

/* inset:0 замість height:100% — інакше висота від aspect-ratio
   не спрацьовує і кадр диктує саме фото (вже наступали на це в картках) */
.home-hero__photo picture {
  display: contents;
}

.home-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Текст лежить над фото, тому йому потрібен свій шар */
.home-hero__inner {
  position: relative;
  z-index: 1;
  /* 73 замість макетних 80 — рівно ті 7px, яких бракувало, щоб
     плашки «Для неї», «Для нього» тощо вміщались на першому екрані */
  padding-top: 73px;
  padding-bottom: 48px;
}

.home-hero__text {
  /* Ліва половина: далі починається фото, і текст не має під нього заходити */
  max-width: 46%;
}

.home-hero__text h1 {
  /* Текст стоїть по загальному відступу сторінки, в одну лінію з
     панеллю пошуку й картками нижче. Щоб проміжок до фото при цьому
     лишився таким, як у макеті, заголовок трохи більший — рядок
     дотягується до тієї самої точки. */
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--home-text);
  line-height: 1.35;
  margin-bottom: 20px;
  /* Перенос після «які» має бути завжди, як у макеті. Без цієї межі
     на широкому екрані заголовок стає в один рядок — саме тому він
     і виглядав інакше, ніж на референсі. */
  max-width: 500px;
}

.home-hero__text h1 .accent {
  font-style: italic;
  color: var(--home-accent);
}

.home-hero__text p {
  color: var(--home-muted);
  font-size: 1.05rem;
  /* 1.5 — міжрядковий інтервал з макета; успадкований від теми 1.8
     розтягував абзац і зсовував усе нижче на 15px */
  line-height: 1.5;
  /* 430px дають три рядки, як у макеті */
  max-width: 430px;
  margin-bottom: 26px;
}

.home-hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.btn-hero-fill,
.btn-hero-outline {
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-hero-fill {
  background: var(--home-accent);
  color: #fff;
  border: 1px solid var(--home-accent);
}

.btn-hero-fill:hover {
  background: var(--home-accent-dark);
  border-color: var(--home-accent-dark);
  color: #fff;
}

.btn-hero-outline {
  background: transparent;
  color: var(--home-accent);
  border: 1px solid var(--home-accent);
}

.btn-hero-outline:hover {
  background: var(--home-cream-soft);
  color: var(--home-accent-dark);
}

/* Декоративне фото-заглушка праворуч від заголовка */


.home-hero__photo i {
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Категорійні чіпи */
.home-categories {
  /* 40px компенсує від'ємний margin панелі пошуку + 20px чистого проміжку */
  margin-top: 60px;
  /* Однаковий проміжок до наступного блоку, як і між рештою секцій
     нижче (8px їхнього padding-top + 64px тут = 72px). */
  padding-bottom: 64px;
}

.home-categories .row {
  --bs-gutter-x: 12px;
  row-gap: 12px;
}

.home-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Колонки в цьому ряду — рівні flex-частки (col-lg без числа), тому
     на широкому моніторі кожна тягнеться на весь свій відсоток ширини,
     а вміст (іконка + два короткі рядки) лишається того самого розміру
     — виходить пляма з порожнім хвостом праворуч. Стелю на саму картку
     й центруємо в колонці — на вузьких екранах, де колонка й так вужча
     за стелю, нічого не міняється. */
  max-width: 270px;
  margin: 0 auto;
  /* Суцільний колір, не спільний градієнтний токен: чіпи стоять на
     майже такому ж світлому фоні сторінки, і два відтінки градієнта
     на такій вузькій картці тільки зайво рябіли. */
  background: #fbf5f1;
  border: none;
  border-radius: 16px;
  /* Ліве й праве поле різні: тягнемо вміст (іконку+текст) трохи
     праворуч від центру картки. */
  padding: 15px 10px 15px 18px;
  text-decoration: none;
  height: 100%;
  /* Тінь глибша, ніж просто "легка": колір картки й фон сторінки
     майже однакові, і на око тінь — єдине, що відділяє чіп від тла. */
  box-shadow:
    0 0 0 1px rgba(60, 30, 24, 0.04),
    0 6px 16px rgba(60, 30, 24, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home-chip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}

.home-chip__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  color: var(--home-accent-bright);
}

.home-chip__title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--home-text);
  display: block;
}

.home-chip__subtitle {
  color: var(--home-muted);
  font-size: 0.68rem;
  line-height: 1.35;
  display: block;
  margin-top: 3px;
}

@media (max-width: 991.98px) {
  .home-hero__image {
    margin-top: 24px;
  }

}

/* --- телефон --- */
@media (max-width: 767.98px) {
  /* Категорійні чіпи: низькі, іконка зліва, горизонтальний скрол */
  .home-categories {
    margin-top: 16px;
    /* тільки низ: бокові відступи дає контейнер (--page-gutter) */
    padding-bottom: 32px;
  }

  .home-categories .row {
    --bs-gutter-x: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    row-gap: 0;
    gap: 10px;
    /* Смуга гортання займає всю ширину екрана — від краю до краю.
       Від'ємні марджини гасять відступи контейнера, а padding зліва
       повертає звичайний відступ як стартову позицію: перша картка стоїть
       на одній лінії з рештою блоків, але щойно починаєш гортати —
       картки проходять під самий край. Справа відступу немає взагалі,
       тому наступна картка завжди обрізана краєм екрана. */
    margin-left: calc(-1 * var(--page-gutter));
    margin-right: calc(-1 * var(--page-gutter));
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* overflow-x: auto змушує браузер ховати й overflow-y — тінь
       картки (box-shadow) знизу просто обрізалась рамкою смуги.
       Додаємо вертикальний запас під тінь і одразу гасимо його
       від'ємним марджином, щоб сусідні блоки не зсунулись.
       Запас під тінь глибший, ніж здається: сама тінь тепер
       0 6px 16px, тобто розмиття сягає ~22px вниз. */
    padding-top: 10px;
    padding-bottom: 24px;
    margin-top: -10px;
    margin-bottom: -24px;
  }

  .home-categories .row::-webkit-scrollbar {
    display: none;
  }

  /* 46%: дві повні картки й лише вузький краєчок третьої (~15px) —
     50% із гепом між картками якраз заповнювало всю ширину смуги, і
     край третьої зникав повністю. 42% натомість показував майже
     половину картки — це вже не «краєчок», а криво обрізана картка. */
  .home-categories .row > div {
    flex: 0 0 auto;
    width: 46%;
    max-width: 210px;
  }

  .home-chip {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 13px 17px 13px 11px;
    border-radius: 16px;
    /* Однакова висота з панеллю фільтрів над ними: у панелі це
       12px поля згори й знизу плюс поле пошуку 49px. Чіпи стоять
       одразу під нею, і різна висота одразу впадала в око. */
    min-height: 73px;
  }

  .home-chip__icon {
    width: 26px;
    height: 26px;
    flex-basis: 26px;
  }

  .home-chip__title {
    font-size: calc(0.75rem + 1px);
  }

  /* Один рядок: найдовший підпис («Веселощі та час з друзями») інакше
     переноситься, і картка стає втричі вищою за макет. */
  .home-chip__subtitle {
    font-size: calc(0.575rem + 1px);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* Мобільна версія hero. Ці правила помилково переїхали в
   search-panel.css під час винесення панелі пошуку — і, оскільки той
   файл вантажиться пізніше, перебивали налаштування для вузьких
   екранів нижче. Повернуті на місце. */
@media (max-width: 767.98px) {
  .home-hero {
    /* 11px від шапки до фото — за макетом */
    padding: 11px 0 0;
    background: transparent;
  }

  .home-hero__top {
    position: relative;
    display: block;
    padding-bottom: 0;
  }

  .home-hero__text,
  .home-hero__image {
    width: 100%;
    flex: none;
    max-width: none;
    margin-top: 0;
  }

  /* Прибираємо від'ємні марджини Bootstrap-рядка, щоб фото рівно лягло в контейнер */
  .home-hero__top {
    margin-left: 0;
    margin-right: 0;
  }

  .home-hero__image {
    padding: 0;
  }

  /* Рамка = саме фото: картка з текстом ляже всередині неї */
  .home-hero__frame {
    position: relative;
  }

  .home-hero__photo {
    aspect-ratio: 7 / 12;
    border-radius: 12px;
    box-shadow: none;
    /* У потоці, а не абсолютно: висота рамки має дорівнювати висоті фото */
    position: relative;
    /* Ширина задана явно, а не полями: інакше при обмеженні висоти
       нижче aspect-ratio перераховував із висоти ще й ширину, і фото
       звужувалось — картка з текстом вилазила за його правий край. */
    width: calc(100% - var(--page-gutter) * 2);
    margin: 0 auto;
    /* На телефоні фото — звичайний прямокутник, дуга тільки на десктопі */
    clip-path: none;
    /* Фото разом із панеллю пошуку має вміщатись на перший екран.
       172px — це шапка, відступ під нею, проміжок і сама панель плюс
       трохи повітря знизу. Якщо екран низький, кадр стає нижчим за
       макетні 7:12 — краще підрізати знімок, ніж ховати фільтри. */
    max-height: calc(100vh - 172px);
    max-height: calc(100svh - 172px);
    /* щоб на зовсім низькому екрані картка з текстом не вилізла за фото */
    min-height: 320px;
  }

  /* Кадр зміщений праворуч: у горизонтального знімка при такому
     вузькому вікні пара опинялась біля самого краю, а в центрі була
     ковдра. 65% ставить її по центру, як у макеті. */
  /* Кадр прив'язаний до верху: на невисокому екрані кадр нижчий за 7:12, і лишнє
     має відрізатись знизу (там вода під текстовою карткою), а не вгорі, де купол. */
  .home-hero__photo img {
    object-position: 50% 0%;
  }

  /* Контейнер із текстом притиснутий до низу фото. Бокові поля дає
     сама картка, тому в контейнера їх немає. Селектор із батьком —
     інакше поля .container з onedeal-tokens.css переважають за
     порядком підключення. */
  .home-hero .home-hero__inner {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 26px;
    padding: 0;
  }

  .home-hero__photo i {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 1.8rem;
    opacity: 0.45;
  }

  /* Текст — напівпрозора «матова» картка всередині фото, притиснута донизу */
  .home-hero__text {
    position: static;
    width: auto;
    z-index: 2;
    /* 22px від краю екрана: 9px поля сторінки + 13px усередині фото */
    margin: 0 22px;
    padding: 26px 23px 22px;
    border-radius: 15px;
    background: rgba(38, 20, 16, 0.44);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }

  .home-hero__text h1,
  .home-hero__text p {
    color: #fff;
  }

  .home-hero__text h1 {
    /* У макеті рядок рівно заповнює ширину картки й не переноситься.
       Кегль тягнеться за шириною екрана: Fixel ширший за системний
       шрифт, і з фіксованим числом рядок вилазив би за картку на
       вужчому телефоні. */
    font-size: clamp(0.66rem, 3.42vw, 0.9rem);
    line-height: 1.3;
    margin-bottom: 28px;
    white-space: nowrap;
    max-width: none;
  }

  .home-hero__text h1 .accent {
    color: #ff9d8d;
  }

  .home-hero__text p {
    max-width: none;
    font-size: 0.765rem;
    line-height: 1.5;
    opacity: 0.9;
    margin-bottom: 17px;
  }

  /* На мобільному в картці лишаємо лише перше речення, як у макеті */
  .home-hero__sentence-2 {
    display: none;
  }

  /* Дві кнопки в один ряд, як на макеті */
  /* Дві рівні половини з проміжком — так само, як у макеті:
     кнопки там однакової ширини й разом займають усю ширину картки. */
  .home-hero__actions {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .btn-hero-fill,
  .btn-hero-outline {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    /* Бокові поля маленькі навмисно: ширину кнопці задає flex, а поля
       тут лише обмежували б текст. Видимий проміжок до краю пігулки
       дає сам flex. */
    padding: 10px 6px;
    line-height: 1.7;
    /* Кегль тягнеться за шириною екрана. «Готові бокси вражень» не
       переноситься, тож на вужчому телефоні підпис мусить меншати
       разом із кнопкою — інакше він вилазить за пігулку. */
    font-size: clamp(0.555rem, 2.8vw, 0.78rem);
    white-space: nowrap;
  }

  .btn-hero-outline {
    border-color: #fff;
    color: #fff;
  }

  .btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
  }

}

/* --- зовсім вузькі екрани --- */
@media (max-width: 359.98px) {
  /* Кегль тут уже підбирає clamp вище — лишається трохи стиснути
     проміжок між кнопками й поля картки, щоб підпис «Готові бокси
     вражень» не впирався в край пігулки. */
  .home-hero__actions {
    gap: 10px;
  }

  .home-hero__text {
    padding: 22px 18px 20px;
  }
}