/* Adsterra Ad Placements - Responsive & Non-Intrusive */

/* General Ad Container */
.ad-container,
.mobile-ad-container {
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  overflow: hidden;
}

/* Ad Wrapper for better control */
.ad-wrapper {
  text-align: center;
  margin: 20px 0;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Top Banner Ad (728x90 - Desktop) */
.ad-banner-top {
  width: 100%;
  text-align: center;
  margin: 15px 0;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 5px;
}

.ad-banner-top iframe,
.ad-banner-top > div {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Medium Rectangle Ad (300x250) */
.ad-sidebar,
.ad-rectangle {
  margin: 20px auto;
  text-align: center;
  max-width: 320px;
}

.ad-sidebar iframe,
.ad-rectangle iframe,
.ad-sidebar > div,
.ad-rectangle > div {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Mobile Banner Ad (320x50) */
.ad-mobile {
  width: 100%;
  text-align: center;
  margin: 15px 0;
  padding: 10px 0;
}

.ad-mobile iframe,
.ad-mobile > div {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Between Content Ad */
.ad-between-content {
  margin: 30px 0;
  padding: 15px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

.ad-between-content iframe,
.ad-between-content > div {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Ad Label */
.ad-label {
  font-size: 11px;
  color: #888;
  text-align: center;
  margin-bottom: 8px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Desktop Design (769px and above) */
@media (min-width: 769px) {
  .ad-container,
  .mobile-ad-container {
    margin: 25px auto;
  }

  .ad-banner-top {
    margin: 20px 0;
    padding: 15px 0;
  }

  .ad-sidebar,
  .ad-rectangle {
    margin: 25px auto;
    max-width: 320px;
  }

  .ad-desktop-only {
    display: block !important;
  }

  .ad-mobile-only {
    display: none !important;
  }
}

/* Mobile Design (768px and below) */
@media (max-width: 768px) {
  .ad-container,
  .mobile-ad-container {
    margin: 15px auto;
    padding: 0 5px;
  }

  .ad-banner-top {
    margin: 12px 0;
    padding: 8px 0;
  }

  .ad-sidebar,
  .ad-rectangle {
    margin: 15px auto;
    max-width: 100%;
  }

  .ad-mobile {
    margin: 12px 0;
    padding: 8px 0;
  }

  .ad-between-content {
    margin: 20px 0;
    padding: 10px 5px;
  }

  .ad-desktop-only {
    display: none !important;
  }

  .ad-mobile-only {
    display: block !important;
  }
}

/* Tablet Design (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .ad-container,
  .mobile-ad-container {
    margin: 20px auto;
  }

  .ad-sidebar,
  .ad-rectangle {
    max-width: 300px;
  }
}

/* Large Desktop (1025px and above) */
@media (min-width: 1025px) {
  .ad-container,
  .mobile-ad-container {
    margin: 30px auto;
  }

  .ad-sidebar,
  .ad-rectangle {
    max-width: 320px;
  }
}

/* Prevent ad overflow */
iframe[src*="politicsgrowinghollow.com"],
[id^="container-"] {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* Ad spacing between sections */
.content-container > .ad-wrapper {
  margin: 40px 0 30px 0;
}

/* Smooth transitions */
.ad-container,
.ad-wrapper {
  transition: opacity 0.3s ease-in-out;
}