/**
 * 響應式樣式
 * RWD 斷點設定
 */

/* ===== 平板以下 (< 1024px) ===== */
@media (max-width: 1023px) {
  .container {
    padding: 0 var(--spacing-md);
  }

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

  .hide-tablet {
    display: none !important;
  }
}

/* ===== 手機以下 (< 768px) ===== */
@media (max-width: 767px) {
  /* 字體調整 */
  html {
    font-size: 14px;
  }

  /* 容器 */
  .container {
    padding: 0 var(--spacing-sm);
  }

  /* Grid 調整 */
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 區塊標題 */
  .section-title {
    font-size: var(--font-size-lg);
  }

  /* 按鈕 */
  .btn {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .btn-lg {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-base);
  }

  /* Modal */
  .modal {
    width: 95%;
    max-height: 85vh;
  }

  .modal-body {
    max-height: calc(85vh - 140px);
  }

  /* 隱藏元素 */
  .hide-mobile {
    display: none !important;
  }

  /* 只在手機顯示 */
  .show-mobile {
    display: block !important;
  }

  /* Toast */
  .toast-container {
    top: auto;
    bottom: var(--spacing-lg);
    left: var(--spacing-md);
    right: var(--spacing-md);
  }
}

/* ===== 小手機 (< 480px) ===== */
@media (max-width: 479px) {
  /* Grid 調整 */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }

  /* 表單 */
  .form-input {
    padding: var(--spacing-sm);
  }
}

/* ===== 桌機以上 (>= 1024px) ===== */
@media (min-width: 1024px) {
  /* 只在桌機顯示 */
  .show-desktop {
    display: block !important;
  }

  /* 隱藏元素 */
  .hide-desktop {
    display: none !important;
  }
}

/* ===== 觸控裝置優化 ===== */
@media (hover: none) and (pointer: coarse) {
  /* 增加觸控區域 */
  .btn {
    min-height: 44px;
  }

  .btn-sm {
    min-height: 36px;
  }

  /* 移除 hover 效果避免黏著 */
  .whisky-card:hover {
    transform: none;
    box-shadow: var(--shadow-sm);
  }
}

/* ===== 深色模式（預留）===== */
@media (prefers-color-scheme: dark) {
  /* 可在此處添加深色模式樣式 */
}

/* ===== 減少動畫（無障礙）===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== 列印樣式 ===== */
@media print {
  .header,
  .footer-warning,
  .btn,
  .modal {
    display: none !important;
  }

  .main-content {
    padding-bottom: 0;
  }

  body {
    background-color: white;
  }
}