/* ============================================================
   ADS.CSS — Public advertisement slots
   Matches the CURRENT DOM built by ads.js:
     .ad-slot
       └── .ad-card
             ├── .ad-media > .ad-media-link > picture > img.ad-image
             └── .ad-body
                   ├── .ad-title
                   ├── .ad-desc
                   └── .ad-cta
   Image-less ads get the class .ad-card--no-image.
   Empty slots are hidden via [data-ad-empty="true"].
   ============================================================ */

/* ---------- 1. Slot wrapper ---------- */
.ad-slot {
  width: 100%;
  margin: 16px 0;
  padding: 0 16px;
  box-sizing: border-box;
  display: block;
}

.ad-slot[data-ad-empty="true"] {
  display: none;
}

.ad-slot[data-ad-placement="homepage_hero"] {
  padding: 0;
  margin: 0;
}

/* ---------- 2. Card ---------- */
.ad-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ad-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.10);
}

/* ---------- 3. Media ---------- */
.ad-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6;
  background: #f4f5f7;
  overflow: hidden;
}

.ad-media-link {
  display: block;
  width: 100%;
  height: 100%;
}

.ad-media picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

/* ---------- 4. Body ---------- */
.ad-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ad-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: #111111;
  word-break: break-word;
}

.ad-desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: #555555;
  word-break: break-word;
}

/* ---------- 5. CTA ---------- */
.ad-cta {
  align-self: flex-start;
  margin-top: 6px;
  padding: 8px 16px;
  background: #0d6efd;
  color: #ffffff;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: background 0.15s ease, transform 0.15s ease;
}

.ad-cta:hover,
.ad-cta:focus-visible {
  background: #0b5ed7;
  color: #ffffff;
  outline: none;
}

.ad-cta:active {
  transform: scale(0.98);
}

.ad-cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.35);
}

/* ---------- 6. Image-less card ---------- */
.ad-card--no-image {
  border-style: solid;
}

.ad-card--no-image .ad-body {
  padding: 20px 18px;
}

/* ---------- 7. Per-placement variants ---------- */

/* Hero — full bleed, image-only (body hidden) */
.ad-slot[data-ad-placement="homepage_hero"] .ad-card {
  border-radius: 0;
  box-shadow: none;
  border: none;
}
.ad-slot[data-ad-placement="homepage_hero"] .ad-media {
  aspect-ratio: 16 / 7;
}
.ad-slot[data-ad-placement="homepage_hero"] .ad-body {
  display: none;
}
.ad-slot[data-ad-placement="homepage_hero"] .ad-card--no-image .ad-body {
  display: flex; /* if no image, show the text */
}

/* Promo banner */
.ad-slot[data-ad-placement="homepage_promotional_banner"] .ad-media {
  aspect-ratio: 21 / 7;
}

/* Category banner */
.ad-slot[data-ad-placement="category_banner"] .ad-media {
  aspect-ratio: 21 / 6;
}

/* Product listing banner */
.ad-slot[data-ad-placement="product_listing_banner"] .ad-media {
  aspect-ratio: 21 / 6;
}

/* Compact side-by-side placements */
.ad-slot[data-ad-placement="product_detail_promotion"] .ad-card,
.ad-slot[data-ad-placement="cart_promotion"] .ad-card,
.ad-slot[data-ad-placement="checkout_promotion"] .ad-card {
  flex-direction: row;
  align-items: stretch;
}
.ad-slot[data-ad-placement="product_detail_promotion"] .ad-media,
.ad-slot[data-ad-placement="cart_promotion"] .ad-media,
.ad-slot[data-ad-placement="checkout_promotion"] .ad-media {
  flex: 0 0 40%;
  aspect-ratio: 1 / 1;
}
.ad-slot[data-ad-placement="product_detail_promotion"] .ad-body,
.ad-slot[data-ad-placement="cart_promotion"] .ad-body,
.ad-slot[data-ad-placement="checkout_promotion"] .ad-body {
  justify-content: center;
  padding: 12px 14px;
}

/* ---------- 8. Tablet ---------- */
@media (max-width: 1024px) {
  .ad-slot[data-ad-placement="homepage_hero"] .ad-media { aspect-ratio: 16 / 8; }
  .ad-slot[data-ad-placement="homepage_promotional_banner"] .ad-media { aspect-ratio: 16 / 6; }
  .ad-slot[data-ad-placement="category_banner"] .ad-media,
  .ad-slot[data-ad-placement="product_listing_banner"] .ad-media { aspect-ratio: 16 / 6; }

  .ad-slot[data-ad-placement="product_detail_promotion"] .ad-media,
  .ad-slot[data-ad-placement="cart_promotion"] .ad-media,
  .ad-slot[data-ad-placement="checkout_promotion"] .ad-media {
    flex: 0 0 35%;
  }
}

/* ---------- 9. Mobile ---------- */
@media (max-width: 640px) {
  .ad-slot { margin: 12px 0; padding: 0 12px; }
  .ad-slot[data-ad-placement="homepage_hero"] { padding: 0; margin: 0; }

  .ad-slot[data-ad-placement="homepage_hero"] .ad-media { aspect-ratio: 4 / 3; }
  .ad-slot[data-ad-placement="homepage_promotional_banner"] .ad-media { aspect-ratio: 16 / 9; }
  .ad-slot[data-ad-placement="category_banner"] .ad-media,
  .ad-slot[data-ad-placement="product_listing_banner"] .ad-media { aspect-ratio: 16 / 9; }

  .ad-slot[data-ad-placement="product_detail_promotion"] .ad-card,
  .ad-slot[data-ad-placement="cart_promotion"] .ad-card,
  .ad-slot[data-ad-placement="checkout_promotion"] .ad-card {
    flex-direction: column;
  }
  .ad-slot[data-ad-placement="product_detail_promotion"] .ad-media,
  .ad-slot[data-ad-placement="cart_promotion"] .ad-media,
  .ad-slot[data-ad-placement="checkout_promotion"] .ad-media {
    flex: none;
    aspect-ratio: 16 / 9;
  }

  .ad-body { padding: 12px 14px 14px; }
  .ad-title { font-size: 0.98rem; }
  .ad-desc  { font-size: 0.84rem; }
  .ad-cta   { padding: 7px 14px; font-size: 0.82rem; }
}

/* ---------- 10. Very small ---------- */
@media (max-width: 380px) {
  .ad-title { font-size: 0.94rem; }
  .ad-desc  { font-size: 0.80rem; }
  .ad-cta   { padding: 6px 12px; font-size: 0.78rem; }
}

/* ---------- 11. Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .ad-card, .ad-cta { transition: none; }
  .ad-card:hover { transform: none; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
  .ad-cta:active { transform: none; }
}

@media (forced-colors: active) {
  .ad-card { border: 1px solid CanvasText; }
  .ad-cta  { border: 1px solid ButtonText; }
}

/* ---------- 12. Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  .ad-card { background: #1e1e1e; border-color: rgba(255,255,255,0.06); box-shadow: 0 2px 12px rgba(0,0,0,0.4); }
  .ad-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.6); }
  .ad-media { background: #2a2a2a; }
  .ad-title { color: #f5f5f5; }
  .ad-desc  { color: #bbbbbb; }
  .ad-cta   { background: #4d8dff; color: #0b1020; }
  .ad-cta:hover, .ad-cta:focus-visible { background: #6aa1ff; color: #0b1020; }
}