/* Hooks library (/research/tiktok-hooks/) and ad copy examples (/research/ad-copy-examples/),
   scripts/lib/ad-insights-pages.mjs. Also used by the ad cards on /glossary/partnership-ads/.
   Builds on the Modal tokens (--mk-*) and ugc-brands.css; bump AD_INSIGHTS_CSS_VERSION on edit. */

:root {
  --ai-ink: var(--mk-ink, #121212);
  --ai-muted: var(--mk-muted, #626269);
  --ai-line: var(--mk-line-2, #e2e2e7);
  --ai-soft: var(--mk-soft, #eef0ff);
  --ai-subtle: var(--mk-subtle, #f7f7f8);
  --ai-primary: var(--mk-primary, #3847fe);
  --ai-ease: var(--mk-ease, cubic-bezier(.23, 1, .32, 1));
  --ai-ring: var(--mk-ring, 0 0 0 1px #e2e2e7, 0 1px 2px rgb(18 18 18 / .04));
  --ai-ring-lift: var(--mk-ring-lift, 0 0 0 1px #d6d8f5, 0 12px 28px -18px rgb(30 36 120 / .35));
}

/* ---------- jump chips in the hero ---------- */
.ai-jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.ai-jump a { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: var(--ai-ring); color: var(--ai-ink); font-size: 13.5px; font-weight: 550; text-decoration: none; transition: box-shadow 160ms var(--ai-ease), transform 160ms var(--ai-ease); }
.ai-jump a small { color: var(--ai-muted); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ai-jump a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ai-jump a:hover { box-shadow: var(--ai-ring-lift); } }

/* ---------- section stat line ---------- */
.ai-group-stat { padding: 11px 14px; border-radius: 10px; background: var(--ai-subtle); color: #3f3f46; font-size: 14.5px; line-height: 1.55; }
.ai-group-stat b { color: var(--ai-ink); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---------- copy button (shared) ---------- */
.ai-copy { position: relative; display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ai-muted); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, transform 140ms var(--ai-ease); }
.ai-copy svg { grid-area: 1 / 1; width: 17px; height: 17px; transition: opacity 180ms ease, transform 220ms var(--ai-ease), filter 180ms ease; }
.ai-copy .ai-ic-check { opacity: 0; transform: scale(.6); filter: blur(2px); color: var(--mk-success, #087a50); }
.ai-copy.is-copied .ai-ic-copy { opacity: 0; transform: scale(.6); filter: blur(2px); }
.ai-copy.is-copied .ai-ic-check { opacity: 1; transform: scale(1); filter: blur(0); }
.ai-copy:active { transform: scale(.94); }
.ai-copy:focus-visible { outline: 2px solid var(--ai-primary); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .ai-copy:hover { background: var(--ai-soft); color: var(--ai-primary); } }

/* ---------- hook cards ---------- */
.ai-hooks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.ai-hook { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 148px; padding: 16px 16px 14px; border-radius: 14px; background: #fff; box-shadow: var(--ai-ring); transition: box-shadow 200ms var(--ai-ease); }
@media (hover: hover) and (pointer: fine) { .ai-hook:hover { box-shadow: var(--ai-ring-lift); } }
.ai-hook > .ai-copy { position: absolute; top: 8px; right: 8px; }
.ai-hook-line { margin: 0; padding: 0 30px 0 0; border: 0; }
.ai-hook-line p { margin: 0; color: var(--ai-ink); font-family: var(--mk-display, inherit); font-size: 16.5px; font-weight: 560; line-height: 1.38; letter-spacing: -.01em; text-wrap: pretty; overflow-wrap: anywhere; }
.ai-hook-line p::before { content: "\201C"; }
.ai-hook-line p::after { content: "\201D"; }
.ai-hook-meta { display: grid; gap: 6px; padding-top: 11px; border-top: 1px solid var(--mk-line, #ececef); font-size: 12.5px; color: var(--ai-muted); }
.ai-hook-brand { font-weight: 600; color: var(--ai-ink); }
.ai-hook-brand a { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 200ms var(--ai-ease); }
@media (hover: hover) and (pointer: fine) { .ai-hook-brand a:hover { background-size: 100% 1px; } }
.ai-hook-stat { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ai-hook-stat b { color: var(--ai-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.ai-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--ai-subtle); box-shadow: inset 0 0 0 1px var(--ai-line); color: #3f3f46; font-size: 11px; font-weight: 650; letter-spacing: .01em; }
.ai-badge.is-ad { background: var(--ai-soft); box-shadow: inset 0 0 0 1px #d6d8f5; color: var(--ai-primary); }
.ai-badge.is-proven { background: #fff6e0; box-shadow: inset 0 0 0 1px #f1dfab; color: #8a5a00; }
.ai-ext { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--ai-muted); }
.ai-ext svg, .ai-ext-link svg { width: 13px; height: 13px; }
@media (hover: hover) and (pointer: fine) { .ai-ext:hover { background: var(--ai-soft); color: var(--ai-primary); } }

/* ---------- fill-in templates ---------- */
.ai-templates { margin-top: 14px; padding: 14px 14px 8px; border-radius: 14px; background: var(--ai-subtle); }
.ai-templates-title { margin: 0 0 6px; color: var(--ai-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ai-templates ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 2px 14px; margin: 0; padding: 0; list-style: none; }
.ai-templates li { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; border-bottom: 1px dashed var(--ai-line); font-size: 14.5px; color: #2b2b31; }
.ai-templates li:last-child, .ai-templates li:nth-last-child(2):nth-child(odd) { border-bottom-color: transparent; }
.ai-templates li span { overflow-wrap: anywhere; }

/* ---------- ad copy cards ---------- */
.ai-ads { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.ai-ad { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 14px; border-radius: 14px; background: #fff; box-shadow: var(--ai-ring); transition: box-shadow 200ms var(--ai-ease); }
@media (hover: hover) and (pointer: fine) { .ai-ad:hover { box-shadow: var(--ai-ring-lift); } }
.ai-ad > .ai-copy { position: absolute; top: 10px; right: 10px; }
.ai-ad-poster { display: block; align-self: start; overflow: hidden; border-radius: 10px; background: #e9e9ee; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .06); aspect-ratio: 9 / 16; }
.ai-ad-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ai-ease); }
@media (hover: hover) and (pointer: fine) { .ai-ad-poster:hover img { transform: scale(1.03); } }
.ai-ad-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-right: 34px; }
.ai-ad-brand { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 650; color: var(--ai-ink); }
.ai-ad-brand img { width: 18px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 1px rgb(0 0 0 / .06); }
.ai-ad-brand a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ai-ad-brand a:hover { text-decoration: underline; text-underline-offset: 3px; } }
.ai-ad-copy { margin: 0; padding: 0 0 0 12px; border: 0; border-left: 2px solid var(--ai-line); }
.ai-ad-copy p { margin: 0 0 4px; color: #26262b; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.ai-ad-copy p:first-child { color: var(--ai-ink); font-weight: 600; }
.ai-ad-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: auto 0 0; color: var(--ai-muted); font-size: 12.5px; }
.ai-ad-meta b { color: var(--ai-ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.ai-ext-link { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; color: var(--ai-primary); font-weight: 600; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ai-ext-link:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* Glossary ad strip: 3-up poster cards from ugc-ads.css inside the narrower article column. */
.ai-ad-strip { margin: 18px 0 6px; }
.ai-ad-strip .ua-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }

@media (max-width: 560px) {
  .ai-ad { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 12px; }
  .ai-ad-main { padding-right: 26px; }
  .ai-ext-link { margin-left: 0; }
  .ai-hook-line p { font-size: 16px; }
  /* Two-up on phones: one poster per row made the glossary section taller than
     site-motion.js's 12% reveal threshold could ever see, so it stayed hidden. */
  .ai-ad-strip .ua-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-copy, .ai-copy svg, .ai-hook, .ai-ad, .ai-ad-poster img, .ai-jump a { transition-duration: 0ms; }
  .ai-copy:active, .ai-jump a:active { transform: none; }
}