/* ════════════════════════════════════════════════════════════
   BYTES YATRA — EXTRA AD PLACEMENTS (see inc/ads-extra.php)
   ════════════════════════════════════════════════════════════ */

.by-ad-slot { line-height:0; min-width:0; }
.by-ad-slot a { display:block; line-height:0; }
.by-ad-slot .by-ad-img {
  width:100%; height:auto; display:block;
  border-radius:8px;
}

/* Customizer-preview placeholder */
.by-ad-slot--placeholder {
  line-height:1.3;
  min-height:90px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem;
  background:#F3F4F6; border:2px dashed #9CA3AF; border-radius:8px;
  color:#4B5563; font-size:.8rem; font-weight:600; text-align:center; padding:.5rem;
}
.by-ad-slot--placeholder small { font-weight:400; opacity:.8; }

/* ── Left + Right pair ───────────────────────────────────────── */
.by-ad-pair {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1rem;
  align-items:center;
}
.by-ad-pair--1 { grid-template-columns:minmax(0,1fr); }
.by-ad-pair--1 .by-ad-slot { max-width:728px; width:100%; margin:0 auto; }

/* Category page: below the nav bar */
.by-ad-pair--category { margin:1.25rem 0 .25rem; }

@media (max-width:640px) {
  .by-ad-pair { grid-template-columns:minmax(0,1fr); gap:.75rem; }
}

/* ── Mobile sticky header ad (phones only) ───────────────────
   Top Banner Ad 1 becomes a sticky bar at the very top of the
   screen, with the sticky header right under it.
   --by-mob-ad-h (the ad's height) is set by JS in by_mobile_header_ad(). */
.by-mobile-sticky-ad { display:none; }

@media (max-width:768px) {
  body.has-mobile-header-ad .by-top-ad--1 { display:none !important; }

  .by-mobile-sticky-ad--top {
    display:block;
    position:sticky;
    top:0;
    z-index:901;               /* above the header (900) */
    width:100%;
    background:var(--by-surface, #fff);
    text-align:center;
    line-height:0;
  }
  .by-mobile-sticky-ad .by-ad-img {
    border-radius:0; margin:0 auto;
    width:100%; max-height:100px; object-fit:contain;   /* never covers the screen */
  }

  /* Header and the drop-down mobile menu sit just below the ad */
  body.has-mobile-header-ad .by-header { top:var(--by-mob-ad-h, 0px) !important; }
  body.has-mobile-header-ad .by-mobile-menu { top:calc(60px + var(--by-mob-ad-h, 0px)) !important; }
}