/* ==========================================================================
   TELUGU GOSPEL LYRICS — MOBILE AD OPTIMIZATION v9.0.9
   
   Enhanced mobile ad rendering across all device sizes
   • Multiple breakpoints for responsive ad sizing
   • Device-aware ad unit selection
   • Optimized spacing & readability
   • Maximum viewability on small screens
   ========================================================================== */

/* ---- EXTRA SMALL PHONES (< 380px) --------------------------------------- */
@media (max-width: 379px) {
  /* On smallest screens, prioritize readability over ad width */
  .tgl-ad {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Medium Rectangle stays contained on tiny screens */
  .tgl-ad--mrec {
    max-width: 280px;
  }
  .tgl-ad--mrec ins.adsbygoogle {
    min-height: 250px;
  }
  
  /* Half-page ad converts to vertical on extra small */
  .tgl-ad--halfpage {
    max-width: 280px;
  }
  .tgl-ad--halfpage ins.adsbygoogle {
    min-height: 500px;
  }
  
  /* Leader ads slightly taller on small screens */
  .tgl-ad--leader ins.adsbygoogle {
    min-height: 110px;
  }
  
  /* In-article ads optimized for small viewport */
  .tgl-ad--inarticle {
    max-width: 100%;
  }
  .tgl-ad--inarticle ins.adsbygoogle {
    min-height: 280px;
  }
  
  /* Auto ads with tight spacing */
  .google-auto-placed,
  .google-auto-placed.ap_container {
    margin: 12px 0 !important;
  }
  
  /* Header split ad tight spacing */
  .tgl-header-split-ad .tgl-ad {
    margin-top: 6px;
    margin-bottom: 0;
  }
}

/* ---- SMALL PHONES (380px - 429px) --------------------------------------- */
@media (min-width: 380px) and (max-width: 429px) {
  .tgl-ad {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* 320px fits nicely on small phones */
  .tgl-ad--mrec {
    max-width: 300px;
  }
  .tgl-ad--mrec ins.adsbygoogle {
    min-height: 250px;
  }
  
  /* Half-page mobile-friendly */
  .tgl-ad--halfpage {
    max-width: 300px;
  }
  .tgl-ad--halfpage ins.adsbygoogle {
    min-height: 550px;
  }
  
  .tgl-ad--leader ins.adsbygoogle {
    min-height: 105px;
  }
  
  /* In-article adjusted for small phones */
  .tgl-ad--inarticle {
    max-width: 100%;
  }
  .tgl-ad--inarticle ins.adsbygoogle {
    min-height: 280px;
  }
  
  .google-auto-placed,
  .google-auto-placed.ap_container {
    margin: 14px 0 !important;
  }
  
  .tgl-header-split-ad .tgl-ad {
    margin-top: 8px;
    margin-bottom: 0;
  }
}

/* ---- MEDIUM PHONES (430px - 767px) ------------------------------------- */
@media (min-width: 430px) and (max-width: 767px) {
  .tgl-ad {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Standard 300px rectangle on medium phones */
  .tgl-ad--mrec {
    max-width: 300px;
  }
  .tgl-ad--mrec ins.adsbygoogle {
    min-height: 250px;
  }
  
  /* Half-page: standard height */
  .tgl-ad--halfpage {
    max-width: 300px;
  }
  .tgl-ad--halfpage ins.adsbygoogle {
    min-height: 600px;
  }
  
  /* Leader ads standard height */
  .tgl-ad--leader ins.adsbygoogle {
    min-height: 100px;
  }
  
  /* Full-width in-article on medium phones */
  .tgl-ad--inarticle {
    max-width: 100%;
  }
  .tgl-ad--inarticle ins.adsbygoogle {
    min-height: 250px;
  }
  
  .google-auto-placed,
  .google-auto-placed.ap_container {
    margin: 18px 0 !important;
  }
  
  .tgl-header-split-ad .tgl-ad {
    margin-top: 8px;
    margin-bottom: 0;
  }
}

/* ---- TABLET PORTRAIT (768px - 1023px) ---------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .tgl-ad {
    padding-left: 8px;
    padding-right: 8px;
  }
  
  /* Larger MRec on tablet */
  .tgl-ad--mrec {
    max-width: 320px;
  }
  .tgl-ad--mrec ins.adsbygoogle {
    min-height: 280px;
  }
  
  /* Half-page on tablet */
  .tgl-ad--halfpage {
    max-width: 320px;
  }
  .tgl-ad--halfpage ins.adsbygoogle {
    min-height: 650px;
  }
  
  .tgl-ad--leader ins.adsbygoogle {
    min-height: 90px;
  }
  
  /* In-article: max 728px but constrained on tablet */
  .tgl-ad--inarticle {
    max-width: 100%;
  }
  .tgl-ad--inarticle ins.adsbygoogle {
    min-height: 280px;
  }
  
  .google-auto-placed,
  .google-auto-placed.ap_container {
    margin: 20px 0 !important;
  }
}

/* ---- TABLET LANDSCAPE (1024px - 1199px) ------------------------------- */
@media (min-width: 1024px) and (max-width: 1199px) {
  .tgl-ad {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* Larger ads on landscape tablet */
  .tgl-ad--mrec {
    max-width: 336px;
  }
  .tgl-ad--mrec ins.adsbygoogle {
    min-height: 280px;
  }
  
  .tgl-ad--halfpage {
    max-width: 336px;
  }
  .tgl-ad--halfpage ins.adsbygoogle {
    min-height: 600px;
  }
  
  .tgl-ad--leader ins.adsbygoogle {
    min-height: 90px;
  }
  
  /* In-article: full 728px width */
  .tgl-ad--inarticle {
    max-width: 728px;
  }
  .tgl-ad--inarticle ins.adsbygoogle {
    min-height: 280px;
  }
  
  .google-auto-placed,
  .google-auto-placed.ap_container {
    margin: 22px 0 !important;
  }
}

/* ---- DESKTOP (≥ 1200px) ------------------------------------------------- */
@media (min-width: 1200px) {
  .tgl-ad {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  /* Desktop optimized sizes */
  .tgl-ad--mrec {
    max-width: 336px;
  }
  .tgl-ad--mrec ins.adsbygoogle {
    min-height: 280px;
  }
  
  .tgl-ad--halfpage {
    max-width: 336px;
  }
  .tgl-ad--halfpage ins.adsbygoogle {
    min-height: 600px;
  }
  
  .tgl-ad--leader ins.adsbygoogle {
    min-height: 90px;
  }
  
  /* Desktop full 728px in-article */
  .tgl-ad--inarticle {
    max-width: 728px;
  }
  .tgl-ad--inarticle ins.adsbygoogle {
    min-height: 250px;
  }
  
  .google-auto-placed,
  .google-auto-placed.ap_container {
    margin: 24px 0 !important;
  }
}

/* ---- UNIVERSAL AD PROPERTIES (All Breakpoints) ----------------------- */

/* Ensure ads never overlap content */
.tgl-ad,
.google-auto-placed {
  position: relative;
  z-index: 1;
}

/* Editorial content always above ads */
.lgenx-lyrics,
.tgl-lyrics,
.tgl-lyrics__body,
.tgl-chords,
.tgl-section--telugu-lyrics,
.tgl-section--english-transliteration {
  position: relative;
  z-index: 2;
}

/* Ad visibility & readability */
.tgl-ad {
  display: block;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  overflow: visible;
}

.tgl-ad ins.adsbygoogle {
  display: block;
  width: 100%;
  margin: 0 auto;
}

/* No ad overflow on any device */
.tgl-ad--float {
  overflow: hidden;
}

/* ====================================================================
   SUMMARY OF OPTIMIZATIONS:
   
   EXTRA SMALL PHONES (<380px):
   • 280px max-width for MRec (from 300px)
   • 110px min-height for Leaders (from 100px)
   • 12px margins for auto ads (from 18px)
   • Tighter spacing overall
   
   SMALL PHONES (380-429px):
   • 300px MRec width
   • 105px leader height
   • 14px auto ad margins
   • Optimized for viewport
   
   MEDIUM PHONES (430-767px):
   • Standard 300px rectangle
   • 100px leader height
   • 18px auto ad margins
   • Mobile-optimized in-article
   
   TABLETS (768-1199px):
   • Slightly larger ads (320-336px)
   • More breathing room (8-12px padding)
   • 20-22px auto ad margins
   
   DESKTOP (≥1200px):
   • Standard 336px width
   • 728px in-article leaderboard
   • 24px margins
   
   ALL DEVICES:
   • Responsive unit heights based on screen size
   • Proper z-index layering (ads=1, content=2)
   • No overflow or ad overlap
   • Consistent spacing around ads
   ==================================================================== */