/*
  本次新增的展覽頁專用 CSS，正式部署路徑：/css/exhibit-page.css。
  請在 /exhibit.htm 中，於 bootstrap.min.css、style.css、introduce.css 之後載入。
  所有規則限定於 body.exhibit-page；原站共用 CSS 與字型設定繼續沿用。
*/

/* 頁面與頁首：修正內容高度、保留導覽列置頂，圖片依畫面寬度縮放。 */
.exhibit-page {
  height: auto;
  min-height: 100%;
}

.exhibit-page .hero {
  height: auto;
}

.exhibit-page > .navbar {
  position: sticky;
  top: 0;
}

.exhibit-page .hero img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

@media (min-width: 1281px) {
  .exhibit-page .hero img {
    height: 420px;
  }
}

/* 展覽標題與資訊：統一標題、日期、場地及策展人字級和間距。 */
.exhibit-page .title005 {
  font-size: 32px;
  margin-bottom: 16px;
}

.exhibit-page .introduce-title-1 {
  font-size: 32px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.exhibit-page .introduce-date {
  margin-bottom: 8px;
}

.exhibit-page .exhibition {
  display: block;
  margin-bottom: 4px;
}

.exhibit-page .introduce-picname-1 {
  font-size: 24px;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* 展覽導覽按鈕：依文字寬度排列，空間不足時自動換行。 */
.exhibit-page .exhibition-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 24px;
}

.exhibit-page .exhibition-links .btn_index {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 35px;
  margin: 0;
  padding: 3px 7px;
  line-height: 1.5;
  white-space: nowrap;
}

/* 主視覺與借展名單：圖片維持原比例；HTML 使用兩個 ul 分開機構與個人名單。 */
.exhibit-page .exhibition-poster {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.exhibit-page .exhibition-image-link {
  display: block;
}

.exhibit-page .exhibition-credits {
  margin-top: 24px;
}

.exhibit-page .exhibition-credits ul {
  padding-left: 0;
  margin-bottom: 12px;
}

/* 展覽回顧：各展覽之間加入間距與分隔線。 */
.exhibit-page .exhibition-entry + .exhibition-entry {
  margin-top: 48px;
  padding-top: 48px;
  border-top: 1px solid #ccc;
}

.exhibit-page .exhibition-row {
  margin-right: 0;
  margin-left: 0;
}

/* 既有青春印記影片與製作名單彈窗：影片等比例縮放，統一彈窗入口尺寸。 */
.exhibit-page .video-container {
  position: relative;
  padding: 0;
  height: auto;
  aspect-ratio: 400 / 247;
}

.exhibit-page .video-container iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.exhibit-page .video-caption {
  margin-top: 8px;
}

.exhibit-page .director_box {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.exhibit-page #film-title {
  display: block;
  font-size: 24px;
  line-height: 1.5;
}

.exhibit-page #small-dialog .director_name {
  margin-bottom: 8px;
}

/* 頁尾與鍵盤操作：調整頁尾文字，補上焦點框及捲動定位間距。 */
.exhibit-page .footer001 {
  font-size: 22px;
  margin-bottom: 0;
}

.exhibit-page a:focus-visible,
.exhibit-page button:focus-visible {
  outline: 3px solid #267e83;
  outline-offset: 4px;
}

.exhibit-page #main-content,
.exhibit-page .exhibition-entry {
  scroll-margin-top: 100px;
}

/* 平板與手機：調整欄位間距、導覽列、圖片寬度及按鈕點擊範圍。 */
@media (max-width: 991.98px) {
  .exhibit-page .index-text {
    padding-right: 12px;
    padding-left: 12px;
  }

  .exhibit-page .exhibition-visual {
    max-width: 640px;
    margin-top: 16px;
  }

  .exhibit-page .navbar-brand {
    padding-left: 12px;
    font-size: 24px;
  }

  .exhibit-page .navbar-nav .nav-link {
    font-size: 22px;
  }

  .exhibit-page .navbar-toggler {
    width: 44px;
    height: 44px;
    padding: 7px;
  }

  .exhibit-page .exhibition-links .btn_index {
    min-height: 44px;
  }

  .exhibit-page .exhibition-entry:last-child {
    padding-bottom: 24px;
  }
}

/* 小尺寸手機：縮小標題與頁尾字級，調整名單及展覽間距。 */
@media (max-width: 575.98px) {
  .exhibit-page .title005 {
    font-size: 28px;
  }

  .exhibit-page .introduce-title-1 {
    font-size: 28px;
  }

  .exhibit-page .introduce-picname-1 {
    font-size: 21px;
  }

  .exhibit-page .introduce-date {
    font-size: 18px;
  }

  .exhibit-page .exhibition-credits li {
    padding-right: 8px;
    padding-left: 8px;
  }

  .exhibit-page .exhibition-entry + .exhibition-entry {
    margin-top: 32px;
    padding-top: 32px;
  }

  .exhibit-page .footer001 {
    padding-left: 0;
    font-size: 18px;
  }

  .exhibit-page .social-icon {
    padding-right: 0;
  }
}