/* Shared ad-card styling for every content-viewer page (posts, cars,
   marketplace, meets) — loaded alongside each page's own CSS, after
   styles.css. One shared file rather than duplicated per page (unlike
   post.css/cars.css/marketplace.css/meets.css's own .content-* copies):
   the ad card is the exact same widget with zero page-specific variation,
   so there's nothing here that would ever need to diverge per page.
   200px creative height matches mobile's AdCard PHOTO_HEIGHT convention
   (src/components/feed/ad-card.tsx) — sits inside each page's existing
   narrow centered content column (.post-main/.content-main), not
   full-bleed. Renders nothing (#ad-slot stays empty) when there's no
   eligible campaign — see ad-widget.js. */

#ad-slot:empty {
  display: none;
}

.ad-card {
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper);
  margin-top: 20px;
}

.ad-image-wrap {
  position: relative;
}

.ad-image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.ad-sponsored-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 3px;
}

.ad-footer {
  padding: 13px;
}

.ad-headline {
  font-family: Barlow, system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 10px;
}

.ad-cta-btn {
  background: var(--red);
  border-radius: 3px;
  padding: 13px;
  text-align: center;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}