/* =========================
   ADS BASE (Public Render)
   Shared layout + typography for ALL creative types
   File: /ads/assets/ads-base.css
   ========================= */

/* The outer slot wrapper render.php outputs:
   <div class="ad-slot ad-slot--home_mid ..."> ... */
.ad-slot{
  display: block;
}

/* The clickable card wrapper:
   <a class="ad-card ..."> ... */
.ad-card{
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
}

/* Hover affordance (subtle) */
.ad-card:hover{
  text-decoration: none;
}

/* Media container (image area) */
.ad-card__media{
  display: block;
  width: 100%;
}

/* Image itself */
.ad-card__img{
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

/* Content area (title/body/cta for non-image-only creatives) */
.ad-card__content{
  padding: 14px 14px 16px;
}

/* Defaults for title/body/cta classes used by render config.
   If your ads_config() already outputs these exact classnames,
   these rules will apply automatically. If not, they’re harmless. */
.ad-card__title{
  font-weight: 900;
  font-size: 18px;
  line-height: 1.15;
  margin: 0 0 8px;
}

.ad-card__body{
  font-size: 14px;
  line-height: 1.5;
  opacity: .90;
}

.ad-card__cta{
  margin-top: 10px;
  font-weight: 900;
  font-size: 14px;
}

/* Text-only fallback */
.ad-card--text-only .ad-card__content{
  padding-top: 16px;
}

/* Label (optional) shown above the ad if you pass label/label_class */
.ad-label{
  font-size: 12px;
  font-weight: 800;
  margin: 0 0 6px;
  opacity: .75;
}

/* =========================
   Image option modifiers
   These are applied to the media wrapper by render.php:
   .ad-card__media.ad-img--border / --shadow / --animate
   ========================= */

/* Border: wraps the image and clips radius cleanly */
.ad-img--border{
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 12px;
  overflow: hidden;
}

/* Shadow: shadow belongs on the wrapper (not the image) */
.ad-img--shadow{
  box-shadow: 0 14px 30px rgba(0,0,0,.18);
}

/* Animate: hover zoom */
.ad-img--animate img{
  transition: transform .22s ease;
}
.ad-card:hover .ad-img--animate img{
  transform: scale(1.03);
}

/* =========================
   Sensible responsive sizing
   ========================= */
@media (max-width: 520px){
  .ad-card__img{
    height: 210px;
  }
  .ad-card__content{
    padding: 12px 12px 14px;
  }
  .ad-card__title{
    font-size: 16px;
  }
}