/* =========================
   Mobile-first fixes (ONLY responsive.css)
   针对 iPhone等小屏
========================= */

/* 1) 超小屏兜底（≤360px）：收窄左右留白、降低导航高度 */
@media (max-width: 360px){
  :root { --pad-x: 14px; }
  .site-header .nav { height: 54px; }
}

/* 2) 手机纵向（≤480px） */
@media (max-width: 480px){
  :root { --pad-x: 16px; }

  /* Header：品牌与菜单不换行、可横向滚动避免挤压 */
  .site-header .nav { height: 56px; }
  .brand{
    font-size: 15px;
    letter-spacing: 0.12em;
    white-space: nowrap;          /* 防止“G O R D E N L I G H T”拆行 */
  }
  .menu{
    gap: 10px;
    flex-wrap: nowrap;            /* 一行展示 */
    overflow-x: auto;             /* 超出时可横向轻扫 */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar{ display: none; }

  .menu a,
  .dropdown > a{
    font-size: 13px;
    white-space: nowrap;          /* 防止日文被逐字断开 */
  }

  /* 语言小地球更紧凑 */
  .lang-switch .dropdown-link{ font-size: 18px; padding: 0 2px; }

  /* 下拉：小屏宽度铺满安全边距，仍以触发点居中 */
  .dropdown-menu{
    min-width: unset;
    width: calc(100vw - 32px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    margin-top: 10px;             /* 远离白色导航，避免重叠 */
  }

  /* Hero：标题与行高微调，按钮竖排全宽更易点 */
  .hero{ padding: 64px 0 48px; }
  .hero-title{ font-size: clamp(28px, 8vw, 38px); }
  .hero-sub{   font-size: clamp(13px, 3.8vw, 16px); }

  .hero-cta{
    flex-direction: column;
    gap: 10px;
  }
  .hero-cta .btn{
    width: 100%;
    padding: 14px 16px;
  }

  /* Works：单列更紧凑 */
  .works-grid{ grid-template-columns: 1fr !important; gap: 12px; }
  .work-body{ padding: 12px; }
  .work-title{ font-size: 13px; }
  .work-meta{  font-size: 12px; }

  /* 文字溢出处理（长标题不换行省略） */
  .work-title, .w-title, .f-title{
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* 3) 平板（≤640px） */
@media (max-width: 640px){
  .menu{ gap: 16px; }
  .works-grid{ grid-template-columns: 1fr; }
  .section{ padding: 48px 0; }
}

/* 4) 平板（≤768px）：个人页/作品行堆叠优化 */
@media (max-width: 768px){
  .profile-grid{ grid-template-columns: 1fr; }
  .filmography{ border-left-width: 1px; }
  .work-row::before{ left: -5px; }
  .work-item{ grid-template-columns: 1.5fr 1fr; grid-auto-rows:auto; }
  .w-type, .w-year, .w-loc, .w-collab{ grid-column: 1 / -1; }

  /* Members 下拉动画在小屏的起止位置 */
  .dropdown-menu{ transform: translateX(-50%) translateY(-8px); }
  .dropdown.open .dropdown-menu{ transform: translateX(-50%) translateY(0); }
}

/* 5) 笔记本（≤1024px）：保持你原来的单列/双列逻辑 */
@media (max-width: 1024px){
  .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; }
  .info-grid{  grid-template-columns: 1fr 1fr; }
  .foot-grid{  grid-template-columns: 1fr; }
}

/* 6) 大屏增强（≥1440px 可选） */
@media (min-width: 1440px){
  :root{ --maxw: 1320px; }
}
/* === Mobile: dropdowns open on tap (≤768px) === */
@media (max-width: 768px){

  /* 触发区：更易点按 */
  .dropdown > a {
    padding: 10px 6px;
    outline: none;
  }

  /* 默认收起（保持你原有的过渡动画） */
  .dropdown .dropdown-menu{
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-8px);
    /* 宽度与位置：铺安全边距，居中 */
    min-width: unset;
    width: calc(100vw - 32px);
    left: 50%;
    margin-top: 10px;
  }

  /* 👉 点击（获得焦点）时展开：父容器处于 focus-within */
  .dropdown:focus-within .dropdown-menu{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  /* 箭头随展开旋转 */
  .dropdown:focus-within > a::after {
    transform: rotate(180deg);
  }

  /* 为了避免仅触摸就触发 hover，弱化小屏 hover 行为 */
  @media (hover: none){
    .dropdown:hover .dropdown-menu { 
      /* 移动端忽略 hover 展开，统一走点击（focus-within） */
      opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-8px);
    }
    .dropdown:hover > a::after { transform: none; }
  }
}