/**
 * Responsive Styles - 響應式樣式
 * BENS Laboratory Website
 *
 * 針對不同裝置尺寸的特殊樣式調整
 * 採用行動優先（Mobile First）設計策略
 */

/* ========== 超小裝置（手機直向，< 576px）========== */
/* 基礎樣式已在 main.css 中定義（行動優先） */

/* ========== 小裝置（手機橫向，≥ 576px）========== */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

/* ========== 中等裝置（平板，≥ 768px）========== */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }

  /* 顯示桌面版導覽 */
  .navbar-menu {
    display: flex !important;
  }

  /* 隱藏行動版選單按鈕 */
  .navbar-toggle {
    display: none !important;
  }
}

/* ========== 大裝置（桌面，≥ 1024px）========== */
@media (min-width: 1024px) {
  .container {
    max-width: 960px;
  }

  /* 字體大小增加 */
  html {
    font-size: 17px;
  }
}

/* ========== 超大裝置（大桌面，≥ 1280px）========== */
@media (min-width: 1280px) {
  .container {
    max-width: 1200px;
  }

  html {
    font-size: 18px;
  }
}

/* ========== 超超大裝置（≥ 1536px）========== */
@media (min-width: 1536px) {
  .container {
    max-width: 1400px;
  }
}

/* ========== 行動裝置專用樣式 ========== */
@media (max-width: 767px) {
  /* 減少間距 */
  .section {
    padding: var(--spacing-8) 0;
  }

  /* 堆疊顯示 */
  .flex-mobile-column {
    flex-direction: column;
  }

  /* 全寬按鈕 */
  .btn-mobile-full {
    width: 100%;
  }

  /* 卡片簡化 */
  .card-body {
    padding: var(--spacing-4);
  }

  /* Hero 調整 */
  .hero-content {
    padding: var(--spacing-4);
  }
}

/* ========== 平板裝置專用樣式 ========== */
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-tablet-2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========== 印刷樣式 ========== */
@media print {
  /* 隱藏不需要的元素 */
  .navbar,
  .footer,
  .btn,
  .no-print {
    display: none !important;
  }

  /* 調整顏色以節省墨水 */
  body {
    background: white;
    color: black;
  }

  /* 確保連結可見 */
  a {
    color: black;
    text-decoration: underline;
  }

  /* 移除陰影和邊框 */
  .card {
    box-shadow: none;
    border: 1px solid #ddd;
  }
}