/* Ported from setline-admin/embed-hosting/widget.html (the Showcase detail
   pane), reskinned with Direction A tokens: flat corners, plum surfaces,
   hot-pink accent, 13px type floor. Structure and class names unchanged so
   the production lift stays a diff, not a rewrite. */

.am-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgba(10,2,14,.6);
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.am-backdrop.on { opacity: 1; pointer-events: auto; }
.am-modal { position: fixed; z-index: 81; transform-origin: 0 0; will-change: transform; }
.am-modal:focus { outline: none; }
.am-flip {
  position: relative; width: 100%; height: 100%; transform: rotateY(180deg);
  transform-style: preserve-3d; transform-origin: 50% 50%;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 8px 24px rgba(0,0,0,.4);
}
.am-face {
  overflow: hidden; background: #1C0726;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform-style: flat;
  position: absolute; inset: 0; display: flex;
}
.am-front { pointer-events: none; }
.am-back { transform: rotateY(180deg); background: #2A0E3A; }
.am-face-in { flex: 0 0 auto; display: flex; flex-direction: column; width: 100%; height: 100%; }
@media (min-width: 700px) { .am-back .am-face-in { flex-direction: row; align-items: stretch; } }
.am-front img { width: 100%; height: 100%; object-fit: cover; display: block; }

.cb-art {
  position: relative; overflow: hidden; background: #1C0726;
  min-height: 240px; max-height: 340px;
}
.cb-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-art-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; font-weight: 900; letter-spacing: -.02em; color: #fff;
  background: linear-gradient(135deg, #9A01F3, #E6007E);
}
.cb-body {
  padding: 1.05rem 1.2rem; overflow: visible;
  display: flex; flex-direction: column; gap: .55rem; justify-content: center;
}
.am-back .cb-art { flex: 0 0 auto; min-height: 210px; max-height: none; }
.am-back .cb-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; justify-content: flex-start; padding: 1.25rem 1.4rem 1.4rem; }
@media (min-width: 700px) {
  .am-back .cb-art { flex: 0 0 42%; min-height: 0; }
  .am-back .cb-body { justify-content: safe center; padding: 1.6rem 1.8rem; }
}
.am-back.swapping .cb-art, .am-back.swapping .cb-body { animation: amSwap .22s ease both; }
@keyframes amSwap { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .am-backdrop { transition: none; }
  .am-back.swapping .cb-art, .am-back.swapping .cb-body { animation: none; }
}

/* Detail body — Direction A type */
.cb-head { display: flex; align-items: flex-start; gap: .6rem; }
.cb-name {
  margin: 0; flex: 1; font-weight: 900; font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: .98; letter-spacing: -.02em; text-transform: uppercase; color: #fff;
}
.cb-sec { display: flex; flex-direction: column; gap: .55rem; }
.cb-member { font-weight: 800; font-size: .875rem; letter-spacing: .1em; text-transform: uppercase; color: #FF6EB8; margin-top: .4rem; }
.cb-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cb-chip {
  font-size: .8125rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: #120417; background: #FF2D9C; padding: .22rem .55rem;
}
.cb-chip-plain { background: transparent; color: rgba(255,255,255,.78); border: 1.5px solid rgba(255,255,255,.28); }
.cb-sets { display: flex; flex-direction: column; gap: .22rem; }
.cb-set { display: flex; gap: .6rem; align-items: baseline; font-size: .8125rem; }
.cb-set-when { font-weight: 800; color: #fff; white-space: nowrap; }
.cb-set-stage { font-weight: 600; color: rgba(255,255,255,.66); }
.cb-bio { margin: 0; font-size: .8438rem; line-height: 1.55; color: rgba(255,255,255,.82); }
.cb-empty { margin: 0; font-size: .8438rem; color: rgba(255,255,255,.62); }
.cb-link { font-size: .8125rem; font-weight: 800; color: #FF2D9C; text-decoration: none; }
.cb-link:hover { text-decoration: underline; }

/* Transport on the artwork */
.cb-play {
  position: absolute; right: .9rem; bottom: .9rem; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: #FF2D9C; color: #120417;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cb-play-tri {
  width: 0; height: 0; margin-left: 3px;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid #120417;
}
.am-back.playing .cb-play-tri { display: none; }
.am-back.playing .cb-play::before, .am-back.playing .cb-play::after {
  content: ""; display: block; width: 4px; height: 15px; background: #120417;
}
.am-back.playing .cb-play::before { margin-right: 4px; }
.cb-np {
  position: absolute; left: .9rem; bottom: .95rem; display: none; align-items: center; gap: .45rem;
  font-size: .8125rem; font-weight: 800; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.am-back.playing .cb-np { display: inline-flex; }
.cb-np-eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 11px; }
.cb-np-eq i { width: 3px; height: 100%; background: #FF2D9C; transform: scaleY(.3); transform-origin: bottom; }
.am-back.is-audio .cb-np-eq i { animation: npEq .6s infinite ease-in-out alternate; }
.am-back.is-audio .cb-np-eq i:nth-child(2) { animation-duration: .46s; animation-delay: -.15s; }
.am-back.is-audio .cb-np-eq i:nth-child(3) { animation-duration: .75s; animation-delay: -.31s; }
@keyframes npEq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

/* Prev / next / close pinned top-right of the card */
.cb-ctrls { position: absolute; top: .7rem; right: .7rem; display: flex; gap: .35rem; z-index: 3; }
.cb-ctrl {
  width: 34px; height: 34px; border: 0; background: rgba(18,4,23,.72); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.cb-ctrl:hover { background: #FF2D9C; color: #120417; }
.cb-ctrl svg { width: 19px; height: 19px; fill: currentColor; }
.cb-ctrl[disabled] { opacity: .35; cursor: default; }
.cb-ctrl[disabled]:hover { background: rgba(18,4,23,.72); color: #fff; }