/* Variant B detail hero — 簡化版用於 25 個非首頁 */
/* 繼承 hero.css tokens：--ink --neon --gold --fog --paper --f-serif --f-sans --f-mono */

.detail-hero {
  position: relative;
  width: 100%;
  min-height: 460px;
  max-height: 560px;
  overflow: hidden;
  background: var(--ink-2, #070f1c);
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0 0 48px;
}

.detail-hero .bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.detail-hero .bg-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.88) brightness(0.72);
}

.detail-hero .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(7,15,28,.95) 0%,
    rgba(7,15,28,.86) 40%,
    rgba(7,15,28,.55) 75%,
    rgba(7,15,28,.35) 100%);
  z-index: 1;
}

.detail-hero .content {
  position: relative;
  z-index: 10;
  max-width: 820px;
  padding: 48px clamp(24px, 5vw, 72px);
  color: var(--paper, #f2ece0);
}

.detail-hero .eyebrow {
  font-family: var(--f-mono, "JetBrains Mono", monospace);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--neon, #f5a623);
  margin: 0 0 18px;
  display: inline-block;
}

.detail-hero h1 {
  font-family: var(--f-serif, "Noto Serif TC", serif);
  font-weight: 900;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--paper, #f2ece0);
  text-shadow: 0 4px 24px rgba(0,0,0,.92), 0 2px 8px rgba(0,0,0,.85);
  margin: 0 0 20px;
  text-wrap: balance;
}

.detail-hero .deck {
  font-family: var(--f-sans, "Space Grotesk", sans-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: rgba(242, 236, 224, .82);
  max-width: 640px;
  margin: 0 0 24px;
  text-shadow: 0 2px 8px rgba(0,0,0,.75);
}

.detail-hero .meta {
  font-family: var(--f-mono, "JetBrains Mono", monospace);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 236, 224, .55);
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.detail-hero .meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.detail-hero .meta .dot {
  width: 4px;
  height: 4px;
  background: var(--neon, #f5a623);
  border-radius: 50%;
}

.detail-hero .grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@media (max-width: 640px) {
  .detail-hero {
    min-height: 340px;
    max-height: 420px;
  }
  .detail-hero .content {
    padding: 32px 20px;
  }
}