/* =========================================================================
   YES 悅馳展覽設計 — 前台樣板 (yes168)
   以 Bootstrap 5 為基礎，重現原 JA Events II 的視覺：
   透明浮動頁首、深色區塊、白底四欄特色、紅色頁尾。
   ========================================================================= */

:root {
  --y-red: #e70012;
  --y-dark: #1c1c24;
  --y-purple: #743fa9;
  --y-bg: #d7d9db;
  --y-page: #f5f6fa;
  --y-text: #333;
  --y-link: #b4000f;
  --y-w: 1200px;
  --y-page-w: 100%;
  --y-font: "Open Sans", HelveticaNeue, "Helvetica Neue", Helvetica, Arial,
    "PingFang TC", "Microsoft JhengHei", "蘋果儷中黑", "微軟正黑體", sans-serif;
}

/* ---------- 基礎 ---------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--y-font);
  font-size: 14px;
  line-height: 1.7;
  color: var(--y-text);
  background: var(--y-bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.y-solid { padding-top: 84px; }
a { color: var(--y-link); text-decoration: none; }
a:hover { color: var(--y-red); text-decoration: underline; }
img { max-width: 100%; height: auto; }
/* 標題字級沿用 Bootstrap 3（正式站）：36 / 30 / 24 / 18 / 14 / 12，粗細 500 */
h1, h2, h3, h4, h5, h6 { font-weight: 500; line-height: 1.1; }
h1 { font-size: 36px; } h2 { font-size: 30px; } h3 { font-size: 24px; }
h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; }

.container { --bs-gutter-x: 40px; }
@media (min-width: 1200px) { .container { max-width: var(--y-w); } }
@media (min-width: 1400px) { .container { max-width: var(--y-w); } }

/* 盒狀版面：整頁（含頁首）置中於灰底上，寬度依視窗 980 / 1200 / 1600（與正式站一致） */
@media (min-width: 980px)  { :root { --y-page-w: 980px; } }
@media (min-width: 1200px) { :root { --y-page-w: 1200px; } }
@media (min-width: 1600px) { :root { --y-page-w: 1600px; } }
.y-page { position: relative; width: var(--y-page-w); margin: 0 auto; background: var(--y-page); }

/* Bootstrap 3 相容（舊模組輸出仍使用這些類別） */
.pull-left  { float: left !important; }
.pull-right { float: right !important; }
.row > .pull-right { order: 2; float: none !important; }
.row > .pull-left  { order: 1; float: none !important; }
@media (max-width: 767.98px) { .col-xs-12 { flex: 0 0 100%; max-width: 100%; } }
.img-responsive { display: block; max-width: 100%; height: auto; }
.center, .text-center { text-align: center; }
.text-left { text-align: left; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.y-section.pt-x2 { padding-top: 100px; }
.y-section.pb-x2 { padding-bottom: 100px; }
.equal-height > [class*="col"] { display: flex; flex-direction: column; }

/* ---------- 按鈕 ---------- */
.btn-primary, .btn-secondary, .btn-light-trans, .btn-dark-trans {
  display: inline-block;
  border: 0;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.7;
  color: #fff;
  text-decoration: none;
  transition: opacity .2s, background .2s;
}
.btn-primary   { background: var(--y-purple); }
.btn-secondary { background: #000; }
.btn-light-trans { background: rgba(255,255,255,.2); }
.btn-light-trans:hover, .btn-primary:hover, .btn-secondary:hover { color: #fff; text-decoration: none; opacity: .85; }
.btn-light-trans .fa { margin-left: 6px; }

/* ---------- 頁首 ---------- */
.y-header {
  position: fixed;
  top: 0;
  left: 50%;
  width: var(--y-page-w);
  margin-left: calc(var(--y-page-w) / -2);
  z-index: 1030;
  transition: background .3s ease;
}
.y-header-inner {
  display: flex;
  align-items: center;
  height: 84px;
  transition: height .3s ease;
}
.y-solid .y-header,
.y-affix .y-header { background: rgba(0,0,0,.86); }
.y-trans:not(.y-affix) .y-header { background: linear-gradient(to bottom, rgba(0,0,0,.68), rgba(0,0,0,0)); }
.y-trans:not(.y-affix) .y-header-inner { height: 132px; }

.y-logo { flex: 0 0 auto; margin-right: 56px; }
.y-logo img { display: block; height: 56px; width: auto; transition: height .3s ease; }
.y-affix .y-logo img, .y-solid .y-logo img { height: 46px; }

.y-nav { flex: 1 1 auto; }
.y-nav .mod-menu {
  display: flex; flex-wrap: nowrap; gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
.y-nav .mod-menu > li { position: relative; }
.y-nav .mod-menu > li > a,
.y-nav .mod-menu > li > span {
  display: block;
  padding: 5px 15px;
  border-radius: 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
}
.y-nav .mod-menu > li:hover > a,
.y-nav .mod-menu > li.active > a,
.y-nav .mod-menu > li.current > a { background: rgba(255,255,255,.2); }
.y-nav .mod-menu > li.parent > a::after {
  content: "";
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
  border-top: 4px solid;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.y-nav .mod-menu__toggle-sub { display: none; } /* Joomla 6 的子選單展開鈕：桌機用 hover、手機直接展開，不需要 */
.y-nav .mod-menu__sub {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 210px;
  margin: 0; padding: 8px 0;
  list-style: none;
  background: rgba(0,0,0,.92);
  border-radius: 6px;
  z-index: 20;
}
.y-nav .mod-menu > li:hover > .mod-menu__sub,
.y-nav .mod-menu > li:focus-within > .mod-menu__sub { display: block; }
.y-nav .mod-menu__sub a {
  display: block;
  padding: 8px 20px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
.y-nav .mod-menu__sub a:hover { background: rgba(255,255,255,.15); }

.y-head-extra { margin-left: auto; }
.y-nav-toggle { display: none; margin-left: auto; color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 6px; padding: 6px 12px; background: transparent; }

@media (max-width: 991.98px) {
  .y-header-inner { height: 72px !important; }
  .y-trans:not(.y-affix) .y-header { background: rgba(0,0,0,.55); }
  .y-logo { margin-right: 0; }
  .y-logo img { height: 40px !important; }
  .y-nav-toggle { display: block; }
  .y-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(0,0,0,.95);
    padding: 8px 15px 16px;
  }
  .y-nav .mod-menu { flex-direction: column; gap: 0; }
  .y-nav .mod-menu > li > a { border-radius: 6px; padding: 10px 15px; }
  .y-nav .mod-menu__sub { display: block; position: static; background: transparent; padding: 0 0 0 16px; }
  body.y-solid { padding-top: 72px; }
}
@media (min-width: 992px) { .y-nav { display: block !important; } }

/* ---------- 輪播（Slideshow CK） ---------- */
.y-slideshow { position: relative; background: #000; }
.y-slideshow .camera_wrap { margin-bottom: 0 !important; }
/* 輪播下緣斜切遮罩（舊 T3 .t3-slideshow:after；1200 版型依原圖尺寸裁切，1600 版型撐滿寬度） */
@media (min-width: 1200px) {
  .y-slideshow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 290px; background: url("../images/main-container-ltr.png"); pointer-events: none; }
}
@media (min-width: 1600px) {
  .y-slideshow::after { height: 390px; background-size: 100% 390px; }
}

/* ---------- 內頁橫幅 ---------- */
.y-masthead {
  position: relative;
  min-height: 263px;
  padding: 94px 0 0;
  color: #fff;
  background: #111 center / cover no-repeat;
}
.y-masthead::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.12) 60%, rgba(0,0,0,.3));
}
.y-masthead .container { position: static; }
.y-masthead .container > .y-masthead-title { position: relative; }
.y-masthead-title { margin: 24px 0; font-size: 54px; font-weight: 500; line-height: 59.4px; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.y-masthead-extra { position: absolute; right: 10px; top: calc(100% + 10px); z-index: 2; }
@media (max-width: 767.98px) { .y-masthead-title { font-size: 36px; } .y-masthead { min-height: 200px; padding-top: 110px; } }

/* ---------- 內頁主體 ---------- */
/* 舊站 custom.css：.t3-mainbody,.t3-content { padding-bottom:0 !important }（所有寬度） */
.y-main { background: var(--y-page); padding: 48px 0 0; }
/* 正式站：主內容容器不內縮，欄位各留 20px（內容寬 1160） */
.y-main .container { --bs-gutter-x: 0; }
.y-main-row { --bs-gutter-x: 40px; margin-left: 0; margin-right: 0; padding-top: 24px; }
/* 單篇文章標題 36px/700；列表標題 30px/500 */
.y-content .com-content-article > .page-header { margin: 0 0 24px; padding: 0; border: 0; }
.y-content .com-content-article > .page-header h1,
.y-content .com-content-article > .page-header h2 { font-size: 36px; font-weight: 700; color: #333; margin: 0; line-height: 1.3; }
.y-content .article-info { font-size: 13px; color: #999; margin-bottom: 14px; }
.y-content .article-info a { color: #999; }
.y-content .com-content-article,
.y-content .com-content-category-blog,
.y-content .blog-featured { background: transparent; }
.y-content .article-info-term { display: none; }
/* 文章圖片（full/intro image）撐滿內容寬度，與正式站一致 */
.y-content .item-image { margin: 0; float: none; }
.y-content .item-image img { display: block; width: 100%; height: auto; }
.y-content .page-header h1 a, .y-content .page-header h2 a { color: #333; text-decoration: none; }
.y-content .page-header h1 a:hover, .y-content .page-header h2 a:hover { color: var(--y-red); }
.y-content .com-content-article__body { background: #fff; padding: 24px; }

/* 文章列表（blog）：masonry-N / columns-N 皆為 N 欄白色卡片 */
.y-content .blog-items { display: grid; grid-template-columns: 1fr; gap: 48px 40px; }
@media (min-width: 768px) {
  .y-content .blog-items.masonry-2, .y-content .blog-items.columns-2 { grid-template-columns: repeat(2, 1fr); }
  .y-content .blog-items.masonry-3, .y-content .blog-items.columns-3 { grid-template-columns: repeat(3, 1fr); }
  .y-content .blog-items.masonry-4, .y-content .blog-items.columns-4 { grid-template-columns: repeat(4, 1fr); }
}
.y-content .blog-item { display: flex; flex-direction: column; }
.y-content .blog-item .item-content { flex: 1 1 auto; background: #fff; padding: 48px; }

/* 分頁：白底方框，目前頁桃紅色（#ff0763），與正式站一致 */
.y-content .pagination { gap: 8px; margin: 24px 0 0; padding: 0; flex-wrap: wrap; }
.y-content .pagination .page-link {
  margin: 0; padding: 12px; min-width: 40px; text-align: center;
  color: #777; background: #fff; border: 1px solid #e0e0e0; border-radius: 0; font-size: 14px; line-height: 1;
}
.y-content .pagination .page-link:hover { color: var(--y-red); background: #fff; border-color: #ccc; }
.y-content .pagination .active .page-link { color: #fff; background: #ff0763; border-color: #ff0763; }
.y-content .pagination .disabled .page-link { color: #bbb; background: #fff; }
.y-content .counter { font-size: 12px; color: #777; }
.y-content .blog-item .page-header h2 { font-size: 30px; font-weight: 500; margin: 0 0 24px; line-height: 1.3; }
.y-content .blog-item .item-content img { display: block; margin: 0 auto 14px; max-width: 100%; height: auto; }
.y-content .readmore a,
.y-content .readmore .btn {
  display: inline-block; background: #000; color: #fff; border-radius: 20px;
  padding: 5px 15px; text-decoration: none; font-size: 16px; font-weight: 500; line-height: 1.7;
}
.y-content .readmore { text-align: right; margin: 12px 0 0; }
.y-content .pagination { margin-top: 20px; }

/* ---------- 側欄 / 卡片 ---------- */
.y-box { background: #fff; padding: 14px 14px 16px; margin-bottom: 24px; }
.y-box-title { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: #333; }
.y-sidebar .y-box-body ul { margin: 0; }

/* 內容手風琴（mod_sl_contentaccordion） */
.sl_contentaccordion { list-style: none; margin: 0; padding: 0; }
.sl_contentaccordion > li > a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; margin-bottom: 4px;
  color: #fff; font-size: 12px; text-decoration: none;
  background: linear-gradient(#7a7f89, #5c616b);
  border: 1px solid #50545d; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.sl_contentaccordion > li > a:hover,
.sl_contentaccordion > li.active > a { background: linear-gradient(#8a909b, #6b707b); }
.sl_contentaccordion .articles_count {
  min-width: 22px; padding: 0 6px; border-radius: 10px;
  background: #fff; color: #444; font-size: 10px; line-height: 16px; text-align: center;
}

/* ---------- 首頁區塊 ---------- */
.y-sections { background: transparent; }
.y-section { padding: 60px 0; background: #fff; color: var(--y-text); position: relative; }
.y-section-inner { max-width: var(--y-w); margin: 0 auto; padding: 0 20px; }
.y-section.bg-dark { background: var(--y-dark); color: #fff; }
.y-section.bg-light { background: #fff; }
.y-section.bg-transparent { background: transparent; }
/* 首頁第一個區塊（影片簡介）向上疊在輪播下緣，與正式站一致（輪播高約為頁寬的 0.62，疊入約 0.1975） */
@media (min-width: 992px) {
  .y-section:has(.acm-video) { margin-top: calc(var(--y-page-w) * -0.1975); z-index: 2; }
}
/* 1600 版型：舊 T3 把這個區塊的容器放寬到 1400（上移 400）；ACM 影片欄寬 625.667 即依 1360 內容寬設計，容器維持 1200 會把影片擠到下一行。
   -337 取自 Wayback 存檔實測（區塊頂端距輪播頂 705） */
@media (min-width: 1600px) {
  .y-section:has(.acm-video) { margin-top: -337px; }
  .y-section:has(.acm-video) .y-section-inner { max-width: 1400px; }
  /* 舊站 custom.css 以 !important 把 ACM 在 1600 的 120px 220px 壓回 60px 80px */
  .y-section .acm-features.style-1.full-width .features-item { padding: 60px 80px; }
}
.y-section.pb-0 { padding-bottom: 0 !important; }
.y-section:has(.acm-features.style-1) { padding: 0; }
/* 滿版區塊撐到整個頁面寬度（頁面是盒狀，不是整個視窗） */
.y-section .full-width { width: var(--y-page-w); max-width: none; margin-left: calc(50% - var(--y-page-w) / 2); }
@media (max-width: 979.98px) { .y-section .full-width { width: calc(100% + 40px); margin-left: -20px; } }

.section-header { position: relative; margin-bottom: 24px; }
.section-title { margin: 0; font-size: 36px; font-weight: 700; color: inherit; text-align: left; }
.y-section.bg-dark .section-title { color: #fff; }

/* 影片／特色區塊的版面由 templates/yes168/acm/<type>/css/style.css 負責；
   這裡只讓區塊本身不再有上下內距 */
.y-section:has(.acm-features.style-2),
.y-section:has(.acm-features.style-1) { padding: 0; }
.y-section:has(.acm-video) { padding: 50px 0 15px; }
.y-section .acm-features.style-2.full-width .features-item,
.y-section .acm-features.style-2 .features-item { padding-top: 70px; padding-bottom: 50px; }
/* 影片區的左右欄沒有包在 .row 裡，原本靠 Bootstrap 3 的 float 並排 */
.acm-video { display: flow-root; }
.acm-video > [class*="col-sm-"] { float: left; min-height: 1px; }
@media (max-width: 991.98px) {
  .acm-video > [class*="col-sm-"] { float: none; width: 100%; margin-left: 0; }
  .acm-video .video-player { margin-top: 0; padding: 0 20px 20px; }
}

/* 活動實績卡片輪播 */
.mostevent {
  display: flex; gap: 40px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-bottom: 94px;
}
.mostevent::-webkit-scrollbar { display: none; }
.mostread-item { flex: 0 0 calc((100% - 80px) / 3); scroll-snap-align: start; background: #fff; color: #333; }
.mostread-item .event-img img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.mostread-item .event-info { padding: 26px 22px 30px; }
.mostread-item .event-title a { font-size: 14px; font-weight: 700; color: #333; text-decoration: none; }
.y-carousel-nav { position: absolute; right: 0; bottom: 6px; display: flex; gap: 12px; }
.y-carousel-nav button {
  width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid #fff; background: transparent; color: #fff; font-size: 18px; line-height: 1;
  cursor: pointer; transition: background .2s;
}
.y-carousel-nav button:hover { background: rgba(255,255,255,.2); }

@media (max-width: 991.98px) {
  .mostread-item { flex-basis: calc((100% - 40px) / 2); }
  .mostevent { gap: 40px; }
  .section-title { font-size: 28px; }
}
@media (max-width: 575.98px) {
  .mostread-item { flex-basis: 85%; }
}

/* ---------- 作品集 / tabs ---------- */
.y-tabs { background: #fff; padding: 40px 0 50px; }
.y-tabs .container { --bs-gutter-x: 90px; }
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-items { margin: 0 -6px; }
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item { padding: 6px; }
.y-tabs .sp-simpleportfolio-overlay-wrapper { position: relative; }
.y-tabs .sp-simpleportfolio-img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* 標題以深色條壓在圖片底部，帶紅色小三角（與正式站作品集一致） */
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info,
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info:hover {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  margin: 0; padding: 6px 8px 8px;
  background: rgba(0, 0, 0, .62); color: #fff; text-align: center;
}
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info h3 { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.3; }
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info h3 > a,
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info:hover h3 > a { color: #fff; text-decoration: underline; }
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info h3::after { content: "\25BC"; display: block; margin-top: 2px; color: var(--y-red); font-size: 9px; line-height: 1; }
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info .sp-simpleportfolio-tags { display: none; }
/* 滑過：青灰色罩層＋圓形圖片圖示；點圖片或標題都開燈箱、沒有 VIEW 項目頁（對照正式站 AdvPortfolio）。
   只用 CSS 處理，不覆寫 SP 模組版型，SP 更新不會被蓋掉。 */
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-overlay-wrapper .sp-simpleportfolio-overlay { background: rgba(22, 74, 94, .62); }
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item:hover .sp-simpleportfolio-info { background: rgba(22, 74, 94, .88); }
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-btns .btn-view { display: none; }
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-btns a.btn-zoom {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: #1b1b1b; color: #fff;
  font-size: 0; letter-spacing: 0; /* 隱藏「ZOOM」文字，改用下面的圖示 */
  transform: none; /* SP 預設未 hover 時縮成 0，觸控裝置第一下點擊會點不到 */
}
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-btns a.btn-zoom::before {
  content: "\f03e"; font-family: "Font Awesome 6 Free"; font-weight: 400; font-size: 14px; line-height: 1;
}
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-btns a.btn-zoom:hover { background: var(--y-red); }
/* 連結撐滿整張圖（相對定位基準是 .sp-simpleportfolio-overlay，即整個圖片區） */
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-btns a.btn-zoom::after { content: ""; position: absolute; inset: 0; }
/* 標題條讓點擊穿透到下方的燈箱連結（鍵盤焦點時仍可用標題連結進項目頁） */
.y-tabs .sp-simpleportfolio .sp-simpleportfolio-item .sp-simpleportfolio-info { pointer-events: none; }

/* ---------- 頁尾 ---------- */
.y-footer { background: var(--y-red); color: #fff; }
.y-footer a { color: #fff; }
.y-footnav { padding-top: 39px; padding-bottom: 74px; }
.y-footnav .row { --bs-gutter-x: 40px; }
.y-footer .y-mod { margin-top: 24px; }
.y-mod-title { margin: 0 0 12px; font-size: 14px; line-height: 15px; font-weight: 500; color: #fff; }
.y-footer .mod-menu { display: block; list-style: none; margin: 0; padding: 0; }
.y-footer .mod-menu li a { display: block; padding: 5px 0; font-size: 14px; line-height: 24px; text-decoration: none; }
.y-footer .mod-menu li a:hover { text-decoration: underline; }
.y-footer .mod-custom { font-size: 14px; line-height: 24px; }
.y-footer .mod-custom h4 { margin: 0 0 12px; font-size: 16px; line-height: 24px; }
.y-footer .mod-custom p { margin: 0 0 12px; }
.y-footer img { max-width: none; height: auto; }
@media (max-width: 767.98px) { .y-footer img { max-width: 100%; } }
.y-copyright { border-top: 1px solid rgba(0,0,0,.45); padding: 20px 0; text-align: center; font-size: 12px; }
.y-copyright p { margin: 0 0 12px; line-height: 24px; }