/* 顶部信息条 */
.top-bar {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    background-color: #f6f6f6;
}
.top-bar-inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    gap: 40px;
}
.top-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    order: 1;
}
.top-logo-img {
    width: 261px;
    height: 40px;
    object-fit: contain;
}
.top-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.top-logo-title {
    font-size: 21px;
    font-weight: bold;
    color: #C7000B;
    letter-spacing: 1px;
    white-space: nowrap;
}
.top-logo-sub {
    font-size: 11px;
    color: #C7000B;
    font-family: Arial, sans-serif;
    letter-spacing: 0.5px;
}
.top-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    order: 2;
    /* margin-left: auto; */
}
.top-nav-item {
    position: relative;
    font-size: 18px;
    line-height: 28px;
    color: #333333;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.top-nav-item:hover {
    color: #034aa1;
}
.top-tools {
    order: 3;
    margin-left: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 20px;
    color: #999999;
    flex-shrink: 0;
}
.top-tools a {
    color: #999999;
    text-decoration: none;
}
.top-tools a:hover {
    color: #3473B6;
}

/* ==================== 长辈版 ==================== */
/* 按钮文案：默认「长辈版」，开启后「退出长辈版」 */
#elderToggle .elder-exit {
    display: none;
}
html[data-elder="1"] #elderToggle .elder-enter {
    display: none;
}
html[data-elder="1"] #elderToggle .elder-exit {
    display: inline;
}

/* 全站文字放大到 30px */
html[data-elder="1"] body * {
    font-size: 30px !important;
    line-height: 1.6 !important;
    overflow-wrap: break-word;
}

/* ---------- 顶部信息条：logo 与工具区左右对齐，导航另起一行 ---------- */
html[data-elder="1"] .top-bar {
    height: auto;
}
html[data-elder="1"] .top-bar-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "logo tools"
        "nav nav";
    align-items: center;
    gap: 12px 32px;
    padding: 16px 24px;
}
html[data-elder="1"] .top-logo {
    grid-area: logo;
    justify-self: start;
}
html[data-elder="1"] .top-logo-img {
    width: auto;
    height: 48px !important;
}
html[data-elder="1"] .top-tools {
    grid-area: tools;
    justify-self: end;
    flex-wrap: wrap;
    gap: 8px 20px;
}
html[data-elder="1"] .top-nav {
    grid-area: nav;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 8px 20px;
}

/* ---------- 横幅 ---------- */
/* 横幅标题原本 36px，放大后不应反而变小 */
html[data-elder="1"] .banner-title {
    font-size: 44px !important;
    line-height: 1.4 !important;
}

/* ---------- 主导航：固定高度改为自适应并换行 ---------- */
html[data-elder="1"] .nav {
    height: auto !important;
    min-height: 0;
    padding: 12px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
html[data-elder="1"] .nav-container {
    height: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
html[data-elder="1"] .nav-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}
html[data-elder="1"] .nav-item {
    padding: 4px 12px;
}
html[data-elder="1"] .nav-divider {
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
    display: flex;
    align-items: center;
}

/* ---------- 页面主体通用 ---------- */
html[data-elder="1"] .main {
    padding: 32px 24px;
}
html[data-elder="1"] .section-header {
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 32px;
}
html[data-elder="1"] .section-title::before,
html[data-elder="1"] .page-title::before {
    height: 30px !important;
}
html[data-elder="1"] .breadcrumb-separator {
    width: auto !important;
    height: auto !important;
}

/* ---------- 首页：岗位/创业服务/招聘会 ---------- */
/* 固定尺寸卡片改为弹性宽度、自适应高度，一行放不下自动换行 */
html[data-elder="1"] .job-card {
    width: auto !important;
    height: auto !important;
    flex: 1 1 360px;
    min-width: 0;
}
html[data-elder="1"] .service-item {
    height: auto !important;
    align-items: flex-start;
    gap: 16px;
}
html[data-elder="1"] .recruitment-card {
    width: auto !important;
    height: auto !important;
    flex: 1 1 420px;
    max-width: 620px;
    min-width: 0;
}
html[data-elder="1"] .recruitment-image {
    height: 200px !important;
}
html[data-elder="1"] .recruitment-title,
html[data-elder="1"] .job-title,
html[data-elder="1"] .service-title {
    margin-bottom: 8px;
}

/* ---------- 列表类页面：左右结构允许换行 ---------- */
html[data-elder="1"] .job-fair-item,
html[data-elder="1"] .site-activity-item,
html[data-elder="1"] .activity-item,
html[data-elder="1"] .best-practice-item {
    flex-wrap: wrap;
    gap: 16px 24px;
}
html[data-elder="1"] .job-fair-content,
html[data-elder="1"] .site-activity-item .activity-content,
html[data-elder="1"] .activity-content,
html[data-elder="1"] .best-practice-content {
    min-width: 280px;
}
/* 列表里的配图保持原比例，不跟随详情页图片规则拉伸 */
html[data-elder="1"] .site-activity-item .activity-image {
    width: 220px !important;
    height: 165px !important;
    flex: 0 0 220px;
    margin-right: 0;
}
html[data-elder="1"] .job-fair-image {
    width: 300px !important;
    height: 205px !important;
    flex: 0 0 300px;
    align-self: flex-start;
}
html[data-elder="1"] .job-fair-info-item,
html[data-elder="1"] .activity-info {
    flex-wrap: wrap;
}
html[data-elder="1"] .job-fair-info-item {
    align-items: flex-start;
    gap: 10px;
}
html[data-elder="1"] .job-fair-info-icon {
    width: 34px !important;
    height: auto !important;
    flex: 0 0 34px;
    text-align: center;
}
html[data-elder="1"] .arrow-button {
    width: auto;
    min-width: 44px;
    height: auto;
    padding: 4px 10px;
}

/* ---------- 详情页图片 ---------- */
html[data-elder="1"] .job-details {
    grid-template-columns: repeat(2, 1fr) !important;
}
html[data-elder="1"] .case-image,
html[data-elder="1"] .activity-image,
html[data-elder="1"] .activity-detail-image {
    max-width: 100% !important;
    height: auto !important;
}

/* ---------- 列表筛选区 ---------- */
html[data-elder="1"] .filter-content {
    gap: 16px;
}
html[data-elder="1"] .filter-item {
    width: auto !important;
    flex: 1 1 260px;
    min-width: 0;
}
html[data-elder="1"] .filter-select,
html[data-elder="1"] .filter-input,
html[data-elder="1"] .search-input,
html[data-elder="1"] .search-btn,
html[data-elder="1"] .reset-btn,
html[data-elder="1"] .btn {
    height: auto !important;
    min-height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
}
html[data-elder="1"] .job-item-content {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px 24px;
}
html[data-elder="1"] .job-item-left {
    flex-wrap: wrap;
    gap: 12px 24px;
}
html[data-elder="1"] .job-item-column {
    min-width: 0;
    flex: 1 1 240px;
}
html[data-elder="1"] .job-item-right {
    flex: 0 0 auto;
    margin-left: auto;
}
html[data-elder="1"] .job-item-button {
    width: auto !important;
    min-width: 160px;
    padding: 8px 20px;
    white-space: nowrap;
}

/* ---------- 分页 ---------- */
html[data-elder="1"] .pagination {
    flex-wrap: wrap;
    gap: 8px;
}
html[data-elder="1"] .pagination-item {
    height: auto !important;
    min-height: 48px;
    padding: 8px 16px;
}

/* ---------- 就业地图 ---------- */
html[data-elder="1"] .content-wrapper {
    height: auto !important;
    min-height: 0;
    flex-wrap: wrap;
}
html[data-elder="1"] .map-section {
    flex: 1 1 620px;
    min-width: 0;
}
html[data-elder="1"] .map-container {
    height: 520px !important;
    flex: none;
}
html[data-elder="1"] .map-toolbar {
    flex-wrap: wrap;
    gap: 12px;
}
html[data-elder="1"] .search-input {
    max-width: 100%;
}
html[data-elder="1"] .filter-select {
    min-width: 160px;
}
html[data-elder="1"] .station-panel {
    width: auto !important;
    flex: 1 1 100%;
    max-height: none;
}
html[data-elder="1"] .station-item {
    flex-wrap: wrap;
    gap: 12px;
}
html[data-elder="1"] .station-img {
    width: 80px;
    height: 80px;
}
html[data-elder="1"] .marker-popup {
    width: 280px !important;
}

/* ---------- 友情链接 / 页脚 ---------- */
html[data-elder="1"] .friend-link-group {
    flex-wrap: wrap;
    gap: 8px 16px;
}
html[data-elder="1"] .friend-link-title {
    min-width: auto;
    text-align: left;
}
html[data-elder="1"] .footnav {
    padding: 24px 0;
}
/* 页脚资质图标不再绝对定位，避免压住放大的文字 */
html[data-elder="1"] .footnav .dzjg,
html[data-elder="1"] .footnav .jiucuo {
    position: static !important;
    display: inline-block;
    vertical-align: middle;
    margin: 6px 8px;
}
html[data-elder="1"] .footnav span {
    display: inline-block;
}

@media (max-width: 1220px) {
    .top-bar-inner {
        gap: 20px;
    }
    .top-nav {
        gap: 12px;
    }
    .top-nav-item {
        font-size: 16px;
    }
}

@media (max-width: 1100px) {
    .top-bar {
        height: auto;
        min-height: 48px;
    }
    .top-bar-inner {
        flex-wrap: wrap;
        gap: 12px 24px;
        padding: 12px 24px;
    }
    .top-nav {
        gap: 12px;
    }
    .top-nav-item {
        font-size: 14px;
    }
    .top-tools {
        margin-left: 12px;
        gap: 6px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .top-bar-inner {
        padding: 12px 16px;
    }
    .top-logo-img {
        width: auto;
        height: 32px;
    }
    .top-tools {
        display: none;
    }
    .top-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
        gap: 14px;
        padding-bottom: 2px;
    }
    .top-nav-item {
        font-size: 13px;
    }
}