/* ==========================================================================
   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; }
}

@media (prefers-color-scheme: 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));
  }
  .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; }
}