/* =========================
 GORDENLIGHT Responsive Styles (FIXED)
 专注：移动端下拉菜单点击可见 + 原有响应式
========================= */

/* ---- 通用兜底：防横向滚动、容器可收缩 ---- */
html, body { overflow-x: hidden; }
.nav, .menu { min-width: 0; }

/* 超小屏（≤360px） */
@media (max-width: 360px){
  :root { --pad-x: 14px; }
  .site-header .nav { height: 54px; }
}

/* =========================================
   1) 手机（≤480px）
   - 关键修复：.dropdown.open .dropdown-menu 可见
   - 头部导航与 Hero/Works/Foot 的移动端样式
========================================= */
@media (max-width: 480px){
  html { -webkit-text-size-adjust: 100%; }
  body { line-height: 1.6; }

  /* 安全区适配 */
  .site-header {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .site-header .nav { 
    height: 56px;
    gap: 8px;
  }

  /* 品牌名缩放 */
  .brand{
    font-size: 14px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* 顶部菜单布局 */
  .menu{
    gap: 16px;
    overflow-x: visible;
    flex-wrap: nowrap;
    justify-content: flex-end;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar{ display: none; }

  .menu a,
  .dropdown > .dropdown-link{
    font-size: 13px;
    line-height: 44px;
    padding: 0 4px;
    white-space: nowrap;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* 下拉容器定位 */
  .dropdown { position: relative; }

  /* 下拉菜单：初始隐藏 */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 180px;
    background: rgba(17, 19, 23, 0.95);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    margin-top: 8px;
    pointer-events: none; /* 防误触：未展开时不接收点击 */
  }

  /* ✅ 关键修复：点击后添加 .open，使菜单可见 */
  .dropdown.open .dropdown-menu,
  .dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto; /* 展开后可点击 */
  }

  /* 菜单项可点区域 & 触摸体验 */
  .dropdown-menu a {
    display: block;
    padding: 12px 16px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 44px; /* 手指可点 */
  }
  .dropdown-menu a:last-child { border-bottom: none; }
  .dropdown-menu a:active { background: rgba(255,255,255,0.12); }

  /* ===== Hero ===== */
  .hero{ padding: 64px 0 48px; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .hero-title{
    font-size: clamp(20px, 6vw, 28px);
    letter-spacing: 0.08em;
    line-height: 1.1;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .hero-sub{
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.6;
    text-wrap: pretty;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .hero-badges .badge{ font-size: 11px; padding: 4px 8px; }
  .hero-cta{ display: flex; flex-direction: column; gap: 10px; }
  .hero-cta .btn{ width: 100%; font-size: 15px; padding: 12px 14px; min-height: 44px; }
  .hero-meta{
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.16);
    padding: 16px 0 0 0;
    margin-top: 16px;
  }
  .hero-meta p{ font-size: 13px; line-height: 1.5; word-break: keep-all; }

  /* Works：单列 */
  .works-grid{ grid-template-columns: 1fr !important; gap: 16px; }
  .work-card{ overflow: hidden; min-height: 44px; }
  .work-card img{ width: 100%; aspect-ratio: 16/9; object-fit: cover; }
  .work-body{ padding: 12px; }
  .work-title{
    font-size: 14px; font-weight: 700; line-height: 1.4;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    word-break: break-word; hyphens: auto;
  }
  .work-meta{ font-size: 12px; }

  .section{ padding: 48px 0; }

  /* Footer：一列 */
  .foot-grid{ grid-template-columns: 1fr; gap: 20px; }
  .foot-meta{ line-height: 1.8; }
  .foot-nav{ display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 16px; }

  /* 通用触摸尺寸 */
  .btn { min-height: 44px; touch-action: manipulation; }
  input, textarea, select { font-size: 16px; } /* 防 iOS 放大 */
}

/* =========================================
   2) 小平板（481–768px）
========================================= */
@media (min-width: 481px) and (max-width: 768px){
  .brand{ font-size: 16px; letter-spacing: 0.12em; }
  .menu{ gap: 14px; }
  .hero-grid{ grid-template-columns: 1fr; gap: 24px; }
  .works-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .work-card img{ aspect-ratio: 16/9; object-fit: cover; }
  .foot-grid{ grid-template-columns: 1fr; }
}

/* =========================================
   3) 夹层屏（769–1024px）
========================================= */
@media (min-width: 769px) and (max-width: 1024px){
  html, body { overflow-x: hidden; }
  .hero-grid{ grid-template-columns: 1fr; gap: 24px; }
  .hero-meta{
    border-left: 0; border-top: 1px solid rgba(255,255,255,.16);
    padding-left: 0; padding-top: 16px;
  }
  .works-grid{ grid-template-columns: 1fr 1fr; gap: 16px; }
  .info-grid{ grid-template-columns: 1fr 1fr; }
  .foot-grid{ grid-template-columns: 1fr; }
}

/* =========================================
   4) 大屏增强（≥1440px）
========================================= */
@media (min-width: 1440px){
  :root{ --maxw: 1320px; }
}

/* =========================================
   5) 减少动画偏好
========================================= */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* =========================================
   6) 成员详情页：小屏单列
========================================= */
@media (max-width: 480px){
  .hero-subgrid{ grid-template-columns: 1fr; gap: 12px; }
  .profile-grid{ grid-template-columns: 1fr !important; gap: 16px; }
  .profile-photo{ width: 100%; max-width: 540px; margin: 0 auto; border-radius: 14px; }
  .profile-main{ padding-top: 4px; }
  .profile-name{ font-size: 24px; }
  .profile-role{ font-size: 14px; }
  .profile-meta{ font-size: 14px; }
  .profile-links .btn{ width: 100%; }
}
@media (min-width: 481px) and (max-width: 768px){
  .hero-subgrid{ grid-template-columns: 1fr; gap: 16px; }
  .profile-grid{ grid-template-columns: 1fr !important; gap: 20px; }
  .profile-photo{ width: min(100%, 560px); margin: 0 auto; }
}

/* =========================================
   7) members 的 Works 列表在小屏回落
========================================= */
@media (max-width: 768px){
  .work-list{ border-left-width: 1px; }
  .work-item{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 0 10px 12px;
  }
  .w-type, .w-year, .w-loc, .w-collab{ grid-column: 1 / -1; }
  .profile-meta a, .foot-meta a, .foot-nav a, .w-title, .w-collab{
    overflow-wrap: anywhere; word-break: break-word;
  }
}

/* =========================================
   8) EN/JA 语言页：轻微收紧宽度占用
========================================= */
@media (max-width: 768px){
  html[lang="en"] .menu{ gap: 6px; overflow-x: hidden; }
  html[lang="en"] .brand{ font-size: 13px; letter-spacing: .05em; word-spacing: -.28em; }
  html[lang="ja"] .menu{ gap: 8px; overflow-x: hidden; }
  html[lang="ja"] .brand{ font-size: 14px; letter-spacing: .08em; }
}

/* =========================================
   9) 非 -webkit 浏览器的两行截断兜底
========================================= */
@supports not (-webkit-line-clamp: 2) {
  .work-title {
    display: block;
    max-height: calc(1.4em * 2);
    overflow: hidden;
    position: relative;
  }
  .work-title::after {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
    background: white;
    padding-left: 0.5em;
  }
}
/* --- Mobile dropdown hard-fix --- */
@media (max-width: 480px){
  /* 避免被父元素裁切 */
  .menu { overflow: visible !important; }

  /* 让容器不被限制定位 */
  .dropdown { position: static; }

  /* 初始隐藏，用 display 控制最可靠 */
  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;              /* 右对齐更不容易出界 */
    left: auto;
    transform: translateY(6px);  /* 轻微下移 */
    min-width: 180px;
    display: none;         /* ✅ 关键：默认不占位 */
    opacity: 0;
    visibility: hidden;
    background: rgba(17,19,23,0.96);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
    z-index: 9999;         /* 提到最上层，避免被头部遮 */
  }

  /* ✅ 点击后显示（JS 会切 .open） */
  .dropdown.open .dropdown-menu,
  .dropdown:focus-within .dropdown-menu{
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
    pointer-events: auto;
  }

  /* 触摸友好 */
  .dropdown-menu a{
    display:block;
    padding:12px 16px;
    color:#fff;
    text-align:left;
    border-bottom:1px solid rgba(255,255,255,.1);
    min-height:44px;
  }
  .dropdown-menu a:last-child{ border-bottom:none; }
}
/* === Touch & medium widths: enable click-to-open (iPad/横屏手机) === */
@media (max-width: 1024px), (hover: none) {
  .menu { overflow: visible !important; }
  .dropdown { position: static; }

  .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: auto;
    transform: translateY(6px);
    min-width: 180px;
    display: none;            /* 默认隐藏 */
    opacity: 0;
    visibility: hidden;
    background: rgba(17,19,23,0.96);
    backdrop-filter: blur(8px);
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
    z-index: 9999;
    pointer-events: none;
  }

  .dropdown.open .dropdown-menu,
  .dropdown:focus-within .dropdown-menu {
    display: block;           /* 点击后显示 */
    opacity: 1;
    visibility: visible;
    transform: translateY(10px);
    pointer-events: auto;
  }

  /* 字体稍紧凑（与手机一致） */
  .dropdown-menu a{
    font-size: 12px;
    line-height: 1.4;
    padding: 10px 14px;
    min-height: 40px;
    color: #fff;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .dropdown-menu a:last-child{ border-bottom:none; }
}