/**
 * Star Photo Share System
 * Responsive CSS - 响应式设计
 * Version 1.0
 * 2026-07-17
 *
 * 功能：所有断点的响应式样式
 * 断点：1440, 1200, 992, 768, 576, 480, 360
 */

/* ========================================
   大屏幕 (≤1440px)
   ======================================== */
@media (max-width: 1440px) {
  :root {
    --content-width: 100%;
  }

  .container,
  .container-wide {
    max-width: 100%;
  }
}

/* ========================================
   中等屏幕 (≤1200px)
   ======================================== */
@media (max-width: 1200px) {
  .grid--4 { grid-template-columns: repeat(3, 1fr); }
  .grid--5 { grid-template-columns: repeat(3, 1fr); }

  .layout-two-col {
    grid-template-columns: 300px 1fr;
  }
}

/* ========================================
   小屏幕 / 平板 (≤992px)
   ======================================== */
@media (max-width: 992px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }

  .layout-two-col {
    grid-template-columns: 1fr;
  }

  /* 侧边栏变为可收起 */
  .sidebar {
    transform: translateX(-100%);
    z-index: var(--z-overlay);
  }

  .sidebar--open {
    transform: translateX(0);
  }

  .dashboard {
    margin-left: 0;
  }

  /* Header 适应 */
  .header {
    padding: 0 var(--space-4);
  }

  .header__nav {
    gap: var(--space-3);
  }
}

/* ========================================
   平板 (≤768px)
   ======================================== */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --footer-height: 48px;
  }

  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  h3 { font-size: var(--font-size-lg); }

  .grid--2,
  .grid--3,
  .grid--4,
  .grid--5 {
    grid-template-columns: 1fr;
  }

  .grid--auto {
    grid-template-columns: 1fr;
  }

  .header__nav-link--hide-mobile {
    display: none;
  }

  .section {
    padding: var(--space-10) 0;
  }

  .section--lg {
    padding: var(--space-16) 0;
  }

  .modal {
    padding: var(--space-6);
    max-width: 100%;
    margin: var(--space-4);
    border-radius: var(--radius-lg);
  }

  .table th,
  .table td {
    padding: var(--space-2) var(--space-2);
    font-size: var(--font-size-xs);
  }

  .toast-container {
    left: var(--space-4);
    right: var(--space-4);
  }

  .toast {
    min-width: auto;
    max-width: 100%;
  }

  .image-viewer__nav {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-base);
  }

  .image-viewer__nav--prev { left: var(--space-2); }
  .image-viewer__nav--next { right: var(--space-2); }

  .image-viewer__close {
    top: var(--space-2);
    right: var(--space-2);
    width: 40px;
    height: 40px;
  }
}

/* ========================================
   大屏手机 (≤576px)
   ======================================== */
@media (max-width: 576px) {
  :root {
    --space-6: 16px;
    --space-8: 20px;
  }

  .header__logo-text {
    font-size: var(--font-size-base);
  }

  .header__nav-link {
    font-size: var(--font-size-sm);
    padding: var(--space-1) var(--space-2);
  }

  .btn {
    min-height: 44px;
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-4);
  }

  .btn--lg {
    min-height: 48px;
    font-size: var(--font-size-base);
  }

  .modal__footer {
    flex-direction: column;
  }

  .modal__footer .btn {
    width: 100%;
  }

  .dialog__actions {
    flex-direction: column;
  }

  .dialog__actions .btn {
    width: 100%;
  }

  .stat-card__number {
    font-size: var(--font-size-2xl);
  }

  .container,
  .container-wide {
    padding: 0 var(--space-4);
  }
}

/* ========================================
   小屏手机 (≤480px)
   ======================================== */
@media (max-width: 480px) {
  :root {
    --font-size-4xl: 32px;
    --font-size-3xl: 28px;
    --font-size-2xl: 22px;
    --font-size-xl: 20px;
  }

  h1 { font-size: var(--font-size-2xl); }
  h2 { font-size: var(--font-size-xl); }
  h3 { font-size: var(--font-size-lg); }

  .header {
    padding: 0 var(--space-3);
  }

  .header__logo-icon {
    width: 32px;
    height: 32px;
    font-size: 22px;
  }

  .glass-card {
    padding: var(--space-4);
  }
}

/* ========================================
   极小屏 (≤360px)
   ======================================== */
@media (max-width: 360px) {
  :root {
    --font-size-base: 14px;
  }

  .header__logo-text {
    font-size: var(--font-size-sm);
  }
}

/* ========================================
   打印样式
   ======================================== */
@media print {
  body {
    background: white;
    color: black;
  }

  .header,
  .footer,
  .sidebar,
  .toast-container,
  .image-viewer {
    display: none !important;
  }

  .main {
    padding-top: 0;
  }

  .glass-card {
    background: white;
    border: 1px solid #ccc;
    box-shadow: none;
  }
}