/*
 * 本站自己加的樣式。
 * 主題樣式在 creative-service.css，第三方樣式在 assets/vendor/。
 * 只有這個檔案是我們自己維護的，改樣式請改這裡。
 */

/* ------------------------------------------------------------------
   首頁六大區塊
   ------------------------------------------------------------------ */

/* 讓同一列的六個區塊等高。Bootstrap 3 的格線是用 float 排的，
   外層改成 flex 之後 float 會被忽略，欄寬的百分比仍然有效。 */
#service-sections {
  display: flex;
  flex-wrap: wrap;
}

#service-sections > [class*="col-"] {
  display: flex;
}

#service-sections > [class*="col-"] > .service-box {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/*
 * 項目清單。以前是有幾篇就往下長多長，最新消息有 18 篇，
 * 那一欄會拉到 1200px 高，整頁跟著變成 4500px。
 * 這裡把清單的高度收起來，超過就在區塊裡自己捲。
 */
.service-list {
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain; /* 捲到底不要順勢把整頁帶著捲 */

  /*
   * 上下的漸層陰影，用來提示「上面／下面還有東西」。
   * 這是純 CSS 的做法：白色遮罩用 background-attachment: local，
   * 會跟著內容一起捲；陰影用 scroll，固定在容器邊緣。
   * 兩者疊在一起，捲到頂端時上面的陰影正好被遮罩蓋住，
   * 捲到底端時下面的陰影被蓋住，不需要任何 JavaScript。
   */
  background:
    linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 28px no-repeat local,
    linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 28px no-repeat local,
    radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) top / 100% 10px no-repeat
      scroll,
    radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0)) bottom / 100% 10px
      no-repeat scroll;
}

.service-list ul {
  margin: 0;
  padding: 4px 0 4px 28px;
  font-size: 16px;
}

.service-list li {
  margin-bottom: 6px;
}

/* 捲軸細一點，不要在區塊裡顯得笨重 */
.service-list {
  scrollbar-width: thin;
  scrollbar-color: #d0d0d0 transparent;
}

.service-list::-webkit-scrollbar {
  width: 7px;
}

.service-list::-webkit-scrollbar-thumb {
  background: #d0d0d0;
  border-radius: 4px;
}

.service-list::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.service-list::-webkit-scrollbar-track {
  background: transparent;
}

/* 手機上一欄只放一個區塊，可以放高一點，少捲幾次 */
@media (max-width: 767px) {
  .service-list {
    max-height: 360px;
  }
}

/* 相簿的大圖／小圖切換按鈕 */
.photo-size-toggle {
  margin: 10px 0;
}

.photo-size-toggle button {
  margin-right: 8px;
  padding: 4px 14px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}

.photo-size-toggle button:hover {
  background: #f0f0f0;
}

/* 相簿載不到時的提示，正常情況看不到 */
.album-error {
  padding: 20px;
  color: #a94442;
  text-align: center;
}

/* <x-album> 展開前不佔版面，避免畫面跳動 */
x-album {
  display: contents;
}

/* 彈出視窗：內容過長時只捲動內容，標題列固定 */
#modal-root .modal {
  overflow-y: auto;
}

#modal-root .modal-dialog {
  margin: 40px auto;
}