/* Escorts Banners — Frontend Styles */

/* ── Shared: Ad label (hidden per request) ── */
.eb-adlabel {
  display: none !important;
}

/* ── Placeholder (empty slot) ── */
.eb-placeholder {
  width: 100%; height: 100%; min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  color: #ccc; font-size: 13px; font-family: sans-serif;
  background: repeating-linear-gradient(
    45deg, #f3f3f3, #f3f3f3 8px, #e8e8e8 8px, #e8e8e8 16px
  );
}

/* ── Shared image helpers ──
 * Default: show the FULL banner at its natural aspect ratio (never cropped).
 * Fixed-size containers (grid card / mobile slide) override to fill via cover. */
.eb-img       { width: 100%; height: auto; display: block; }
.eb-img-link  { display: block; width: 100%; }
.eb-html-wrap { width: 100%; display: flex; align-items: center; justify-content: center; }

/* ─────────────────────────────────────────────────────────────
 * HORIZONTAL BANNER WRAP (home / city / SEO) + PROFILE
 * Natural height: the active slide's image defines the height,
 * inactive slides overlay it. No cropping, fully responsive.
 * ───────────────────────────────────────────────────────────── */
.eb-horiz-wrap {
  position: relative; margin: 1.5rem auto;
  border-radius: 8px; overflow: hidden;
  background: #f3f3f3; width: 100%;
}
.eb-horiz-inner {
  position: relative; width: 100%;
}

/* Fade (default) — inactive slides overlay the active one */
.eb-horiz-item {
  position: absolute; top: 0; left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}
.eb-horiz-item.active {
  position: relative; /* in-flow: gives the wrap its natural height */
  opacity: 1;
  pointer-events: auto;
}
.eb-horiz-item img { width: 100%; height: auto; display: block; }

/* Slide transition */
.eb-horiz-wrap[data-transition="slide"] .eb-horiz-item {
  transform: translateX(100%);
  transition: transform .45s ease, opacity .1s;
}
.eb-horiz-wrap[data-transition="slide"] .eb-horiz-item.active {
  transform: translateX(0); opacity: 1;
}
.eb-horiz-wrap[data-transition="slide"] .eb-horiz-item.leaving {
  transform: translateX(-100%); opacity: 0;
}

/* Dots navigation */
.eb-horiz-dots {
  text-align: center; padding: 6px 0 4px;
  display: flex; justify-content: center; gap: 6px;
}
.eb-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(0,0,0,.2); border: none; padding: 0;
  cursor: pointer; transition: background .2s;
}
.eb-dot.active { background: rgba(0,0,0,.55); }
.eb-dot:focus  { outline: 2px solid #0073aa; }

/* ─────────────────────────────────────────────────────────────
 * IN-FEED GRID BANNER SLOT (desktop homepage grid — fixed card)
 * Fills the card like other listing cards (cover).
 * ───────────────────────────────────────────────────────────── */
.escort-grid-banner-slot {
  position: relative; overflow: hidden;
  border-radius: 12px; background: #f3f3f3;
  min-height: 280px;
}
.escort-grid-banner-slot .eb-horiz-wrap {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: 0;
  max-width: none !important;
  border-radius: 12px;
  background: #f3f3f3;
}
.escort-grid-banner-slot .eb-horiz-inner { height: 100%; }
.escort-grid-banner-slot .eb-horiz-item,
.escort-grid-banner-slot .eb-horiz-item.active {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
/* Fill the fixed card */
.escort-grid-banner-slot .eb-img,
.escort-grid-banner-slot .eb-horiz-item img {
  height: 100%; object-fit: cover;
}
.escort-grid-banner-slot .eb-horiz-dots {
  position: absolute; bottom: 6px; left: 0; right: 0; z-index: 5;
}
.escort-grid-banner-slot .eb-dot { background: rgba(255,255,255,.5); }
.escort-grid-banner-slot .eb-dot.active { background: rgba(255,255,255,.95); }

/* ─────────────────────────────────────────────────────────────
 * PROFILE SIDEBAR BANNER (natural height, never cropped)
 * ───────────────────────────────────────────────────────────── */
.eb-profile-banner {
  position: relative; overflow: hidden;
  border-radius: 10px; background: #f3f3f3;
  margin-bottom: 2rem;
}
.eb-profile-banner .eb-horiz-wrap {
  margin: 0;
  max-width: none !important;
  border-radius: 10px;
  background: transparent;
}
.eb-profile-banner .eb-img,
.eb-profile-banner .eb-horiz-item img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 360px;   /* keep sidebar ad a sensible size, full image (no crop) */
  margin: 0 auto;
  border-radius: 8px;
}

/* ─────────────────────────────────────────────────────────────
 * AD BANNER AS A MOBILE SLIDER SLIDE (homepage Glide carousel)
 * Fixed-size card to match profile cards.
 * ───────────────────────────────────────────────────────────── */
.eb-mobile-slide {
  display: flex; align-items: center; justify-content: center;
}
.eb-mobile-slide .escort-grid-banner-slot {
  width: 100%; max-width: 340px; height: 420px;
  min-height: 420px;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.eb-mobile-slide .escort-grid-banner-slot .eb-horiz-wrap {
  border-radius: 24px;
}

/* ── Mobile adjustments ── */
@media (max-width: 767px) {
  /* Horizontal & profile banners keep natural aspect ratio on mobile
     (no forced height — that was cropping the creatives). */
  .eb-horiz-wrap { max-width: 100% !important; }

  /* Desktop in-feed grid card a bit shorter on mobile */
  .escort-grid-banner-slot { min-height: 180px; }
}