/* ==========================================================================
   星辉娱乐 · 场刊设计系统
   文件 4/4：layer-pages.css —— 页面专属版式
   首页海报区、票根跑马带、开户流程轴、注册登录分屏、动态列表、
   长文目录、联系页与 404。均建立在 layer-stage 组件之上。
   ========================================================================== */

@layer pages {
  /* ---------- 首页：海报式双幕 ---------- */
  .xh-poster { position: relative; padding: clamp(38px, 6vw, 84px) 0 clamp(30px, 4vw, 56px); }
  .xh-poster__grid { display: grid; gap: clamp(30px, 5vw, 58px); align-items: center; }
  @media (min-width: 1020px) { .xh-poster__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); } }
  .xh-poster__title em {
    font-style: normal; position: relative; z-index: 0; display: inline-block;
  }
  .xh-poster__title em::after {
    content: ""; position: absolute; left: -.1em; right: -.1em; bottom: .1em; z-index: -1;
    height: .34em; background: var(--xh-brass); opacity: .34;
  }
  .xh-poster__title span { display: block; font-size: .42em; font-weight: 700; letter-spacing: 0; color: var(--xh-fg-2); margin-top: .5em; }
  .xh-poster__meta { display: grid; gap: 10px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--xh-line-2); }
  .xh-poster__meta div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .xh-poster__meta dt, .xh-poster__meta b { font-family: var(--xh-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--xh-fg-3); }
  .xh-poster__meta p { margin: 0; font-size: .95rem; color: var(--xh-fg-2); }

  /* ---------- 票根跑马带（第二层动效） ---------- */
  .xh-strip {
    border-block: 1px solid var(--xh-line-2);
    background: var(--xh-fg);
    color: var(--xh-bg);
    overflow: hidden;
  }
  .xh-strip__track {
    display: flex; width: max-content; gap: 0;
    animation: xh-strip 30s linear infinite;
  }
  .xh-strip__track span {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 12px 22px; white-space: nowrap;
    font-family: var(--xh-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
    border-right: 1px dashed rgba(244, 241, 232, .3);
  }
  .xh-strip__track span b { color: var(--xh-brass-hi); }
  .xh-strip:hover .xh-strip__track { animation-play-state: paused; }
  @keyframes xh-strip { to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .xh-strip__track { animation: none; } }

  /* ---------- 首页：三档现场（横向大栏） ---------- */
  .xh-acts3 { display: grid; gap: 1px; background: var(--xh-line-2); border: 1px solid var(--xh-line-2); }
  @media (min-width: 900px) { .xh-acts3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .xh-acts3 > div { padding: 24px; background: var(--xh-surface); display: grid; gap: 12px; align-content: start; }
  .xh-acts3 h3 { margin: 0; }
  .xh-acts3 p { margin: 0; color: var(--xh-fg-2); font-size: .93rem; }
  .xh-acts3__no { font-family: var(--xh-mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--xh-cue); }
  .xh-acts3 a { justify-self: start; font-weight: 700; border-bottom: 1px solid var(--xh-brass); }
  .xh-acts3 a:hover { color: var(--xh-cue); }

  /* ---------- 关于页：主体信息双栏 ---------- */
  .xh-facts { display: grid; gap: 0; border: 1px solid var(--xh-line-2); background: var(--xh-surface); }
  .xh-facts div { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 15px 18px; border-bottom: 1px solid var(--xh-line); }
  @media (min-width: 620px) { .xh-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xh-facts div { border-right: 1px solid var(--xh-line); } }
  .xh-facts dt, .xh-facts b { font-family: var(--xh-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--xh-fg-3); }
  .xh-facts span { font-size: .95rem; }

  /* ---------- 音乐人 / 现场页：名册 ---------- */
  .xh-roster { display: grid; gap: var(--xh-gap); }
  @media (min-width: 760px) { .xh-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1120px) { .xh-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .xh-artist { border: 1px solid var(--xh-line-2); background: var(--xh-surface); overflow: hidden; transition: transform .2s var(--xh-ease), box-shadow .2s var(--xh-ease); }
  .xh-artist:hover { transform: translateY(-4px); box-shadow: var(--xh-lift); }
  .xh-artist__art { position: relative; aspect-ratio: 16 / 9; }
  .xh-artist__body { padding: 18px; display: grid; gap: 10px; }
  .xh-artist__body h3 { margin: 0; font-size: 1.16rem; }
  .xh-artist__tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .xh-artist__tags span { padding: 3px 9px; border: 1px solid var(--xh-line-2); border-radius: 999px; font-family: var(--xh-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--xh-fg-3); }

  /* ---------- 开户页：流程轴 ---------- */
  .xh-steps { display: grid; gap: 0; counter-reset: xh-step; }
  .xh-steps > li {
    position: relative; display: grid; gap: 8px;
    padding: 20px 0 20px 66px; border-bottom: 1px dashed var(--xh-line-2);
  }
  .xh-steps > li::before {
    counter-increment: xh-step;
    content: counter(xh-step, decimal-leading-zero);
    position: absolute; left: 0; top: 18px;
    width: 46px; height: 46px; display: grid; place-content: center;
    border: 1px solid var(--xh-cue); border-radius: 50%;
    font-family: var(--xh-mono); font-size: .86rem; font-weight: 700; color: var(--xh-cue);
    background: var(--xh-surface);
  }
  .xh-steps > li::after {
    content: ""; position: absolute; left: 22px; top: 64px; bottom: -1px; width: 1px;
    background: var(--xh-line-2);
  }
  .xh-steps > li:last-child::after { display: none; }
  .xh-steps h3 { margin: 0; font-size: 1.06rem; }
  .xh-steps p { margin: 0; color: var(--xh-fg-2); font-size: .93rem; }
  .xh-steps em { font-style: normal; font-family: var(--xh-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--xh-brass); }

  /* ---------- 注册登录页：分屏 ---------- */
  .xh-split { display: grid; gap: clamp(26px, 4vw, 44px); }
  @media (min-width: 980px) { .xh-split { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: start; } }
  .xh-login {
    display: grid; gap: 18px; padding: clamp(22px, 3vw, 34px);
    background: var(--xh-surface); border: 1px solid var(--xh-line-3);
    box-shadow: var(--xh-lift-hard);
  }
  .xh-login__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--xh-line); padding-bottom: 14px; }
  .xh-login__head h2 { margin: 0; font-size: 1.3rem; }
  .xh-login__tabs { display: flex; gap: 6px; }
  .xh-login__tabs button { padding: 7px 13px; border: 1px solid var(--xh-line-2); font-family: var(--xh-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--xh-fg-3); }
  .xh-login__tabs button[aria-pressed="true"] { background: var(--xh-cue); color: var(--xh-on-accent); border-color: var(--xh-cue); }
  .xh-login__foot { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; font-size: .84rem; color: var(--xh-fg-3); }

  .xh-cards { display: grid; gap: 14px; }
  @media (min-width: 640px) { .xh-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---------- 资讯列表 ---------- */
  .xh-news { display: grid; gap: 0; border-top: 1px solid var(--xh-line-2); }
  .xh-news article {
    display: grid; gap: 10px; padding: 22px 0; border-bottom: 1px solid var(--xh-line);
  }
  @media (min-width: 900px) {
    .xh-news article { grid-template-columns: 132px minmax(0, 1fr) 128px; align-items: start; gap: 22px; }
  }
  .xh-news time { font-family: var(--xh-mono); font-size: .72rem; letter-spacing: .1em; color: var(--xh-fg-3); }
  .xh-news h3 { margin: 0 0 6px; font-size: 1.18rem; }
  .xh-news h3 a:hover { color: var(--xh-cue); }
  .xh-news p { margin: 0; color: var(--xh-fg-2); font-size: .93rem; }
  .xh-news__side { display: flex; flex-wrap: wrap; gap: 6px; }
  @media (min-width: 900px) { .xh-news__side { flex-direction: column; align-items: flex-end; } }

  /* ---------- 长文页：正文 + 侧栏目录 ---------- */
  .xh-read { display: grid; gap: clamp(24px, 4vw, 44px); }
  @media (min-width: 1000px) { .xh-read { grid-template-columns: minmax(0, 1fr) 260px; } .xh-read__aside { position: sticky; top: 100px; } }
  .xh-toc { display: grid; gap: 8px; border-left: 2px solid var(--xh-brass); padding-left: 16px; }
  .xh-toc b { font-family: var(--xh-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--xh-fg-3); }
  .xh-toc a { font-size: .9rem; color: var(--xh-fg-2); }
  .xh-toc a:hover { color: var(--xh-cue); }

  /* ---------- 案例页 ---------- */
  .xh-case { border: 1px solid var(--xh-line-2); background: var(--xh-surface); display: grid; }
  .xh-case__art { aspect-ratio: 21 / 9; position: relative; }
  .xh-case__body { padding: 22px; display: grid; gap: 14px; }
  .xh-case__nums { display: grid; gap: 12px; }
  @media (min-width: 560px) { .xh-case__nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .xh-case__nums div { border-left: 2px solid var(--xh-brass); padding-left: 12px; }
  .xh-case__nums b { display: block; font-family: var(--xh-mono); font-size: 1.24rem; color: var(--xh-cue); }
  .xh-case__nums span { font-size: .8rem; color: var(--xh-fg-3); }

  /* ---------- 联系页 ---------- */
  .xh-ways { display: grid; gap: var(--xh-gap); }
  @media (min-width: 820px) { .xh-ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* ---------- 404 ---------- */
  .xh-404 { padding: clamp(60px, 12vw, 150px) 0; display: grid; gap: 22px; justify-items: start; }
  .xh-404 b { font-family: var(--xh-mono); font-size: clamp(4rem, 16vw, 9rem); line-height: 1; color: transparent; -webkit-text-stroke: 2px var(--xh-cue); }

  /* ---------- 章节内小标题组 ---------- */
  .xh-sub { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline; margin-bottom: 18px; }
  .xh-sub h3 { margin: 0; font-size: 1.1rem; }
  .xh-sub span { font-family: var(--xh-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--xh-fg-3); }

  /* ---------- 段落间距工具 ---------- */
  .xh-mt-sm { margin-top: 12px; }
  .xh-mt-lg { margin-top: clamp(30px, 5vw, 56px); }
  .xh-mt-md { margin-top: clamp(18px, 3vw, 30px); }

  /* ---------- 表单校验反馈 ---------- */
  .xh-form__error {
    padding: 12px 15px; border-left: 3px solid var(--xh-cue);
    background: var(--xh-cue-soft); color: var(--xh-fg); font-size: .88rem;
  }
  .xh-form__error[hidden] { display: none; }
  .xh-field input[aria-invalid="true"],
  .xh-field select[aria-invalid="true"],
  .xh-field textarea[aria-invalid="true"] { border-bottom-color: var(--xh-cue); background: var(--xh-cue-soft); }
  .xh-field [data-hint]:empty { display: none; }
  .xh-field [data-hint] { color: var(--xh-cue); font-size: .8rem; }

  /* ---------- 曲目单选中态（点曲上盘联动） ---------- */
  .xh-setlist a[aria-current="true"] { background: var(--xh-cue-soft); box-shadow: inset 3px 0 0 var(--xh-cue); }
  .xh-setlist a[aria-current="true"] em { color: var(--xh-cue); }

  /* ---------- 吸顶收紧 ---------- */
  .xh-head.is-stuck { box-shadow: var(--xh-lift); }
  .xh-head.is-stuck .xh-head__in { min-height: 58px; }
  .xh-head.is-stuck .xh-brand__disc { width: 32px; height: 32px; }
}