/* ============================================
   深圳市德保膳食管理有限公司官网
   响应式样式 - Responsive.css
   ============================================ */

/* ========== 平板设备 (768px 以下) ========== */

@media (max-width: 768px) {
  /* 容器调整 */
  .container {
    padding: 0 var(--spacing-md);
  }

  /* Grid响应式调整 */
  .grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

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

  .grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .grid-auto-lg {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* 导航栏响应式 */
  .navbar-container {
    padding: var(--spacing-md) var(--spacing-md);
  }

  .navbar-menu {
    gap: var(--spacing-md);
    font-size: var(--font-size-sm);
  }

  .navbar-link {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  /* 英雄区域响应式 */
  .hero {
    padding: calc(var(--spacing-2xl) + 60px) var(--spacing-md) var(--spacing-2xl);
    min-height: 400px;
  }

  .hero h1 {
    font-size: var(--font-size-4xl);
  }

  .hero p {
    font-size: var(--font-size-lg);
  }

  /* 卡片响应式 */
  .card {
    margin-bottom: var(--spacing-md);
  }

  .card-image {
    height: 200px;
  }

  /* 页脚响应式 */
  .footer {
    padding: var(--spacing-2xl) var(--spacing-md) var(--spacing-lg);
  }

  .footer-grid {
    gap: var(--spacing-lg);
  }

  /* 文本大小调整 */
  h1 {
    font-size: var(--font-size-4xl);
  }

  h2 {
    font-size: var(--font-size-3xl);
  }

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

  /* 按钮响应式 */
  .btn-lg {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
  }

  /* 表格响应式 */
  table {
    font-size: var(--font-size-sm);
  }

  th, td {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  /* 间距调整 */
  .p-3xl {
    padding: var(--spacing-2xl);
  }

  .py-4xl {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
  }

  .my-4xl {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-2xl);
  }
}

/* ========== 手机设备 (640px 以下) ========== */

@media (max-width: 640px) {
  /* 容器调整 */
  .container {
    padding: 0 var(--spacing-sm);
  }

  /* Grid响应式调整 */
  .grid-cols-2 {
    grid-template-columns: 1fr;
  }

  .grid-cols-3 {
    grid-template-columns: 1fr;
  }

  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

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

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

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

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

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

  /* Flex响应式 */
  .flex-row {
    flex-direction: column;
  }

  /* 导航栏响应式 */
  .navbar-container {
    padding: var(--spacing-sm) var(--spacing-sm);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .navbar-logo {
    font-size: var(--font-size-lg);
  }

  .navbar-menu {
    width: 100%;
    flex-direction: column;
    gap: var(--spacing-xs);
    overflow: visible;
    white-space: normal;
  }

  .navbar-item {
    width: 100%;
  }

  .navbar-link {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--radius-lg);
  }

  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background-color: var(--color-light-bg);
    padding: 0;
  }

  .navbar-item:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .dropdown-item {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) var(--spacing-xl);
  }

  /* 英雄区域响应式 */
  .hero {
    padding: calc(var(--spacing-xl) + 60px) var(--spacing-sm) var(--spacing-xl);
    min-height: 300px;
  }

  .hero h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
  }

  .hero p {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
  }

  /* 卡片响应式 */
  .card {
    margin-bottom: var(--spacing-md);
  }

  .card-header,
  .card-body,
  .card-footer {
    padding: var(--spacing-md);
  }

  .card-image {
    height: 150px;
  }

  /* 按钮响应式 */
  .btn {
    width: 100%;
  }

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

  .btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .btn-xl {
    padding: var(--spacing-lg) var(--spacing-xl);
  }

  /* 文本大小调整 */
  html {
    font-size: 14px;
  }

  h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
  }

  h2 {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
  }

  h3 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
  }

  h4 {
    font-size: var(--font-size-lg);
  }

  /* 表格响应式 */
  table {
    font-size: var(--font-size-xs);
  }

  th, td {
    padding: var(--spacing-xs) var(--spacing-sm);
  }

  /* 页脚响应式 */
  .footer {
    padding: var(--spacing-xl) var(--spacing-sm) var(--spacing-md);
  }

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

  .footer-section h3 {
    font-size: var(--font-size-base);
  }

  /* 间距调整 */
  .p-lg {
    padding: var(--spacing-md);
  }

  .p-xl {
    padding: var(--spacing-lg);
  }

  .p-2xl {
    padding: var(--spacing-lg);
  }

  .p-3xl {
    padding: var(--spacing-lg);
  }

  .px-lg {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }

  .py-lg {
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
  }

  .py-xl {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }

  .py-2xl {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }

  .py-3xl {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }

  .py-4xl {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }

  .my-lg {
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .my-xl {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .my-2xl {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .my-3xl {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  .my-4xl {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
  }

  /* 宽度调整 */
  .w-1\/3,
  .w-2\/3,
  .w-1\/4,
  .w-3\/4 {
    width: 100%;
  }

  /* 隐藏元素 */
  .hidden-sm {
    display: none !important;
  }

  .show-sm {
    display: block !important;
  }

  /* 文本对齐 */
  .text-center {
    text-align: center;
  }

  /* 分页响应式 */
  .pagination {
    gap: var(--spacing-xs);
  }

  .pagination-link {
    width: 36px;
    height: 36px;
    font-size: var(--font-size-sm);
  }

  /* 面包屑响应式 */
  .breadcrumb {
    font-size: var(--font-size-xs);
  }

  /* 表单响应式 */
  input, textarea, select {
    font-size: 16px; /* 防止iOS自动缩放 */
  }
}

/* ========== 超大屏幕 (1280px 以上) ========== */

@media (min-width: 1280px) {
  /* 容器调整 */
  .container {
    padding: 0 var(--spacing-xl);
  }

  /* Grid响应式调整 */
  .grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .grid-auto-lg {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  }

  /* 英雄区域响应式 */
  .hero {
    min-height: 600px;
  }

  .hero h1 {
    font-size: var(--font-size-6xl);
  }

  .hero p {
    font-size: var(--font-size-2xl);
  }

  /* 间距调整 */
  .py-4xl {
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-4xl);
  }

  .my-4xl {
    margin-top: var(--spacing-4xl);
    margin-bottom: var(--spacing-4xl);
  }
}

/* ========== 打印样式 ========== */

@media print {
  body {
    background-color: white;
    color: black;
  }

  .navbar,
  .footer,
  .btn,
  .hidden-print {
    display: none !important;
  }

  a {
    color: black;
    text-decoration: underline;
  }

  img {
    max-width: 100%;
  }

  table {
    border-collapse: collapse;
  }

  th, td {
    border: 1px solid black;
    padding: 8px;
  }
}

/* ========== 高对比度模式 ========== */

@media (prefers-contrast: more) {
  :root {
    --color-border: #000000;
    --color-text: #000000;
  }

  .btn-outline {
    border-width: 3px;
  }
}

/* ========== 减少动画模式 ========== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== 横屏模式 ========== */

@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    min-height: 300px;
    padding: calc(var(--spacing-xl) + 60px) var(--spacing-lg) var(--spacing-lg);
  }

  .hero h1 {
    font-size: var(--font-size-3xl);
  }
}