/* EUR-28: головний банер (модуль «Слайдшоу», .main-block) на телефоні й планшеті, до 1023 px. Десктоп не змінюється.
   Висота: стара + 20 % (межа, погоджена із замовником 03.11.2026). Фото заповнює слайд з обрізанням по боках (яку частину показати — поле «Фото на телефоні», Дизайн → Банери).
   Компактний текст стоїть у потоці внизу на темному градієнті.
   Тут банер без slick: звичайна горизонтальна прокрутка з прилипанням до слайда, її браузер веде сам, тому свайп плавний
   (автопрокрутка, стрілки й коло — у scripts1.js). Слайди стоять в один ряд від першого кадру, тож під час завантаження
   сторінки видно лише перший. */
@media (max-width: 1023px) {
  .main-block__slider {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 1rem;
  }
  .main-block__slider::-webkit-scrollbar { display: none; }

  .main-block__slide {
    display: flex !important; /* тема ховає слайди 2+, поки немає slick; тут slick не запускається */
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    flex-direction: column;
    justify-content: flex-end;
    min-height: calc((100vw - 56px) / 2.504 * 1.2); /* стара висота планшета (ширина слайда : 2,504) + 20 % */
    border-radius: 1rem;
    overflow: hidden;
    isolation: isolate;
  }
  .main-block__slide > .img { position: absolute; inset: 0; z-index: 0; display: block; }
  .main-block__slide > .img picture { display: block; width: 100%; height: 100%; }
  .main-block .main-block__slide > .img img {
    width: 100%;
    height: 100%;
    min-height: 0;
    aspect-ratio: auto !important; /* у шаблоні inline aspect-ratio 1520/607 */
    object-fit: cover;
    object-position: 50% 50%;
    border-radius: 0;
  }
  .main-block__slide--focus-left > .img img { object-position: 10% 50% !important; }
  .main-block__slide--focus-right > .img img { object-position: 90% 50% !important; }

  /* Затемнення знизу — під текстом, щоб білі літери читалися на будь-якому фото. */
  .main-block__slide::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(12, 10, 24, .2) 0%, rgba(12, 10, 24, .55) 45%, rgba(12, 10, 24, .85) 100%);
  }

  .main-block .main-block__slide .text {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 2;
    width: auto;
    max-width: 640px;
    padding: 18px 28px 22px;
    font-size: 28px;
    line-height: 1.12;
  }
  .main-block__slide .text span { font-size: 16px; line-height: 1.35; margin-top: 6px; }
  .main-block__slide .text .sale_slider_btn,
  .main-block__slide .text .details_slider_btn { width: fit-content; max-width: 100% !important; padding: 8px 14px; line-height: 1.3; }
  .main-block__slide .text .main-block__link { display: inline-block; margin-top: 10px; }

  /* Стрілки — у верхній правий кут, на фото, щоб не перекривати текст унизу. */
  .main-block__btns { top: 1.25rem; right: 1.25rem; bottom: auto; }
}

@media (max-width: 767px) {
  .main-block__slide { min-height: 240px; } /* стара висота телефона 200 px + 20 % */
  .main-block .main-block__slide .text { max-width: none; padding: 12px 16px 14px; font-size: 21px; line-height: 1.1; }
  .main-block__slide .text span { font-size: 13.5px; line-height: 1.28; margin-top: 3px; }
  .main-block__slide .text .sale_slider_btn,
  .main-block__slide .text .details_slider_btn { font-size: 13px !important; padding: 3px 10px; line-height: 1.25; }
  .main-block__slide .text .main-block__link { margin-top: 7px; padding: 6px 14px; font-size: 13.5px; line-height: 1.2; min-height: 0; height: auto; }
}

@media (max-width: 380px) {
  .main-block .main-block__slide .text { font-size: 19px; }
  .main-block__slide .text span { font-size: 12.5px; }
}