/* ═══ Onetap Banners — variant A: absolute positioning 1:1 з Live Preview ═══
   Блоки використовують збережені x/y/w/h у % від слайда.
   Слайд має фіксовану висоту з адмінки на кожному breakpoint:
     - Desktop:  banner_height (_bh)
     - Tablet:   banner_height_tablet (_bht)
     - Mobile:   banner_height_mobile (_bhm)
   Слайдер тягнеться на всю ширину viewport через 100vw + margin break-out.
*/

/* ── Section wrapper ── */
.onetap-section-banners { padding:0; margin:0; }

/* ── Slider: 100% батьківського контейнера (sidebar/inline use) ── */
.otb-slider {
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
  background:transparent;
}

/* Break out of bootstrap .container max-width when banner is rendered as a hero in onetap-home-section.
   Result: banner spans full viewport even though parent .container is capped at 1460px.
   Per-slide max-width still caps actual banner width and centers it via margin:auto from the per-instance <style>. */
.onetap-home-section .otb-slider {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
}

/* ── Swiper wrapper (коли є кілька слайдів) ── */
.otb-slider .swiper-wrapper { background:transparent; }

/* ── Single slide ── */
.otb-slide {
  position:relative;
  width:100%;
  overflow:hidden;
}

/* ── Image block — absolute positioned container ── */
.otb-img-block {
  position:absolute;
  overflow:hidden;
  display:block;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
/* <img> всередині block — заповнює контейнер з cover-кропом.
   object-position:center bottom — зберігає нижню частину картинки (де часто є підпис/текст). */
.otb-img-block > .otb-img-el {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  margin:0;
  padding:0;
  border:0;
  max-width:none;
  max-height:none;
}

/* ── Text / button ── */
.otb-txt-title,
.otb-txt-sub,
.otb-txt-btn {
  position:absolute;
  z-index:50;
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.otb-txt-title {
  font-size:48px;
  font-weight:400;
  font-family:Georgia, serif;
  font-style:italic;
  line-height:1.1;
  white-space:nowrap;
  color:#fff;
}
.otb-txt-sub {
  font-size:13px;
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  opacity:.85;
  color:#fff;
}
.otb-txt-btn {
  display:inline-block;
  padding:10px 36px;
  font-size:13px;
  font-weight:500;
  letter-spacing:.1em;
  text-decoration:none;
  border:1px solid;
  box-sizing:border-box;
}
/* Custom hover applied via inline style (hoverBg) from admin — no default hover effects here */
.otb-txt-btn:hover { text-decoration:none; }

/* ── Fallback centered text (legacy banners without positions) ── */
.otb-slide-text {
  position:absolute;
  z-index:50;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  pointer-events:none;
}
.otb-slide-text > * { pointer-events:auto; }

/* ── Mobile override elements (показуються коли є override у mobile settings) ── */
.otb-mob-only { display:none; }

/* ═══ Tablet (768–991) ═══ */
@media (min-width:768px) and (max-width:991px) {
  .otb-txt-title { font-size:32px; }
  .otb-txt-sub { font-size:11px; }
  .otb-txt-btn { padding:8px 28px; font-size:12px; }
}

/* ═══ Mobile (≤576) — перемикаємо на мобільні блоки ═══
   Layout: absolute позиціонування 1:1 з admin Live Preview.
   Слайд має фіксовану висоту _bhm (задається в per-slide inline style в шаблоні),
   блоки використовують збережені x/y/w/h%, <img> заповнює блок з object-fit:cover. */
@media (max-width:576px) {
  .otb-img-desktop { display:none !important; }
  .otb-img-mobile { display:block !important; }
  .otb-mob-only { display:block; }
  .otb-txt-title { font-size:28px; white-space:normal; }
  .otb-txt-sub { font-size:11px; letter-spacing:.15em; }
  .otb-txt-btn { font-size:12px; padding:10px 32px; }
}