/* ===== QUICK TAGS 基本尺寸與排版===== */

/* 區塊外框 */
.needs-section {
  padding: clamp(32px, 6vw, 72px) 0;
  color: #1b1f23;
}

/* 標題/副標 */
.needs-title {
  text-align: center;
  font-weight: 600;
  font-size: clamp(26px, 3.8vw, 36px);
  line-height: 1.3;
  margin: 0 0 0.25em;
}
.needs-subtitle {
  text-align: center;
  margin: 8px 0 28px;
  font-size: clamp(16px, 1.8vw, 20px);
  opacity: 0.85;
}

/* 標籤群組：自動換行、置中 */
.needs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 上下左右皆 10px */
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 膠囊 */
.chip {
  display: inline-block;
  white-space: nowrap;
  flex: 0 0 auto;
  text-align: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  text-decoration: none;
  color: #111827;
  font-weight: 500;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease,
    color 0.2s ease;
  overflow-wrap: anywhere; /* ⬅️ 長英數不溢出 */
  -webkit-tap-highlight-color: transparent; /* ⬅️ iOS 點擊高亮移除 */
}

/* hover：只在有滑鼠的裝置 */
@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    border-color: #2c295a;
    box-shadow: 0 0 0 3px rgba(44, 41, 90, 0.2);
    transform: translateY(-1px);
    color: #2c295a;
  }
}

/* Active 狀態 */
.chip.is-active {
  border-color: #2c295a;
  color: #2c295a;
  font-weight: 600;
  box-shadow: 0 0 0 3px rgba(44, 41, 90, 0.2);
}

/* 鍵盤可及性 */
.chip:focus-visible {
  outline: none;
  border-color: #365a6d;
  box-shadow: 0 0 0 3px rgba(54, 90, 109, 0.25);
}

/* 觸控按下手感（可選） */
@media (hover: none) and (pointer: coarse) {
  .chip:active {
    transform: scale(0.98);
  }
}

/* 手機：直排＋左右留白用 container 控 */
@media (max-width: 576px) {
  .needs-tags {
    justify-content: flex-start;
  }
  .chip {
    white-space: normal; /* 可換行 */
    width: 100%; /* 單欄直排 */
    text-align: left;
  }
  .needs-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* 減少動效偏好 */
@media (prefers-reduced-motion: reduce) {
  .chip {
    transition: none;
  }
}