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

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

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

/*
 * 顶层导航与右侧动作入口（选择器只命中一层项；
 * 下拉面板、移动端折叠面板内的链接不在其中，保持白底深色）。
 * style.css 的全局 a{color:rgba(0,0,0,.8)} 与按钮 UA 默认色
 * 均为非分层规则，会压过分层的 Tailwind 工具类，故此处同为
 * 非分层且以更高优先级覆盖。
 */
.header-hero nav[aria-label="切换导航"] > ul > li > a,
.header-hero nav[aria-label="切换导航"] > ul > li > button,
.header-hero button[aria-label="切换语言"],
.header-hero a[aria-label="登录注册"],
.header-hero button[aria-controls="headerNavCollapse"] {
    transition: color 0.2s ease;
}

/* 浮动状态（幻灯片上，JS 未加 bg-white）：浅色文字 + 阴影，深色图片上保证可读 */
.header-hero:not(.bg-white) nav[aria-label="切换导航"] > ul > li > a,
.header-hero:not(.bg-white) nav[aria-label="切换导航"] > ul > li > button,
.header-hero:not(.bg-white) button[aria-label="切换语言"],
.header-hero:not(.bg-white) a[aria-label="登录注册"],
.header-hero:not(.bg-white) button[aria-controls="headerNavCollapse"] {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.header-hero:not(.bg-white) nav[aria-label="切换导航"] > ul > li > a:hover,
.header-hero:not(.bg-white) nav[aria-label="切换导航"] > ul > li > button:hover,
.header-hero:not(.bg-white) a[aria-label="登录注册"]:hover,
.header-hero:not(.bg-white) button[aria-label="切换语言"]:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* 固定状态（滚出首屏，JS 切换为白底深字顶栏） */
.header-hero.bg-white nav[aria-label="切换导航"] > ul > li > a,
.header-hero.bg-white nav[aria-label="切换导航"] > ul > li > button,
.header-hero.bg-white button[aria-label="切换语言"],
.header-hero.bg-white a[aria-label="登录注册"],
.header-hero.bg-white button[aria-controls="headerNavCollapse"] {
    color: #111925;
    text-shadow: none;
}

.header-hero.bg-white nav[aria-label="切换导航"] > ul > li > a:hover,
.header-hero.bg-white nav[aria-label="切换导航"] > ul > li > button:hover,
.header-hero.bg-white a[aria-label="登录注册"]:hover,
.header-hero.bg-white button[aria-label="切换语言"]:hover {
    color: #376161;
}

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

.home-hero {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 1920 / 1080;
    /* 高度不封顶：跟随屏宽按 1920/1080 等比放大（>1920 宽屏不出现右侧空白） */
    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);
}