/* Дві промо-картки: «готові бокси» та «електронний сертифікат».

   Десктоп: дві картки поруч, різної ширини (ліва ширша).
   Телефон: смуга з гортанням пальцем, наступна картка визирає з-за краю. */

.promo {
  padding-top: 8px;
  padding-bottom: 56px;
}

.promo__track {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

/* --- картка --- */
.promo-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'main aside'
    'btn  aside';
  /* Другий рядок розтягується, кнопка сідає на його низ — тому кнопки
     обох карток стоять на одній лінії незалежно від довжини тексту. */
  grid-template-rows: auto 1fr;
  align-content: stretch;
  gap: 20px 24px;
  padding: 36px 32px;
  border-radius: 18px;
  /* Скляна картка: напівпрозоре тло + розмите те, що за ним, замість
     суцільної кремової заливки. Білувато-сіре, а не кремове — інакше
     крізь розмиття підсвічує рожевим від фото й кнопок навколо.
     saturate(0.7) додатково гасить той відтінок, що все ж просвічує. */
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(0.7);
  -webkit-backdrop-filter: blur(16px) saturate(0.7);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-card, 0 12px 32px rgba(60, 30, 24, 0.1));
  /* Телефон на другій картці навмисно звисає за межу — не обрізаємо. */
  overflow: visible;
}

/* Ліва картка ширша за праву, як у макеті */
.promo-card--boxes {
  flex: 1.32 1 0;
}

.promo-card--cert {
  flex: 1 1 0;
}

.promo-card__main {
  grid-area: main;
  min-width: 0;
}

.promo-card__label {
  display: block;
  font-size: 0.95rem;
  color: var(--home-muted, #6f6660);
  margin-bottom: 14px;
}

/* Два рядки зарезервовано в обох картках — інакше друга картка
   починає перелік вище, ніж перша свій абзац, і рядки «стрибають». */
.promo-card__title {
  margin: 0 0 14px;
  font-size: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--home-text, #221f1d);
  min-height: 2.6em;
}

/* Курсивом, як акцентне слово в заголовках на «Як це працює»
   (.how-title em) — той самий прийом нахилу. */
.promo-card__title .accent {
  font-style: italic;
  color: var(--home-accent-bright, #e63329);
}

.promo-card__text {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--home-muted, #6f6660);
  max-width: 34ch;
  min-height: 3.1em;
}

/* текст, який у макеті є лише на телефоні */
.promo-card__text--mobile {
  display: none;
}

/* --- перелік із галочками --- */
.promo-card__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.promo-card__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--home-text, #221f1d);
}

.promo-card__list svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  color: #3fae5a;
}

/* --- кнопка ---
   Той самий розмір, що й .gift-card__buy на картках товарів —
   раніше ця була помітно більшою за решту кнопок сайту. */
.promo-card__btn {
  grid-area: btn;
  justify-self: start;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px 11px 22px;
  border-radius: 999px;
  background: var(--home-accent, #d6473a);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.promo-card__btn:hover {
  background: var(--home-accent-dark, #b83a2f);
  color: #fff;
}

.promo-card__btn svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
}

/* --- права колонка --- */
.promo-card__aside {
  grid-area: aside;
  align-self: center;
  position: relative;
}

/* --- мініатюри боксів --- */
.promo-card__thumbs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo-thumb {
  width: 92px;
  /* Пропорція самих знімків (480x640, обкладинки боксів) — інакше
     фото розтягувалось */
  aspect-ratio: 480 / 640;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}


/* Підпис ONEDEAL більше не малюємо: він уже надрукований на самих
   знімках, і виходило два логотипи на одній мініатюрі. */

/* --- телефон --- */
.promo-phone {
  /* Готовий знімок: нахил, екран і тінь уже намальовані в самій
     картинці, тому тут лишається тільки розмір і місце.

     Абсолютно, а не в колонці сітки: так телефон стає впритул до
     правого нижнього кута картки, без проміжку й без звисання
     назовні. Розмір заданий висотою — вона в картки стала, а
     ширина міняється від екрана. */
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: auto;
  height: 88%;
  pointer-events: none;
}

/* Текст не має заходити під телефон: колонка під нього більше не
   резервується, бо картинка вийшла з потоку. */
.promo-card--cert .promo-card__main {
  max-width: 58%;
}

/* --- вужчі екрани --- */
@media (max-width: 1199.98px) {
  .promo-card {
    padding: 28px 24px;
    gap: 16px;
  }

  .promo-card__title {
    font-size: 1.28rem;
  }

  .promo-thumb {
    width: 74px;
  }

  .promo-phone {
    height: 84%;
  }
}

/* --- телефон: смуга з гортанням --- */
@media (max-width: 767.98px) {
  .promo {
    padding-bottom: 32px;
  }

  .promo__track {
    gap: 12px;
    /* Смуга гортається, а горизонтальна прокрутка обрізає й по вертикалі —
       саме через це тінь карток зрізало зверху й знизу. Даємо їй місце
       полями всередині смуги й гасимо їх від'ємними марджинами, щоб
       розкладка сторінки не поїхала. */
    padding-top: 16px;
    padding-bottom: 42px;
    margin-top: -16px;
    margin-bottom: -42px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* смуга на всю ширину екрана — наступна картка обрізається краєм */
    margin-left: calc(-1 * var(--page-gutter));
    margin-right: calc(-1 * var(--page-gutter));
    /* Той самий відступ з обох боків, що і в інших горизонтальних
       смугах на сайті (mood-slider, home-hero, product-page). */
    padding-left: var(--page-gutter);
    padding-right: var(--page-gutter);
    scroll-padding-left: var(--page-gutter);
    scroll-padding-right: var(--page-gutter);
    /* iOS Safari: у смузі з -webkit-overflow-scrolling:touch тінь-filter
       (drop-shadow) під 3D-мініатюрами боксів іноді домальовується
       обрізаною рівно по нижньому краю картинки — самого запасу в
       padding їй не завжди вистачає, бо Safari перемальовує шар із
       запізненням. Власний композитний шар лікує це (той самий прийом,
       що і для .pdp-benefits на сторінці товару). */
    transform: translateZ(0);
  }

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

  .promo-card {
    flex: 0 0 auto;
    /* Картка майже на всю ширину смуги: наступна визирає лише на кілька
       пікселів. Завдяки цьому після перегортання попередня картка повністю
       йде за екран і не визирає зліва. */
    /* 30px краю наступної картки: разом із тінню одразу видно, що
       смугу можна гортати далі. 10px, як було, губились на тлі. */
    width: calc(100vw - var(--page-gutter) * 2 - 30px);
    scroll-snap-align: start;
    grid-template-columns: 1fr;
    /* На телефоні картка — просто стовпчик рядків, без іменованих зон:
       підпис, заголовок, абзац, перелік/мініатюри, кнопка. */
    grid-template-areas: none;
    grid-template-rows: none;
    /* Уся зайва висота розходиться між рядками порівну, а не збирається
       однією дірою перед кнопкою. Тому проміжки на око однакові згори
       донизу — і на вузькому екрані, і на широкому. */
    /* Висоту картки задає сам вміст, а не окрема цифра. Тому проміжки
       рівно такі, як тут написано — не роздуваються, щоб заповнити
       зайву висоту, і не тиснуться на вузькому екрані. */
    align-content: space-between;
    gap: 25px;
    /* Ширина мініатюри тягнеться за шириною екрана: три штуки плюс «+ 4»
       мають вміститись у картку. На 320px фіксовані 84px вилазили за
       край, тому clamp — нижня межа рахована саме під цю ширину.
       Висоту ж картки додаємо пропорцією мініатюр і полями, а не
       порожніми проміжками між текстами. */
    --promo-thumb: clamp(62px, 21.5vw, 92px);
    /* Висота рахується з пропорції знімка, а не з розтягнутих 3:5 */
    --promo-thumb-h: calc(var(--promo-thumb) / 480 * 640);
    /* Поля трохи більші: мініатюри стали нижчими, і без цього
       картка помітно просіла б. */
    padding: 54px 18px 56px;
    border-radius: 16px;
  }

  /* Обгортки прибираємо з розкладки — інакше весь текст лишається одним
     рядком сітки й тиснеться догори, а вільне місце падає під нього. */
  .promo-card__main,
  .promo-card__aside {
    display: contents;
  }

  .promo-card--boxes,
  .promo-card--cert {
    flex: 0 0 auto;
  }

  .promo-card__label {
    font-size: 0.88rem;
    margin-bottom: 0;
  }

  .promo-card__title {
    font-size: 1.28rem;
    margin-bottom: 0;
  }

  .promo-card__text {
    font-size: 0.86rem;
    max-width: none;
  }

  /* на телефоні у другій картці з'являється абзац під заголовком */
  .promo-card__text--mobile {
    display: block;
  }

  .promo-card__list {
    margin-top: 0;
    gap: 10px;
    /* Рядок може бути вищий за сам перелік — тримаємо галочки вгорі,
       інакше вони розповзаються по висоті. */
    align-content: start;
  }

  /* Мініатюри й перелік — це той самий, четвертий рядок обох карток.
     Резервуємо під нього однакову висоту (мініатюра у пропорції 3:4),
     інакше різниця у пару пікселів розходиться по всіх проміжках і
     рядки сусідніх карток перестають збігатися. */
  .promo-card__thumbs,
  .promo-card--cert .promo-card__list {
    min-height: var(--promo-thumb-h);
  }

  .promo-card__list li {
    font-size: 0.86rem;
  }

  .promo-card__btn {
    /* Іменовані зони на телефоні скасовані — прив'язку теж треба зняти,
       інакше кнопка створює зайву колонку й ламає стовпчик. */
    grid-area: auto;
    /* Трохи вища за десктопну — зручніша як ціль для пальця, той самий
       прийом, що й у .gift-card__buy на картках товарів. */
    padding: 13px 22px;
    font-size: 0.85rem;
  }

  .promo-thumb {
    width: var(--promo-thumb);
  }

  /* Телефон лежить у нижньому правому куті картки, лише ледь виходячи
     за неї — щоб загальні відступи сторінки не порушувались. */
  /* Відступи більші, ніж здається: поворот розширює видимий контур
     приблизно на 34px з боків і 17px по вертикалі. Тому щоб назовні
     лишився тільки невеликий кут, елемент треба відсунути всередину. */
  /* Розташування з макета: телефон у нижньому правому куті, правим
     краєм виходить за картку й зрізається. Розмір заданий висотою, а не
     шириною: наша картка вужча за макетну, і при однаковій частці
     ширини телефон виходив завеликим і накривав кнопку. */
  .promo-card--cert .promo-phone {
    position: absolute;
    /* Низ — рівно по краю картки, а праворуч виступає ледь-ледь.
       У картинці більше немає прозорого поля справа, тому ці пікселі —
       справжній видимий виступ, а не порожнеча. */
    right: -7px;
    bottom: 0;
    left: auto;
    top: auto;
    width: auto;
    /* 38%, а не 46%: кнопка після збільшення стала ширшою і заходила
       телефону під екран. Розмір заданий висотою картки, тому міняється
       разом із нею. */
    height: 38%;
    max-width: none;
    margin: 0;
    pointer-events: none;
  }

  /* На телефоні картинка навмисно трохи вилазить за картку —
     місце під це дає нижнє поле смуги прокрутки. */
  .promo-card--cert {
    overflow: visible;
  }

  .promo-card--cert .promo-card__main {
    max-width: none;
  }

  /* Абзац у макеті йде на всю ширину картки, а от перелік і кнопка
     коротші — саме вони могли б зіткнутися з телефоном. */
  .promo-card--cert .promo-card__btn {
    max-width: 62%;
  }

  .promo-card--cert .promo-card__list {
    max-width: 58%;
    margin-top: 0;
  }
}

/* --- зовсім вузькі екрани --- */
@media (max-width: 359.98px) {
  /* Тут картка вужча за телефон із переліком: трохи зменшуємо і те, і те,
     щоб галочки не заходили на макет телефону. */
  .promo-card__list li {
    font-size: 0.7rem;
  }

  .promo-card--cert .promo-phone {
    height: 34%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .promo-card__btn {
    transition: none;
  }
}

/* --- 3D-мініатюра боксу ---
   Один із трьох — не пласка обкладинка, а рендер коробки на прозорому
   фоні з власною тінню всередині картинки. Правило навмисно в самому
   кінці файлу: інакше медіа-запити вище (ширина .promo-thumb на
   планшеті/телефоні) перебивали б власну ширину цієї мініатюри. */
.promo-thumb--3d {
  width: auto;
  height: 128px;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 10px 14px rgba(60, 30, 24, 0.22));
  /* iOS Safari інколи не домальовує сам drop-shadow при першому
     завантаженні сторінки (спрацьовує лише після оновлення) — шар під
     фільтр браузер готує з запізненням. will-change просить підготувати
     його одразу, ще до першого малювання, а не по факту. */
  will-change: filter;
}

@media (max-width: 1199.98px) {
  .promo-thumb--3d {
    height: 108px;
  }
}

@media (max-width: 767.98px) {
  .promo-thumb--3d {
    height: var(--promo-thumb-h, 100px);
    width: auto;
  }
}