/**
 * 模組內頁（消息／文章／產品）與首頁共用 banner_images 時的 Hero／輪播樣式。
 * 需搭配頁面內 :root 品牌色變數（與 site/show 一致）。
 */

.section-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.section-hero .hero-content {
    position: relative;
    z-index: 2;
}
.section-hero h1 {
    color: var(--hero-text, #ffffff);
}
.section-hero .subtitle {
    color: var(--hero-sub-text, #94a3b8);
}

.section-hero.section-hero--module {
    min-height: 420px;
    padding: 72px 40px 88px;
}

.section-hero.section-hero--module .hero-content {
    max-width: 720px;
}

.section-hero.section-hero--module h1 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin-bottom: 16px;
}

.section-hero.section-hero--module .subtitle {
    font-size: clamp(16px, 2vw, 18px);
    line-height: 1.75;
    margin-bottom: 0;
}

.section-hero.section-hero--module .hero-actions--module {
    margin-top: 28px;
    justify-content: center;
}

.hero-slider { position: relative; }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: center; display: block;
}
.hero-slide-svg-wrap {
    position: absolute; inset: 0; width: 100%; height: 100%;
    overflow: hidden;
}
.hero-slide-svg-wrap svg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    display: block;
}
.hero-slide {
    position: absolute; inset: 0; opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.hero-slide.active { opacity: 1; }

.hero-slider[data-slider-transition="slide"] .hero-slide {
    opacity: 1; transform: translateX(100%);
}
.hero-slider[data-slider-transition="slide"] .hero-slide.active {
    transform: translateX(0);
}
.hero-slider[data-slider-transition="slide"] .hero-slide.prev {
    transform: translateX(-100%);
}

.hero-slider[data-slider-transition="zoom"] .hero-slide {
    opacity: 0; transform: scale(1.15);
}
.hero-slider[data-slider-transition="zoom"] .hero-slide.active {
    opacity: 1; transform: scale(1);
}

.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(15,23,42,0.25) 0%, rgba(15,23,42,0.5) 55%, rgba(15,23,42,0.58) 100%);
    pointer-events: none;
}
.hero-slider:not(:has(.hero-slides)) .hero-overlay { display: none; }

.slider-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(0,0,0,0.4); backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15);
    color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: .25s; opacity: 0;
}
.hero-slider:hover .slider-arrow { opacity: 1; }
.slider-arrow:hover { background: rgba(0,0,0,0.6); }
.slider-prev { left: 24px; }
.slider-next { right: 24px; }

.slider-dots {
    position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 3; display: flex; gap: 8px;
}
.slider-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: rgba(255,255,255,0.4); border: none; cursor: pointer;
    transition: .3s; padding: 0;
}
.slider-dot.active { background: #fff; transform: scale(1.3); }

.btn-hero-primary {
    padding: 14px 28px; border-radius: 999px; font-size: 15px; font-weight: 700;
    border: none; color: #fff; cursor: pointer;
    background: linear-gradient(135deg,var(--brand-primary),var(--brand-accent));
    box-shadow: 0 8px 28px color-mix(in srgb, var(--brand-primary), transparent 50%), 0 2px 8px rgba(0,0,0,0.15);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.btn-hero-primary:hover { color: #fff; transform: translateY(-2px); }

.btn-hero-secondary {
    padding: 14px 28px; border-radius: 999px; font-size: 15px; font-weight: 700;
    border: 1px solid rgba(255,255,255,0.45); color: var(--hero-text);
    background: rgba(255,255,255,0.08); backdrop-filter: blur(8px);
    text-decoration: none;
    transition: background .2s ease, border-color .2s ease;
}
.btn-hero-secondary:hover { color: var(--hero-text); background: rgba(255,255,255,0.14); }

@media (max-width: 768px) {
    .section-hero.section-hero--module {
        min-height: 320px;
        padding: 56px 20px 72px;
    }
}