/**
 * 响应式设计
 */

/* 平板设备 (768px - 1024px) */
@media (max-width: 1024px) {
     .container {
          grid-template-columns: 1fr;
          grid-template-areas:
               "header"
               "main"
               "sidebar"
               "footer";
     }

     .sidebar {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: var(--spacing-lg);
     }

     .module-nav {
          flex-wrap: wrap;
     }

     .nav-btn {
          flex: 1;
          min-width: 120px;
     }
}

/* 移动设备 (最大768px) */
@media (max-width: 768px) {
     .container {
          padding: var(--spacing-sm);
          gap: var(--spacing-md);
     }

     .header {
          padding: var(--spacing-md);
          flex-direction: column;
          align-items: flex-start;
     }

     .header-content {
          flex-direction: column;
          align-items: flex-start;
          gap: var(--spacing-md);
          width: 100%;
     }

     .header-info {
          flex-direction: row;
          justify-content: space-between;
          width: 100%;
     }

     .main-title {
          font-size: var(--font-size-xl);
     }

     .members-grid {
          grid-template-columns: 1fr;
          gap: var(--spacing-md);
     }

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

     .module-nav {
          flex-direction: column;
     }

     .nav-btn {
          width: 100%;
     }

     .module-tabs {
          flex-wrap: wrap;
     }

     .tab-btn {
          flex: 1;
          min-width: 100px;
     }

     .popular-dishes {
          grid-template-columns: 1fr;
     }

     .milestone-timeline {
          padding-left: var(--spacing-lg);
     }

     .milestone-item::before {
          left: -24px;
     }

     .footer-content {
          flex-direction: column;
          text-align: center;
     }

     .notifications-container {
          top: var(--spacing-sm);
          right: var(--spacing-sm);
          left: var(--spacing-sm);
     }

     .notification {
          min-width: auto;
     }

     .modal-content {
          width: 95%;
          margin: var(--spacing-md);
          padding: var(--spacing-lg);
     }

     .form-actions {
          flex-direction: column;
     }

     .btn {
          width: 100%;
     }
}

/* 小屏移动设备 (最大480px) */
@media (max-width: 480px) {
     .header {
          padding: var(--spacing-sm);
     }

     .main-title {
          font-size: var(--font-size-lg);
     }

     .title-icon {
          font-size: 1.5rem;
     }

     .member-card {
          padding: var(--spacing-md);
     }

     .member-avatar {
          width: 60px;
          height: 60px;
     }

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

     .module-section {
          padding: var(--spacing-md);
     }

     .book-card,
     .menu-item,
     .place-card,
     .fitness-item {
          flex-direction: column;
          text-align: center;
     }

     .book-cover,
     .menu-icon,
     .place-image {
          margin: 0 auto;
     }

     .milestone-item {
          flex-direction: column;
          text-align: center;
     }

     .milestone-icon {
          margin: 0 auto;
     }

     .photo-moment,
     .event-moment {
          flex-direction: column;
          text-align: center;
     }

     .photo-thumb,
     .event-icon {
          margin: 0 auto;
     }
}

/* 横屏模式 */
@media (max-height: 500px) and (orientation: landscape) {
     .header {
          padding: var(--spacing-sm);
     }

     .main-title {
          font-size: var(--font-size-lg);
     }

     .module-nav {
          padding: var(--spacing-sm);
     }

     .nav-btn {
          padding: var(--spacing-xs) var(--spacing-md);
          font-size: var(--font-size-sm);
     }
}

/* 打印样式 */
@media print {

     .header,
     .sidebar,
     .footer,
     .modal,
     .notifications-container,
     .module-nav,
     .add-btn {
          display: none !important;
     }

     .container {
          grid-template-columns: 1fr;
          grid-template-areas: "main";
          max-width: none;
          padding: 0;
     }

     .module-section {
          display: block !important;
          page-break-inside: avoid;
          box-shadow: none;
          border: 1px solid #000;
     }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
     :root {
          --border-color: #000000;
          --text-color: #000000;
          --bg-primary: #ffffff;
     }

     .btn,
     .nav-btn,
     .tab-btn {
          border: 2px solid var(--border-color);
     }
}

/* 减少动画（用户偏好） */
@media (prefers-reduced-motion: reduce) {

     *,
     *::before,
     *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
     }
}