/* 前台頁面專用樣式（front.js） */

/* 頭像與講者照片：有照片時裁成圓形 */
.avatar{overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}

/* 課程介紹頁：桌機側欄的按鈕區（手機版由 .mobile-cta 顯示） */
@media (min-width:901px){
  .side-card .cta-box{display:grid;gap:10px}
}
#unit-files{scroll-margin-top:12px}

/* 長字串（網址、Email、檔名）不撐破版面 */
.comment p,.comment .reply,.speaker-card p,.file-row b,.curr-unit .t,.faq p{overflow-wrap:anywhere}
.file-row b{display:block}
.file-row .grow{min-width:0}

/* 上鎖／處理中畫面：圖示置中在文字上方 */
.locked .ico{display:block}
.locked b{display:block}

/* 播放器 */
.player-wrap mux-player{--media-object-fit:contain;aspect-ratio:16/9}
.resume{flex-wrap:wrap}

/* 上課頁側欄：鍵盤焦點 */
.ls-unit:focus-visible,.ls-sec>button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.learn-side[inert]{pointer-events:none}

/* 登入／申請／初次設定 */
.auth form[hidden]{display:none}
.auth .seg button{flex:1}
.auth .card .callout{margin:0 0 14px}

/* 留言：作者後面的「學員」、回覆前面的「官方回覆」標籤 */
.comment .row .pill{flex:none}
.comment .reply-head{gap:6px;margin-bottom:4px;flex-wrap:wrap}