/* ==========================================================
   聊城仲裁委员会官网 — 首页样式（2026 重设计）
   参考：上海仲裁委（服务前置宫格）/ 青岛仲裁委（轮播 + Tab 信息区）
   说明：仅首页加载（index.php 通过 $extraCss 引入），不影响其他页面
   ========================================================== */
:root {
    --hero-grad: linear-gradient(135deg, #0a2a56 0%, #11498f 52%, #1d6ad2 100%);
    --h-radius: 18px;
    --h-shadow: 0 10px 30px rgba(10, 42, 86, .14);
    /* 以下为「主题设置」可切换的首页配色（此处为默认深蓝主题；政务红由页头按后台设置覆盖） */
    --hero-wrap-bg: linear-gradient(180deg, #eef3fa 0%, #f5f7fb 100%);
    /* 「仲裁示范条款」装饰条底色：默认深蓝，政务红主题下由页头覆盖为主题色 */
    --band-bg: linear-gradient(120deg, #0c2f63, #16508f);
    --slide-fallback-bg: linear-gradient(135deg, #0d2b57, #1d6ad2);
    --soft-bg: #e8f1fd;
    --soft-border: #d9e6f9;
    --soft-line: #e8eef7;
    --soft-text: #2c4a75;
}

/* ==================== 网上立案办案入口横条（导航与焦点图之间，后台可编辑） ==================== */
.entry-bar {
    /* 默认宽度与下方 .wrap 内容区一致：min(1200px,100vw) - 32px */
    width: var(--entry-w, min(1168px, calc(100vw - 32px)));
    max-width: 100%;
    margin: 0 auto;
    height: var(--entry-h, 100px);
    border-radius: var(--entry-radius, 12px);
    /* 留空时跟随站点主题（--band-bg 在政务红主题下由页头覆盖） */
    background: var(--entry-bg, var(--band-bg));
    color: var(--entry-fg, #fff);
    position: relative;
    overflow: hidden;
}
.entry-bar::before {
    content: '';
    position: absolute;
    right: -60px; top: -150px;
    width: 430px; height: 330px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}
.entry-inner { height: 100%; padding: 0 16px; position: relative; z-index: 1; }
.entry-main {
    display: flex; align-items: center;
    justify-content: var(--entry-justify, center);
    gap: 16px;
    width: 100%; height: 100%;
    color: inherit;
}
a.entry-main:hover { color: inherit; }
.entry-emblem {
    flex: 0 0 auto;
    width: calc(var(--entry-icon, 26px) + 20px);
    height: calc(var(--entry-icon, 26px) + 20px);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .14);
    border-radius: 12px;
}
.entry-emblem svg { width: var(--entry-icon, 26px); height: var(--entry-icon, 26px); }
.entry-title {
    font-size: var(--entry-text-size, 26px);
    font-weight: 700;
    letter-spacing: 4px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .12);
}
.entry-cta {
    flex: 0 0 auto;
    padding: 9px 20px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 999px;
    background: rgba(255, 255, 255, .13);
    font-size: 14px;
    letter-spacing: 1px;
    transition: background .2s, transform .2s;
}
a.entry-main:hover .entry-cta { background: rgba(255, 255, 255, .28); transform: translateX(3px); }
.entry-cta i { font-style: normal; margin-left: 6px; }
@media (max-width: 767px) {
    .entry-main { gap: 10px; }
    .entry-emblem {
        width: calc(min(var(--entry-icon, 26px), 22px) + 16px);
        height: calc(min(var(--entry-icon, 26px), 22px) + 16px);
    }
    .entry-emblem svg {
        width: min(var(--entry-icon, 26px), 22px);
        height: min(var(--entry-icon, 26px), 22px);
    }
    .entry-title { font-size: min(var(--entry-text-size, 26px), 20px); letter-spacing: 1px; }
    .entry-cta { padding: 7px 12px; font-size: 12.5px; letter-spacing: 0; }
}

/* ==================== 首屏 ==================== */
.hero {
    background: var(--hero-wrap-bg);
    padding: 26px 0 30px;
    position: relative;
}

.hero-grid {
    display: grid;
    /* 轮播框架宽度可调；服务区自适应填满剩余宽度，始终与内容区右边缘对齐 */
    grid-template-columns: min(var(--slider-w, 560px), calc(100% - 264px)) minmax(240px, 1fr);
    gap: 24px;
    position: relative;
    z-index: 1;
}

/* 轮播（覆盖 style.css 默认尺寸，DOM 结构与 main.js 轮播脚本保持兼容） */
.hero .slider {
    height: var(--slider-h, 360px);
    min-height: var(--slider-h, 360px);
    overflow: hidden;
    border-radius: var(--h-radius);
    box-shadow: var(--h-shadow);
}
.slide img {
    width: 100%; height: 100%;
    object-fit: var(--slider-fit, cover);
    display: block;
}
.slide .caption {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 46px 26px 18px;
    /* 中性深色遮罩（照片上文字），不随主题偏蓝/偏红 */
    background: linear-gradient(transparent, rgba(18, 20, 24, .82));
}
.slide-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0 80px;
    background: var(--slide-fallback-bg);
    color: #fff;
}
.slide-fallback .sf-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 1px;
    text-align: center;
}
.slide.no-img .caption { display: none; }
.slider-dot { width: 22px; height: 5px; border-radius: 3px; }
.slider-dot.on { width: 34px; }

/* 快捷服务（参考上海仲裁委「服务直达」宫格） */
.hero-service {
    background: #fff;
    border-radius: var(--h-radius);
    box-shadow: var(--h-shadow);
    padding: 20px 20px 22px;
    display: flex;
    flex-direction: column;
}
.hs-title {
    font-size: 17px;
    color: var(--primary-dark);
    margin-bottom: 16px;
}
.hs-title small {
    font-size: 12px;
    font-weight: 400;
    color: #93a2b8;
    letter-spacing: 1px;
    margin-left: 8px;
}
.hs-grid {
    display: grid;
    /* 轮播缩小后服务区变宽，改为 4 列 2 行并等高撑满，与轮播齐平更协调 */
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 1fr;
    gap: 10px;
    flex: 1;
}
.hs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 4px;
    border-radius: 12px;
    border: 1px solid var(--soft-border);
    background: var(--soft-bg);
    color: var(--soft-text);
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.hs-item svg { width: 26px; height: 26px; transition: transform .2s ease; }
.hs-item span { font-size: 13px; }
.hs-item:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--h-shadow);
    transform: translateY(-3px);
}
.hs-item:hover svg { transform: scale(1.08); }

/* ==================== 主体网格 ==================== */
.section { padding: 30px 0 8px; }
.main-grid {
    display: grid;
    grid-template-columns: 1fr 336px;
    gap: 24px;
    align-items: stretch;
}
.panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.main-side { display: flex; flex-direction: column; gap: 24px; }

/* 左右两列等高：左列面板网格叠放（高度恒取最高面板），右列公告卡弹性吸收，两列底边对齐 */
.main-grid > .panel { display: grid; grid-template-rows: auto 1fr; }
.main-grid > .panel .panel-head { grid-row: 1; grid-column: 1; }
.main-grid > .panel .tab-pane { grid-row: 2; grid-column: 1; }
.main-side .panel:first-child { flex: 1; display: flex; flex-direction: column; }
.main-side .panel:first-child .panel-head { flex-shrink: 0; }
.main-side .panel:first-child .notice-content { flex: 1; max-height: none; }
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px 0;
}
.panel-title {
    position: relative;
    padding-left: 13px;
    font-size: 17px;
    color: var(--primary-dark);
}
.panel-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 4px;
    border-radius: 2px;
    background: var(--primary);
}
.panel .more { font-size: 13px; color: #93a2b8; }
.panel .more:hover { color: var(--primary); }
.panel-body { padding: 14px 22px 18px; }

/* Tab（参考青岛仲裁委信息区切换模式） */
.tabs { display: flex; gap: 4px; }
.tabs .tab {
    position: relative;
    padding: 4px 14px 12px;
    font-size: 17px;
    font-weight: 600;
    color: #97a4b8;
    cursor: pointer;
}
.tabs .tab::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 4px;
    height: 3px;
    border-radius: 2px;
    background: transparent;
    transition: background .2s;
}
.tabs .tab:hover { color: var(--primary); }
.tabs .tab.on { color: var(--primary-dark); }
.tabs .tab.on::after { background: var(--primary); }

/* 三个面板叠放在同一网格单元：容器高度取最高面板，Tab 切换不跳动 */
.tab-pane {
    padding: 12px 22px 20px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .25s;
}
.tab-pane.on {
    visibility: visible;
    opacity: 1;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

/* 列表 */
.nl li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--soft-line);
}
.nl li:last-child { border-bottom: none; }
.nl a {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #333;
}
.nl a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--soft-border);
    margin-right: 10px;
    vertical-align: 3px;
    transition: background .2s;
}
.nl li:hover a { color: var(--primary); }
.nl li:hover a::before { background: var(--primary); }
.nl .date { flex-shrink: 0; font-size: 13px; color: #9aa3b2; }

/* 公告 / 热门 */
.notice-content {
    max-height: 252px;
    overflow: auto;
    font-size: 14px;
    line-height: 1.9;
    color: #46505f;
}
.notice-content a { color: var(--primary); }

.hot-list li {
    padding: 9px 0;
    border-bottom: 1px dashed var(--soft-line);
}
.hot-list li:last-child { border-bottom: none; }
.hot-list a {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: 14.5px;
    color: #333;
}
.hot-list a:hover { color: var(--primary); }
.hot-list .rank {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 6px;
    background: #f0f1f3;
    color: #8a93a6;
    font-size: 12px;
    font-weight: 700;
}
.hot-list li:nth-child(-n+3) .rank { background: var(--primary); color: #fff; }

/* ==================== 示范条款条 ==================== */
.terms-bar {
    margin-top: 26px;
    /* 跟随主题（后台「主题设置」）：--band-bg 由主题变量覆盖，红色主题下为深红渐变 */
    background: var(--band-bg);
}
.terms-inner {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 22px;
    padding-bottom: 22px;
}
.terms-label {
    flex-shrink: 0;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 13.5px;
    letter-spacing: 1px;
}
.terms-text {
    flex: 1;
    min-width: 260px;
    color: rgba(255, 255, 255, .88);
    font-size: 15.5px;
}
.terms-text b { color: #fff; }
.terms-more {
    flex-shrink: 0;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    padding-bottom: 2px;
}
.terms-more:hover { color: #ffe9b3; border-color: #ffe9b3; }

/* ==================== 友情链接条 ==================== */
.links-bar {
    margin-top: 26px;
    background: #fff;
    border-top: 1px solid var(--soft-line);
    border-bottom: 1px solid var(--soft-line);
}
.links-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 18px;
    padding-bottom: 18px;
}
.links-label {
    flex-shrink: 0;
    font-size: 14px;
    letter-spacing: 1px;
    color: #93a2b8;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1080px) {
    .hero-grid { grid-template-columns: 1fr; }
    .hero .slider {
        height: min(var(--slider-h, 360px), 320px);
        min-height: min(var(--slider-h, 360px), 320px);
    }
    .hs-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
    .main-grid { grid-template-columns: 1fr; }
    .hs-grid { grid-template-columns: repeat(2, 1fr); }
    .hero .slider {
        height: min(var(--slider-h, 360px), 240px);
        min-height: min(var(--slider-h, 360px), 240px);
    }
    .slide .caption { font-size: 15.5px; padding: 34px 16px 12px; }
    .slide-fallback .sf-title { font-size: 18px; }
    .tabs .tab { font-size: 15.5px; padding: 4px 8px 12px; }
}