/* ==========================================================================
   DUMBBELL GURU — PROFESSIONAL ADVERTISING SYSTEM (ADS.CSS)
   Aesthetic: Premium Obsidian & Biomechanical Precision Integration
   Complies with: Google AdSense Placement Policies & Core Web Vitals (Zero CLS)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Ad System Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --ad-bg-surface: rgba(16, 18, 26, 0.75);
  --ad-bg-inner: rgba(9, 10, 15, 0.65);
  --ad-border-subtle: rgba(255, 255, 255, 0.08);
  --ad-border-hover: rgba(255, 255, 255, 0.16);
  --ad-label-color: rgba(203, 213, 225, 0.45);
  --ad-label-bg: rgba(255, 255, 255, 0.04);
  --ad-placeholder-text: rgba(148, 163, 184, 0.55);
  --ad-placeholder-dim: rgba(100, 116, 139, 0.7);
  --ad-accent-glow: rgba(255, 98, 0, 0.08);
  --ad-radius: 12px;
  --ad-radius-sm: 6px;
  --ad-transition: 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.dumbbell-mode-active {
  --ad-accent-glow: rgba(0, 229, 255, 0.08);
}

/* --------------------------------------------------------------------------
   Core Ad Slot Outer Wrapper & Spacing
   -------------------------------------------------------------------------- */
.ad-slot-wrapper {
  width: 100%;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  clear: both;
}

/* Generous section spacing around in-content and banner ads */
.ad-banner-top-wrapper {
  margin: 1.25rem 0 0.5rem 0;
  padding: 0 clamp(1rem, 2.5vw, 2.5rem);
}

.ad-incontent-wrapper {
  margin: 3.5rem auto;
  padding: 0 clamp(1rem, 2.5vw, 2.5rem);
  max-width: var(--container-max, 1360px);
}

.ad-banner-bottom-wrapper {
  margin: 3.5rem auto 1.5rem auto;
  padding: 0 clamp(1rem, 2.5vw, 2.5rem);
  max-width: var(--container-max, 1360px);
}

/* --------------------------------------------------------------------------
   Standard Base Ad Container Component
   -------------------------------------------------------------------------- */
.ad-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ad-bg-surface);
  border: 1px solid var(--ad-border-subtle);
  border-radius: var(--ad-radius);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03);
  box-sizing: border-box;
  transition: border-color var(--ad-transition), box-shadow var(--ad-transition);
  contain: layout;
  overflow: hidden;
}

.ad-container:hover {
  border-color: var(--ad-border-hover);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 25px var(--ad-accent-glow);
}

/* --------------------------------------------------------------------------
   IAB & Google AdSense Label Indicator
   -------------------------------------------------------------------------- */
.ad-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ad-label-color);
  background: var(--ad-label-bg);
  border-bottom: 1px solid var(--ad-border-subtle);
  border-right: 1px solid var(--ad-border-subtle);
  border-top-left-radius: var(--ad-radius);
  border-bottom-right-radius: var(--ad-radius-sm);
  align-self: flex-start;
  user-select: none;
  pointer-events: none;
}

.ad-label::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Ad Content Frame (Holds <ins class="adsbygoogle"> or Ad Unit)
   -------------------------------------------------------------------------- */
.ad-content-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1rem 1rem 1rem;
  box-sizing: border-box;
  overflow: hidden;
}

/* Google AdSense ins tag normalization */
.ad-content-wrapper ins.adsbygoogle {
  display: block !important;
  margin: 0 auto !important;
  max-width: 100% !important;
}

/* --------------------------------------------------------------------------
   Clean Minimalist Placeholder (Shown before ad network script loads)
   -------------------------------------------------------------------------- */
.ad-placeholder-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 100%;
  background: var(--ad-bg-inner);
  border: 1px dashed var(--ad-border-subtle);
  border-radius: var(--ad-radius-sm);
  padding: 1.25rem 1rem;
  box-sizing: border-box;
  text-align: center;
  transition: all var(--ad-transition);
}

.ad-placeholder-box .ad-icon {
  font-size: 1.35rem;
  color: var(--ad-placeholder-text);
  opacity: 0.6;
}

.ad-placeholder-title {
  font-family: var(--font-display, 'Barlow Condensed', sans-serif);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ad-placeholder-text);
}

.ad-placeholder-spec {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ad-placeholder-dim);
}

/* --------------------------------------------------------------------------
   Graceful Ad Slot Collapsing & Pre-Approval Clean Mode
   Hides placeholder boxes and collapses ad slots until a live ad is filled
   -------------------------------------------------------------------------- */
.ad-placeholder-box {
  display: none !important;
}

/* Collapse empty ad slots cleanly to 0px when no live ad is present */
.ad-slot-wrapper:not(:has(iframe)):not(:has(ins[data-ad-status="filled"])):not(:has(.has-live-ad)),
.ad-container:not(:has(iframe)):not(:has(ins[data-ad-status="filled"])):not(.has-live-ad),
.ad-sidebar-rail:not(:has(iframe)):not(:has(ins[data-ad-status="filled"])):not(:has(.has-live-ad)),
.ad-slot-wrapper.is-unfilled,
.ad-container.is-unfilled {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
}

/* Auto-reveal whenever Google AdSense or an ad iframe is active and filled */
.ad-slot-wrapper:has(iframe),
.ad-slot-wrapper:has(ins[data-ad-status="filled"]),
.ad-slot-wrapper:has(.has-live-ad),
.ad-container:has(iframe),
.ad-container:has(ins[data-ad-status="filled"]),
.ad-container.has-live-ad {
  display: flex !important;
}

/* --------------------------------------------------------------------------
   COMPONENT 1: AdBanner (Top & Bottom Leaderboards)
   Standard Sizes: 970x90, 970x250, 728x90 (Desktop) | 320x50, 320x100 (Mobile)
   CLS Prevention: Reserved min-height across breakpoints
   -------------------------------------------------------------------------- */
.ad-banner,
.AdBanner {
  width: 100%;
  max-width: 1000px;
  min-height: 124px; /* 90px ad + label + padding */
}

.ad-top-banner {
  max-width: var(--container-max, 1360px);
}

.ad-banner .ad-content-wrapper {
  min-height: 90px;
}

/* --------------------------------------------------------------------------
   COMPONENT 2: AdInContent (Between Sections)
   Standard Sizes: 728x90, 970x90, 970x250, 336x280, 300x250
   CLS Prevention: Reserved min-height
   -------------------------------------------------------------------------- */
.ad-in-content,
.AdInContent {
  width: 100%;
  max-width: 970px;
  min-height: 140px;
}

.ad-in-content.ad-in-content-large {
  min-height: 290px; /* Accommodates 300x250 / 336x280 / 970x250 */
}

.ad-in-content .ad-content-wrapper {
  min-height: 100px;
}

.ad-in-content.ad-in-content-large .ad-content-wrapper {
  min-height: 250px;
}

/* --------------------------------------------------------------------------
   COMPONENT 3: AdSidebar (Desktop Sidebar Placement)
   Standard Sizes: 300x250, 300x600 (Half Page), 160x600 (Wide Skyscraper)
   -------------------------------------------------------------------------- */
.ad-sidebar,
.AdSidebar {
  width: 100%;
  max-width: 320px;
  min-height: 640px; /* Accommodates 300x600 skyscraper + label */
}

.ad-sidebar .ad-content-wrapper {
  min-height: 600px;
  width: 300px;
  max-width: 100%;
}

.ad-sidebar.ad-sidebar-medium {
  min-height: 295px;
}

.ad-sidebar.ad-sidebar-medium .ad-content-wrapper {
  min-height: 250px;
}

/* Desktop Widescreen Side Rail (Docked in outer gutter on >= 1560px screens) */
.ad-sidebar-rail {
  position: fixed;
  top: calc(var(--header-height, 74px) + 2rem);
  right: max(1rem, calc((100vw - 1360px) / 4 - 80px));
  width: 160px;
  min-height: 630px;
  z-index: 85;
  display: none;
}

.ad-sidebar-rail .ad-content-wrapper {
  min-height: 600px;
  width: 160px;
  padding: 0.5rem 0;
}

@media (min-width: 1720px) {
  .ad-sidebar-rail {
    display: flex;
  }
}

/* --------------------------------------------------------------------------
   Desktop Split Grid (In-Content Banner + Desktop Sidebar Slot)
   Desktop (>= 992px): 2-Column Banner & Sidebar
   Tablet/Mobile (< 992px): Stacked responsive units
   -------------------------------------------------------------------------- */
.ad-split-wrapper {
  max-width: var(--container-max, 1360px);
  width: 100%;
}

.ad-split-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.5rem;
  width: 100%;
  align-items: stretch;
}

@media (max-width: 991px) {
  .ad-split-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   COMPONENT 4: AdMobile (Mobile-Specific Optimized Placement)
   Standard Sizes: 320x50 (Mobile Banner), 320x100 (Large Mobile Banner)
   -------------------------------------------------------------------------- */
.ad-mobile,
.AdMobile {
  width: 100%;
  max-width: 340px;
  min-height: 84px; /* 50px ad + label + padding */
}

.ad-mobile .ad-content-wrapper {
  min-height: 50px;
  padding: 0.5rem 0.5rem 0.75rem 0.5rem;
}

/* Mobile-only slot visibility */
.ad-mobile-only {
  display: none;
}

@media (max-width: 767px) {
  .ad-mobile-only {
    display: flex;
  }
}

/* Desktop-only slot visibility */
@media (max-width: 991px) {
  .ad-desktop-only {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Graceful Unfilled & Empty Handling (Never leave ugly empty space)
   -------------------------------------------------------------------------- */
/* When Google AdSense returns unfilled */
.ad-container:has(ins[data-ad-status="unfilled"]),
.ad-container.is-unfilled,
.ad-container.is-empty,
.ad-slot-wrapper.is-unfilled {
  display: none !important;
}

/* In production mode without placeholder preview */
.ad-system-clean .ad-placeholder-box {
  display: none;
}

.ad-system-clean .ad-container:not(.has-live-ad):not(:has(iframe)):not(:has(ins[data-ad-status="filled"])) {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Responsive Breakpoints & Fluid Adaptability
   -------------------------------------------------------------------------- */
/* Large Desktop (>= 1200px) */
@media (min-width: 1200px) {
  .ad-banner {
    max-width: 1000px;
  }
}

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
  .ad-incontent-wrapper,
  .ad-banner-top-wrapper,
  .ad-banner-bottom-wrapper {
    margin: 2.25rem auto;
  }

  .ad-banner,
  .AdBanner {
    max-width: 750px;
    min-height: 124px;
  }

  .ad-banner .ad-content-wrapper {
    min-height: 90px;
  }

  .ad-in-content,
  .AdInContent {
    max-width: 750px;
    min-height: 124px;
  }
}

/* Mobile Screens (<= 767px) */
@media (max-width: 767px) {
  .ad-incontent-wrapper,
  .ad-banner-top-wrapper,
  .ad-banner-bottom-wrapper {
    margin: 1.75rem auto;
    padding: 0 0.85rem;
  }

  .ad-container {
    border-radius: var(--ad-radius-sm);
  }

  .ad-banner,
  .AdBanner {
    max-width: 100%;
    min-height: 84px; /* Accommodates 320x50 on mobile */
  }

  .ad-banner .ad-content-wrapper {
    min-height: 50px;
    padding: 0.4rem 0.5rem 0.6rem 0.5rem;
  }

  .ad-in-content,
  .AdInContent {
    max-width: 100%;
    min-height: 295px; /* Fits 300x250 Medium Rectangle comfortably */
  }

  .ad-in-content .ad-content-wrapper {
    min-height: 250px;
    padding: 0.5rem;
  }

  .ad-placeholder-box {
    padding: 0.85rem 0.5rem;
  }

  .ad-placeholder-spec {
    font-size: 0.62rem;
  }
}

/* Small Handhelds (<= 360px) */
@media (max-width: 360px) {
  .ad-banner,
  .AdBanner,
  .ad-in-content,
  .AdInContent,
  .ad-mobile,
  .AdMobile {
    max-width: 100%;
  }

  .ad-content-wrapper {
    padding: 0.35rem;
  }
}