/* 活動資訊頁專用樣式：announcements / events / highlights 共用 */

/* 中和 Bootstrap reboot 對主導覽 ul 的 margin / padding-left */
.main-nav .nav-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 中和 Bootstrap 對 .breadcrumb 的灰色膠囊樣式，回歸 main.css 設計 */
.page-hero .breadcrumb {
  display: block;
  padding: 0;
  margin-bottom: 18px;
  background: transparent;
  border-radius: 0;
  list-style: none;
}
/* h1 在 Bootstrap reboot 下字重會被改為 500，這裡恢復粗體並對齊 main.css */
.page-hero .page-title {
  font-weight: 700;
  color: #fff;
}
/* 文章列表 card-title 與 main.css .content-card h2 並存 */
.about-content .card-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: #7a1110;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: 10px;
}
.about-content .card-title i {
  color: var(--gold);
}
.about-content .content-text {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #3f332b;
  margin-bottom: 12px;
}

/* 文章列表卡片 */
#article-list-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
#article-list-container > * {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}
#article-list-container .article-card,
#article-list-container > div > a,
#article-list-container > div > article,
#article-list-container > div > div {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  padding: 16px 20px !important;
  text-decoration: none !important;
  transition:
    border-color var(--transition),
    box-shadow var(--transition),
    background-color var(--transition);
}
#article-list-container .article-card:hover,
#article-list-container .article-card:focus-within,
#article-list-container > div > a:hover,
#article-list-container > div > a:focus {
  border-color: var(--red) !important;
  box-shadow: 0 6px 18px var(--shadow) !important;
  background: var(--gold-pale) !important;
}
#article-list-container .article-title-link,
#article-list-container h3,
#article-list-container h4,
#article-list-container .title,
#article-list-container a > strong:first-child {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1rem !important;
  line-height: 1.5 !important;
  font-weight: 800 !important;
  color: var(--red-dark) !important;
  margin: 0 0 6px !important;
  text-decoration: none !important;
}
#article-list-container a:hover .article-title-link,
#article-list-container a:focus .article-title-link {
  color: var(--red) !important;
}
#article-list-container .article-datetime,
#article-list-container .date,
#article-list-container time,
#article-list-container small,
#article-list-container .text-muted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem !important;
  color: var(--text-muted) !important;
  margin: 0 !important;
}

/* 來源分類標籤（千歲協會 / 文化中心 等） */
.article-source-tag {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--red-dark);
  background: var(--gold-pale);
  border: 1px solid var(--gold);
  border-radius: 999px;
  white-space: nowrap;
}

/* 載入 / 錯誤 */
.article-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-light);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
#article-loading,
#article-error {
  padding: 16px 0;
  color: var(--text-mid);
}
#article-error.alert-danger {
  background: #fdecea;
  border: 1px solid #f1b2ad;
  color: var(--red-deeper);
  border-radius: var(--radius);
  padding: 12px 16px;
}

/* 分頁 */
#article-pagination {
  margin-top: 24px;
}
#article-pagination .pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
}
#article-pagination .page-item .page-link {
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  color: var(--text-mid);
  background: var(--white);
  font-weight: 700;
  padding: 6px 12px;
  text-decoration: none;
  transition: all var(--transition);
}
#article-pagination .page-item.active .page-link,
#article-pagination .page-item .page-link:hover,
#article-pagination .page-item .page-link:focus {
  background: var(--red-dark);
  border-color: var(--red-dark);
  color: var(--white);
}
#article-pagination .page-item.disabled .page-link {
  opacity: 0.45;
  pointer-events: none;
}

/* 單篇詳細模式 */
body.article-detail-mode #article-list-view,
body.article-detail-mode #announcement-intro {
  display: none !important;
}
body.article-detail-mode #article-detail-view {
  display: block !important;
}
body.article-detail-mode #article-list-section {
  margin-top: 0 !important;
}

.article-detail-title {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--red-dark);
  margin: 0 0 12px;
}
.article-detail-datetime {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 18px;
}
.article-detail-content {
  font-size: 1.05rem;
  line-height: 1.95;
  color: var(--text);
  text-align: justify;
}
.article-detail-content img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.article-detail-content .youtube-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 18px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.article-detail-content .youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.article-topic-breadcrumb {
  display: none;
  margin: -8px 0 18px;
  font-size: 0.95rem;
  color: var(--text-muted);
  font-weight: 700;
}
body.article-detail-mode .article-topic-breadcrumb {
  display: block;
}

.article-detail-utility {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border-light);
}
.article-detail-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.article-detail-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  background: var(--white);
  color: var(--red-dark);
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition);
}
.article-detail-nav a:hover,
.article-detail-nav a:focus {
  background: var(--gold-pale);
  border-color: var(--gold);
}
.article-detail-nav .is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.article-related-block {
  background: var(--gold-pale);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.article-related-block h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin: 0 0 12px;
  color: var(--red-dark);
  font-weight: 800;
}
.article-related-list {
  display: grid;
  gap: 10px;
}
.article-related-item {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-light);
  background: var(--white);
  text-decoration: none;
  transition: all var(--transition);
}
.article-related-item:hover,
.article-related-item:focus {
  border-color: var(--red);
  box-shadow: 0 4px 12px var(--shadow);
}
.article-related-item-title {
  font-family: var(--font-serif);
  font-weight: 800;
  color: var(--red-dark);
  margin-bottom: 4px;
}
.article-related-item-date {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.back-to-list-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--red-dark);
  padding: 9px 16px;
  border-radius: var(--radius);
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 18px;
  transition: all var(--transition);
}
.back-to-list-btn:hover,
.back-to-list-btn:focus {
  background: var(--gold-pale);
  border-color: var(--gold);
}

@media (max-width: 600px) {
  .article-detail-nav {
    grid-template-columns: 1fr;
  }
}

/* 活動花絮：history 風格圖片牆 */
.highlights-photo-grid {
  margin-top: 8px;
  grid-auto-rows: 1fr;
}
.highlights-photo-link {
  display: flex;
  text-decoration: none;
  cursor: pointer;
  height: 100%;
}
.highlights-photo-link:hover {
  text-decoration: none;
}
.highlights-photo-link > .highlights-photo-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.highlights-photo-item img {
  cursor: pointer;
  width: 100%;
  height: 240px;
  object-fit: cover;
  flex-shrink: 0;
}
.highlights-photo-item .highlights-photo-caption {
  flex: 1 1 auto;
}
.highlights-photo-placeholder {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7efe0;
  color: #b5996e;
  font-size: 2.4rem;
}
.highlights-photo-caption {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  color: #5a4538;
}
@media (max-width: 900px) {
  .highlights-photo-grid.history-photo-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .highlights-photo-grid.history-photo-grid-3 {
    grid-template-columns: minmax(0, 1fr);
  }
}