/* P7 標題變化 T8「角落小縮圖」（owner 11/07：照片右下的放大鏡「這個移除」；Cindy 的視窗「有兩張照片的給我3種修法，我要圖大，可以切換」）。
   以 T6「斜掛吊牌」為底（吊牌的規則照抄 coaches-r6p7t6.css，範圍改成本版）；本檔由 work/r6p7t/make-css-t789.py 產生，T6 改了重跑那支。
   照片：拿掉放大鏡與點照片放大的第二層小視窗；拿掉 P7「矮螢幕照片自動縮」，所有教練的照片都填滿照片框寬（手機也是全寬）。
   兩張以上照片：52px 白框小縮圖疊在照片裡的右下角，目前這張是青色框；點了淡出淡入換張，照片維持全尺寸；
   手機也可以在照片上左右滑，縮圖或照片有焦點時方向鍵左右換張。
   電腦版左欄不再自己捲；第四輪（owner 11/07）起左欄整個留在畫面上不用捲：放不下時 JS 把左欄收窄（見本檔「第四輪」），不會有兩條捲軸。
   搭配 js/coaches-r6p7t8.js（頁尾不載 coaches-r6p7.js）。全部規則限定在 .cr.cv-r6p7.cv-r6p7t8 底下；
   建在 coaches-rkit.css、coaches-r6.css、coaches-r6p7.css 之上。 */

/* ---------------------------------------------------------------- 左欄：拿掉標題那一列，照片框往上移；上方留 27px 給吊牌與繩子露出的部分 */
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-side { padding-top: 27px; }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-photo { margin-top: 0; }

/* ---------------------------------------------------------------- 吊牌（h3 本身）：T5 的名牌放大約一成（阿包 390 寬時 181px＝照片框的 54%），以左上角為軸順時針轉 8.5° */
/* 位置：照片框的左緣＋13px（手機 600～767 照片框最寬 400 置中，所以先算出照片框左緣）、照片框上緣往上 23px（top 4px，照片框在 27px）。
   比示意圖（約 20px、9～10°）稍高稍平一點：小智的頭在照片最上面（18%），吊牌右下角才不會壓到安全帽 */
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-title {
  position: absolute; z-index: 3; top: 4px; left: calc(max(0px, (100% - 400px) / 2) + 13px);
  display: flex; align-items: baseline; gap: 0 10px; width: max-content; margin: 0; padding: 6px 20px 7px 46px;
  border: 2px solid var(--cr-cyan); border-radius: 13px; white-space: nowrap;
  background: linear-gradient(var(--cr-perf) 60%, transparent 0) 32px 0 / 1.5px 6px repeat-y, linear-gradient(90deg, var(--cr-cyan-pale) 32px, #fff 0);
  box-shadow: 0 12px 18px -10px rgba(23, 55, 90, .5), 0 2px 4px rgba(23, 55, 90, .14);
  font-size: 31px; line-height: 1.15; transform-origin: 0 0; rotate: 8.5deg; pointer-events: none;
}
/* 小圓孔（白心深藍圈，在票根正中）＋粉紅繩（從圓孔穿出往左上，跟著吊牌一起轉）；手機的繩子短一點，不碰到視窗左緣 */
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-title::before {
  content: ""; position: absolute; left: -29px; top: 50%; width: 60px; height: 44px; margin-top: -22px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 44'%3E%3Ccircle cx='45' cy='22' r='5.4' fill='%23fff' stroke='%2317375a' stroke-width='1.9'/%3E%3Cpath d='M45 22C39 22.4 34 20.6 29.5 16.5C23.5 11 16.5 7 9 6' fill='none' stroke='%23ff9ec0' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") 0 0 / 60px 44px no-repeat;
}
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-pre { font-size: 17px; letter-spacing: .1em; color: var(--cr-text); }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-name { margin: 0; padding: 0; border-radius: 0; background: none; }

/* ---------------------------------------------------------------- 尺寸 */
@media (max-width: 767px) {
  /* 手機左欄不是 sticky，要自己當吊牌的定位基準 */
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-side { position: relative; }
}
@media (max-width: 359px) {
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-title { padding-right: 16px; font-size: 26px; }
}
@media (min-width: 768px) {
  /* 電腦左欄是 sticky（也是定位基準）而且會自己捲（overflow 會切掉超出的東西）：左欄往左多伸 18px（負 margin＋padding，照片框不動），
     繩子伸出照片框外才不會被切；繩子在電腦版長一點 */
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-side { margin-left: -18px; padding-left: 18px; }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-title { left: 31px; font-size: 27px; }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 44'%3E%3Ccircle cx='45' cy='22' r='5.4' fill='%23fff' stroke='%2317375a' stroke-width='1.9'/%3E%3Cpath d='M45 22C38 22.5 32 20.5 26.5 15.5C19.5 9.5 11 4.5 2 3.5' fill='none' stroke='%23ff9ec0' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}
@media (min-width: 1024px) {
  /* 左欄夠寬（照片框 347px）時吊牌大一點（比 T5 大約一成）；768～1023 左欄只有 259～347px，名字用 27px，吊牌跟 T5 差不多大，少蓋一點照片 */
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-title { font-size: 33px; }
}

/* ---------------------------------------------------------------- T7～T9 共用：照片填滿照片框寬（拿掉 P7 的「矮螢幕照片自動縮」）、不再有放大 */
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-stage { cursor: auto; }
@media (min-width: 768px) {
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-view { max-width: none; }
  /* 左欄不再自己捲（拿掉 P7 左欄的 max-height 與 overflow-y: auto）：視窗裡永遠只有內容區一條捲軸 */
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-side { max-height: none; overflow: visible; }
}
/* 第四輪（owner 11/07「桌面板可以讓他看到全部嗎? 不用再滑動」）：電腦版左欄（吊牌、照片、板別／語言／證照）整個留在畫面上、不用捲。
   視窗最高從 85dvh 放寬到「視窗高 − 32px」（上下各留 16px；owner 的 1536×730 是 698px）；左欄照 P7 黏住，右邊自介在內容區捲。
   左欄比內容區看得到的高度高時，js/coaches-r6p7t8.js 把左欄那一欄收窄到剛好放得下（照片維持 4:5 跟著變小、照片框與資料表一起變窄，
   照片框不會有左右空白；右邊自介跟著變寬；吊牌大小不變）。收窄的下限：資料表最寬的標籤（例「單板 Snowboard」）不能在標籤裡斷行、照片至少 220px；
   到了下限還放不下（極矮的螢幕）JS 加 .cr6p7t8-loose：左欄不黏、照片照舊填滿、整個內容區一起捲（跟第三輪一樣）。 */
@media (min-width: 768px) {
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-dlg { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-dlg.cr6p7t8-loose .cr6p7-side { position: relative; top: auto; }
}

/* ---------------------------------------------------------------- T8：小縮圖疊在照片裡的右下角（只有 2 張以上才有），目前這張青色框 */
.cr.cv-r6p7.cv-r6p7t8 .cr6p7t8-thumbs { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7t8-thumbs > li { margin: 0; padding: 0; }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7t8-th {
  display: block; width: 52px; height: 52px; margin: 0; padding: 0; border: 3px solid #fff; border-radius: 12px; background: #fff; overflow: hidden;
  box-shadow: 0 4px 12px -3px rgba(23, 55, 90, .6); cursor: pointer; transition: border-color .3s; -webkit-tap-highlight-color: transparent;
}
.cr.cv-r6p7.cv-r6p7t8 .cr6p7t8-th img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% var(--oy, 35%); border-radius: 9px; }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7t8-th[aria-pressed="true"] { border-color: var(--cr-cyan); }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7t8-th:hover { border-color: var(--cr-cyan-line); }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7t8-th[aria-pressed="true"]:hover { border-color: var(--cr-cyan); }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7t8-th:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(78, 220, 233, .85); }
/* owner 11/07 緞帶改成較長的「16 位教練，你的雪上神隊友，就在這裡！」：窄螢幕換行時只在逗號後換、兩行盡量一樣長（不留「這裡！」一小截） */
.cr.cv-r6p7.cv-r6p7t8 .cr-ribbon__band { text-wrap: balance; }

/* ---------------------------------------------------------------- 第五輪（G7 r1）
   電腦版：「我要指定這位教練」那一列黏在內容區底部（sticky bottom 0：黏住的位置會扣掉內容區的下內距 24px，跟捲到底時同一個位置），開窗就整顆看得到、不用先捲。
   自介從它後面捲過去：按鈕上方 16px 由透明淡到白（原本白卡與按鈕之間的 16px 空隙，捲到底時這段只蓋在空隙上、不碰最後一行），
   按鈕那一列與下面到內容區底的 24px 是白的（box-shadow 往下補）。按鈕的字、樣式、位置（右欄下方靠右）不變；
   按鈕一直看得到，鍵盤 Tab 到它時不用再捲（kit 給連結的 scroll-margin 是頁面導覽列用的，這裡歸零）。手機（<768）照舊在內容最後面。 */
@media (min-width: 768px) {
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-foot {
    position: sticky; z-index: 2; bottom: 0; margin-top: 0; padding-top: 16px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 16px); box-shadow: 0 24px 0 #fff;
  }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-go { scroll-margin: 0; }
}
/* 手機：內容區捲離最上面後（js 加 .cr6p7t8-scrolled），× 所在的頂端一條（高 64px＝× 上方 12px＋× 44px＋8px）變成白色不透明的窄條，
   內容從它下面捲過去，× 不會蓋住字；開窗當下（scrollTop＝0）沒有這一條，吊牌、照片、× 的位置都照舊。
   內容區設 isolation：裡面的吊牌（z-index 3）、縮圖（2）留在內容區自己的疊層，窄條（1）才蓋得住；×（3）在窄條上面。 */
@media (max-width: 767px) {
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-body { isolation: isolate; }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-dlg::before {
    content: ""; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 64px; background: #fff; box-shadow: 0 1px 0 var(--cr-line);
    opacity: 0; pointer-events: none; transition: opacity .2s;
  }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-dlg.cr6p7t8-scrolled::before { opacity: 1; }
}

/* ---------------------------------------------------------------- 第六輪（owner 11/07 中午）
   R1 電腦版「點開後可以看到左邊完整資訊」：owner 的瀏覽器實際約 1536×700（也可能更矮），左欄放不下時 js 的 fit() 依序：
   1. 照片從下面裁：照片框從 4:5 往 1:1 調（js 寫 aspect-ratio），寬度不變；每張照片露出的上緣跟 4:5 時一樣（js 換算 object-position），
      臉與吊牌的相對位置不變，只少了照片下面一截；相簿每一張同樣裁、縮圖照常在右下角。
   2. 裁到 1:1 還放不下：加 .cr6p7t8-compact（下面這組：資料表列距 12→8px、左右內距 14→10px、圖示與標題的間距 10→8px、標題欄 2.8→2.5 字、標籤列間距 6→4px、資料表上方 12→8px、
      吊牌上方預留 27→20px；吊牌跟照片框的相對位置不變；字級不變）再裁一次。
   3. 還不夠才收窄左欄（第四輪的做法，照片 1:1 跟著變小）；4. 都不行才 loose（極矮的視窗，門檻見 NOTES.md）。 */
@media (min-width: 768px) {
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-dlg.cr6p7t8-compact .cr6p7-side { padding-top: 20px; }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-dlg.cr6p7t8-compact .cr6p7-title { top: -3px; }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-dlg.cr6p7t8-compact .cr6p7-facts { margin-top: 8px; }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-dlg.cr6p7t8-compact .cr6p7-fact { gap: 8px; padding: 8px 10px; }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-dlg.cr6p7t8-compact .cr6p7-k { width: 2.5em; }
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-dlg.cr6p7t8-compact .cr6p7-v .cr-tags { row-gap: 4px; }
}
/* R2 主視覺三段介紹寬一點（owner 11/07 中午「這邊的框寬一點」，約原本 510px 的 1.25 倍）：≥1024 介紹最寬 38em（17px 字＝646px）；
   ≥1280（內容寬 1120）兩欄改 1.5fr／1fr，左欄 653px 放得下，插圖（最寬 330px）照舊靠右，離文字約 140px。
   1024～1279 欄寬照舊（左欄 458～598px，介紹跟著欄寬），插圖與左邊的小雪花不會靠到字；768～1023 與手機沒動。 */
@media (min-width: 1024px) {
  .cr.cv-r6p7.cv-r6p7t8 .cr-hero__lead { max-width: 38em; }
}
@media (min-width: 1280px) {
  .cr.cv-r6p7.cv-r6p7t8 .cr-hero__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- 第七輪（owner 11/07 14:3x）插圖動畫循環：「這個動畫一直動／但是要有間格」（主視覺雪具架）、「這個也是」（結尾纜車）
   插圖裡掛著的東西（.cr-swing：主視覺的名牌與哨子、手機主視覺小圖的名牌、結尾的纜車）從「進畫面晃一次就停」改成一直循環：
   一個循環 7.5 秒＝前 3 秒照 kit 的晃法（同樣的五個角度 7°／−4.5°／2.4°／−1°／0°、每段 ease-out，比 kit 的 2.8 秒略慢一點）＋後 4.5 秒靜止。
   名牌與纜車一進畫面（kit 加 .is-on）就開始晃、不先等；哨子晚 0.35 秒，之後每一輪都保持錯開。
   離開畫面照 kit 的機制拿掉 .is-on（kit 讓 .is-on 至少留 600ms；亮超過 600ms 後一離開就拿掉），動畫就停（省電）；回到畫面從頭開始。
   教練視窗開著時暫停（背景在遮罩後面、不能操作，不必一直重畫）；關窗後從停住的地方接著晃，不會跳。
   減少動態：kit 本來就不加 .cr-motion，kit 的 reduce 規則也把動畫全關掉；本段另外只在 no-preference 時生效。雪花照舊只在進畫面時飄一次。
   keyframes 用新名字 cr6p7t8-swing，kit 的 cr-swing 與其他實驗室頁照舊。 */
@media (prefers-reduced-motion: no-preference) {
  .cr.cv-r6p7.cv-r6p7t8.cr-motion [data-cr-reveal].is-on .cr-swing { animation: cr6p7t8-swing 7.5s ease-out 0s infinite; }
  .cr.cv-r6p7.cv-r6p7t8.cr-motion [data-cr-reveal].is-on .cr-swing--late { animation-delay: .35s; }
  .cr.cv-r6p7.cv-r6p7t8.cr-motion:has(dialog[data-cv-dialog][open]) .cr-swing { animation-play-state: paused; }
}
@keyframes cr6p7t8-swing {
  0% { rotate: 0deg; }
  6.4% { rotate: 7deg; }
  16% { rotate: -4.5deg; }
  24.8% { rotate: 2.4deg; }
  32.8% { rotate: -1deg; }
  40%, 100% { rotate: 0deg; }
}

/* ---------------------------------------------------------------- 第八輪：自介白卡標題＝H3 紙膠帶標題（owner 11/07 選定）
   owner 打開 H3 的預覽（coaches-r6p7t8h3.html#coach-kyle）說「用這個」。下面的規則照抄 css/coaches-r6p7t8h3.css：只把根 .cr.cv-r6p7t8h3
   換成本版的 .cr.cv-r6p7.cv-r6p7t8、自訂屬性 --h3-pad 改名 --cr6p7t8-bio-pad；數值、順序、@media 一字不改（H1～H5 的頁與 css 留著當紀錄）。
   中文標題貼在一條淡黃半透明紙膠帶上（白點點、兩端鋸齒、斜 -1.2°，從白卡左緣外 8px 貼過來，右端只到字後 22px，不會到 × 底下）；
   英文照舊 Kalam 手寫，在膠帶下面；左上角的粉紅小膠帶拿掉。中文只在逗號後換行（word-break: keep-all）。純 CSS、沒有動畫、標記不動。 */
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-bio > .cr-tape { display: none; }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-bio__head { display: block; --cr6p7t8-bio-pad: 20px; }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-bio__t { position: relative; z-index: 0; width: fit-content; max-width: 100%; padding: 4px 0 5px; word-break: keep-all; }
/* 膠帶：左端在白卡左緣外 8px（白卡左內距＋8px）、右端在字後面 22px；上下各多出一點 */
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-bio__t::before {
  content: ""; position: absolute; z-index: -1; top: -1px; bottom: -1px; left: calc(-1 * var(--cr6p7t8-bio-pad) - 8px); right: -22px; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .8) 1.2px, transparent 1.7px) 3px 3px / 9px 9px, rgba(255, 215, 94, .5);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 10%, 100% 20%, calc(100% - 4px) 30%, 100% 40%, calc(100% - 4px) 50%, 100% 60%, calc(100% - 4px) 70%, 100% 80%,
    calc(100% - 4px) 90%, 100% 100%, 0 100%, 4px 90%, 0 80%, 4px 70%, 0 60%, 4px 50%, 0 40%, 4px 30%, 0 20%, 4px 10%);
  rotate: -1.2deg;
}
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-kalam { margin-top: 7px; }
.cr.cv-r6p7.cv-r6p7t8 .cr6p7-bio__txt { margin-top: 10px; }
@media (min-width: 768px) {
  .cr.cv-r6p7.cv-r6p7t8 .cr6p7-bio__head { --cr6p7t8-bio-pad: 26px; }
}

/* ---------------------------------------------------------------- 第九輪：大標換行處不留逗號（owner 11/07 全站規則）
   容器加 data-cr-lec、逗號包 .cr-lec；js（coaches-r6.js 檔尾）量到逗號後面的字換到下一行，才給逗號加 .is-eol。
   只用 opacity 藏：仍佔原寬、仍在無障礙樹，換行位置不變；置中的那一行往右挪半個逗號寬（.is-lec-dx）。原因與實測見 coach-lab/r6p7t/NOTES.md 第九輪。 */
.cr.cv-r6p7.cv-r6p7t8 [data-cr-lec] .cr-lec.is-eol { opacity: 0; }
.cr.cv-r6p7.cv-r6p7t8 [data-cr-lec] .is-lec-dx { position: relative; left: var(--cr-lec-dx, 0px); }