/* ==========================================================================
   Nugget iOS - AdX Responsive Ad Placements & Layout Protection
   ========================================================================== */

/* Prevent horizontal overflow across all pages while maintaining vertical scrolling */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Ensure content is never obscured when scrolled to the very bottom */
body {
  padding-bottom: 120px !important;
}

@media (max-width: 768px) {
  body {
    padding-bottom: 110px !important;
  }
}

/* Ensure all injected ad contents/iframes fit cleanly within their containers */
div[data-ad] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

div[data-ad] iframe {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* --- 1. Video Ad Slot (`video` — 400×225) --- */
.nugget-ad-video-wrapper {
  width: 100%;
  max-width: 100%;
  margin: 35px auto 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
  position: relative;
  z-index: 2;
  order: 5 !important; /* Always sits after feature cards in mobile flex column */
}

.nugget-ad-video-container {
  width: 100%;
  max-width: 400px;
  min-height: 200px;
  aspect-ratio: 16 / 9;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.nugget-ad-video-container > div[data-ad="video"] {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- 2. Billboard Desktop Ad Slot (`billboard-1` — 970×250) --- */
.nugget-ad-billboard-wrapper {
  width: 100%;
  max-width: 970px;
  margin: 35px auto 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}

.nugget-ad-billboard-container {
  width: 100%;
  max-width: 970px;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
}

.nugget-ad-billboard-container > div[data-ad="billboard-1"] {
  width: 100%;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* --- 3. Mobile Unit Ad Slot (`mobile-unit-1` — 300×250) --- */
.nugget-ad-mobile-wrapper {
  width: 100%;
  max-width: 320px;
  margin: 25px auto 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  position: relative;
  z-index: 2;
}

.nugget-ad-mobile-container {
  width: 100%;
  max-width: 300px;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: transparent;
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
}

.nugget-ad-mobile-container > div[data-ad="mobile-unit-1"] {
  width: 100%;
  min-height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Responsive Display Rules: Billboard (>= 1024px) vs Mobile Unit (< 1024px) */
@media (min-width: 1024px) {
  .nugget-ad-billboard-wrapper {
    display: flex !important;
  }
  .nugget-ad-mobile-wrapper {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .nugget-ad-billboard-wrapper {
    display: none !important;
  }
  .nugget-ad-mobile-wrapper {
    display: flex !important;
  }
}

/* --- 4. Right Rail Ad Slot (`right-rail-2` — 300×600) --- */
.nugget-ad-right-rail-wrapper {
  position: fixed;
  top: 140px;
  width: 300px;
  min-height: 600px;
  z-index: 90;
  display: none; /* Hidden on screens without adequate gutter space */
  box-sizing: border-box;
  pointer-events: auto;
}

.nugget-ad-right-rail-container {
  width: 300px;
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 14px;
  overflow: hidden;
  box-sizing: border-box;
}

.nugget-ad-right-rail-container > div[data-ad="right-rail-2"] {
  width: 300px;
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Position Right Rail in right gutter when screen >= 1850px, ensuring 100% visibility without cutoff */
@media (min-width: 1850px) {
  .nugget-ad-right-rail-wrapper {
    display: block !important;
    right: max(20px, calc(50% - 920px));
    left: auto;
  }
}

@media (max-width: 1849px) {
  .nugget-ad-right-rail-wrapper {
    display: none !important;
  }
}

/* --- 5. Bottom Sticky / Anchor Ad Slot (`anchor` — 1000×100) --- */
.nugget-ad-anchor-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99990;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* Allow clicks around margin */
  box-sizing: border-box;
  padding: 0 10px;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.nugget-ad-anchor-container {
  pointer-events: auto; /* Clickable ad container */
  max-width: 1000px;
  width: 100%;
  min-height: 50px;
  max-height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(102, 126, 234, 0.2);
  border-bottom: none;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -5px 25px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  overflow: hidden;
}

.nugget-ad-anchor-container > div[data-ad="anchor"] {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 768px) {
  .nugget-ad-anchor-container {
    border-radius: 12px 12px 0 0;
    max-height: 90px;
  }
}