/**
 * Foldable Devices Support
 * 折疊設備支援樣式
 *
 * 這個文件處理可折疊設備（如 Galaxy Z Fold、Surface Duo 等）的特殊布局需求
 */

/* ============================================
   基礎折疊設備檢測和變數
   ============================================ */

:root {
  /* 折疊區域環境變數（瀏覽器支援時會自動填充） */
  --fold-top: env(fold-top, 0);
  --fold-left: env(fold-left, 0);
  --fold-right: env(fold-right, 0);
  --fold-bottom: env(fold-bottom, 0);
  --fold-width: env(fold-width, 0);
  --fold-height: env(fold-height, 0);
  
  /* 安全區域 */
  --safe-area-inset-top: env(safe-area-inset-top, 0);
  --safe-area-inset-right: env(safe-area-inset-right, 0);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
  --safe-area-inset-left: env(safe-area-inset-left, 0);
}

/* ============================================
   防止內容被裁剪的基礎設置
   ============================================ */

* {
  /* 確保所有元素不會超出視口 */
  max-width: 100%;
}

html, body {
  /* 防止水平滾動導致的裁剪 */
  overflow-x: hidden;
  width: 100%;
  
  /* 使用設備的完整寬度，包括安全區域 */
  min-height: 100vh;
  min-height: 100dvh; /* 動態視口高度 */
}

img, video, iframe, embed, object {
  /* 媒體元素自適應 */
  max-width: 100%;
  height: auto;
}

/* ============================================
   折疊設備姿態檢測 (CSS device-posture)
   ============================================ */

/* 折疊關閉狀態 - 單一屏幕 */
@media (device-posture: folded) {
  #app-container {
    max-width: 100%;
    width: 100%;
    border-left: none;
    border-right: none;
  }
  
  #desktop-container {
    flex-direction: column;
  }
  
  #desktop-container aside {
    display: none; /* 窄屏隱藏側邊欄 */
  }
  
  main {
    width: 100%;
    padding: 0 0.5em;
  }
}

/* 連續/展開狀態 - 大屏幕 */
@media (device-posture: continuous) {
  #app-container {
    max-width: 100%;
  }
  
  /* 如果支援 viewport segments，使用雙欄布局 */
  @supports (env(viewport-segment-right 0 0)) {
    #desktop-container {
      display: grid;
      grid-template-columns: env(viewport-segment-right 0 0) 1fr;
      gap: env(fold-width, 0);
    }
  }
}

/* ============================================
   Viewport Segments 支援
   處理雙屏設備的屏幕區段
   ============================================ */

/* 單一屏幕區段（折疊或單屏模式） */
@media (horizontal-viewport-segments: 1) {
  #app-container {
    max-width: 100%;
    margin: 0;
    border-left: none;
    border-right: none;
  }
  
  #desktop-container aside {
    display: none;
  }
  
  /* 
   * 注意：不要在這裡設置 grid-template-columns
   * 這個媒體查詢在普通桌面瀏覽器也會觸發（桌面只有 1 個 viewport segment）
   * 卡片網格的響應式布局由其他標準媒體查詢（max-width）處理
   */
}

/* 兩個屏幕區段（完全展開的折疊設備） */
@media (horizontal-viewport-segments: 2) {
  #app-container {
    max-width: 100%;
  }
  
  #desktop-container {
    display: grid;
    grid-template-columns: 
      calc(env(viewport-segment-right 0 0) - env(viewport-segment-left 0 0)) 
      calc(env(viewport-segment-right 1 0) - env(viewport-segment-left 1 0));
    gap: max(env(fold-width, 0), 1rem);
  }
  
  /* 左側屏幕 */
  aside {
    grid-column: 1;
    border-right: none;
  }
  
  /* 右側屏幕 */
  main {
    grid-column: 2;
    padding: 0 1em;
  }
}

/* 垂直屏幕區段（書本模式） */
@media (vertical-viewport-segments: 2) {
  #desktop-container {
    flex-direction: column;
  }
  
  /* 在垂直雙屏模式下，調整佈局 */
  aside {
    max-height: 50vh;
    overflow-y: auto;
  }
}

/* ============================================
   響應式斷點優化（結合折疊設備特性）
   ============================================ */

/* 小屏幕：手機和折疊關閉狀態 */
@media screen and (max-width: 600px) {
  #app-container {
    max-width: 100%;
    margin: 0;
    border-left: none;
    border-right: none;
  }
  
  #desktop-container {
    flex-direction: column;
  }
  
  #desktop-container aside {
    display: none;
  }
  
  main {
    width: 100%;
    padding: 0 0.5em;
    overflow-x: hidden;
  }
  
  /* 卡片單列顯示 */
  .cards-grid,
  #cards {
    grid-template-columns: 1fr;
  }
  
  /* 減小內邊距 */
  .card {
    margin: 0.5em 0;
  }
}

/* 中等屏幕：大螢幕手機、小平板、折疊半開 */
@media screen and (min-width: 601px) and (max-width: 999px) {
  #app-container {
    max-width: 100%;
    margin: 0 0.5rem;
  }
  
  #desktop-container aside {
    display: none;
  }
  
  .cards-grid,
  #cards {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}

/* 大屏幕：桌面、平板、折疊完全展開 */
@media screen and (min-width: 1000px) {
  #app-container {
    max-width: 100%;
  }
  
  #desktop-container {
    flex-direction: row;
  }
  
  #desktop-container aside {
    display: block;
    flex: 0 0 280px;
  }
  
  main {
    flex: 1;
  }
}

/* ============================================
   特定設備優化
   ============================================ */

/* Surface Duo 優化 */
@media screen and (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  #app-container {
    /* Surface Duo 雙屏模式 */
    max-width: 100%;
  }
}

/* Galaxy Z Fold 系列 */
@media screen and (max-width: 450px) {
  /* 外屏模式 */
  header {
    padding-top: max(0.5em, env(safe-area-inset-top));
  }
  
  header a {
    padding: 0.3em 0.5em;
    font-size: 0.9em;
  }
}

/* ============================================
   安全區域和防裁剪
   ============================================ */

/* 確保內容在安全區域內 */
#app-container {
  padding-left: max(0, env(safe-area-inset-left));
  padding-right: max(0, env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 防止固定元素被遮擋 */
header {
  padding-top: max(0.5em, env(safe-area-inset-top));
}

/* ============================================
   JavaScript 輔助類別
   這些類別由 JS 根據屏幕狀態動態添加
   ============================================ */

/* 折疊狀態 */
body.is-folded .cards-grid,
body.is-folded #cards {
  grid-template-columns: 1fr;
}

body.is-folded #desktop-container aside {
  display: none;
}

/* 展開狀態 */
body.is-unfolded #app-container {
  max-width: 100%;
}

/* 雙屏模式 */
body.is-dual-screen #desktop-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(env(fold-width, 0), 1rem);
}

/* 可能發生裁剪時的警告樣式 */
body.may-be-cropped .card {
  /* 確保卡片內容不會溢出 */
  overflow-x: auto;
  word-wrap: break-word;
  word-break: break-word;
}

/* ============================================
   動畫和過渡效果
   ============================================ */

#app-container,
#desktop-container,
main,
aside {
  transition: max-width 0.3s ease, grid-template-columns 0.3s ease;
}

/* ============================================
   打印樣式（避免折疊設備檢測影響打印）
   ============================================ */

@media print {
  #app-container {
    max-width: 100% !important;
    margin: 0 !important;
    border: none !important;
  }
  
  #desktop-container {
    display: block !important;
  }
  
  aside {
    display: none !important;
  }
}