/* UGC ad examples library (/ugc-ads/examples/), scripts/generate-ugc-ads.mjs.
   Cards follow the app's Winning ads view (client/src/components/brands/WinningAdsGallery.tsx):
   9:16 poster, tier badge, run days and copies on the frame, brand and copy below.
   Filters are radio inputs + :has(), no script. Bump UGC_ADS_CSS_VERSION on edit. */

.ua-page { --ua-radius: 14px; --ua-ease: var(--mk-ease, cubic-bezier(.23, 1, .32, 1)); --ua-ink: var(--mk-ink, #121212); --ua-muted: var(--mk-muted, #626269); --ua-line: var(--mk-line-2, #e2e2e7); }

.ua-section { margin-top: clamp(8px, 2vw, 20px); margin-bottom: clamp(36px, 5vw, 56px); }
.ua-section-head { display: grid; gap: 6px; max-width: 760px; margin-bottom: 18px; }
.ua-section-head h2 { margin: 0; font-family: var(--mk-display, inherit); font-size: clamp(22px, 2.4vw, 28px); letter-spacing: -.02em; line-height: 1.2; }
.ua-section-head p { margin: 0; color: var(--ua-muted); font-size: 15px; line-height: 1.55; }
.ua-more { margin: 18px 0 0; color: var(--ua-muted); font-size: 14px; }

/* ---------- jump nav in the hub hero ---------- */
.ua-jump { display: grid; gap: 10px; margin-top: 22px; }
.ua-jump div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ua-jump span { min-width: 64px; color: var(--ua-muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.ua-jump a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: var(--mk-ring); color: var(--ua-ink); font-size: 13.5px; font-weight: 550; text-decoration: none; transition: box-shadow 160ms var(--ua-ease), transform 160ms var(--ua-ease); }
.ua-jump a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ua-jump a:hover { box-shadow: var(--mk-ring-lift); } }

/* ---------- filter chips ---------- */
.ua-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.ua-chips input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ua-chips label { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--ua-line); color: var(--ua-ink); font-size: 13px; font-weight: 550; cursor: pointer; user-select: none; transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ua-ease); }
.ua-chips label small { color: var(--ua-muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; transition: color 160ms ease; }
.ua-chips label:active { transform: scale(.97); }
.ua-chips input:checked + label { background: var(--ua-ink); box-shadow: 0 0 0 1px var(--ua-ink); color: #fff; }
.ua-chips input:checked + label small { color: rgb(255 255 255 / .7); }
.ua-chips input:focus-visible + label { outline: 2px solid var(--mk-primary, #3847fe); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ua-chips input:not(:checked) + label:hover { box-shadow: 0 0 0 1px #c9cad3; } }

.ua-gallery:has(input[value="talking_head"]:checked) .ua-card:not([data-f="talking_head"]),
.ua-gallery:has(input[value="text_pov"]:checked) .ua-card:not([data-f="text_pov"]),
.ua-gallery:has(input[value="demo"]:checked) .ua-card:not([data-f="demo"]),
.ua-gallery:has(input[value="skit"]:checked) .ua-card:not([data-f="skit"]),
.ua-gallery:has(input[value="review"]:checked) .ua-card:not([data-f="review"]),
.ua-gallery:has(input[value="voiceover"]:checked) .ua-card:not([data-f="voiceover"]),
.ua-gallery:has(input[value="interview"]:checked) .ua-card:not([data-f="interview"]),
.ua-gallery:has(input[value="unboxing"]:checked) .ua-card:not([data-f="unboxing"]),
.ua-gallery:has(input[value="before_after"]:checked) .ua-card:not([data-f="before_after"]),
.ua-gallery:has(input[value="green_screen"]:checked) .ua-card:not([data-f="green_screen"]),
.ua-gallery:has(input[value="other"]:checked) .ua-card:not([data-f="other"]),
.ua-gallery:has(input[value="paid"]:checked) .ua-card:not([data-f="paid"]),
.ua-gallery:has(input[value="organic"]:checked) .ua-card:not([data-f="organic"]),
.ua-gallery:has(input[value="app"]:checked) .ua-card:not([data-f="app"]),
.ua-gallery:has(input[value="product"]:checked) .ua-card:not([data-f="product"]),
.ua-gallery:has(input[value="story"]:checked) .ua-card:not([data-f="story"]) { display: none; }

/* ---------- grid + card ---------- */
.ua-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 26px 18px; margin: 0; padding: 0; list-style: none; }
.seo-article-content .ua-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 22px 14px; }
.ua-card { min-width: 0; margin: 0; padding: 0; }
.ua-card::before, .ua-card::marker { content: none; }

.ua-poster { position: relative; display: block; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--ua-radius); background: #17171b; color: #fff; text-decoration: none; isolation: isolate; outline: none; transition: transform 200ms var(--ua-ease), box-shadow 200ms var(--ua-ease); box-shadow: 0 0 0 1px rgb(18 18 18 / .06); }
.ua-poster:focus-visible { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--mk-primary, #3847fe); }
.ua-poster:active { transform: scale(.98); }
.ua-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ua-ease); }
.ua-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / 0) 42%, rgb(0 0 0 / 0) 70%, rgb(0 0 0 / .32)); pointer-events: none; }
.ua-top { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ua-tier { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 999px; background: rgb(255 255 255 / .92); box-shadow: 0 1px 2px rgb(0 0 0 / .12); font-size: 10.5px; font-weight: 700; line-height: 1; }
.ua-tier svg { width: 12px; height: 12px; flex: none; }
.ua-tier.is-proven { color: #b45309; }
.ua-tier.is-winner { color: #047857; }
.ua-live { display: inline-flex; align-items: center; gap: 5px; height: 20px; margin-left: auto; padding: 0 7px; border-radius: 999px; background: rgb(0 0 0 / .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 10.5px; font-weight: 650; }
.ua-live i { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgb(34 197 94 / .6); animation: ua-ping 2.4s var(--ua-ease) infinite; }
@keyframes ua-ping { 0% { box-shadow: 0 0 0 0 rgb(34 197 94 / .55); } 70%, 100% { box-shadow: 0 0 0 6px rgb(34 197 94 / 0); } }
.ua-bottom { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.ua-run { display: grid; gap: 1px; line-height: 1.15; }
.ua-run b { font-family: var(--mk-display, inherit); font-size: 17px; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ua-run b small { margin-left: 3px; color: rgb(255 255 255 / .78); font-family: var(--mk-body, inherit); font-size: 11px; font-weight: 550; }
.ua-run > small { color: rgb(255 255 255 / .76); font-size: 10.5px; font-weight: 550; }
.ua-dur { padding: 1px 5px; border-radius: 4px; background: rgb(0 0 0 / .45); font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: none; }
.ua-hint { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; opacity: 0; transition: opacity 180ms ease; pointer-events: none; }
.ua-hint span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: 999px; background: rgb(255 255 255 / .94); color: #121212; box-shadow: 0 4px 14px rgb(0 0 0 / .2); font-size: 11.5px; font-weight: 650; transform: translateY(4px); transition: transform 220ms var(--ua-ease); }
.ua-hint svg { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) {
  .ua-poster:hover img { transform: scale(1.035); }
  .ua-poster:hover .ua-hint, .ua-poster:focus-visible .ua-hint { opacity: 1; }
  .ua-poster:hover .ua-hint span, .ua-poster:focus-visible .ua-hint span { transform: none; }
}

.ua-body { padding: 10px 2px 0; }
.ua-body p { margin: 0; }
.ua-brand { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 13.5px; font-weight: 650; line-height: 1.3; }
.ua-brand img { flex: none; width: 18px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 1px var(--mk-line, #ececef); background: #fff; object-fit: cover; }
.ua-brand a, .ua-brand span { overflow: hidden; color: var(--ua-ink); text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.ua-brand a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: text-decoration-color 160ms ease; }
.ua-brand a:hover { text-decoration-color: currentColor; }
.ua-copy { display: -webkit-box; margin-top: 5px !important; overflow: hidden; color: var(--mk-ink-2, #3d3d44); font-size: 13px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
.ua-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px !important; }
.ua-tags span { padding: 2px 7px; border-radius: 6px; background: var(--mk-subtle, #f7f7f8); box-shadow: inset 0 0 0 1px var(--mk-line, #ececef); color: var(--ua-muted); font-size: 11px; font-weight: 550; line-height: 1.45; }
.ua-when { margin-top: 8px !important; color: var(--mk-muted-2, #8a8a93); font-size: 11.5px; line-height: 1.4; }
.ua-when a { display: inline-flex; align-items: center; gap: 3px; color: var(--mk-primary, #3847fe); font-weight: 600; text-decoration: none; }
.ua-when a:hover { text-decoration: underline; text-underline-offset: 2px; }
.ua-when svg { width: 11px; height: 11px; }

/* ---------- folded format sections on the hub ---------- */
.ua-fold { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--mk-line, #ececef); }
.ua-fold h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 6px; font-size: 18px; }
.ua-fold h3 small { color: var(--ua-muted); font-size: 13px; font-weight: 550; }
.ua-fold > p { margin: 0 0 14px; }
.ua-findings li strong { color: var(--ua-ink); }

@media (max-width: 640px) {
  .ua-grid, .seo-article-content .ua-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .ua-run b { font-size: 15px; }
  .ua-tags span:nth-child(n + 3) { display: none; }
  .ua-jump span { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ua-poster, .ua-poster img, .ua-hint span, .ua-chips label, .ua-jump a { transition: none; }
  .ua-poster:hover img { transform: none; }
  .ua-live i { animation: none; }
}

/* Article-column resets: the content column styles every ol and a; the cards opt out. */
body:not(.landing-page) main .ua-page .ua-grid { margin: 0; padding: 0; list-style: none; }
body:not(.landing-page) main .ua-page .ua-grid > li { margin: 0; padding: 0; }
body:not(.landing-page) main .ua-page a.ua-poster,
body:not(.landing-page) main .ua-page a.ua-poster:hover { color: #fff; text-decoration: none; }
body:not(.landing-page) main .ua-page .ua-jump a,
body:not(.landing-page) main .ua-page .ua-jump a:hover { color: var(--ua-ink); text-decoration: none; }

/* ---------- hero: three real frames, fanned (desktop only, decorative) ---------- */
.ua-hero .seo-shell { position: relative; }
.ua-stack { display: none; }
@media (min-width: 1100px) {
  body:not(.landing-page) main .ua-hero .seo-shell > :not(.ua-stack) { max-width: min(600px, 100% - 420px); }
  .ua-stack { position: absolute; top: 50%; right: clamp(24px, 3vw, 56px); display: block; width: 300px; height: 380px; transform: translateY(-46%); pointer-events: none; }
  .ua-stack img { position: absolute; top: 0; left: 50%; width: 176px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: #17171b; box-shadow: 0 0 0 1px rgb(255 255 255 / .5), 0 28px 50px -24px rgb(24 28 90 / .55); transform-origin: 50% 90%; translate: -50% 0; animation: ua-fan-in 640ms var(--ua-ease) both; animation-delay: calc(var(--i) * 70ms); }
  .ua-stack img:nth-child(1) { rotate: -9deg; translate: -106% 26px; z-index: 1; }
  .ua-stack img:nth-child(2) { rotate: 0deg; z-index: 2; }
  .ua-stack img:nth-child(3) { rotate: 9deg; translate: 6% 26px; z-index: 1; }
}
@keyframes ua-fan-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ua-stack img { animation: none; } }