/*
 * ads.css — PlaygroundsNearbyMe Ad Slot Styles
 *
 * Integrates with the adserver-plugin.js default CSS classes.
 * Overrides default plugin styles to match the playground site's green theme.
 * All rules are namespaced to .ad-slot-wrapper so they don't bleed.
 */

/* ─── Wrapper ─────────────────────────────────────────────────────────────── */
.ad-slot-wrapper {
  margin: 24px 0;
}

/* ─── Ad card (injected by adserver-plugin.js) ────────────────────────────── */
.ad-slot-wrapper .adserver-ad {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 20px;
  margin: 0;
  font-family: inherit;
  position: relative;
}

/* ─── Sponsored label ─────────────────────────────────────────────────────── */
.adserver-label,
.ad-sponsored-label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 0.5rem;
}

/* Scoped version inside ad-slot-wrapper (overrides above for nested context) */
.ad-slot-wrapper .adserver-ad .adserver-label {
  font-size: 10px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
  display: block;
}

/* Hook headline */
.ad-slot-wrapper .adserver-ad h3 {
  font-size: 16px;
  font-weight: 700;
  color: #166534;
  margin: 0 0 8px;
  line-height: 1.35;
}

/* Body copy */
.ad-slot-wrapper .adserver-ad p {
  font-size: 14px;
  color: #374151;
  margin: 0 0 12px;
  line-height: 1.5;
}

/* Creative image */
.ad-slot-wrapper .adserver-ad img {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 12px;
  display: block;
}

/* CTA button */
.ad-slot-wrapper .adserver-ad a.adserver-cta {
  display: inline-block;
  padding: 9px 18px;
  background: #16a34a;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: background 0.15s ease;
}

.ad-slot-wrapper .adserver-ad a.adserver-cta:hover {
  background: #15803d;
}

/* ─── City inline ad wrapper ─────────────────────────────────────────────── */
/*
 * When the inline city ad renders inside a results list, give it
 * amber/yellow tinting + left border to visually distinguish from playground cards.
 */
.ad-slot-city-inline .adserver-ad {
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 3px solid #f59e0b;
}

.ad-slot-city-inline .adserver-ad h3 {
  color: #92400e;
}

.ad-slot-city-inline .adserver-ad a.adserver-cta {
  background: #d97706;
}

.ad-slot-city-inline .adserver-ad a.adserver-cta:hover {
  background: #b45309;
}

/* ─── Sidebar/inline sponsored card ────────────────────────────────────────── */
.ad-card-sponsored {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.ad-card-sponsored h3 {
  font-size: 0.9rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: #111827;
}

.ad-card-sponsored p {
  font-size: 0.8rem;
  color: #4b5563;
  margin: 0 0 0.75rem;
}

/* Sidebar ad uses the sponsored card style */
.ad-slot-sidebar .adserver-ad {
  background: #fffbeb;
  border-color: #fde68a;
  border-left: 3px solid #f59e0b;
}

.ad-slot-sidebar .adserver-ad h3 {
  color: #92400e;
  font-size: 0.9rem;
}

.ad-slot-sidebar .adserver-ad a.adserver-cta {
  background: #d97706;
}

.ad-slot-sidebar .adserver-ad a.adserver-cta:hover {
  background: #b45309;
}

/* ─── Sticky sidebar ad (desktop only) ───────────────────────────────────── */
@media (min-width: 769px) {
  .ad-sidebar-sticky {
    position: sticky;
    top: 1rem;
  }
}

/* ─── Footer banner strip (above footer, all pages) ─────────────────────── */
.ad-banner-strip {
  background: #f0fdf4;
  border-top: 1px solid #bbf7d0;
  padding: 1.25rem 1.5rem;
}

.ad-banner-strip .ad-banner-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ad-banner-strip .ad-slot-wrapper {
  flex: 1;
  min-width: 200px;
  margin: 0;
}

.ad-banner-strip .ad-slot-wrapper .adserver-ad {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

.ad-banner-strip .ad-slot-wrapper .adserver-ad h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: #111827;
}

.ad-banner-strip .ad-slot-wrapper .adserver-ad p {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0;
}

/* ─── Mobile sticky footer banner ───────────────────────────────────────── */
@media (max-width: 768px) {
  .ad-banner-strip {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9000;
    border-top: 1px solid #bbf7d0;
    padding: 0.75rem 1rem;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
  }

  /* Push page content above the sticky banner */
  body {
    padding-bottom: 90px;
  }

  .ad-banner-strip .ad-banner-dismiss {
    display: flex;
  }
}

.ad-banner-strip .ad-banner-dismiss {
  display: none;
  background: none;
  border: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: #9ca3af;
  padding: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

/* ─── Inline ad (mobile + desktop) — borderless image-fill style ────────── */
/*
 * playground_mobile_inline slot: renders like a frameless image block rather
 * than a card. The "Sponsored" label sits above a full-width image with no
 * border, background, or padding around it — closer to the interscroller
 * aesthetic than the sidebar card.
 */
.ad-inline {
  margin: 1.5rem 0;
}

.ad-inline .adserver-ad {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

/* Label: "Sponsored" / "Advertisement" — small, muted, above the image */
.ad-inline .adserver-ad .adserver-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9ca3af;
  margin-bottom: 6px;
  display: block;
}

/* Image fills full slot width, no rounding */
.ad-inline .adserver-ad img {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 0;
  margin: 0 0 8px;
  display: block;
}

/* Headline and body — minimal padding when present */
.ad-inline .adserver-ad h3 {
  font-size: 15px;
  margin: 0 0 6px;
  color: #1a1a1a;
}

.ad-inline .adserver-ad p {
  font-size: 13px;
  margin: 0 0 8px;
  color: #555;
}

/* CTA — keep it but de-emphasise */
.ad-inline .adserver-ad a.adserver-cta {
  font-size: 13px;
  padding: 6px 14px;
}

/* ─── Feed-injected ad (city listing, between cards) ────────────────────── */
.ad-listing-inject {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 8px;
  padding: 1rem 1.25rem;
}

/* ─── Legacy footer banner ad ────────────────────────────────────────────── */
/* Kept for backwards compatibility; now primarily inside .ad-banner-strip */
.ad-slot-footer {
  margin: 0;
}

.ad-slot-footer .adserver-ad {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* ─── Responsive tweaks ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ad-slot-wrapper .adserver-ad {
    padding: 16px;
  }

  .ad-slot-wrapper .adserver-ad h3 {
    font-size: 15px;
  }
}

/* ─── Empty state (no ad returned) ───────────────────────────────────────── */
/*
 * When the slot is empty (no ad served), the wrapper div stays in the DOM
 * but has no visible children. Collapse its margin so layout isn't affected.
 */
.ad-slot-wrapper:empty,
.ad-slot-wrapper:not(:has(.adserver-ad)) {
  margin: 0;
}

/* Hide the entire banner strip if the inner slot is empty */
.ad-banner-strip:has(.ad-slot-wrapper:not(:has(.adserver-ad))) {
  display: none;
}

@media (max-width: 768px) {
  .ad-banner-strip:has(.ad-slot-wrapper:not(:has(.adserver-ad))) {
    display: none;
  }

  /* Reset padding-bottom if banner is hidden */
  .ad-banner-strip[style*="display: none"] ~ * {
    padding-bottom: 0;
  }
}

/* ─── Interscroller ("Parallax Window") Ad Format ───────────────────────────
 *
 * Visual: A full-viewport "window" cut into the scrolling content list.
 * As the user scrolls, the surrounding content moves over a fixed ad creative,
 * creating the illusion that the ad lives on a layer beneath the page.
 *
 * Technique:
 *   - The slot lives in the CSS grid with grid-column:1/-1 (spans all columns)
 *   - overflow:clip on the slot parent clips the inner sticky element to the
 *     slot's bounds WITHOUT creating a scroll container (unlike overflow:hidden,
 *     which would break position:sticky in Chrome/Firefox)
 *   - The inner element uses position:sticky;top:0 — it pins to the viewport
 *     top while the slot scrolls through, then vanishes when the slot exits
 *   - Full-bleed breakout: width:100vw + margin-left:calc(50% - 50vw) pushes
 *     the slot edge-to-edge regardless of the container max-width
 *
 * Ad server fills the slot via window.InterscrollerAds.fill() or .fillIframe()
 * ─────────────────────────────────────────────────────────────────────────── */

.interscroller-ad-slot {
  /* Span all grid columns */
  grid-column: 1 / -1;

  /* Full-bleed breakout from the centered container.
     50% = half the grid's containing-block width (grid is centered).
     50vw = half the viewport. The difference is the inset from the viewport edge. */
  width: 100vw;
  margin-left: calc(50% - 50vw);

  /* Slot occupies full viewport height in document flow.
     The user "scrolls through" this height, during which the sticky
     inner element remains at the top of the viewport. */
  height: 100vh;

  /* CRITICAL: overflow:clip clips the sticky child to this element's visible
     area without creating a scroll container. overflow:hidden would break
     position:sticky in Chromium/Firefox. */
  overflow: clip;

  /* Vertical breathing room between cards */
  margin-top: 2rem;
  margin-bottom: 2rem;

  /* Subtle separator lines — shows edge of the "window" */
  border-top: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);

  position: relative;
}

.interscroller-ad-inner {
  /* Sticks to viewport top while the slot element scrolls past.
     When the slot's top edge is above the viewport the element pins here;
     once the slot's bottom exits the viewport it disappears (clipped by parent). */
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;

  /* Centre the creative both axes */
  display: flex;
  align-items: center;
  justify-content: center;

  background: #1a1a2e; /* Dark default; ad creative overlays this fully */
  overflow: hidden;
}

/* Loading shimmer — shown until ad server responds */
.interscroller-ad-inner.is-loading {
  background: linear-gradient(
    90deg,
    #2a2a3e 25%,
    #3a3a4e 50%,
    #2a2a3e 75%
  );
  background-size: 200% 100%;
  animation: interscroller-shimmer 1.8s ease-in-out infinite;
}

@keyframes interscroller-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Creative container — fills the entire sticky area */
.interscroller-ad-content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* iframe creative */
.interscroller-ad-content iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* "Advertisement" label — top-right, always readable */
.interscroller-ad-label {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(0, 0, 0, 0.42);
  padding: 3px 8px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 10;
  user-select: none;
}

/* Scroll-progress bar — thin strip along the bottom.
   Width is updated by interscroller-ads.js as the user scrolls through. */
.interscroller-ad-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  z-index: 11;
  transition: width 0.07s linear;
}

/* No-fill / empty: collapse the slot so it takes no space */
.interscroller-ad-slot.is-empty {
  display: none;
}

/* ─── Mobile adjustments ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .interscroller-ad-slot {
    height: 85vh;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .interscroller-ad-inner {
    height: 85vh;
  }
}

/* ─── Reduced-motion: disable shimmer for accessibility ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .interscroller-ad-inner.is-loading {
    animation: none;
    background: #2a2a3e;
  }
}