/* Mobile layout overrides.
   Apply on <=1024px so Chrome device toolbar always matches (no reliance on pointer media). */
@media (max-width: 1024px){
    html, body{ overflow-x: hidden; }

    :root{
      --mobile-top-offset: 48px;
    }
  
    /* Sidebar 變成左半側浮層 */
    .layout{
      grid-template-columns: 1fr !important;
      grid-template-rows: auto 1fr !important;
    }
  
    .sidebar{
      position: fixed !important;
      top: 10px !important;
      left: 10px !important;
  
      /* 目錄吃滿「右上 icons / actions」左側的所有空間 */
      right: 184px !important;
  
      height: auto !important;
      /* Align dropdown label start with main title left edge (main padding-left = 12px). */
      padding: 6px 6px 6px 2px !important;
      border-right: 0 !important;
      border-bottom: 1px solid rgba(34,48,74,.7) !important;
      background: rgba(11,15,23,.72) !important;
      backdrop-filter: blur(10px);
      z-index: 9999 !important;
      overflow: visible !important;
      border-radius: 18px !important;

      /* Top controls: Menu | Language | Resume */
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
      gap: 8px !important;
      align-items: center !important;
    }
  
    /* 側邊欄名字整塊刪掉 */
    .sidebar .brand{ display: none !important; }
  
    /* 手機版目錄：下拉式按鈕 */
    .sidebar .nav{
      position: static !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      max-height: none !important;
      overflow: visible !important;
      grid-column: 1 / 2 !important;
      min-width: 0 !important;
    }
    .sidebar .nav .nav-menu-btn{
      display: inline-flex !important;
      width: 100% !important;
      justify-content: space-between !important;
      padding: 6px 10px !important;
      min-height: 32px !important;
      font-size: 12px !important;
      border-radius: 999px !important;
      min-width: 0 !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }
    .sidebar .nav .nav-menu-btn::after{
      content: "▾";
      opacity: .85;
      margin-left: 8px;
    }
    .sidebar .nav.is-open .nav-menu-btn::after{
      content: "▴";
    }
    .sidebar .nav .nav-list{
      display: none !important;
      position: absolute !important;
      /* Anchor to sidebar (nav is position: static), show right below the 3-button row */
      top: calc(32px + 10px) !important;
      left: 0 !important;
      right: 0 !important;
      z-index: 10001 !important;

      padding: 8px !important;
      border-radius: 16px !important;
      border: 1px solid rgba(34,48,74,.7) !important;
      background: rgba(11,15,23,.92) !important;
      backdrop-filter: blur(10px);
      box-shadow: 0 12px 30px rgba(0,0,0,.25);

      max-height: min(60vh, 360px) !important;
      overflow: auto !important;
    }
    .sidebar .nav.is-open .nav-list{
      display: flex !important;
      flex-direction: column !important;
      gap: 6px !important;
    }
    .sidebar .nav .nav-list .nav-item{
      padding: 8px 10px !important;
      font-size: 12px !important;
      border-radius: 14px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  
    /* actions（語言/履歷）與目錄按鈕同一排：讓子元素參與 sidebar 的 3 欄 grid */
    body .layout .sidebar .actions{
      display: contents !important;
    }
    body .layout .sidebar .actions select.btn{
      grid-column: 2 / 3 !important;
    }
    body .layout .sidebar .actions a.btn{
      grid-column: 3 / 4 !important;
    }

    /* Fallback: if actions is still mounted to body for any reason */
    .actions.mobile-actions-panel{
      position: fixed !important;
      top: 56px !important;
      left: 10px !important;
      right: auto !important;
      transform: none !important;

      width: calc(100vw - 20px) !important;
      max-width: 360px !important;

      display: grid !important;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
      gap: 8px !important;
      align-items: stretch !important;

      padding: 10px !important;
      border-radius: 18px !important;
      border: 1px solid rgba(34,48,74,.7) !important;
      background: rgba(11,15,23,.72) !important;
      backdrop-filter: blur(10px);

      z-index: 10000 !important;
    }
    .actions.mobile-actions-panel .btn,
    .actions.mobile-actions-panel select.btn,
    .sidebar .actions .btn,
    .sidebar .actions select.btn{
      width: 100% !important;
      min-width: 0 !important;
      /* buttons a bit shorter on mobile */
      padding: 6px 10px !important;
      min-height: 32px !important;
      font-size: 12px !important;
      justify-content: center !important;
    }

    /* 避免 select 內容撐寬 */
    .actions.mobile-actions-panel select.btn,
    body .layout .sidebar .actions select.btn{
      min-width: 0 !important;
    }

    /* Avoid long labels stretching the grid (e.g. "Resume PDF") */
    .actions.mobile-actions-panel a.btn,
    body .layout .sidebar .actions a.btn{
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  
    /* 右上角 icons 維持在最上層 */
    .floating-icons{
      /* Align vertically with the center of the 32px-tall top buttons row */
      top: 15px !important;
      right: 6px !important;
      z-index: 10010 !important;
    }
    .floating-icons .iconbar{
      justify-content: flex-end !important;
      gap: 6px !important;
      flex-wrap: nowrap !important;
    }
    .floating-icons .iconbtn{
      width: 34px !important;
      height: 34px !important;
      border-radius: 11px !important;
    }
    .floating-icons .iconbtn svg{
      width: 16px !important;
      height: 16px !important;
    }
  
    /* 避免內容被浮層遮住 */
    .main{
      padding: 14px 12px !important;
      padding-top: var(--mobile-top-offset) !important;
    }
    /* 點目錄/或 hash 跳轉時避免被上方浮層蓋住 */
    .section{
      scroll-margin-top: var(--mobile-top-offset) !important;
    }
  
    .container{
      /* Let content width scale with viewport so there isn't excessive side whitespace on larger phones/tablets. */
      width: 100% !important;
      max-width: min(1000px, calc(100vw - 30px)) !important;
      margin: 0 auto !important;
      min-width: 0 !important;
    }

    /* 方塊/區塊跟著螢幕一起變寬（覆蓋 style.css 內手機版的 card max-width 限制） */
    .section > .card,
    .list,
    .classes-wrap,
    #certs-list,
    .activities-panel,
    .activities-text,
    .activities-album,
    .more-grid{
      width: 100% !important;
      max-width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  
    /* NYCU 課程一行三個 */
    .classes-nycu .classes-grid{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  
    /* 活動經歷照片：跟「更多我的照片」相同視覺尺寸（寬度策略 + 正方形比例） */
    .activities-album{
      width: 100% !important;
      max-width: 100% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
    .activities-album .act-imgwrap{
      aspect-ratio: 1 / 1 !important; /* match .more-imgwrap */
    }
  
    /* 保險：避免任何卡片強制撐寬 */
    .card,.item,.classes-block,.cert-row,.activities-text,.activities-album{
      min-width: 0 !important;
    }
  }