/* ============================================================================
   THE NEWS FRONTLINE — Advertisement slots
   ========================================================================== */

.tnf-ad-slot {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}
.tnf-ad-slot-home-top { margin-top: 16px; margin-bottom: 4px; }
.tnf-ad-slot-article-middle { margin: 24px 0; }
.tnf-ad-slot-category-top { margin-top: 4px; margin-bottom: 24px; }
.tnf-ad-slot-sidebar { max-width: none; padding: 0; margin-bottom: 12px; }

/* ----------------------------------------------------------------------------
   GLITCH FIX: sidebar ad showing up overlapping the article/hero image on
   phones and tablets.
   ----------------------------------------------------------------------------
   The native "Ad Space" sidebar this duplicates only exists on desktop
   (Tailwind's "hidden lg:flex" on that <aside> — there's no room for a
   288px sidebar on a phone screen, so the compiled app hides it below
   1024px). tnf-ads.js inserts its own replacement ad box as a plain new
   sibling right next to that aside so it can filter by page/date — but
   that new box never inherited the "only show on desktop" rule the
   original had, so on any screen narrower than 1024px it stayed visible
   and got squeezed into the same row as the article/home content instead
   of being tucked away in a sidebar that doesn't exist at that width —
   which is what showed up as a stray ad box overlapping the page.
   ---------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .tnf-ad-slot-sidebar {
    display: none !important;
  }
}

.tnf-ad-card {
  display: block;
  position: relative;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
}
.tnf-ad-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #9CA3AF;
  padding: 8px 12px 4px;
}
.tnf-ad-card img {
  width: 100%;
  display: block;
}

/* Fallback sizing ONLY for ads left at "fit the slot automatically" in
   Admin (no Width/Height set) — once an ad has a configured size,
   tnf-ads.js applies it as a real aspect-ratio via inline styles, which
   naturally overrides these. */
.tnf-ad-home-top img { max-height: 160px; object-fit: cover; }
.tnf-ad-article-middle img { max-height: 220px; object-fit: cover; }
.tnf-ad-category-top img { max-height: 200px; object-fit: cover; }
.tnf-ad-sidebar { margin-bottom: 12px; }
.tnf-ad-sidebar img { aspect-ratio: 1/1; object-fit: cover; }

.tnf-ad-code { padding: 0 12px 12px; }