/* ==========================================================
   1. Page Banner (通用於內頁頂部形象圖)
   ========================================================== */

.page-banner {
  width: 100%;
  position: relative;
  /* Navbar 避讓邏輯 */
  margin-top: var(--nav-height-mobile, 45px);
  display: block;
}

/* Tablet */
@media (min-width: 768px) {
  .page-banner {
    margin-top: var(--nav-height-tablet, 55px);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .page-banner {
    margin-top: var(--nav-height-desktop, 79px);
  }
}

.page-banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ==========================================================
   2. 全域容器 (RWD Width Control)
   依據 variables.css 定義的寬度
   ========================================================== */
.x720-container {
  /* 核心：讀取 CSS 變數 */
  width: var(--container-fluid-width, 90%);

  /* 置中 */
  margin-left: auto;
  margin-right: auto;

  /* 避免貼邊 */
  padding-left: 15px;
  padding-right: 15px;
}

/* ==========================================================
   3. 關於我們 & 交通方式 (Section Styles)
   取代 bootstrap 的 my-5, py-5
   ========================================================== */

/* ==========================================================
   1. 共用區間與間距
   ========================================================== */
.section-teacher {
  padding-top: 1rem;
  padding-bottom: 4rem;
}

/* ==========================================================
   2. 篩選工具列 (Filter Bar)
   ========================================================== */
.teacher-filters {
  position: sticky;
  top: var(--nav-height-desktop, 79px); /* 避免被導覽列遮住 */
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.filter-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: 2fr 1fr 1fr auto;
  align-items: center;
}

.filter-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* 按鈕樣式覆寫 (呼應 SaaS 變數) */
.teacher-filters .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.teacher-filters .btn-primary:hover {
  background-color: var(--secondary-color-1);
  border-color: var(--secondary-color-1);
}

/* 標籤 Chips */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  background: var(--secondary-color-2, #eaf4f8);
  color: var(--secondary-color-1, #2f3e46);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.chip:hover {
  border-color: var(--primary-color);
}

.chip.active {
  background: var(--primary-color);
  color: #fff;
  font-weight: 500;
}

/* ==========================================================
   3. 師資卡片 (Teacher Cards)
   ========================================================== */
.teacher-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.teacher-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* 右上角標籤 */
.teacher-ribbon {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--secondary-color-2);
  color: var(--secondary-color-1);
  padding: 4px 12px;
  font-weight: 600;
  border-radius: 999px;
  font-size: 0.75rem;
  z-index: 2;
}

/* 上半部資訊區 */
.teacher-top {
  display: flex;
  gap: 16px;
  padding: 20px 20px 10px;
}

.teacher-avatar {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--secondary-color-2);
}

.teacher-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.teacher-meta h3 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-header, #000);
}

.teacher-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.teacher-tags .tag {
  background: #f1f5f9;
  color: #475569;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
}

.teacher-loc {
  color: #64748b;
  font-size: 0.85rem;
}

/* 操作按鈕區 */
.teacher-actions {
  display: flex;
  gap: 8px;
  padding: 10px 20px 20px;
  margin-top: auto;
}

.teacher-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 8px 0;
  font-size: 0.9rem;
  color: #475569;
  transition: background 0.2s;
}

.teacher-action-btn:hover {
  background: #f8fafc;
  color: var(--primary-color);
}

/* 展開詳細內容區 */
.teacher-detail {
  border-top: 1px dashed #e5e7eb;
  padding: 16px 20px;
  background: #f8fafc;
  display: none;
}

.teacher-detail.open {
  display: block;
  animation: fadeIn 0.2s ease;
}

/* 聯絡資訊 Grid */
.contact-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 10px;
  align-items: center;
  font-size: 0.9rem;
}

.contact-grid .label {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px;
  text-align: center;
  color: #64748b;
}

.contact-grid .value {
  word-break: break-all;
}

.contact-grid .value a {
  color: var(--primary-color);
  text-decoration: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================
   4. RWD 調整
   ========================================================== */
@media (max-width: 991px) {
  .filter-grid {
    grid-template-columns: 1fr 1fr;
  }
  .filter-item:first-child {
    grid-column: 1 / -1; /* 搜尋框滿版 */
  }
  .filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .filter-grid {
    grid-template-columns: 1fr;
  }
}