/* case-studies.css — 6/10 §二段1
   新聞時間軸 + 學校照片 modal carousel + 照片卡片狀態
   嫁接到現有 .cs-* 系統; 全用站內 token (--red / --bg2 / --text* / --font); 不引 mockup orange/Inter */

/* ═══ Section head (新聞 / 合作學校 共用) ═══ */
.cs-section{max-width:1100px;margin:0 auto;padding:20px 32px;}
.cs-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:20px;}
.cs-sec-head .left h2{font-size:22px;font-weight:700;letter-spacing:-.4px;margin-bottom:4px;}
.cs-sec-head .left p{font-size:13px;color:var(--text3);}
.cs-sec-head .right{font-size:11px;color:var(--text4);font-family:var(--mono);letter-spacing:.05em;white-space:nowrap;}

/* ═══ NEWS TIMELINE ═══ */
.cs-news-list{display:flex;flex-direction:column;gap:14px;}
.cs-news-item{display:grid;grid-template-columns:96px 1fr 140px;gap:24px;align-items:center;background:var(--bg2);border:.5px solid var(--border2);border-radius:var(--r-lg);padding:22px 24px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s,box-shadow .15s;}
.cs-news-item:hover{border-color:var(--red);transform:translateY(-1px);box-shadow:0 2px 12px rgba(216,90,48,0.10);}

.cs-news-date{text-align:center;border-right:.5px solid var(--border);padding-right:24px;}
.cs-news-date .y{font-size:11px;color:var(--text4);font-family:var(--mono);letter-spacing:.06em;}
.cs-news-date .md{font-size:22px;font-weight:700;color:var(--red);line-height:1.2;margin-top:4px;}

.cs-news-body{min-width:0;}
.cs-news-source{font-size:11px;color:var(--red);font-weight:600;font-family:var(--mono);letter-spacing:.04em;margin-bottom:6px;text-transform:uppercase;}
.cs-news-body h3{font-size:17px;font-weight:600;line-height:1.45;margin-bottom:6px;color:var(--text);}
.cs-news-desc{font-size:13px;color:var(--text2);line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.cs-news-read{font-size:12px;color:var(--red);margin-top:10px;font-weight:600;display:inline-block;}
.cs-news-read .arrow{display:inline-block;transition:transform .2s;}
.cs-news-item:hover .cs-news-read .arrow{transform:translateX(4px);}

.cs-news-thumb{width:140px;height:96px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;overflow:hidden;background:linear-gradient(135deg,var(--bg3) 0%,var(--red-l) 100%);color:var(--red);}
.cs-news-thumb.thu{background:linear-gradient(135deg,#FEF3E8 0%,#FBDDB8 100%);color:#B05A1A;}
.cs-news-thumb.yahoo{background:linear-gradient(135deg,#F4E9F7 0%,#DCC6E0 100%);color:#6B3F8E;}
.cs-news-thumb.tw{background:linear-gradient(135deg,#E8F1F8 0%,#B8D2E8 100%);color:#2D5C8E;}

/* ═══ SCHOOL CARD 照片狀態 (嫁接現有 .cs-card) ═══ */
.cs-card{position:relative;transition:border-color .18s,transform .18s,box-shadow .18s;}
.cs-card.has-photos{cursor:pointer;}
.cs-card.has-photos:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 4px 16px rgba(216,90,48,0.12);}
.cs-card.has-photos:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.cs-card.no-photos{opacity:.86;cursor:default;}

.cs-photo-badge{position:absolute;top:10px;right:10px;z-index:2;background:var(--red);color:#fff;font-size:11px;font-weight:600;padding:4px 10px;border-radius:100px;letter-spacing:.02em;pointer-events:none;box-shadow:0 2px 6px rgba(216,90,48,0.30);}
.cs-photo-badge .arrow{margin-left:3px;}

/* ═══ MODAL + CAROUSEL ═══ */
.cs-modal-overlay{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:32px;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .2s;}
.cs-modal-overlay.open{display:flex;opacity:1;}
.cs-modal-box{background:var(--bg2);border-radius:var(--r-lg);max-width:880px;width:100%;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;transform:scale(.95);transition:transform .2s;}
.cs-modal-overlay.open .cs-modal-box{transform:scale(1);}

.cs-modal-head{padding:18px 24px;border-bottom:.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px;}
.cs-modal-head h3{font-size:17px;font-weight:700;margin-bottom:2px;}
.cs-m-meta{font-size:12px;color:var(--text3);}
.cs-m-tag{background:var(--red-l);color:var(--red);padding:2px 8px;border-radius:100px;margin-left:6px;font-weight:600;}
.cs-modal-close{background:transparent;border:none;width:36px;height:36px;border-radius:100px;cursor:pointer;color:var(--text2);font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .15s;font-family:var(--font);}
.cs-modal-close:hover{background:var(--bg3);color:var(--text);}

.cs-carousel{position:relative;background:#000;aspect-ratio:16/9;overflow:hidden;}
.cs-carousel-track{display:flex;height:100%;transition:transform .3s ease;}
.cs-carousel-slide{flex:0 0 100%;height:100%;background-size:cover;background-position:center;background-color:#1A1A1A;}

.cs-carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:rgba(255,255,255,.9);border:none;border-radius:100px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.2);z-index:2;transition:background .15s,transform .15s;font-family:var(--font);}
.cs-carousel-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.05);}
.cs-carousel-arrow.prev{left:16px;}
.cs-carousel-arrow.next{right:16px;}
.cs-carousel-arrow:disabled{opacity:.4;cursor:not-allowed;}

.cs-carousel-counter{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.65);color:#fff;font-size:12px;padding:4px 12px;border-radius:100px;z-index:2;font-variant-numeric:tabular-nums;font-family:var(--mono);}

.cs-carousel-thumbs{display:flex;gap:8px;padding:14px 24px;overflow-x:auto;background:var(--bg3);}
.cs-carousel-thumb{flex:0 0 64px;height:40px;border-radius:4px;background-size:cover;background-position:center;cursor:pointer;opacity:.5;border:2px solid transparent;transition:opacity .15s;}
.cs-carousel-thumb:hover{opacity:.85;}
.cs-carousel-thumb.active{opacity:1;border-color:var(--red);}

/* ═══ MOBILE (此頁; 對齊現有 @media breakpoint) ═══ */
@media (max-width:768px){
  .cs-news-item{grid-template-columns:70px 1fr;gap:14px;padding:18px;}
  .cs-news-thumb{display:none;}
  .cs-news-date{padding-right:14px;}
  .cs-news-date .md{font-size:18px;}
  .cs-news-body h3{font-size:15px;}
  .cs-news-desc{font-size:12px;}
  .cs-sec-head{flex-direction:column;gap:6px;}

  .cs-modal-overlay{padding:0;}
  .cs-modal-box{max-width:100%;max-height:100vh;height:100vh;border-radius:0;}
  .cs-carousel{aspect-ratio:1/1;}
  .cs-carousel-arrow{width:36px;height:36px;font-size:16px;}
  .cs-carousel-thumbs{padding:10px 16px;}
  .cs-carousel-thumb{flex:0 0 48px;height:32px;}
}