/**
 * Cassiopeia HTSprout - 活動 Event Booking 樣式
 *
 * @package     Joomla.Site
 * @subpackage  Templates.cassiopeia_htsprout
 * @copyright   Copyright (C) 2026 HTSprout. All rights reserved.
 * @license     GNU General Public License version 2 or later
 */

.eb-taskbar .btn-secondary {
  color: var(--htsprout-text-50);
}

/* 活動詳情頁 Hero 區塊 */
.eb-event-hero {
  display: flex;
  gap: 1.5rem;
}

.eb-event-hero__info {
  flex: 1;
}

.eb-event-large-image {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

/* ============================================
   活動列表搜尋框
   ============================================ */
.eb-search-box {
  max-width: 400px;
}

/* ============================================
   活動列表頁面 — 卡片網格（比照活動紀錄 .news-layout-grid）
   ============================================ */
body.page-event-list .eb-events-grid-items {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 0 0 28px;
  padding: 0 20px;
}

/* 覆蓋 Bootstrap col-md-4 寬度限制 */
body.page-event-list .eb-events-grid-items > [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: none;
  padding: 0;
}

@media (min-width: 768px) {
  body.page-event-list .eb-events-grid-items {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 40px;
  }
}

@media (min-width: 992px) {
  body.page-event-list .eb-events-grid-items {
    grid-template-columns: repeat(3, 1fr);
    padding: 0 20px;
  }
}

/* ============================================
   活動列表頁面 — 卡片樣式（手機版）
   ============================================ */

/* --- 卡片外層 wrapper 撐滿 grid row 高度 --- */
body.page-event-list .eb-events-grid {
  display: flex;
}

/* --- 卡片容器 --- */
body.page-event-list .eb-event-item-grid-default-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 20px;
  margin-bottom: 0;
  background: var(--htsprout-text-50);
  box-shadow: 0 4px 14px rgba(167, 117, 83, 0.2);
  border-radius: 0;
}

/* --- 圖片 --- */
body.page-event-list .eb-event-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* --- 各子元素間距（依 Figma 設計稿） --- */
body.page-event-list .eb-event-thumb-container {
  margin: 0 0 21px;
  border-radius: 0;
}

body.page-event-list .eb-event-title-container {
  margin: 0 0 6px;
}

body.page-event-list .eb-event-short-description {
  margin: 0 0 6px;
}

body.page-event-list .eb-event-dates {
  margin: 0 0 6px;
}

body.page-event-list .eb-event-capacity {
  margin: 0 0 6px;
}

body.page-event-list .eb-event-price-text {
  margin: 0 0 6px;
}

/* --- 標題 --- */
body.page-event-list .eb-event-title {
  font-size: var(--htsprout-fs-24);
  font-weight: var(--htsprout-fw-medium);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-green-500);
}

body.page-event-list .eb-event-title:hover {
  color: var(--htsprout-green-700);
}

/* --- 簡述 --- */
body.page-event-list .eb-event-short-description {
  font-size: var(--htsprout-fs-16);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-600);
}

/* --- 日期區塊（含上方分隔線） --- */
body.page-event-list .eb-event-dates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid #D7CFC2;
  padding-top: 6px;
}

/* --- 日期、名額、價格共用文字 --- */
body.page-event-list .eb-event-date-row,
body.page-event-list .eb-event-capacity,
body.page-event-list .eb-event-price-text {
  font-size: var(--htsprout-fs-14);
  line-height: var(--htsprout-lh-150);
  color: #4A4245;
}

/* --- 標籤 vs 數值字重 --- */
body.page-event-list .eb-event-label {
  font-weight: var(--htsprout-fw-regular);
}

body.page-event-list .eb-event-value {
  font-weight: var(--htsprout-fw-medium);
}

/* --- 價格數值特殊顏色 --- */
body.page-event-list .eb-event-price-text .eb-event-value {
  color: #537362;
}

/* --- 按鈕區（含上方分隔線） --- */
body.page-event-list .eb-taskbar {
  border-top: 1px solid #D7CFC2;
  padding-top: 21px;
  margin: 0;
}

body.page-event-list .eb-taskbar ul {
  display: flex;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

body.page-event-list .eb-taskbar ul li {
  flex: 1;
}

body.page-event-list .eb-taskbar .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--htsprout-radius-btn);
  font-size: var(--htsprout-fs-16);
  font-weight: var(--htsprout-fw-medium);
  line-height: var(--htsprout-lh-150);
  color: var(--htsprout-text-50);
  border: none;
}

body.page-event-list .eb-individual-registration-button {
  background: var(--htsprout-blue-500);
}

body.page-event-list .eb-group-registration-button {
  background: var(--htsprout-green-800);
}