/* ===== 响应式设计样式文件 ===== */
/* 包含移动端、平板端等不同屏幕尺寸的适配样式 */

/* ===== 平板端适配（768px以下） ===== */
@media (max-width: 768px) {

    /* === 头部响应式调整 === */

    /* 头部容器调整为垂直布局 */
    .header-container {
        flex-direction: column;
        /* 改为垂直排列，避免水平空间不足 */
        gap: 0.8rem;
        /* 子元素间距0.8rem */
    }

    /* 导航链接容器调整 */
    .nav-links {
        gap: 1rem;
        /* 减小间距到1rem，节省空间 */
        flex-wrap: wrap;
        /* 允许换行 */
        justify-content: center;
        /* 居中对齐 */
    }

    /* === 搜索区域响应式调整 === */

    /* 搜索框容器改为垂直布局 */
    .search-box-container {
        flex-direction: column;
        /* 搜索框和按钮垂直排列 */
    }

    /* 筛选器容器调整 */
    .filters-container {
        flex-direction: column;
        /* 筛选器和清除按钮垂直排列 */
        align-items: stretch;
        /* 拉伸对齐，充分利用宽度 */
    }

    /* === 主要布局响应式调整 === */

    /* 左右分栏布局改为垂直布局 */
    .jobs-main-layout {
        flex-direction: column;
        /* 移动端改为垂直排列 */
        height: auto;
        /* 高度自适应 */
        min-height: unset;
        /* 取消最小高度限制 */
        gap: 1rem;
        /* 减小间距到1rem */
    }

    /* 职位列表面板调整 */
    .jobs-list-panel {
        flex: none;
        /* 取消flex属性 */
        width: 100%;
        /* 宽度100% */
        max-height: 50vh;
        /* 最大高度为视口的50% */
        min-height: 300px;
        /* 最小高度300px */
    }

    /* 职位详情面板调整 */
    .job-detail-panel {
        flex: 1;
        /* 占据剩余空间 */
        min-height: 400px;
        /* 最小高度400px */
    }

    /* 职位详情头部调整 */
    .job-detail-header {
        flex-direction: column;
        /* 垂直排列 */
        align-items: stretch;
        /* 拉伸对齐 */
        gap: 1rem;
        /* 子元素间距1rem */
    }

    /* 职位详情操作按钮组 */
    .job-detail-actions {
        justify-content: stretch;
        /* 拉伸对齐 */
        flex-wrap: wrap;
        /* 允许换行 */
    }

    /* 详情按钮调整 */
    .job-detail-actions .btn {
        flex: 1;
        /* 按钮平均分配宽度 */
        min-width: 0;
        /* 允许缩放 */
    }

    /* 职位详情网格调整 */
    .job-details-grid {
        grid-template-columns: 1fr;
        /* 移动端改为单列 */
    }

    /* === 底部响应式调整 === */

    /* 底部容器调整为垂直布局 */
    .footer-container {
        flex-direction: column;
        /* 垂直排列 */
        text-align: center;
        /* 文字居中 */
    }

    /* 底部链接容器调整 */
    .footer-links {
        justify-content: center;
        /* 居中对齐 */
        flex-wrap: wrap;
        /* 允许换行 */
    }
}

/* ===== 小屏手机端适配（480px以下） ===== */
@media (max-width: 480px) {

    /* === 基础间距调整 === */

    /* 头部内边距减小 */
    header {
        padding: 0.8rem 1rem;
        /* 减小内边距，节省空间 */
    }

    /* 主内容区域内边距减小 */
    main {
        padding: 1rem;
        /* 减小内边距到1rem */
    }

    /* 搜索区域内边距减小 */
    .search-section {
        padding: 1rem;
        /* 减小内边距到1rem */
    }

    /* 职位卡片内边距减小 */
    .job-card {
        padding: 1rem;
        /* 减小内边距到1rem */
    }

    /* === 字体大小调整 === */

    /* Logo字体大小减小 */
    .logo svg {
        height: 44px;
    }

    /* 职位标题字体大小减小 */
    .job-title {
        font-size: 1rem;
        /* 减小字体到1rem */
    }

    /* === 布局优化 === */

    /* 头部操作按钮调整 */
    .header-actions {
        gap: 1rem;
        /* 减小间距到1rem */
        flex-wrap: wrap;
        /* 允许换行 */
        justify-content: center;
        /* 居中对齐 */
    }

    /* 筛选器组调整 */
    .filters {
        justify-content: center;
        /* 居中对齐 */
    }

    /* 筛选器按钮调整 */
    .filter-btn {
        font-size: 0.8rem;
        /* 减小字体到0.8rem */
        padding: 0.5rem 0.8rem;
        /* 调整内边距 */
    }

    /* 清除筛选按钮调整 */
    .clear-filters-btn {
        font-size: 0.8rem;
        /* 减小字体到0.8rem */
        padding: 0.5rem 0.8rem;
        /* 调整内边距 */
    }

    /* 公司Logo尺寸减小 */
    .company-logo {
        width: 40px;
        /* 减小宽度到40px */
        height: 40px;
        /* 减小高度到40px */
        font-size: 0.9rem;
        /* 减小字体到0.9rem */
    }

    /* 操作按钮调整 */
    .apply-btn,
    .contact-btn {
        padding: 0.25rem 0.6rem;
        /* 减小内边距 */
        font-size: 0.7rem;
        /* 减小字体到0.7rem */
    }

    /* 职位标签字体减小 */
    .job-tag {
        font-size: 0.7rem;
        /* 减小字体到0.7rem */
        padding: 0.15rem 0.5rem;
        /* 调整内边距 */
    }

    /* 职位时间字体减小 */
    .job-time {
        font-size: 0.7rem;
        /* 减小字体到0.7rem */
    }
}

/* ===== 超小屏幕适配（360px以下） ===== */
@media (max-width: 360px) {

    /* === 极限空间优化 === */

    /* 进一步减小各种间距 */
    .header-container {
        gap: 0.5rem;
        /* 进一步减小间距 */
    }

    .nav-links {
        gap: 0.8rem;
        /* 减小导航间距 */
    }

    .header-actions {
        gap: 0.8rem;
        /* 减小操作按钮间距 */
    }

    .search-box-container {
        gap: 0.6rem;
        /* 减小搜索区域间距 */
    }

    .filters-container {
        gap: 0.6rem;
        /* 减小筛选器间距 */
    }

    .filters {
        gap: 0.6rem;
        /* 减小筛选器组间距 */
    }

    .job-tags {
        gap: 0.3rem;
        /* 减小标签间距 */
    }

    .job-actions {
        gap: 0.3rem;
        /* 减小操作按钮间距 */
    }

    /* 字体进一步减小 */
    .logo svg {
        height: 40px;
    }

    .nav-link {
        font-size: 0.85rem;
        /* 减小导航链接字体 */
    }

    .action-btn {
        font-size: 0.8rem;
        /* 减小操作按钮字体 */
        padding: 0.4rem 0.8rem;
        /* 调整内边距 */
    }

    .search-input {
        font-size: 0.85rem;
        /* 减小搜索框字体 */
        padding: 0.7rem 0.7rem 0.7rem 2.2rem;
        /* 调整内边距 */
    }

    .search-btn {
        padding: 0.7rem 1.2rem;
        /* 调整搜索按钮内边距 */
        font-size: 0.85rem;
        /* 减小字体 */
    }
}

/* ===== 大屏幕优化（1200px以上） ===== */
@media (min-width: 1200px) {

    /* === 大屏幕布局优化 === */

    /* 主容器最大宽度扩大 */
    .main-container,
    .footer-container {
        max-width: 1400px;
        /* 扩大最大宽度到1400px */
    }

    /* 职位网格保持垂直排列，不再使用多列网格布局 */
    .jobs-grid {
        /* 保持垂直排列，不设置网格列 */
        gap: 1.2rem;
        /* 大屏幕上可以略微增加间距 */
    }

    /* 搜索区域可以更宽 */
    .search-section {
        padding: 2rem;
        /* 增加内边距到2rem */
    }

    /* 字体可以稍大一些 */
    .logo svg {
        height: 54px;
    }
}

/* ===== 横屏模式优化 ===== */
@media (orientation: landscape) and (max-height: 600px) {

    /* === 横屏模式下的空间优化 === */

    /* 减小头部高度 */
    header {
        padding: 0.8rem 2rem;
        /* 减小垂直内边距 */
    }

    /* 减小主内容区域间距 */
    main {
        padding: 1rem 1.5rem;
        /* 减小垂直内边距 */
    }

    /* 减小搜索区域间距 */
    .search-section {
        padding: 1rem 1.5rem;
        /* 减小垂直内边距 */
        margin-bottom: 1rem;
        /* 减小底部间距 */
    }

    /* 职位卡片间距减小 */
    .jobs-grid {
        gap: 0.8rem;
        /* 减小网格间距 */
    }

    .job-card {
        padding: 1rem;
        /* 减小卡片内边距 */
    }
}

/* ===== 打印样式优化 ===== */
@media print {

    /* === 打印时的样式调整 === */

    /* 隐藏不必要的元素 */
    .header-actions,
    .search-section,
    .job-actions,
    .load-more-container {
        display: none;
        /* 打印时隐藏交互元素 */
    }

    /* 调整颜色为打印友好 */
    body {
        background: white;
        /* 白色背景 */
        color: black;
        /* 黑色文字 */
    }

    .job-card {
        background: white;
        /* 白色卡片背景 */
        border: 1px solid #ccc;
        /* 灰色边框 */
        box-shadow: none;
        /* 去除阴影 */
        break-inside: avoid;
        /* 避免卡片被分页打断 */
    }

    /* 确保重要信息可见 */
    .job-title {
        color: black;
        /* 黑色标题 */
        font-weight: bold;
        /* 粗体显示 */
    }

    .detail-title {
        color: #333;
        /* 深灰色小标题 */
    }
}

/* ===== Toast提示容器样式 ===== */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 12px 20px;
    border-radius: 8px;
    background: #333;
    color: #fff;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-success { background: #10b981; }
.toast-error { background: #ef4444; }
.toast-warning { background: #f59e0b; }
.toast-info { background: #3b82f6; }

@media (max-width: 480px) {
    #toast-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }
    .toast {
        width: 100%;
    }
}

/* ===== 精选公司滚动容器适配 ===== */
@media (max-width: 768px) {
    .featured-companies-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
    }

    .featured-companies-scroll::-webkit-scrollbar {
        height: 6px;
    }

    .featured-companies-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .featured-companies-scroll::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }
}