/* ==========================================================================
   响应式：桌面 → 平板 → 手机
   ========================================================================== */

/* ---------- ≥1600px：超大屏放大留白 ---------- */
@media (min-width: 1600px) {
  :root { --gutter: 40px; }
}

/* ---------- ≤1280px ---------- */
@media (max-width: 1280px) {
  :root { --gutter: 20px; }
  .goods-detail { gap: var(--sp-8); }
  .site-footer__top { grid-template-columns: minmax(240px, 1.2fr) repeat(3, minmax(120px, 1fr)); gap: var(--sp-8); }
}

/* ---------- ≤1080px：平板 ---------- */
@media (max-width: 1080px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .layout-sidebar { grid-template-columns: 1fr; gap: var(--sp-8); }
  .side-nav { position: static; flex-direction: row; overflow-x: auto; gap: var(--sp-2); padding-bottom: var(--sp-3); }
  .side-nav__group { display: none; }
  .side-nav__link { white-space: nowrap; }

  .goods-detail { grid-template-columns: 1fr; gap: var(--sp-8); }
  .heritage-detail__gallery { grid-template-columns: 1fr; }
  .heritage-detail__thumbs { grid-template-rows: none; grid-template-columns: repeat(2, 1fr); }
  .heritage-detail__thumb { aspect-ratio: 4 / 3; }

  .auth-layout { grid-template-columns: 1fr; }
  .auth-visual { display: none; }
  .auth-panel { padding: var(--sp-10) var(--sp-6); min-height: 100svh; justify-content: flex-start; padding-top: var(--sp-20); }

  .admin-shell { grid-template-columns: 1fr; }
  .admin-side {
    position: fixed; top: 0; bottom: 0; left: 0;
    z-index: calc(var(--z-drawer) + 1);
    width: 250px; height: 100svh;
    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease-out);
  }
  .admin-side.is-open { transform: none; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .join-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-row { grid-template-columns: 32px minmax(0, 1.6fr) 1fr 1fr auto; }
  .cart-row__col--unit { display: none; }
  .log-item { grid-template-columns: 130px minmax(0, 1fr) auto; }
  .log-item__op { display: none; }
}

/* ---------- ≤880px：导航切换为抽屉 ---------- */
@media (max-width: 880px) {
  .site-nav { display: none; }
  .nav-toggle { display: grid; }
  .site-header__inner { gap: var(--sp-4); }
  .brand__sub { display: none; }

  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: 1fr; }

  .section { padding-block: var(--sp-16); }
  .section--loose { padding-block: var(--sp-20); }
  .section-head { margin-bottom: var(--sp-8); }

  .hero__inner { padding-bottom: var(--sp-16); }
  .hero__meta { margin-top: var(--sp-8); gap: var(--sp-4); }
  .hero__scroll { display: none; }

  .site-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .site-footer { padding-top: var(--sp-16); }

  .notice-item { grid-template-columns: 1fr; gap: var(--sp-3); }
  .notice-item__date { display: flex; align-items: baseline; gap: var(--sp-2); }
  .notice-item__date strong { display: inline; font-size: 1rem; }

  .media-card--row { flex-direction: column; gap: var(--sp-4); }
  .media-card--row .media-card__frame { flex: none; }

  .info-list { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
  .cart-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--sp-3); row-gap: var(--sp-3); }
  .cart-row__col--price, .cart-row__col--total { grid-column: 2 / -1; display: flex; justify-content: space-between; }
  .toast-stack { right: var(--sp-4); left: var(--sp-4); }
  .toast { max-width: none; }
}

/* ---------- ≤640px：手机 ---------- */
@media (max-width: 640px) {
  :root { --gutter: 16px; --header-h: 56px; }

  .grid--3, .grid--4, .grid--5, .grid--auto, .grid--auto-lg { grid-template-columns: 1fr; }
  .grid { gap: var(--sp-5); }

  .t-display { font-size: clamp(2.25rem, 9vw, 3rem); }
  .hero__title { max-width: none; }
  .hero__actions .btn { flex: 1; }

  .page-head { padding-top: calc(var(--header-h) + var(--sp-12)); padding-bottom: var(--sp-8); }
  .section-head { flex-direction: column; align-items: flex-start; }

  .site-footer__top { grid-template-columns: 1fr; }
  .site-footer__wordmark { font-size: 22vw; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }

  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-row__label { width: auto; }
  .option-row { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .option-row__label { width: auto; }

  .modal { max-width: none; max-height: 88svh; }
  .modal-mask { padding: var(--sp-3); align-items: flex-end; }

  .join-steps { grid-template-columns: 1fr; }
  .mini-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .table thead th, .table tbody td { padding: var(--sp-3); }
  .table .cell-actions { flex-direction: column; }
  .admin-content { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
  .admin-topbar { padding: 0 var(--sp-4); }
  .panel__body { padding: var(--sp-5); }
  .panel__head { padding: var(--sp-4) var(--sp-5); }
  .table-toolbar { padding: var(--sp-4) var(--sp-5); }
  .table-toolbar__filters { width: 100%; }
  .admin-filters .input { min-width: 0; flex: 1; }

  .review-grid { grid-template-columns: 1fr; }
  .permission-matrix { overflow-x: auto; }
  .setting-row { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .role-tips__key { width: 64px; }

  .stepper__btn { width: 30px; height: 30px; }
  .stepper__input { width: 40px; height: 30px; }
  .qr-box { width: 150px; height: 150px; }
  .master-card { flex-direction: column; }
  .log-item { grid-template-columns: 1fr; gap: var(--sp-2); }
  .log-item__time { order: 2; }
}

/* ---------- 打印 ---------- */
@media print {
  .site-header, .site-footer, .to-top, .drawer, .drawer-mask, .search-overlay, .toast-stack, .admin-side, .admin-topbar { display: none !important; }
  .main, .admin-content { padding: 0 !important; }
  body { background: #fff; }
  .panel { border-color: #ddd; break-inside: avoid; }
}