@layer components {
  /* Basic Ad Wrapper */
  .ad-wrapper {
    @apply py-2.5 overflow-hidden h-full;
  }

  .ad-wrapper p {
    @apply font-sans m-0;
  }

  /* Full-width Ad Wrapper */
  .ad-wrapper-full {
    @apply py-2.5 overflow-hidden w-screen -mx-[52.9vw] mb-0;
  }

  .ad-wrapper-full p {
    @apply font-sans m-0;
  }

  /* Content Ad */
  .content-ad-wrapper {
    @apply p-2.5;
  }

  .content-ad-inner {
    @apply max-w-[728px] mx-auto;
  }

  /* Tool Text with Ad */
  .tool-text-wrapper {
    @apply flex gap-2.5;
  }
/*
  .tool-text {
    @apply w-[70%];
  } */

  .tool-text-wrapper .ad-wrapper {
    @apply w-[30%];
  }

  /* Sticky Sidebar Ad */
  .sticky-right-sidebar {
    @apply sticky top-[100px] p-2.5;
  }

  .sticky-right-sidebar-50 {
    @apply p-2.5 text-center;
    min-height: 50vh; /* Reasonable height for intersection observer */
    position: relative; /* Ensure sticky context */
  }

  .sticky-right-sidebar-50 .block__content,
  .sticky-right-sidebar-50 .text-content {
    @apply h-full;
  }

  /* Target AdThrive sidebar ads directly for sticky positioning */
  .sticky-right-sidebar-50 .adthrive-sidebar,
  .sticky-right-sidebar-50 .ad-wrapper {
    /* Natural sticky positioning - let each ad stick in place as you scroll */
    position: sticky !important;
    top: 100px;
    width: 300px;
    min-height: 250px;
    display: block;
  }

  /* Fixed sidebar ads container (created by JS) */
  #sidebar-ads-container {
    /* Styles applied via JavaScript for better control */
  }

  /* Text Styles */
  .ad-wrapper,
  .ad-wrapper p,
  .ad-wrapper-full p,
  .content-ad-wrapper p,
  .sticky-right-sidebar p,
  .sticky-right-sidebar-50 p {
    @apply text-light-gray text-sm text-center font-sans;
  }

  /* Dark mode support */
  @media (prefers-color-scheme: dark) {
    /* .ad-wrapper,
    .ad-wrapper-full,
    .content-ad-wrapper,s
    .sticky-right-sidebar,
    .sticky-right-sidebar-50,
    .footer-ad-wrapper {
      @apply bg-almanac-gray-700;
    } */

    /* .ad-wrapper p,
    .ad-wrapper-full p {
      @apply text-white;
    } */
  }

  /* Responsive Layout */
  @media (max-width: 1188px) {
    .tool-text-wrapper {
      @apply flex-wrap;
    }

    .tool-text-wrapper .ad-wrapper,
    .tool-text {
      @apply w-full;
    }
  }

  /* Mobile Responsive Ad Visibility */
  @media (max-width: 768px) {
    /* Hide desktop-only ads on mobile */
    .adthrive-below-post-desktop,
    .adthrive-sidebar-desktop {
      display: none !important;
    }

    /* Show mobile-only ads */
    .mobile-only {
      display: block !important;
    }

    /* Make sidebar ads responsive */
    .sticky-right-sidebar-50 .ad-wrapper {
      width: 100% !important;
      max-width: 320px !important;
      margin: 0 auto !important;
      position: relative !important; /* Remove sticky on mobile */
      top: auto !important;
    }
  }

  @media (min-width: 769px) {
    /* Hide mobile-only ads on desktop */
    .mobile-only {
      display: none !important;
    }
  }
}