/* ============================================================
   header.css — 白色顶栏 + Pages 下拉大面板 + 移动端抽屉
   ============================================================ */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid rgb(3 0 40 / .08);
}
.header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 88px;
}
.header__logo img { height: 28px; width: auto; }

.header__nav { display: flex; align-items: center; gap: 8px; }
.header__nav > li { position: relative; }
.header__nav > li > a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font-size: 17px;
  color: var(--ink);
  transition: opacity .2s;
}
.header__nav > li > a:hover { opacity: .65; }
.header__nav .chevron { width: 10px; transition: transform .25s; }
.header__nav li:hover .chevron { transform: rotate(180deg); }

.header__right { display: flex; align-items: center; gap: 28px; }
.header__phone { font-size: 17px; color: var(--ink); }
.header__cta { padding: 13px 22px; }

/* ---------- Pages 下拉大面板 ---------- */
.header__panel {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  translate: -50% 12px;
  width: min(720px, 90vw);
  padding: 26px;
  display: grid;
  grid-template-columns: 260px 1fr 1fr;
  gap: 26px;
  background: var(--white);
  border: 1px solid rgb(3 0 40 / .08);
  border-radius: var(--radius-panel);
  box-shadow: 0 30px 60px rgb(3 0 40 / .12);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--reveal-ease), translate .25s var(--reveal-ease), visibility 0s .25s;
}
.header__nav li:hover .header__panel,
.header__nav li:focus-within .header__panel {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
  transition-delay: 0s;
}
.header__panel-thumb { border-radius: 14px; overflow: hidden; }
.header__panel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.header__panel-col { display: grid; align-content: start; gap: 4px; }
.header__panel-col a {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 16px;
  color: var(--ink);
  transition: background .2s;
}
.header__panel-col a:hover { background: rgb(3 0 40 / .05); }

/* ---------- 移动端 ---------- */
.header__burger {
  display: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--dark);
  place-items: center;
}
.header__burger span,
.header__burger span::before,
.header__burger span::after {
  content: '';
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  position: relative;
  transition: transform .25s, top .25s;
}
.header__burger span::before { position: absolute; top: -6px; }
.header__burger span::after { position: absolute; top: 6px; }
.header--open .header__burger span { background: transparent; }
.header--open .header__burger span::before { top: 0; transform: rotate(45deg); }
.header--open .header__burger span::after { top: 0; transform: rotate(-45deg); }

.header__drawer { display: none; }

@media (max-width: 1199px) {
  .header__nav, .header__phone { display: none; }
  .header__burger { display: grid; }
  .header__bar { height: 76px; }
  .header__drawer {
    display: block;
    position: fixed;
    inset: 76px 0 auto;
    background: var(--white);
    border-bottom: 1px solid rgb(3 0 40 / .08);
    padding: 10px var(--gutter) 26px;
    transform: translateY(-110%);
    transition: transform .3s var(--reveal-ease);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
  }
  .header--open .header__drawer { transform: translateY(0); }
  .header__drawer a {
    display: block;
    padding: 14px 6px;
    font-size: 19px;
    color: var(--ink);
    border-bottom: 1px solid rgb(3 0 40 / .06);
  }
  .header__cta { display: none; }
}