/**
 * new2026 首页专用样式
 * 1. 首屏 Hero 模式导航（透明浮动 → 滚动后固定白底）
 * 2. 第一屏全屏幻灯片
 * 3. 第二屏「游览指南 + 景区天气」卡片
 */

/* ========== 1. Hero 模式导航 ========== */

.header-hero {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.header-hero .header-main-v2 {
    background: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 浮动状态：顶层导航与操作区文字反白（子代选择器，波及不到白底下拉面板；
   选择器对齐 header2.php 的 Tailwind 标记——根元素 text-white 会被 Bootstrap 的
   a{color} 元素规则压掉继承，必须在此显式反白） */
.header-hero nav.header-nav-v2 > ul > li > a,
.header-hero nav.header-nav-v2 > ul > li > button,
.header-hero .header-actions-v2 > a,
.header-hero .header-actions-v2 > .relative > button {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.header-hero nav.header-nav-v2 > ul > li > a:hover,
.header-hero nav.header-nav-v2 > ul > li > button:hover,
.header-hero .header-actions-v2 > a:hover,
.header-hero .header-actions-v2 > .relative > button:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* 小屏折叠按钮反白（bi-list 字体图标跟 color 走） */
.header-hero .header-nav-toggler {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* 固定状态：白底深色字 + 阴影（恢复默认视觉） */
.header-hero.is-stuck .header-main-v2 {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.header-hero.is-stuck nav.header-nav-v2 > ul > li > a,
.header-hero.is-stuck nav.header-nav-v2 > ul > li > button,
.header-hero.is-stuck .header-actions-v2 > a,
.header-hero.is-stuck .header-actions-v2 > .relative > button {
    color: #111925 !important;
    text-shadow: none;
}

.header-hero.is-stuck nav.header-nav-v2 > ul > li > a:hover,
.header-hero.is-stuck nav.header-nav-v2 > ul > li > button:hover,
.header-hero.is-stuck .header-actions-v2 > a:hover,
.header-hero.is-stuck .header-actions-v2 > .relative > button:hover {
    color: #376161 !important;
}

.header-hero.is-stuck .header-nav-toggler {
    color: #111925 !important;
    text-shadow: none;
}

/* 语言/用户/导航下拉面板自带白底墨字（bg-white text-ink），不受 Hero 反白影响，无需额外规则 */

/* ========== 2. 第一屏全屏幻灯片 ========== */

.home-hero {
    position: relative;
    height: auto;
    aspect-ratio: 1920 / 1080;
    max-height: 1080px;
    min-height: 480px;
    overflow: hidden;
}

.home-hero .swiper {
    height: 100%;
}

/* 覆盖 style.css 通用 .swiper-slide 规则（flex 居中 + max-height 510px），保证全宽铺满 */
.home-hero .swiper-slide {
    display: block;
    height: 100%;
    max-height: none;
    background: transparent;
    text-align: left;
    font-size: inherit;
}

.home-hero .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.home-hero .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-hero-fallback {
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* 顶部渐变遮罩，保证白色浮动导航在亮色图上可读 */
.home-hero-shade {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.45), transparent);
    pointer-events: none;
    z-index: 5;
}

/* Swiper 指示器：白色长条，延续原 Bootstrap 指示器观感 */
.home-hero .swiper-pagination {
    bottom: 12px; /* 覆盖 style.css 中 bottom: unset 的全局规则 */
    z-index: 6;
}

.home-hero .swiper-pagination-bullet {
    width: 30px;
    height: 3px;
    border-radius: 0;
    background: #fff;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.home-hero .swiper-pagination-bullet-active {
    opacity: 1;
}

/* Swiper 左右切换箭头：白色 */
.home-hero .swiper-button-prev,
.home-hero .swiper-button-next {
    color: #fff;
}

/* ========== 3. 第二屏：游览指南 + 景区天气 ========== */

.home-guide-weather {
    padding: 3rem 0;
    background: #f5f7f8;
}

.home-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 1.5rem;
    height: 100%;
}

.home-card-header {
    margin-bottom: 1rem;
}

.home-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111925;
}

.home-card-subtitle {
    font-size: 1.05rem;
    font-weight: 600;
}

.home-card-subtitle a {
    color: #111925;
    text-decoration: none;
}

.home-card-subtitle a:hover {
    color: #376161;
}

.home-card-more {
    font-size: 0.875rem;
    color: #999;
    text-decoration: none;
}

.home-card-more:hover {
    color: #376161;
}

.guide-date {
    font-size: 0.9rem;
}

/* 天气卡片 */
.weather-card tour-weather-widget {
    display: block;
}

/* ========== 4. 三大游览区（通栏行，图文交替） ========== */

/* 居中板块标题：中文主标题 + 装饰线 + 英文小字 */
.section-head {
    text-align: center;
    margin-bottom: 2rem;
}

.section-head-title {
    position: relative;
    display: inline-block;
    margin-bottom: 0.4rem;
    padding: 0 1.75rem;
    font-size: 2rem;
    font-weight: 600;
    color: #111925;
}

.section-head-title::before,
.section-head-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 2.5rem;
    height: 2px;
    background: #376161;
    opacity: 0.35;
}

.section-head-title::before {
    right: 100%;
}

.section-head-title::after {
    left: 100%;
}

.section-head-sub {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #9aa5a5;
}

/* 标题内链接（如 VR全景导览）继承标题颜色，不显示默认链接色 */
.section-head-title a {
    color: inherit;
    text-decoration: none;
}

.section-head-title a:hover {
    color: #376161;
}

@media (max-width: 767.98px) {
    .section-head {
        margin-bottom: 1.25rem;
    }

    .section-head-title {
        font-size: 1.4rem;
        padding: 0 1.25rem;
    }

    .section-head-title::before,
    .section-head-title::after {
        width: 1.5rem;
    }
}

.area-row {
    display: flex;
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    margin-bottom: 1.5rem;
}

.area-row.reverse {
    flex-direction: row-reverse;
}

/* 象山/伏波叠彩 并排两栏：各占 50%，卡片纵向布局（上图下文） */
.area-pair {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
}

.area-pair .area-row {
    flex: 1 1 50%;
    min-width: 0;
    flex-direction: column;
}

/* 图片区 */
.area-media {
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

/* 并排卡片内图片区：固定 16:9 比例 */
.area-pair .area-media {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 9;
}

.area-media-link {
    position: absolute;
    inset: 0;
    display: block;
}

.area-media-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.area-row:hover .area-media-link img {
    transform: scale(1.04);
}

.area-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    background: rgba(55, 97, 97, 0.9);
    color: #fff;
    padding: 0.25rem 0.875rem;
    border-radius: 2rem;
    font-size: 0.8rem;
}

.area-row.reverse .area-tag {
    left: auto;
    right: 1rem;
}

.area-vr {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    z-index: 2;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.8rem;
    padding: 0.375rem 0.875rem;
    border-radius: 2rem;
    text-decoration: none;
    backdrop-filter: blur(2px);
}

.area-vr:hover {
    background: rgba(55, 97, 97, 0.9);
    color: #fff;
}

.area-row.reverse .area-vr {
    left: auto;
    right: 1rem;
}

/* 内容主区 */
.area-body {
    flex: 1;
    min-width: 0;
    padding: 1.625rem 1.875rem;
    display: flex;
    flex-direction: column;
}

.area-name {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.area-name a {
    color: #111925;
    text-decoration: none;
}

.area-name a:hover {
    color: #376161;
}

.area-name small {
    font-size: 0.75rem;
    color: #999;
    font-weight: 400;
    letter-spacing: 1px;
}

.area-badge-5a {
    font-size: 0.7rem;
    font-weight: 600;
    color: #b8860b;
    border: 1px solid #e3c97b;
    background: #fdf6e3;
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
}

.area-intro {
    color: #777;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

/* 主要景点 */
.area-spots {
    margin-bottom: 0.875rem;
}

.area-spots .spots-label {
    font-size: 0.8rem;
    color: #888;
    margin-right: 0.375rem;
}

.spot-pill {
    display: inline-block;
    font-size: 0.8rem;
    color: #376161;
    border: 1px solid #d3e0e0;
    border-radius: 2rem;
    padding: 0.125rem 0.75rem;
    margin: 0 0.375rem 0.375rem 0;
    text-decoration: none;
    transition: all 0.2s;
}

.spot-pill:hover {
    background: #376161;
    border-color: #376161;
    color: #fff;
}

/* 时间 + 电话信息条（时间、电话、救援各占一行） */
.area-info {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: flex-start;
    background: #f0f6f6;
    border-radius: 0.625rem;
    padding: 0.625rem 1rem;
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
    color: #333;
}

.area-info i {
    color: #376161;
    margin-right: 0.25rem;
}

/* 咨询、救援等电话类同行展示 */
.area-info-phones {
    display: flex;
    gap: 0.375rem 1.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.area-info .label {
    color: #888;
}

.area-info .value {
    font-weight: 600;
}

.area-info .note {
    color: #d4351c;
    font-size: 0.75rem;
}

/* 最新动态：一行一条，左标题右日期 */
.area-notice {
    font-size: 0.82rem;
    margin-top: auto;
}

.area-notice .notice-label {
    color: #888;
    margin-bottom: 0.25rem;
}

.area-notice ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.area-notice li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0;
}

.area-notice li + li {
    border-top: 1px dashed #eef1f1;
}

.area-notice li a {
    color: #555;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 0.75rem;
}

.area-notice li a::before {
    content: "· ";
    color: #376161;
    font-weight: 700;
}

.area-notice li a:hover {
    color: #376161;
}

.area-notice li .notice-date {
    color: #aaa;
    font-size: 0.75rem;
    white-space: nowrap;
}

/* 移动端：纵向堆叠 */
@media (max-width: 767.98px) {
    .area-row,
    .area-row.reverse {
        flex-direction: column;
    }

    .area-pair {
        flex-direction: column;
        gap: 0;
    }

    .area-media {
        flex: none;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .area-body {
        padding: 1.25rem;
    }
}

/* ========== 5. 新闻中心（选项卡：左焦点图 + 右列表） ========== */

/* 选项卡 */
.news-tabs {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    margin-bottom: 2rem;
}

.news-tab {
    border: 0;
    background: none;
    padding: 0 0.25rem 0.6rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #555;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.news-tab:hover {
    color: #376161;
}

.news-tab.active {
    color: #376161;
    border-bottom-color: #376161;
}

/* 焦点新闻：图片 + 底部渐变叠加标题/摘要 */
.news-focus {
    position: relative;
    display: block;
    height: 400px;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.news-focus-img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
    display: block;
}

.news-focus-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 2.75rem 1.5rem 1.25rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.68), rgba(0, 0, 0, 0));
    color: #fff;
}

.news-focus-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 焦点新闻无封面时：浅色底卡 + 深色文字 */
.news-focus.no-cover {
    display: flex;
    align-items: flex-end;
    background: #f4f7f7;
}

.news-focus.no-cover .news-focus-overlay {
    position: static;
    padding: 1.5rem;
    background: none;
}

.news-focus.no-cover .news-focus-title {
    color: #111925;
}

/* 右侧列表：日期块 + 标题 + 单行摘要 */
.news-items {
    display: flex;
    flex-direction: column;
    height: 400px;
}

.news-item {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid #eef1f1;
    text-decoration: none;
}

.news-item:last-child {
    border-bottom: 0;
}

.news-item-date {
    flex: none;
    width: 3.2rem;
    padding-right: 1rem;
    border-right: 1px solid #eef1f1;
    text-align: center;
}

.news-item-day {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    color: #376161;
}

.news-item-ym {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: #aaa;
    white-space: nowrap;
}

.news-item-body {
    flex: 1;
    min-width: 0;
}

.news-item-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111925;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-item:hover .news-item-title {
    color: #376161;
}

.news-item-excerpt {
    font-size: 0.85rem;
    color: #999;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 底部查看更多 */
.news-more {
    text-align: center;
    margin-top: 1.75rem;
}

.news-more a {
    color: #888;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
}

.news-more a:hover {
    color: #376161;
}

@media (max-width: 991.98px) {
    .news-focus {
        height: auto;
        margin-bottom: 0.5rem;
    }

    .news-focus-img {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .news-items {
        height: auto;
    }
}

@media (max-width: 767.98px) {
    .news-tabs {
        gap: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .news-tab {
        font-size: 0.95rem;
    }
}

/* ========== 6. 游客中心入口（位于游览指南卡片内） ========== */

.guide-services {
    margin-top: 0.75rem;
}

.guide-services .service-entry {
    padding: 1rem 0.5rem;
}

.service-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 1.25rem 0.5rem;
    border: 1px solid #eef1f1;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: all 0.2s ease;
    height: 100%;
}

.service-entry i {
    font-size: 1.6rem;
    color: #376161;
}

.service-entry-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111925;
}

.service-entry-desc {
    font-size: 0.78rem;
    color: #999;
}

.service-entry:hover {
    border-color: #376161;
    box-shadow: 0 4px 14px rgba(55, 97, 97, 0.15);
}