/* ===========================================================
   Responsive — real adaptations (not scale())
   Breakpoints observed: 1920 / 1440 / 1366 / 1280 / 1024 / 768 / 390
   =========================================================== */

/* ---- Header ---- */
@media (max-width: 1024px) {
  .nav-menu { display: none; }
  .header-search form { width: 160px; }
  .header-actions .act .lbl { display: none; }
}
@media (max-width: 768px) {
  :root { --header-h: 48px; --header-px: 16px; --content-px: 16px; }
  .header-search { display: none; }
  /* 移动端与桌面端行为保持一致：首屏透明条覆盖 hero 并随页面滚走，
     越过 #squareNav 后才出现吸顶导航（桌面端标准同上，见 header.css） */
  .nav-header.is-transparent {
    position: absolute; top: 0; left: 0; right: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
    border-bottom: none; color: #fff;
  }
  .nav-header.is-transparent .nav-link,
  .nav-header.is-transparent .header-logo { color: rgba(255, 255, 255, .85); }
  .nav-header.is-transparent .act-bell { color: rgba(255, 255, 255, .85); }
  .nav-header.is-transparent .act-login,
  .nav-header.is-transparent .avatar-btn { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
  /* 右簇放不下时需要收紧，否则 360px 宽的机型会把 LOGO 挤出去。
     注意一定要补 margin-left:auto —— 桌面端靠展开的搜索框把右簇顶到右边，
     ≤1024 搜索框隐藏后若不补会把右簇紧贴在 LOGO 后面 */
  .header-actions { gap: 14px; margin-left: auto; }
  .act-login, .avatar-btn { width: 30px; height: 30px; font-size: 11px; }
  .btn-upload { width: 64px; height: 30px; font-size: 13px; border-radius: 6px; }
  /* 移动端顶栏【不贴顶】：越过 #squareNav 后仍回到文档顶（随 hero 一起滚走），
     贴顶的半透明导航只由 #squareNav 承担 —— 避免顶栏与栏目标签在同一行撞在一起 */
  .page-home .nav-header.is-solid,
  .page-home .nav-header.is-solid.is-merged {
    position: absolute; top: 0; left: 0; right: 0;
    background: transparent; border-bottom: none;
    pointer-events: none; animation: none;
  }
}
@media (max-width: 400px) {
  .header-actions { gap: 10px; }
  .act-vip .vip-svg { width: 46px; height: 19px; }   /* 保持 58:24 比例 */
  .act-bell { width: 22px; }
  .act-bell svg { width: 22px; height: 22px; }
  .btn-upload { width: 58px; height: 28px; }
  /* width:auto + 定高，保持 SVG 114:32 的比例不被拉伸 */
  .header-logo .logo-svg { width: auto; height: 24px; }
}
@media (max-width: 340px) {
  .act-vip { display: none; }
}

/* ===========================================================
   Mobile top nav (≤768，仅首页 .page-home)
   结构：≡ 菜单 + LOGO …… 放大镜 + 上传
   会员 / 铃铛 / 登录 移入左侧抽屉，避免顶栏塞不下
   （顶栏本身不贴顶，见上方 Header 段的 .nav-header.is-solid 覆盖）
   =========================================================== */
@media (max-width: 768px) {
  /* ---- 汉堡按钮 ---- */
  .page-home .nav-toggle {
    display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 4px; width: 24px; height: 26px; margin-right: 12px;
    padding: 0; background: none; border: none; cursor: pointer; flex: none; color: inherit;
  }
  .page-home .nav-toggle span {
    display: block; height: 2px; border-radius: 1px; background: currentColor;
  }
  .page-home .nav-toggle span:nth-child(1) { width: 18px; }
  .page-home .nav-toggle span:nth-child(2) { width: 13px; }
  .page-home .nav-toggle span:nth-child(3) { width: 18px; }
  .page-home .nav-header.is-transparent .nav-toggle { color: rgba(255, 255, 255, .92); }
  .page-home .nav-header.is-solid .nav-toggle { color: var(--color-text); }
  .page-home .nav-header:not(.is-transparent):not(.is-solid) .nav-toggle { color: var(--color-text-strong); }

  /* ---- 会员/铃铛/登录 收进抽屉 ---- */
  .page-home .header-actions .act-vip,
  .page-home .header-actions .act-bell,
  .page-home .header-actions [data-login-area],
  .page-home .header-actions .act-login,
  .page-home .header-actions .avatar-btn { display: none; }

  /* ---- 顶栏只留「放大镜 + 上传」 ---- */
  .page-home .header-actions { margin-left: 10px; gap: 0; }
  .page-home .header-search {
    display: flex; margin-left: auto; padding: 0;   /* 覆盖 header.css 的 ≤768 display:none */
  }
  .page-home .header-search form {
    width: 26px; height: 32px; padding: 0; border: none;
    background: none; align-items: center; justify-content: center;
  }
  .page-home .header-search input,
  .page-home .header-search .s-ai { display: none; }
  .page-home .header-search .s-icon { width: 22px; height: 22px; margin-left: 0; color: rgba(255, 255, 255, .92); }
  .page-home .nav-header.is-solid .header-search .s-icon,
  .page-home .nav-header:not(.is-transparent):not(.is-solid) .header-search .s-icon { color: var(--color-text); }

  /* ---- 左侧抽屉 ---- */
  .page-home .mnav {
    /* overflow:hidden 收住关闭态 translateX(-100%) 的面板，避免它被算作横向溢出 */
    display: block; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 100);
    overflow: hidden; visibility: hidden; pointer-events: none;
  }
  .page-home .mnav.open { visibility: visible; pointer-events: auto; }
  .page-home .mnav__mask {
    position: absolute; inset: 0; background: rgba(0, 0, 0, .45);
    opacity: 0; transition: opacity .24s ease;
  }
  .page-home .mnav.open .mnav__mask { opacity: 1; }
  .page-home .mnav__panel {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 82vw; max-width: 320px; background: var(--c-panel);
    display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.2, .8, .3, 1);
    box-shadow: 4px 0 20px rgba(0, 0, 0, .12);
  }
  .page-home .mnav.open .mnav__panel { transform: none; }
  .page-home .mnav__head {
    flex: none; height: 48px; padding: 0 16px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--color-border);
  }
  .page-home .mnav__brand { font-size: 16px; font-weight: 700; color: var(--color-primary); }
  .page-home .mnav__close {
    width: 32px; height: 32px; background: none; border: none; cursor: pointer;
    font-size: 17px; color: var(--color-text-muted);
  }
  .page-home .mnav__body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 28px;
  }
  .page-home .mnav__user { display: flex; gap: 10px; margin-bottom: 16px; }
  .page-home .mnav__btn-login,
  .page-home .mnav__btn-reg {
    flex: 1; height: 38px; border-radius: 8px; font-size: 14px; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .page-home .mnav__btn-login { background: var(--color-primary); color: #fff; }
  .page-home .mnav__btn-reg { border: 1px solid var(--color-border); color: var(--color-text-strong); }
  .page-home .mnav__main { display: flex; flex-direction: column; }
  .page-home .mnav__main a {
    display: flex; align-items: center; height: 46px; font-size: 16px;
    color: var(--color-text-strong); text-decoration: none;
    border-bottom: 1px solid var(--color-border);
  }
  .page-home .mnav__main a em {
    font-style: normal; margin-left: 6px; font-size: 10px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px; background: var(--color-primary); color: #fff;
  }
  .page-home .mnav__grp { margin-top: 20px; }
  .page-home .mnav__grp h5,
  .page-home .mnav__grp h2 {
    font-size: 13px; font-weight: 600; color: var(--color-text-light); margin-bottom: 10px;
  }
  .page-home .mnav__tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .page-home .mnav__tags a {
    font-size: 13px; color: var(--color-text-muted); text-decoration: none;
    background: var(--color-surface-2); padding: 7px 13px; border-radius: var(--radius-full);
  }
  .page-home .mnav__foot {
    margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border);
    display: flex; gap: 20px;
  }
  .page-home .mnav__foot a { font-size: 14px; color: var(--color-text-muted); text-decoration: none; }
  .page-home .mnav__logout { margin: 0; }
  .page-home .mnav__logout button {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; background: none;
    font-size: 14px; color: var(--color-text-muted); cursor: pointer;
  }
  .page-home .mnav__logout button:hover { color: var(--color-primary); }
}

/* ===========================================================
   Mobile — 首页首屏 / 栏目标签 / 卡片 / 悬浮条 / 页脚
   全部规则都在 max-width 作用域内，桌面端样式不受影响
   =========================================================== */

/* ---- Hero ---- */
@media (max-width: 768px) {
  .hero {
    aspect-ratio: 16 / 10; min-height: 0; max-height: none;
  }
  .hero-cap { padding: 44px 16px 20px; }
  .hero-cap .cap-cat { font-size: 12px; margin-bottom: 6px; }
  .hero-cap h2 { font-size: 19px; line-height: 1.35; margin-bottom: 8px; }
  .hero-cap .cap-author { font-size: 12px; gap: 6px; }
  .hero-cap .cap-author img { width: 24px; height: 24px; }
  .hero-dots { bottom: 12px; gap: 6px; }
  .hero-dot { width: 6px; height: 6px; }
  .hero-dot.on { width: 18px; }
}
@media (max-width: 480px) {
  /* 小屏再抬高一点并压缩文案层，否则渐变底色会把整张图占满 */
  .hero { aspect-ratio: 3 / 2; }
  .hero-cap { padding: 26px 14px 18px; }
  .hero-cap h2 { font-size: 18px; }
}

/* ---- 栏目 Tab 条：窄屏放不下 6 个 18px 标签，改为可横滑 + 收紧间距 ---- */
@media (max-width: 768px) {
  .square-nav { height: var(--header-h); }            /* 48px */
  /* 移动端顶栏不贴顶（见下方 .nav-header.is-solid 覆盖），
     栏目 Tab 自身钉在 top:0 —— 即「滚到 #squareNav 才出现的贴顶半透明导航」。
     半透明沿用桌面端拟合值：rgba(255,255,255,.4) + blur(6px) + 1px #F3F4F6（home.css 默认） */
  .square-nav__warp {
    height: 100%; justify-content: flex-start;         /* 配合 .square-tabs 的 auto 外边距实现
                                                          放得下时居中、放不下时可横滑 */
    padding: 0 var(--header-px);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .square-nav__warp::-webkit-scrollbar { display: none; }
  .square-tabs { margin: 0 auto; gap: 22px; }
  .sq-tab { font-size: 15px; white-space: nowrap; }
  .sq-tab--aigc { width: auto; }
  .laurel-svg { width: 8px; height: 20px; }
}
@media (max-width: 480px) {
  .square-tabs { gap: 18px; }
  .sq-tab { font-size: 14px; }
}

/* ---- Work grid (cards.css handles columns) ---- */
@media (max-width: 768px) {
  .work-grid { gap: 18px 10px; }
  .work-card .thumb { border-radius: 6px; }
  .work-card .title { font-size: 13px; margin-top: 8px; }
  .work-card .cat-line { font-size: 11px; }
  .work-card .meta { margin-top: 6px; }
  .work-card .thumb .stats-bar { font-size: 11px; left: 6px; right: 6px; bottom: 5px; }
  .work-card .thumb .stats-bar .sb-left { gap: 8px; }
  .work-card .thumb .stats-bar .sb-item svg { width: 12px; height: 12px; }
}

/* ---- Creator / agency strip：移动端不展示，信息流只保留作品栅格 ---- */
@media (max-width: 768px) {
  .page-home .creator-strip { display: none; }
}

/* ---- Creator / agency strip：窄屏单列，收紧卡内间距避免一屏一张太长 ----
   （首页在 ≤768 已整块隐藏，以下规则供其他引用该组件的页面使用） ---- */
@media (max-width: 640px) {
  .creator-strip { margin: 12px 0 24px; }
  .creator-embed { padding: 14px; border-radius: 6px; }
  .ce-head { gap: 10px; }
  .ce-avatar { width: 52px; height: 52px; }
  .ce-name { font-size: 14px; }
  .ce-stats, .ce-desc { font-size: 12px; }
  .ce-certs { gap: 6px; margin-top: 8px; }
  .ce-works { gap: 10px; margin-top: 12px; padding-top: 10px; }
  .ce-thumb { width: 96px; }
  .ce-wtitle { font-size: 12px; }
  .ce-wmeta { font-size: 11px; }
}

/* ---- Feed loading pill ---- */
@media (max-width: 768px) {
  .feed-loading { margin: 20px auto 8px; height: 38px; font-size: 12px; }
}

/* ---- Floating right toolbar ---- */
@media (max-width: 768px) {
  .float-bar { right: 12px; bottom: 72px; gap: 8px; }
  .float-bar button, .float-bar a { width: 36px; height: 36px; font-size: 14px; }
}

/* ===========================================================
   子页面通用导航 · 窄屏形态（body.page-chrome，由 chrome.js 添加）
   ≤1024 主导航隐藏 → 汉堡按钮 + 左侧抽屉承接
   =========================================================== */
@media (max-width: 1024px) {
  .page-chrome .nav-toggle {
    display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 4px; width: 24px; height: 24px; margin-right: 14px;
    padding: 0; background: none; border: none; cursor: pointer; flex: none;
    color: rgba(255, 255, 255, .9);
  }
  .page-chrome .nav-toggle span { display: block; height: 2px; border-radius: 1px; background: currentColor; }
  .page-chrome .nav-toggle span:nth-child(1) { width: 18px; }
  .page-chrome .nav-toggle span:nth-child(2) { width: 12px; }
  .page-chrome .nav-toggle span:nth-child(3) { width: 18px; }

  .page-chrome .mnav {
    display: block; position: fixed; inset: 0; z-index: calc(var(--z-modal) - 100);
    overflow: hidden; visibility: hidden; pointer-events: none;
  }
  .page-chrome .mnav.open { visibility: visible; pointer-events: auto; }
  .page-chrome .mnav__mask {
    position: absolute; inset: 0; background: rgba(0, 0, 0, .5);
    opacity: 0; transition: opacity .24s ease;
  }
  .page-chrome .mnav.open .mnav__mask { opacity: 1; }
  .page-chrome .mnav__panel {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 84vw; max-width: 340px; background: var(--c-panel);
    display: flex; flex-direction: column;
    transform: translateX(-100%); transition: transform .26s cubic-bezier(.2, .8, .3, 1);
    box-shadow: 6px 0 28px rgba(0, 0, 0, .18);
  }
  .page-chrome .mnav.open .mnav__panel { transform: none; }
  .page-chrome .mnav__head {
    flex: none; height: 56px; padding: 0 16px;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(180deg, #171A22, #101218); color: #fff;
  }
  .page-chrome .mnav__brand { font-size: 16px; font-weight: 700; }
  .page-chrome .mnav__close {
    width: 32px; height: 32px; background: none; border: none; cursor: pointer;
    font-size: 17px; color: rgba(255, 255, 255, .8);
  }
  .page-chrome .mnav__body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 16px 28px;
  }
  .page-chrome .mnav__user { display: flex; gap: 10px; margin-bottom: 14px; }
  .page-chrome .mnav__btn-login,
  .page-chrome .mnav__btn-reg {
    flex: 1; height: 38px; border-radius: 8px; font-size: 14px; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .page-chrome .mnav__btn-login { background: var(--color-primary); color: #fff; }
  .page-chrome .mnav__btn-reg { border: 1px solid var(--color-border); color: var(--color-text-strong); }
  .page-chrome .mnav__main { display: flex; flex-direction: column; }
  .page-chrome .mnav__main a {
    display: flex; align-items: center; height: 46px; font-size: 16px;
    color: var(--color-text-strong); text-decoration: none;
    border-bottom: 1px solid var(--color-border);
  }
  .page-chrome .mnav__main a em {
    font-style: normal; margin-left: 6px; font-size: 10px; font-weight: 700;
    padding: 1px 5px; border-radius: 3px; background: var(--color-primary); color: #fff;
  }
  .page-chrome .mnav__grp { margin-top: 18px; }
  .page-chrome .mnav__grp h5,
  .page-chrome .mnav__grp h2 {
    font-size: 13px; font-weight: 600; color: var(--color-text-light); margin-bottom: 10px;
  }
  .page-chrome .mnav__tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .page-chrome .mnav__tags a {
    font-size: 13px; color: var(--color-text-muted); text-decoration: none;
    background: var(--color-surface-2); padding: 7px 13px; border-radius: var(--radius-full);
  }
  .page-chrome .mnav__foot { display: flex; align-items: center; gap: 20px; }
  .page-chrome .mnav__foot a { font-size: 14px; color: var(--color-text-muted); text-decoration: none; }
  .page-chrome .mnav__logout { margin: 0 0 0 auto; }
  .page-chrome .mnav__logout button {
    display: inline-flex; align-items: center; gap: 6px; padding: 0; border: none; background: none;
    font-size: 14px; color: var(--color-text-muted); cursor: pointer;
  }
  .page-chrome .mnav__logout button:hover { color: var(--color-primary); }
}

/* ≤768：顶栏只留 汉堡 + LOGO + 放大镜 + 上传，其余进抽屉 */
@media (max-width: 768px) {
  .page-chrome .nav-header--site .header-actions .act-vip,
  .page-chrome .nav-header--site .header-actions .act-bell,
  .page-chrome .nav-header--site .header-actions [data-login-area],
  .page-chrome .nav-header--site .header-actions .act-login,
  .page-chrome .nav-header--site .header-actions .avatar-btn { display: none; }
  .page-chrome .nav-header--site .header-search { display: flex; margin-left: auto; padding: 0; }
  .page-chrome .nav-header--site .header-search form {
    width: 30px; height: 32px; padding: 0; border: none; background: none;
    align-items: center; justify-content: center;
  }
  .page-chrome .nav-header--site .header-search input,
  .page-chrome .nav-header--site .header-search .s-ai { display: none; }
  .page-chrome .nav-header--site .header-search .s-icon {
    width: 22px; height: 22px; margin-left: 0; color: rgba(255, 255, 255, .92);
  }
  .page-chrome .nav-header--site .header-actions { gap: 0; margin-left: 8px; }
  .page-chrome .nav-header--site .btn-upload { min-width: 64px; height: 30px; padding: 0 14px; font-size: 13px; }
  .page-chrome .nav-header--site .nav-toggle { margin-right: 10px; }
}
@media (max-width: 400px) {
  .page-chrome .nav-header--site .btn-upload { min-width: 56px; padding: 0 12px; }
}

/* ---- Account layout ---- */
@media (max-width: 900px) {
  .account-layout { flex-direction: column; }
  .account-sidebar { width: 100%; position: static; }
  .account-sidebar .account-nav { flex-direction: row; flex-wrap: wrap; }
  .account-sidebar .user-card { border-bottom: none; margin-bottom: 6px; }
  .account-sidebar .grp { width: 100%; }
}

/* ---- Mega menu hidden on small ---- */
@media (max-width: 1024px) {
  .mega, .dropdown { display: none !important; }
}

/* ---- Footer ---- */
@media (max-width: 768px) {
  /* .footer-brand 桌面为 max-width:480 + flex:none，窄屏不收缩会撑破文档宽度 */
  .footer-top { flex-direction: column; align-items: stretch; gap: 22px; padding: 28px 20px 12px; }
  .footer-brand { max-width: 100%; flex: 1 1 auto; min-width: 0; }
  .footer-desc { margin-top: 14px; line-height: 1.8; }
  .footer-social { margin-top: 16px; gap: 12px; }
  .footer-cols {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 12px; margin-left: 0;
  }
  .footer-col h4, .footer-col h2 { margin-bottom: 10px; }
  .footer-col a { padding: 5px 0; }
  .footer-bottom { padding: 12px 20px 24px; }
  /* 页脚 LOGO：窄屏等比缩一档（66×22 = 3:1），左右边距同时变小才不显得logo涨大 */
  .footer-logo svg { width: 66px; height: 22px; }
}
@media (max-width: 480px) {
  /* 再小一档（60×20 = 3:1）；宽高同样成比例一起改 */
  .footer-logo svg { width: 60px; height: 20px; }
}

/* ---- Generic page two-column collapse ---- */
@media (max-width: 1024px) {
  .two-col { grid-template-columns: 1fr !important; }
}

/* ---- Work detail layout ---- */
@media (max-width: 1100px) {
  .wd-layout { grid-template-columns: 1fr !important; }
  .wd-side { display: none; }
}