/*
 * shared.css — SEB 各受眾頁面共用的手寫補充樣式
 *
 * SEB 是借用 B2A 頁面結構做出來的 template。
 * assets/css/tailwind.css 是 B2A 原始頁面 build 出來的 Tailwind 編譯檔，
 * 只包含 B2A 當初用到的 class；這裡新增的 class 它沒有，
 * 所以手寫補上（數值對齊 Tailwind 的命名規則與計算方式）。
 *
 * 各受眾頁面專屬的差異（Hero 背景圖漸層/圖片路徑、桌機斷行寬度等）
 * 不放在這裡，分別寫在 events.css / groups.css / agents.css 做覆寫。
 */

/* ---- 補充的 Tailwind 工具類 ---- */
@media (min-width: 768px) {
  .md\:max-w-none {
    max-width: none;
  }
  .md\:whitespace-nowrap {
    white-space: nowrap;
  }
}
@media (min-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.-mx-5 {
  margin-left: -1.25rem;
  margin-right: -1.25rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.w-48 {
  width: 12rem;
}
.gap-5 {
  gap: 1.25rem;
}
.rounded-t-none {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rounded-b-lg {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.top-16 {
  top: 4rem;
}
.z-40 {
  z-index: 40;
}
.border-white\/10 {
  border-color: rgba(255, 255, 255, 0.1);
}

/* ---- 文字陰影（原本用行內 style，改成具名 class）---- */
.text-shadow-none {
  text-shadow: none;
}
.hero-title-shadow {
  text-shadow:
    rgba(0, 0, 0, 0.5) 0 3px 12px,
    rgba(0, 0, 0, 0.3) 0 6px 24px;
}
.hero-body-shadow {
  text-shadow:
    rgba(0, 0, 0, 0.4) 0 2px 8px,
    rgba(0, 0, 0, 0.2) 0 4px 16px;
}

/* ---- 品牌色區塊背景（Primary/09，原本用行內 style）---- */
.bg-brand-navy {
  background-color: #003a5e;
}

/* ---- 語系切換旗幟（原本用行內 style，改成具名 class）---- */
.flag-icon {
  display: inline-block;
  width: 24px;
  height: 16px;
  border: 1px solid #bfbfbf;
  border-radius: 0;
  background-position: center;
  background-size: 110%;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.flag-tw {
  background-image: url("https://img.asiayo.com/static/flags/flat/64/TW.png");
}
.flag-cn {
  background-image: url("https://img.asiayo.com/static/flags/flat/64/CN.png");
}
.flag-us {
  background-image: url("https://img.asiayo.com/static/flags/flat/64/US.png");
}

/* ---- 語系下拉選單 ---- */
.lang-menu-item {
  color: #595959;
  white-space: nowrap;
}
.lang-menu-item:hover {
  background-color: #f5f5f5;
}
#lang-menu {
  position: absolute;
  top: calc(100% + 36px);
  width: auto;
  padding: 5px 0;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 16, 0.16);
}
#lang-trigger svg {
  transition: transform 0.2s ease;
  transform-box: fill-box;
  transform-origin: center;
}
#lang-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* ---- CTA 按鈕三態互動（Enable/Hover/Active）---- */
.btn-primary-states {
  background-color: #1e9fd2;
  transition: background-color 0.15s ease;
}
.btn-primary-states:hover {
  background-color: #0f7aab;
}
.btn-primary-states:active {
  background-color: #003a5e;
}