/* ============================================================
   Demo-brand creative renderer.
   One component renders every creative in the site: hero thumbs,
   dashboard cards, media tiles, live cards, stories and reels.
   Sizes are container-relative, so the same markup looks right
   at 60px and at 600px.
   ============================================================ */

.cr {
  container-type: size;
  position: relative;
  overflow: hidden;
  background: var(--cr-bg, #2b1b14);
  color: var(--cr-fg, #f5e9dc);
  display: block;
  isolation: isolate;
}
.cr--post { aspect-ratio: 1 / 1; }
.cr--story, .cr--reel { aspect-ratio: 9 / 16; }
.cr--fill { aspect-ratio: auto; height: 100%; }

/* Soft light bloom so flat colour never looks dead */
.cr::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 80% at 78% 8%, rgba(255, 255, 255, .20), transparent 58%);
  pointer-events: none;
}

/* ---------- Artwork ---------- */
.cr-art {
  position: absolute; z-index: 1;
  width: 62%; height: auto; aspect-ratio: 1;
  inset-inline-end: -6%; bottom: 6%;
  filter: drop-shadow(0 6cqw 10cqw rgba(0, 0, 0, .22));
}
.cr--story .cr-art, .cr--reel .cr-art { width: 74%; inset-inline-end: -8%; bottom: 12%; }
.cr--art-center .cr-art { inset-inline-end: 19%; bottom: 26%; width: 62%; }
.cr--art-full .cr-art { width: 108%; inset-inline-end: -4%; bottom: -6%; }

/* ---------- Copy ---------- */
.cr-copy {
  position: absolute; z-index: 2; inset-inline-start: 7cqw; inset-inline-end: 7cqw;
  top: min(8cqw, 9cqh); bottom: min(8cqw, 9cqh); overflow: hidden; justify-content: flex-start; display: flex; flex-direction: column; gap: 2.4cqw; align-items: flex-start;
}
.cr--story .cr-copy, .cr--reel .cr-copy { top: 13cqw; }
.cr--bottom .cr-copy { top: auto; bottom: 8cqw; }

.cr-brandline {
  display: inline-flex; align-items: center; gap: 1.8cqw;
  font-size: min(4.4cqw, 7.5cqh); font-weight: 800; letter-spacing: -.02em;
  opacity: .92;
}
.cr-brandline svg { width: min(6.6cqw, 11cqh); height: min(6.6cqw, 11cqh); flex: none; }

.cr-head {
  font-size: min(11cqw, 19cqh); line-height: 1.08; font-weight: 800; letter-spacing: -.03em;
  max-width: 15ch; text-wrap: balance; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cr--story .cr-head, .cr--reel .cr-head { font-size: min(12.5cqw, 8.5cqh); -webkit-line-clamp: 4; }
.cr-sub { font-size: min(5cqw, 8cqh); font-weight: 600; opacity: .82; line-height: 1.35; max-width: 20ch; }

.cr-cta {
  margin-top: 1.4cqw;
  font-size: min(4.4cqw, 7.5cqh); font-weight: 800; padding: min(2.4cqw, 4cqh) min(5cqw, 8cqh); border-radius: 99cqw;
  background: var(--cr-fg, #f5e9dc); color: var(--cr-ink, #2b1b14); white-space: nowrap;
  box-shadow: 0 2cqw 6cqw rgba(0, 0, 0, .18);
}

.cr-badge {
  position: absolute; z-index: 3; top: 5cqw; inset-inline-end: 5cqw;
  font-size: min(3.6cqw, 6cqh); font-weight: 800; padding: 1.6cqw 3.6cqw; border-radius: 99cqw;
  background: rgba(0, 0, 0, .32); color: #fff; backdrop-filter: blur(2px);
}

/* ---------- Story / reel chrome ---------- */
.cr-bars { position: absolute; z-index: 3; top: 3.5cqw; inset-inline: 4cqw; display: flex; gap: 1.4cqw; }
.cr-bars i { flex: 1; height: 1cqw; border-radius: 99cqw; background: rgba(255, 255, 255, .35); overflow: hidden; }
.cr-bars i.on { background: rgba(255, 255, 255, .95); }
.cr-bars i.run::after { content: ""; display: block; height: 100%; background: #fff; animation: crBar 5s linear infinite; }
@keyframes crBar { from { width: 0; } to { width: 100%; } }

.cr-reelicon {
  position: absolute; z-index: 3; bottom: 5cqw; inset-inline-start: 5cqw;
  width: 9cqw; height: 9cqw; border-radius: 50%;
  background: rgba(255, 255, 255, .92); display: grid; place-items: center;
}
.cr-reelicon::after {
  content: ""; width: 0; height: 0;
  border-inline-start: 3cqw solid var(--cr-ink, #2b1b14);
  border-top: 2cqw solid transparent; border-bottom: 2cqw solid transparent;
  margin-inline-start: .8cqw;
}
.cr-meta {
  position: absolute; z-index: 3; bottom: 5cqw; inset-inline-end: 5cqw;
  font-size: 3.6cqw; font-weight: 700; opacity: .8;
}

/* ---------- Motion (reels feel alive) ---------- */
.cr--reel .cr-art { animation: crFloat 6s ease-in-out infinite; }
@keyframes crFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-3%) rotate(-1.6deg); } }
.cr--reel::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(200deg, transparent 42%, rgba(255, 255, 255, .16) 50%, transparent 58%);
  background-size: 220% 220%; animation: crSheen 5.5s ease-in-out infinite;
}
@keyframes crSheen { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }

/* ---------- Small renditions: art only, no unreadable text ---------- */
@container (max-height: 150px) {
  .cr-copy .cr-cta { display: none; }
  .cr-art { width: 46%; inset-inline-end: -3%; bottom: -6%; }
  .cr--story .cr-art, .cr--reel .cr-art { width: 54%; }
  .cr-copy { top: 6cqh; bottom: 6cqh; gap: 1.5cqh; }
  .cr-head { font-size: min(8.6cqw, 15cqh); -webkit-line-clamp: 2; max-width: 12ch; }
  .cr--story .cr-head, .cr--reel .cr-head { font-size: min(10cqw, 15cqh); -webkit-line-clamp: 2; }
  .cr-brandline { font-size: min(3.4cqw, 8.5cqh); }
  .cr-brandline svg { width: min(5cqw, 12cqh); height: min(5cqw, 12cqh); }
  .cr-sub { display: none; }
}
@container (max-width: 128px) {
  .cr-copy .cr-head, .cr-copy .cr-sub, .cr-copy .cr-cta { display: none; }
  .cr-brandline { font-size: 8cqw; }
  .cr-brandline span { display: none; }
  .cr-badge { display: none; }
  .cr-art { width: 78%; inset-inline-end: -8%; bottom: -4%; }
}
@container (max-width: 74px) {
  .cr-copy { display: none; }
  .cr-bars { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cr--reel .cr-art, .cr--reel::after, .cr-bars i.run::after { animation: none; }
}

/* ---------- Glue: creatives dropped into existing placeholder boxes ---------- */
.kmp-thumb, .kmp-post-img, .kmp-live-top,
.cre-media, .live-top, .media-item { position: relative; }

.kmp-thumb > .cr, .kmp-post-img > .cr, .kmp-live-top > .cr,
.cre-media > .cr, .live-top > .cr, .media-item > .cr {
  position: absolute; inset: 0; aspect-ratio: auto; border-radius: inherit;
}

/* The old decorative pseudo bars are replaced by the real artwork */
.kmp-thumb:has(> .cr)::after,
.kmp-post-img:has(> .cr)::before, .kmp-post-img:has(> .cr)::after,
.cre-media:has(> .cr)::before, .cre-media:has(> .cr)::after { display: none; }