/* === UPI ADS CSS (injected) === */
/* UPI Study Blog Ads v7
 * Fixes vs v6:
 *  - Banner: fixed 220px height clipped tall headlines -> use min-height + vertical centering, 2-line clamp
 *  - Sidebar: ratio-box left whitespace on wide/transparent logos -> fixed-height media, cover fills
 *  - Media corners rounded to match card; both variants
 *  - Reduced-render guard handled in JS
 */

/* anchor: neutral — no display!important so JS can't conflict */
a.upi-ad__card{ display:block; color:inherit!important; outline:none; }
/* kill underlines inside the card — blog forces .article a{text-decoration:underline} */
a.upi-ad__card, a.upi-ad__card *{ text-decoration:none!important; }

/* slide wrapper — JS toggles inline display on these */
.upi-ad__slide{ }

/* inner div: all visual work */
.upi-ad__inner{
  background:#fff; border:1px solid #e6e9ef;
  border-radius:16px; overflow:hidden;
  box-shadow:0 1px 3px rgba(16,24,40,.06);
  transition:transform .25s,box-shadow .25s;
}
a.upi-ad__card:hover .upi-ad__inner{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(16,24,40,.11);
}

/* shared image */
.upi-ad__img{ width:100%;height:100%;object-fit:cover;object-position:center;display:block; }

/* typography */
.upi-ad__eyebrow{ display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#2e6fe2;margin-bottom:5px; }
.upi-ad__headline{ font-weight:800;color:#0a1628;line-height:1.28;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.upi-ad__sub{ color:#6b7688;line-height:1.5;margin:5px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.upi-ad__btn{ display:inline-flex;align-items:center;gap:6px;background:#2e6fe2;color:#fff!important;font-weight:700;border-radius:9px;white-space:nowrap;transition:background .2s; }
a.upi-ad__card:hover .upi-ad__btn{ background:#1b53b8; }

/* dots */
.upi-ad{ margin:0 0 22px; }
.upi-ad__dots{ display:flex;gap:6px;margin-top:12px;justify-content:center; }
.upi-ad__dot{ width:7px;height:7px;border-radius:50%;border:0;padding:0;cursor:pointer;background:#e6e9ef;transition:background .2s,width .2s; }
.upi-ad__dot.is-active{ background:#2e6fe2;width:18px;border-radius:4px; }

/* ── SIDEBAR ── fixed-height media so wide/transparent logos fill, no whitespace */
.upi-ad--side .upi-ad__inner{ border-radius:16px; }
.upi-ad--side .upi-ad__media{ height:150px;overflow:hidden;background:#0d1b2a; }
.upi-ad--side .upi-ad__img{ width:100%;height:100%;object-fit:cover;object-position:center; }
.upi-ad--side .upi-ad__body{ padding:13px 14px 15px; }
.upi-ad--side .upi-ad__headline{ font-size:14px; }
.upi-ad--side .upi-ad__sub{ font-size:12.5px; }
.upi-ad--side .upi-ad__btn{ font-size:12px;padding:8px 14px;margin-top:10px; }

/* ── BANNER ── min-height (not fixed) so headlines never clip */
.upi-ad--banner{ margin:28px 0; }
.upi-ad--banner .upi-ad__inner{
  display:flex!important;   /* !important on div — blog never targets divs with display!important */
  align-items:stretch;
  min-height:200px;
  border-radius:18px;
}
.upi-ad--banner .upi-ad__media{ flex:0 0 44%;overflow:hidden;background:#0d1b2a; }
.upi-ad--banner .upi-ad__img{ width:100%;height:100%;object-fit:cover;object-position:center; }
.upi-ad--banner .upi-ad__body{
  flex:1;min-width:0;padding:22px 24px;
  display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden;
}
.upi-ad--banner .upi-ad__headline{ font-size:17px; }
.upi-ad--banner .upi-ad__sub{ font-size:13px; }
.upi-ad--banner .upi-ad__btn{ font-size:13px;padding:10px 17px;align-self:flex-start;margin-top:6px; }

/* mobile */
@media(max-width:600px){
  .upi-ad--banner .upi-ad__inner{ flex-direction:column!important;min-height:0!important; }
  .upi-ad--banner .upi-ad__media{ flex:none!important;width:100%!important;height:160px!important; }
  .upi-ad--banner .upi-ad__headline{ font-size:16px!important; }
}
@media(prefers-reduced-motion:reduce){ .upi-ad__inner,.upi-ad__img{ transition:none!important; } }