/* ==========================================================================
   Telugu Gospel Lyrics — ADVERTISEMENT VISUAL STANDARD (v3.2.2)

   One look for every manual placement, everywhere on the site.

   CLS CONTRACT
   ------------
   inc/ads-placement.php reserves the final height on .tgl-adpos with the
   custom properties --tgl-pos-h-d / -t / -m / -l. Nothing in this file adds
   height: the frame, the label and the skeleton all paint INSIDE that
   reserved box, so enabling or disabling the visual layer cannot move a
   single pixel of content.

   Sections:
     1. Frame
     2. Disclosure label
     3. Loading skeleton
     4. Filled / empty states
     5. Sticky sidebar unit
     6. Responsive behaviour
     7. Mobile anchor
     8. Reduced motion / print / high contrast
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FRAME
   -------------------------------------------------------------------------- */
.tgl-adframe {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  min-height: inherit;
  box-sizing: border-box;
  border-radius: 14px;
  overflow: hidden;
}
.tgl-adframe--bordered {
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.06), rgba(148, 163, 184, 0.02));
  padding: 8px 8px 10px;
}
.tgl-adframe__unit {
  position: relative;
  z-index: 1;
  width: 100%;
  min-width: 0;
}
.tgl-adframe__unit > .tgl-ad {
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   2. DISCLOSURE LABEL
   Decorative text, never a heading — the document outline is untouched.
   -------------------------------------------------------------------------- */
.tgl-adframe__label {
  display: block;
  z-index: 2;
  margin: 0 0 6px;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-align: center;
  color: rgba(15, 23, 42, 0.45);
  line-height: 1.2;
  user-select: none;
}

/* --------------------------------------------------------------------------
   3. LOADING SKELETON
   Absolutely positioned so it consumes no layout height of its own.
   -------------------------------------------------------------------------- */
.tgl-adframe__skeleton {
  position: absolute;
  inset: 8px;
  z-index: 0;
  display: none;
  border-radius: 10px;
  background: linear-gradient(
    100deg,
    rgba(148, 163, 184, 0.10) 30%,
    rgba(148, 163, 184, 0.20) 50%,
    rgba(148, 163, 184, 0.10) 70%
  );
  background-size: 220% 100%;
  animation: tgl-ad-shimmer 1.5s linear infinite;
}
.tgl-adframe.is-loading .tgl-adframe__skeleton { display: block; }

@keyframes tgl-ad-shimmer {
  from { background-position: 180% 0; }
  to   { background-position: -20% 0; }
}

/* --------------------------------------------------------------------------
   4. FILLED / EMPTY
   An unfilled slot collapses so it neither wastes viewport nor drags down
   the Active View average of the units that did fill.
   -------------------------------------------------------------------------- */
.tgl-adframe.is-filled .tgl-adframe__skeleton { display: none; }

.tgl-adpos.is-empty,
.tgl-adframe.is-empty {
  display: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* --------------------------------------------------------------------------
   5. STICKY SIDEBAR UNIT
   -------------------------------------------------------------------------- */
.tgl-adframe--sticky { border-radius: 16px; }

/* --------------------------------------------------------------------------
   6. RESPONSIVE
   Mirrors the breakpoints in inc/ads-config.php. Change one, change both.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 768px) {
  .tgl-adframe--bordered { padding: 8px; border-radius: 12px; }
}

@media (max-width: 767px) {
  .tgl-adframe--bordered {
    padding: 6px 6px 8px;
    border-radius: 12px;
  }
  .tgl-adframe__label { font-size: 0.6rem; margin-bottom: 4px; }
  .tgl-adframe__skeleton { inset: 6px; }
}

/* Short landscape phones: the frame must never eat the little height there
   is, so the chrome is reduced to the label alone. */
@media (orientation: landscape) and (max-height: 500px) {
  .tgl-adframe--bordered { padding: 4px; border-radius: 8px; }
  .tgl-adframe__skeleton { inset: 4px; }
}

/* --------------------------------------------------------------------------
   7. MOBILE ANCHOR
   -------------------------------------------------------------------------- */
.tgl-anchor-ad .tgl-adframe--bordered {
  border: 0;
  background: none;
  padding: 0;
  border-radius: 0;
}
.tgl-anchor-ad .tgl-adframe__label { display: none; }

/* --------------------------------------------------------------------------
   8. REDUCED MOTION / PRINT / DARK / CONTRAST
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tgl-adframe__skeleton { animation: none; }
}

@media print {
  .tgl-adframe { display: none !important; }
}

/* v8.4.9 — light is the default; dark chrome only when the reader opts in. */
:root[data-theme="dark"] .tgl-adframe--bordered {
  border-color: rgba(226, 232, 240, 0.14);
  background: linear-gradient(180deg, rgba(226, 232, 240, 0.05), rgba(226, 232, 240, 0.02));
}
:root[data-theme="dark"] .tgl-adframe__label { color: rgba(226, 232, 240, 0.55); }

@media (prefers-contrast: more) {
  .tgl-adframe--bordered { border-color: currentColor; }
  .tgl-adframe__label { color: inherit; opacity: 0.9; }
}

/* ==========================================================================
   9. AD LAYOUT SAFETY (v4.3.16) — ZERO CONTENT OVERLAP CONTRACT
   Root cause addressed: Google Auto Ads inject `.google-auto-placed
   .ap_container` wrappers directly between editorial blocks (including
   between lyric blocks inside .tgl-section--telugu-lyrics). Those wrappers
   can end up with a collapsed height while their creative iframe paints at
   full size, so the creative visually covers the text around it.

   Rules below do three things and nothing else:
     a. Keep every in-flow ad container in normal document flow and let it
        grow with the creative, so following content is pushed down.
     b. Never clip an ad box (clipping is what makes a creative look like it
        sits on top of the text).
     c. Keep Auto Ads out of protected editorial surfaces (lyrics,
        transliteration, meaning blocks).
   ========================================================================== */

/* a + b — in-flow safety for every auto-placed unit */
.google-auto-placed,
.google-auto-placed.ap_container {
  position: static !important;
  float: none !important;
  clear: both !important;
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  contain: none !important;
  transform: none !important;
}
.google-auto-placed > ins.adsbygoogle,
.google-auto-placed ins.adsbygoogle {
  position: static !important;
  float: none !important;
  max-width: 100% !important;
}
.google-auto-placed iframe {
  position: static !important;
  max-width: 100% !important;
}

/* Manual placements: reserve height, never clip, always push content down. */
.tgl-adpos,
.tgl-ad,
.tgl-ad-box,
.tgl-adframe {
  position: relative;
  overflow: visible !important;
  height: auto !important;
  clear: both;
}
.tgl-adpos > *,
.tgl-ad > *,
.tgl-ad-box > * { position: static; }

/* c — v4.3.17 CONTROLLED AUTO ADS RE-ENABLEMENT.
   Auto Ads are NO LONGER hidden anywhere. Instead every auto-placed unit that
   lands inside an editorial section is made structurally safe: it takes its
   own block, reserves a real height, and pushes the following content down.
   Intra-block insertion (between lyric lines) is prevented upstream by the
   AdSense exclusion zones declared in inc/ads-config.php. */
.tgl-section--telugu-lyrics > .google-auto-placed,
.tgl-section--english-transliteration > .google-auto-placed,
.tgl-section--meaning > .google-auto-placed,
.tgl-protected-editorial > .google-auto-placed,
.tgl-content > .google-auto-placed {
  display: block !important;
  position: static !important;
  clear: both !important;
  float: none !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 1px;
  overflow: visible !important;
  margin: 28px 0 !important;
  transform: none !important;
  contain: none !important;
}

/* A wrapper that carries a rendered creative must never measure zero.
   Google stamps data-ad-status / data-anchor-status on the <ins>; when a
   creative is present we force the wrapper to grow with it. */
.google-auto-placed:has(ins.adsbygoogle[data-ad-status="filled"]),
.google-auto-placed:has(iframe) {
  min-height: 100px !important;
  height: auto !important;
  overflow: visible !important;
}
.google-auto-placed ins.adsbygoogle[data-ad-status="filled"],
.google-auto-placed iframe {
  display: block !important;
  position: static !important;
  height: auto;
  max-width: 100% !important;
}

/* Editorial surfaces keep their own stacking baseline so no creative can
   paint above them. */
.lgenx-lyrics,
.tgl-lyrics,
.tgl-section--telugu-lyrics,
.tgl-section--english-transliteration,
.tgl-section--meaning,
.tgl-song-details,
.tgl-bible-verse {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .tgl-section--telugu-lyrics > .google-auto-placed,
  .tgl-section--english-transliteration > .google-auto-placed,
  .tgl-section--meaning > .google-auto-placed,
  .tgl-content > .google-auto-placed { margin: 20px 0 !important; }
}

/* Bottom anchor stays fixed by design, but must respect safe areas and
   never sit over editorial controls without its own stacking context. */
.tgl-anchor-ad {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* =====================================================================
 * v8.6.8 — H3 AD PAIR
 * Two real AdSense units after every in-content H3. Always stacked
 * vertically (never side-by-side, on any breakpoint), and never hidden:
 * both <ins> units stay in the DOM and visible on desktop, tablet and
 * mobile. Reservation + unfilled collapse continue to come from the
 * existing .tgl-adpos / .tgl-ad--reserve system — nothing here overrides
 * that behaviour.
 * ================================================================== */
.tgl-h3-ad-pair{display:block;width:100%;margin:0}
.tgl-h3-ad-pair > .tgl-adpos{display:block;width:100%;float:none;clear:both}
.tgl-h3-ad-pair > .tgl-adpos + .tgl-adpos{margin-top:16px}