/* /ugc-brands/ winning-ads gallery, pay card and promoted-brand cards
   (scripts/generate-brand-pages.mjs, wave 8). Loaded after ugc-brands.css on
   brand pages only and reuses its tokens. The ad tile mirrors the app's
   Winning ads view: a 9:16 poster, tier badge top left, run days bottom left.
   Bump ADS_CSS_VERSION in the generator when this changes. */

.ub-ads,
.ub-page .seo-article-content .ub-ads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 22px 16px;
  margin: 6px 0 20px;
  padding: 0;
  list-style: none;
}
.ub-page .seo-article-content .ub-ads > li { margin: 0; padding: 0; }
.ub-ad { min-width: 0; margin: 0; }

.ub-ad-media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 14px;
  background: #17171c;
  isolation: isolate;
  box-shadow: 0 1px 2px rgb(18 18 18 / 0.06), 0 16px 34px -26px rgb(18 18 18 / 0.5);
}
.ub-ad-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ub-ease);
}
/* Legibility scrim for the badges and the run-days figure. */
.ub-ad-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0) 42%, rgb(0 0 0 / 0) 72%, rgb(0 0 0 / 0.3) 100%);
  pointer-events: none;
}
.ub-ad-media > span { position: absolute; z-index: 2; }

.ub-ad-tier {
  top: 8px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 21px;
  padding: 0 7px 0 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.93);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
}
.ub-ad-tier svg { width: 12px; height: 12px; }
.ub-ad-tier-proven { color: #b45309; }
.ub-ad-tier-winner { color: #047857; }

.ub-ad-live {
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.ub-ad-live span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgb(34 197 94 / 0.6);
  animation: ub-ad-pulse 2.4s var(--ub-ease) infinite;
}
@keyframes ub-ad-pulse {
  0% { box-shadow: 0 0 0 0 rgb(34 197 94 / 0.55); }
  70%, 100% { box-shadow: 0 0 0 6px rgb(34 197 94 / 0); }
}

.ub-ad-run {
  left: 10px;
  bottom: 9px;
  right: 52px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
}
.ub-ad-run b {
  margin-right: 3px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.ub-ad-run small {
  display: block;
  margin-top: 3px;
  color: rgb(255 255 255 / 0.78);
  font-size: 11px;
  font-weight: 600;
}
.ub-ad-dur {
  right: 9px;
  bottom: 10px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgb(0 0 0 / 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ub-ad-body { padding: 11px 2px 0; }
.ub-page .ub-ad-meta {
  margin: 0;
  color: var(--ub-sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.ub-page .ub-ad-copy {
  display: -webkit-box;
  margin: 5px 0 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow-wrap: anywhere;
}
.ub-page .ub-ad-copy-none { color: #9a9aa0; font-style: italic; }
.ub-page .ub-ad-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  margin-top: 4px;
  color: var(--primary-dark);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 6px;
}
.ub-ad-link svg { width: 13px; height: 13px; transition: transform 200ms var(--ub-ease); }
.ub-ad-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

@media (hover: hover) and (pointer: fine) {
  .ub-ad-media:hover img { transform: scale(1.035); }
  .ub-page .ub-ad-link:hover { text-decoration: underline; text-underline-offset: 3px; }
  .ub-ad-link:hover svg { transform: translate(2px, -2px); }
}
.ub-ad-media:active img { transform: scale(0.99); transition-duration: 140ms; }

.ub-ads-signals { margin-top: 4px; }

/* ---------- pay card ---------- */

.ub-pay {
  margin: 4px 0 14px;
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.ub-pay-model {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--ub-tint-line);
  border-radius: 999px;
  background: var(--ub-tint);
  color: var(--primary-dark);
  font-size: 12.5px;
  font-weight: 800;
}
.ub-pay-none .ub-pay-model { border-color: var(--line); background: #f5f5f7; color: var(--ub-sub); }
.ub-page .ub-pay p { margin: 10px 0 0; }
.ub-page .ub-pay .ub-pay-figure {
  margin-top: 12px;
  color: var(--ink);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.ub-page .ub-pay .ub-pay-foot { color: var(--ub-sub); font-size: 13px; }

.ub-page .ub-pay-all { margin-top: 8px; font-size: 14px; font-weight: 700; }
.ub-page .ub-pay-all a { color: var(--primary-dark); text-underline-offset: 3px; }

@media (max-width: 640px) {
  .ub-ads,
  .ub-page .seo-article-content .ub-ads { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .ub-ad-run b { font-size: 18px; }
  .ub-ad-run { right: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ub-ad-media img, .ub-ad-link svg { transition: none; }
  .ub-ad-live span { animation: none; }
}