/* Shared case components: badges, media frames, case cards, lightbox.
   Palette is held to the site's own tokens: navy ground, sky blue for interaction,
   gold only for "selected" and "live" (gold means: this is real). */
:root {
  --case-ground: #091121;
  --case-surface: #0f1a30;
  --case-line: #a4beff26;
  --case-line-strong: #a4beff47;
  --case-ink: #f3f6fc;
  --case-muted: #b4c2d9;
  --case-quiet: #92a6c4;
  --case-sky: #83e1f7;
  --case-gold: #ffd699;
  --ease-quart: cubic-bezier(.25, 1, .5, 1);
  --ease-expo: cubic-bezier(.16, 1, .3, 1);
  --z-sticky: 2;
  --z-overlay: 5;
}

.tnum { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: .45em; min-height: 24px; padding: 0 .6em; border-radius: 999px; font-size: .78rem; line-height: 1; letter-spacing: .02em; white-space: nowrap; vertical-align: middle; }
.badge-gold { color: var(--case-gold); background: #ffd6991a; }
.badge-gold::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--case-gold); }
.badge-sky { color: var(--case-sky); border: 1px solid #83e1f74d; }
.badge-neutral { color: var(--case-muted); border: 1px solid var(--case-line-strong); }

/* Media frames */
.case-media { position: relative; margin: 0; display: block; aspect-ratio: auto; overflow: hidden; border-radius: 12px; background: #111c33; border: 1px solid var(--case-line); }
.case-media img, .case-media video { display: block; width: 100%; height: 100%; }
.frame-window { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.frame-window img { object-fit: cover; transition: transform .28s var(--ease-quart); }
.frame-browser .browser-bar,
.browser-bar { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; background: #16233d; border-bottom: 1px solid var(--case-line); }
.browser-bar > span { width: 7px; height: 7px; border-radius: 50%; background: #3a4a6b; }
.browser-bar em { margin-left: 10px; font-style: normal; font-size: .72rem; color: var(--case-quiet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frame-print .frame-window { background: radial-gradient(ellipse at 50% 40%, #1b2a48, #0e182d 75%); }
.frame-print .frame-window img { object-fit: contain; padding: 6%; }
.frame-phone .frame-window { background: radial-gradient(ellipse at 50% 40%, #1b2a48, #0e182d 75%); }
.frame-phone .frame-window img { width: auto; height: 88%; margin: 6% auto 0; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; border: 5px solid #1d2a45; }
.frame-video video { aspect-ratio: 16 / 9; object-fit: cover; }
.frame-none { display: grid; place-items: center; aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, #0f1a30 0 12px, #111e37 12px 24px); }
.no-media { padding: 1.5rem; text-align: center; color: var(--case-muted); font-size: .95rem; line-height: 1.7; }
.no-media small { display: block; margin-top: .3rem; color: var(--case-quiet); font-size: .78rem; }
.media-tag { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; font-size: .72rem; color: #e6edf8; background: #0b1328d9; border: 1px solid var(--case-line-strong); }

/* Case card: one tab stop (the title link) stretched over the whole card */
.case-card { position: relative; min-width: 0; border: 0; background: none; overflow: visible; display: flex; flex-direction: column; gap: .9rem; }
.case-card .case-body { min-width: 0; }
.case-client { margin: 0 0 .25rem; color: #92b4d1; font-size: .875rem; line-height: 1.6; }
.case-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 1.5; color: var(--case-ink); text-wrap: balance; }
.case-title .case-link { display: inline; margin: 0; gap: 0; font-size: inherit; line-height: inherit; color: inherit; text-decoration: none; }
.case-title .case-link:hover { text-decoration: none; }
.case-link::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.case-link:focus-visible { outline: none; }
.case-card:focus-within { outline: 2px solid var(--case-sky); outline-offset: 6px; border-radius: 14px; }
.case-card:focus-within:not(:has(:focus-visible)) { outline: none; }
.case-proof { margin: .45rem 0 0; color: var(--case-muted); font-size: .9375rem; line-height: 1.75; text-wrap: pretty; }
.case-meta { margin: .7rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.host { color: var(--case-quiet); font-size: .8rem; }
.case-card:hover .case-media { border-color: #83e1f766; }
.case-card:hover .frame-window img { transform: scale(1.03); }
.case-card:hover .case-title { color: #fff; }
.frame-print .frame-window img, .frame-phone .frame-window img { transform-origin: 50% 50%; }

/* Lightbox */
.lightbox { width: min(1100px, 94vw); max-height: 94vh; padding: 0; border: 1px solid var(--case-line-strong); border-radius: 14px; background: #0b1328; color: var(--case-ink); }
.lightbox::backdrop { background: #050a16e6; }
.lightbox form { position: absolute; top: 10px; right: 10px; z-index: 1; margin: 0; }
.lightbox-close { min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--case-line-strong); background: #0b1328e6; color: var(--case-ink); font-size: .875rem; }
.lightbox-close:hover { border-color: var(--case-sky); }
.lightbox figure { margin: 0; display: grid; }
.lightbox img { display: block; max-width: 100%; max-height: calc(94vh - 64px); margin: auto; object-fit: contain; }
.lightbox figcaption { padding: .9rem 1.2rem 1.1rem; color: var(--case-muted); font-size: .875rem; line-height: 1.7; overflow-wrap: anywhere; }
.lightbox[open] { animation: lightbox-in .32s var(--ease-expo); }
@keyframes lightbox-in { from { opacity: 0; transform: scale(.97); } }

.zoom { display: block; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: zoom-in; }
.zoom:focus-visible { outline: 2px solid var(--case-sky); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .frame-window img, .lightbox[open] { transition: none; animation: none; }
  .case-card:hover .frame-window img { transform: none; }
}

/* v2.1：直式數字人影片（奇蹟 AI 數字人主持、泰吉車業） */
.frame-video-portrait .frame-window video { width: auto; height: 88%; margin: 6% auto 0; display: block; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; border: 5px solid #1d2a45; background: #0e182d; }
.gallery-video.is-portrait video { aspect-ratio: 9 / 16; width: auto; max-width: 100%; max-height: min(78vh, 760px); margin-inline: auto; display: block; object-fit: contain; background: #0e182d; }