/* ============================================================================
   全站彙整頁：成果作品／專業師資／學院優勢（丁線 2026-10-05 第 1 件建立）
   ----------------------------------------------------------------------------
   搭配 im-site/archive-frame.php。底層樣式沿用乙線 im-site-archive.css 的 .im-sarch-*
   （跟全站「專業課程」頁同一套），這裡只放三頁自己的差異；不改乙線、甲線的檔。
   🔶 延伸稿：借 04_全站彙整頁/全站專業課程總覽.png（＋手機版）。
   師資卡片樣式對齊乙線的學院師資總覽（im-course.css .im-chub--instructors）。
   ============================================================================ */

/* 醫師替代圖（doctor-mask.php）：全站頁沒有單一學院，用中性暖灰，不用金色（金色只屬微刺青） */
.im-sarch--coll { --im-doctor-ph: #6E655E; }

/* ── 區塊留白（設計系統 --im-sec-pad：桌機 72／手機 48） ── */
.im-sarch--coll .im-sarch-sec { padding-block-start: var(--im-page-flow-gap, var(--im-sec-pad, 72px)); }
.im-sarch--coll .im-sarch-shead { margin-block-end: var(--im-sec-head, 32px); }
.im-sarch--coll .im-sarch-groups { gap: var(--im-s-5); }
.im-sarch--coll .im-sarch-form { margin-block-start: var(--im-page-flow-gap, var(--im-sec-pad, 72px)); }

/* 卡片沒有圖：給得體的中性底色，不印任何字（成果、優勢） */
.im-sarch--coll .im-sarch-groups .im-card__link:not(:has(.im-card__thumb))::before {
  content: ""; display: block; height: clamp(7rem, 9.5vw, 9rem);
  background: linear-gradient(160deg, #2A2320 0%, #15110F 100%);
}

/* 成果精選大卡：案例標題比課程名長，字級降一階，避免折成三行 */
.im-sarch--case_study .im-sarch-featured .im-card:first-child .im-card__title { font-size: var(--im-fs-xl); }

/* ── 成果：同課程卡（標題＋一行摘要）。優勢：摘要就是重點一句話，給兩行不截斷 ── */
.im-sarch--advantage .im-sarch-groups .im-card__excerpt { -webkit-line-clamp: 2; }

/* ── 師資：每院一列＝學院介紹＋四張直式人像 ── */
.im-sarch--instructor .im-sarch-groups .im-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.im-sarch--instructor .im-sarch-groups .im-card__link { display: flex; flex-direction: column; }
.im-sarch--instructor .im-sarch-groups .im-card__thumb { height: auto; aspect-ratio: 3 / 4; }
.im-sarch--instructor .im-sarch-groups .im-card__thumb img { object-position: 50% 20%; }
.im-sarch--instructor .im-sarch-groups .im-card__body { flex: 1; gap: var(--im-s-2); padding: var(--im-s-4) var(--im-s-4) var(--im-s-5); }
.im-sarch--instructor .im-sarch-groups .im-card__title { font-size: var(--im-fs-lg); }
.im-sarch--instructor .im-sarch-groups .im-card__excerpt { -webkit-line-clamp: 2; }
.im-sarch--instructor .im-sarch-groups .im-card__body::after { content: "看介紹　→"; margin-block-start: auto; padding-block-start: var(--im-s-1); font-size: 14px; letter-spacing: .1em; color: var(--im-brand-ink); }
/* 沒照片的老師：中性色塊（不放別人的圖） */
.im-sarch--instructor .im-sarch-groups .im-card__link:not(:has(.im-card__thumb))::before { height: auto; aspect-ratio: 3 / 4; }

/* ═════════ 平板 ═════════ */
@media (max-width: 1000px) {
  .im-sarch--instructor .im-sarch-groups .im-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ═════════ 手機（借手機版_全站專業課程總覽：每院＝標題列＋橫向滑動） ═════════ */
@media (max-width: 750px) {
  .im-sarch--coll .im-sarch-groups { gap: var(--im-s-6); }
  .im-sarch--advantage .im-sarch-groups .im-card__excerpt { display: -webkit-box; -webkit-line-clamp: 2; }
  .im-sarch--coll .im-sarch-groups .im-card__link:not(:has(.im-card__thumb))::before { height: 6.5rem; }

  /* 師資：直式人像卡，一次看到兩張多一點，往右滑 */
  .im-sarch--instructor .im-sarch-groups .im-list { display: flex; }
  .im-sarch--instructor .im-sarch-groups .im-card { flex: 0 0 44%; }
  .im-sarch--instructor .im-sarch-groups .im-card__link { display: flex; }
  .im-sarch--instructor .im-sarch-groups .im-card__thumb { height: auto; }
  .im-sarch--instructor .im-sarch-groups .im-card__body { justify-content: flex-start; padding: var(--im-s-3); }
  .im-sarch--instructor .im-sarch-groups .im-card__title { font-size: var(--im-fs-md); }
  .im-sarch--instructor .im-sarch-groups .im-card__excerpt { display: -webkit-box; }
  .im-sarch--instructor .im-sarch-groups .im-card__body::after { display: none; }
  .im-sarch--instructor .im-sarch-groups .im-card__link:not(:has(.im-card__thumb))::before { height: auto; }
}
/* ═════════ 照片圓角（設計系統規則第 8 節，業主 2026-10-06：淺色版 4px、深色版 2px → 變數 --im-media-radius；頁首大圖不加）═════════ */
.im-sarch--coll .im-sarch-featured .im-card,
.im-sarch--coll .im-sarch-groups .im-card { border-radius: var(--im-media-radius); overflow: hidden; }
.im-sarch--coll .im-sarch-groups .im-card__thumb,
.im-sarch--coll .im-doctor-ph { border-radius: 0; }   /* 圓角由外層卡片裁切 */
/* 學院師資總覽（academy-instructors.php 也載入本檔）：人像卡同一套圓角 */
.im-chub--instructors .im-chub-list .im-card { border-radius: var(--im-media-radius); }

/* 第95件：優勢／師資總覽採第94件半列卡，高 290px、圖片填滿；師資媒體欄保留 3:4 直式。 */
.im-sarch--advantage .im-sarch-groups .im-card,.im-sarch--instructor .im-sarch-groups .im-card { height: var(--im-r94-row-card-h); }
.im-sarch--advantage .im-sarch-groups .im-card__link,.im-sarch--instructor .im-sarch-groups .im-card__link { display: grid; grid-template-columns: var(--im-r94-row-card-media-w) minmax(0,1fr); height: 100%; min-height: 0; align-items: stretch; }
.im-sarch--advantage .im-sarch-groups .im-card__thumb,.im-sarch--instructor .im-sarch-groups .im-card__thumb { height: 100%; min-height: 0; aspect-ratio: auto; overflow: hidden; }
.im-sarch--advantage .im-sarch-groups .im-card__thumb img,.im-sarch--instructor .im-sarch-groups .im-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.im-sarch--instructor .im-sarch-groups .im-card__link { grid-template-columns: calc(var(--im-r94-row-card-h) * .75) minmax(0,1fr); }
.im-sarch--instructor .im-sarch-groups .im-card__thumb { aspect-ratio: 3 / 4; }
@media (max-width:750px) {
  .im-sarch--advantage .im-sarch-groups .im-card,.im-sarch--instructor .im-sarch-groups .im-card { flex: 0 0 min(88%,420px); height: var(--im-r94-row-card-h); }
  .im-sarch--advantage .im-sarch-groups .im-card__link { grid-template-columns: min(60%,var(--im-r94-row-card-media-w)) minmax(0,1fr); }
  .im-sarch--instructor .im-sarch-groups .im-card__link { grid-template-columns: calc(var(--im-r94-row-card-h) * .75) minmax(0,1fr); }
}
/* 乙線 10/15 驗收第95件修正：
   ① 半列卡放進原本一排 3／4 張的格子，文字欄只剩 32～70px（字變直排）；桌機平板改一排 2 張，文字欄 250px 以上。
   ② 列高鎖在卡高，直式師資照不再把卡撐到 306px（卡只有 290）；圖框寬度跟欄寬（290×0.75）。
   ③ 手機師資卡寬只有 285px，左圖右文放不下，維持原本直式：3:4 照片在上、文字在下。 */
@media (min-width: 751px) {
  .im-sarch--advantage .im-sarch-groups .im-list,.im-sarch--instructor .im-sarch-groups .im-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.im-sarch--advantage .im-sarch-groups .im-card__link,.im-sarch--instructor .im-sarch-groups .im-card__link { grid-template-rows: minmax(0,1fr); }
.im-sarch--instructor .im-sarch-groups .im-card__thumb { width: 100%; aspect-ratio: auto; }
@media (max-width: 750px) {
  .im-sarch--instructor .im-sarch-groups .im-card { flex: 0 0 72%; height: auto; }
  .im-sarch--instructor .im-sarch-groups .im-card__link { display: flex; flex-direction: column; height: auto; }
  .im-sarch--instructor .im-sarch-groups .im-card__thumb { height: auto; aspect-ratio: 3 / 4; }
}
/* 乙線 10/15（總控小派工）：優勢卡 1024 以下文字欄只剩 73～98px，改直式：圖在上（16:10 填滿）、文字在下。 */
@media (max-width: 1024px) {
  .im-sarch--advantage .im-sarch-groups .im-card { height: auto; }
  .im-sarch--advantage .im-sarch-groups .im-card__link { display: flex; flex-direction: column; height: auto; }
  .im-sarch--advantage .im-sarch-groups .im-card__thumb { width: 100%; height: auto; aspect-ratio: 16 / 10; }
}
/* 同上：師資卡 1024 寬文字欄只剩 131px，1024 以下也改直式（3:4 照片在上）。 */
@media (max-width: 1024px) {
  .im-sarch--instructor .im-sarch-groups .im-card { height: auto; }
  .im-sarch--instructor .im-sarch-groups .im-card__link { display: flex; flex-direction: column; height: auto; }
  .im-sarch--instructor .im-sarch-groups .im-card__thumb { width: 100%; height: auto; aspect-ratio: 3 / 4; }
}
@media (min-width: 751px) and (max-width: 1024px) {
  .im-sarch--instructor .im-sarch-groups .im-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
}