/* ══════════════════════════════════════════════
   COMPONENTS.CSS
   Block Header / Badge / Button / Related Card /
   Reveal 動畫
   ══════════════════════════════════════════════ */

/* ── BLOCK HEADER ── */
.block-header{
  display:flex;align-items:baseline;gap:1.4rem;margin-bottom:2.5rem;
}
.block-eyebrow{
  font-family:var(--sans);font-size:0.61rem;letter-spacing:0.34em;
  color:var(--accent-celadon);
  white-space:nowrap;
}
.block-title{
  font-family:var(--serif);font-size:1.08rem;font-weight:400;
  color:var(--text-primary);letter-spacing:0.1em;
}
.block-rule{
  flex:1;height:1px;
  background:linear-gradient(to right,var(--divider-default),transparent);
  align-self:center;
}

/* ── BADGE ── */
.badge{
  font-family:var(--sans);font-size:0.62rem;letter-spacing:0.12em;
  padding:0.28rem 0.65rem;border:1px solid;line-height:1.6;
}

/* ── BADGE — Collection（客戶委託 / 工作室藏品）── */
.badge-collection{
  color:var(--badge-collection-text);
  border-color:var(--badge-collection-border);
  background:var(--badge-collection-bg);
}

/* ── BADGE — Content（修復過程 / 修復札記 / 延伸觀看）── */
.badge-content{
  color:var(--badge-content-text);
  border-color:var(--badge-content-border);
  background:var(--badge-content-bg);
}

/* ── BADGE @deprecated ── */
.badge-exhibition{
  color:var(--badge-exhibition-text);
  border-color:var(--badge-exhibition-border);
  background:var(--badge-exhibition-bg);
}
.badge-clip{
  color:var(--badge-clip-text);
  border-color:var(--badge-clip-border);
  background:var(--badge-clip-bg);
}
.badge-video{
  color:var(--badge-video-text);
  border-color:var(--badge-video-border);
  background:var(--badge-video-bg);
}
.badge-story{
  color:var(--accent-cobalt);
  border-color:var(--accent-cobalt-border);
  background:var(--accent-cobalt-bg);
}
.badge-invisible{
  color:var(--badge-invisible-text);
  border-color:var(--badge-invisible-border);
  background:var(--badge-invisible-bg);
}
.badge-archaeology{
  color:var(--badge-archaeology-text);
  border-color:var(--badge-archaeology-border);
  background:var(--badge-archaeology-bg);
}
.badge-private{
  color:var(--badge-private-text);
  border-color:var(--badge-private-border);
  background:var(--badge-private-bg);
}

/* ── RELATED CARD ── */
.related-section{padding:5rem var(--page-pad)}
.related-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
}
.rcard{
  display:flex;flex-direction:column;cursor:pointer;
  text-decoration:none;color:inherit;
}
.rcard-media{
  aspect-ratio:4/3;overflow:hidden;margin-bottom:1rem;background:var(--surface-raised);
  position:relative;
}
.rcard-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.rcard:hover .rcard-media img{transform:scale(1.03)}
.rcard-placeholder{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--surface-raised);
}
.rcard-placeholder svg{width:35%;height:auto;opacity:0.3}
.rcard-era{
  font-family:var(--sans);font-size:0.6rem;letter-spacing:0.28em;
  color:var(--accent-celadon);margin-bottom:0.4rem;
}
.rcard-title{
  font-family:var(--serif);font-size:0.98rem;font-weight:400;
  color:var(--text-primary);letter-spacing:0.07em;line-height:1.65;margin-bottom:0.4rem;
  transition:color 0.3s;
}
.rcard:hover .rcard-title{color:var(--accent-celadon)}
.rcard-method{
  font-family:var(--sans);font-size:0.64rem;letter-spacing:0.16em;color:var(--text-secondary);
}
.rcard-arrow{
  display:inline-flex;align-items:center;gap:0.5rem;margin-top:0.7rem;
  font-family:var(--sans);font-size:0.62rem;letter-spacing:0.16em;
  color:var(--ash);transition:color 0.3s,gap 0.3s;
}
.rcard:hover .rcard-arrow{color:var(--accent-celadon);gap:0.8rem}

/* ── REVEAL ── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 0.9s cubic-bezier(0.22,1,0.36,1),transform 0.9s cubic-bezier(0.22,1,0.36,1)}
.reveal.visible{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:0.12s}.reveal-d2{transition-delay:0.26s}.reveal-d3{transition-delay:0.4s}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
  .related-grid{grid-template-columns:1fr}
}