/* 自動補樣式：js/components/illustrations.js（_build/style.py） */
/* ==========================================================================
   c-illus 插畫容器與占位 SVG
   DOM：figure.c-illus > img[data-illus] 或 svg.c-illus__svg（占位）
   占位圖的顏色全部來自 CSS 變數，會隨明暗與主題色自動切換
   ========================================================================== */

/* 占位 SVG：與 img 同樣填滿 figure，保持比例 */
.c-illus__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin-inline: auto;
  overflow: visible;
  color: var(--primary);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  /* 占位圖載入時輕微淡入，與 img 的出現感一致 */
  animation: c-illus-in var(--dur-2) var(--ease) backwards;
}

/* 有 width / height 屬性時，以屬性為上限，仍可縮小 */
.c-illus__svg[width] {
  width: min(100%, calc(var(--illus-w, 9999) * 1px));
  height: auto;
}

/* 以 aspect-ratio 預留空間，避免替換成占位圖時版面跳動 */
.c-illus__svg[data-placeholder^="onboarding-"] {
  aspect-ratio: 1 / 1;
}

.c-illus__svg[data-placeholder^="badge-"] {
  aspect-ratio: 1 / 1;
}

.c-illus__svg[data-placeholder^="empty-"],
.c-illus__svg[data-placeholder="present-hero"] {
  aspect-ratio: 4 / 3;
}

.c-illus__svg[data-placeholder="pro-hero"] {
  aspect-ratio: 3 / 2;
}

.c-illus__svg[data-placeholder="lock-hero"] {
  aspect-ratio: 1 / 1;
}

.c-illus__svg[data-placeholder="report-logo"] {
  aspect-ratio: 10 / 3;
}

/* 徽章：未解鎖底圖沿用已灰階的占位，不再額外處理；縮小時保持清晰 */
.c-illus__svg[data-placeholder^="badge-"] {
  max-width: 100%;
}

/* 列印（回診報告字標）：保持向量清晰，不做動畫 */
@media print {
  .c-illus__svg {
    animation: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* 矮螢幕（手機橫式）：大型插畫不超過可視高度的一半 */
@media (orientation: landscape) and (max-height: 500px) {
  .c-illus__svg {
    max-height: 50dvh;
    width: auto;
    max-width: 100%;
  }
}

/* 容器較寬時（平板、桌面）放大上限，但不超過 figure 寬 */
@container view (min-width: 640px) {
  .c-illus__svg[data-placeholder^="empty-"],
  .c-illus__svg[data-placeholder="present-hero"] {
    max-width: 360px;
  }

  .c-illus__svg[data-placeholder="pro-hero"] {
    max-width: 480px;
  }
}

@keyframes c-illus-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-illus__svg {
    animation: none;
  }
}