/* 首頁 hero：右下角三顆入口、大圖下方的預覽縮圖列（中／英／日三個首頁共用） */

/* 三顆入口縮小、靠右下角，少擋照片 */
header:has(> #hero-persona-actions) { padding-bottom: 88px; }
#hero-persona-actions {
    position: absolute; right: 16px; bottom: 16px; z-index: 20;
    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px;
    max-width: calc(100% - 32px);
}
#hero-persona-actions a {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 8px 14px;
    border: 1px solid #C5A880; border-radius: 2px;
    background: rgba(0, 0, 0, .62); color: #fff;
    font-weight: 700; font-size: 14px; letter-spacing: .12em; white-space: nowrap;
    text-decoration: none; text-shadow: none;
    transition: background-color .3s, color .3s;
}
#hero-persona-actions a:hover,
#hero-persona-actions a:focus-visible { background: #C5A880; color: #000; }
/* 窄手機：三顆平分一列、字可折行，英日文較長的字也不會疊到上面的文字 */
@media (max-width: 639px) {
    #hero-persona-actions { left: 16px; right: 16px; max-width: none; flex-wrap: nowrap; }
    #hero-persona-actions a {
        flex: 1 1 0; min-width: 0; padding: 6px 6px; font-size: 13px; line-height: 1.25;
        letter-spacing: .04em; white-space: normal; text-align: center;
    }
}
@media (min-width: 768px) {
    #hero-persona-actions { right: 24px; bottom: 24px; gap: 10px; }
    #hero-persona-actions a { font-size: 15px; padding: 10px 18px; }
}

/* 預覽縮圖列：橫向可捲、手機一次看到四張多一點 */
.hero-thumbs {
    position: relative; /* 讓縮圖的 offsetLeft 以縮圖列本身為基準 */
    display: flex; gap: 8px; padding: 10px 16px;
    background: #121212; border-bottom: 1px solid #222;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.hero-thumbs::-webkit-scrollbar { display: none; }
.hero-thumbs:empty { display: none; }
/* 張數不夠寬時置中；超出時仍可從第一張捲到最後一張 */
.hero-thumb:first-child { margin-left: auto; }
.hero-thumb:last-child { margin-right: auto; }

.hero-thumb {
    position: relative; flex: none; width: 96px; height: 64px; padding: 0;
    border: 2px solid transparent; border-radius: 3px; overflow: hidden;
    background: #000; cursor: pointer; opacity: .6;
    transition: opacity .3s, border-color .3s;
}
.hero-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-thumb__tag {
    position: absolute; left: 4px; bottom: 4px; min-width: 18px; padding: 0 5px;
    font-size: 11px; line-height: 18px; font-weight: 700;
    color: #000; background: #C5A880; border-radius: 2px;
}
.hero-thumb:hover, .hero-thumb:focus-visible { opacity: .9; }
.hero-thumb.is-active { opacity: 1; border-color: #C5A880; }
.hero-thumb:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
@media (min-width: 768px) {
    .hero-thumbs { padding: 12px 24px; gap: 10px; }
    .hero-thumb { width: 132px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: opacity .6s ease-in-out; transform: none !important; }
}