/**
 * 响应式优化样式
 * 针对移动端和不同屏幕尺寸的用户体验优化
 */

/* 懒加载相关样式 */
.lazy-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

.lazy-loaded {
    animation: fadeIn 0.3s ease-in-out;
}

.lazy-error {
    background-color: #fee2e2;
    border: 2px dashed #fca5a5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    font-size: 14px;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 滚动进度条样式 */
.scroll-progress {
    transition: width 0.1s ease-out;
}

/* 回到顶部按钮优化 */
.back-to-top {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.back-to-top:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 移动端优化 */
@media (max-width: 768px) {
    /* 触摸优化 */
    .touch-target {
        min-height: 44px;
        min-width: 44px;
    }

    /* 按钮间距优化 */
    .btn-group-mobile {
        gap: 12px;
    }

    .btn-group-mobile > * {
        flex: 1;
        min-height: 48px;
    }

    /* 表单优化 */
    input, textarea, select {
        font-size: 16px; /* 防止iOS缩放 */
        padding: 12px 16px;
    }

    /* 导航优化 */
    .mobile-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }

    /* 搜索框优化 */
    .search-mobile {
        width: 100%;
        margin: 8px 0;
    }

    /* 卡片间距优化 */
    .card-mobile {
        margin: 8px 0;
        padding: 16px;
        border-radius: 12px;
    }

    /* 文字大小优化 */
    .text-mobile-lg {
        font-size: 18px;
        line-height: 1.4;
    }

    .text-mobile-base {
        font-size: 16px;
        line-height: 1.5;
    }

    .text-mobile-sm {
        font-size: 14px;
        line-height: 1.4;
    }

    /* 回到顶部按钮移动端位置 */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 48px;
        height: 48px;
    }
}

/* ========================================
   机构页面导航移动端优化
   ======================================== */

/* 隐藏滚动条但保持滚动功能 */
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
}

/* 机构导航滚动指示器 */
.institution-nav-scroll-indicator {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2rem;
    background: linear-gradient(to left, rgb(220 38 38), transparent);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.institution-nav-scroll-indicator.hidden {
    opacity: 0;
}

/* 导航项触摸反馈 */
.nav-touch-feedback {
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.nav-touch-feedback:active {
    background-color: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
}

/* 移动端导航容器 */
@media (max-width: 767px) {
    .institution-nav-container {
        position: relative;
    }
    
    .institution-nav-container nav {
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        white-space: nowrap !important;
    }
    
    .institution-nav-container nav a {
        scroll-snap-align: start;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center;
        padding: 0 0.75rem;
        white-space: nowrap !important;
        flex-shrink: 0;
    }
    
    /* 红色导航栏强制不换行 */
    .bg-red-600 nav,
    .bg-red-600 .flex {
        white-space: nowrap !important;
        flex-wrap: nowrap !important;
    }
    
    .bg-red-600 nav a,
    .bg-red-600 .flex a {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   侧边栏移动端优化
   ======================================== */

/* 侧边栏在移动端全宽显示 */
@media (max-width: 1023px) {
    .sidebar-responsive {
        width: 100% !important;
        order: 2;
    }
    
    .main-content-responsive {
        order: 1;
    }
}

/* 预约表单移动端优化 */
@media (max-width: 767px) {
    .inquiry-form-mobile input,
    .inquiry-form-mobile textarea,
    .inquiry-form-mobile select {
        font-size: 16px;
        padding: 14px 16px;
        border-radius: 8px;
    }
    
    .inquiry-form-mobile button[type="submit"] {
        min-height: 48px;
        font-size: 16px;
    }
}

/* 咨询热线可点击样式 */
.phone-clickable {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.phone-clickable:active {
    transform: scale(0.98);
}

/* ========================================
   课程卡片响应式优化
   ======================================== */

/* 桌面端：图片固定宽度，水平布局 */
@media (min-width: 768px) {
    .course-card-responsive > div {
        flex-direction: row !important;
    }
    
    /* 增加选择器特异性，覆盖 Tailwind 的 w-full */
    .course-card-responsive .course-image.w-full,
    .course-card-responsive div.course-image {
        width: 12rem !important; /* 192px = w-48 */
        height: 8rem !important; /* 128px = h-32 */
        flex-shrink: 0 !important;
    }
}

/* 移动端：图片全宽，垂直布局 */
@media (max-width: 767px) {
    .course-card-responsive > div {
        flex-direction: column;
    }
    
    .course-card-responsive .course-image {
        width: 100%;
        height: 10rem;
    }
    
    .course-card-responsive .course-content {
        padding: 0.75rem 0;
    }
}

/* ========================================
   触摸交互优化
   ======================================== */

/* 触摸设备上的点击反馈 */
@media (hover: none) and (pointer: coarse) {
    .touch-feedback:active {
        background-color: rgba(0, 0, 0, 0.05);
        transition: background-color 0.1s ease;
    }
    
    .touch-scale:active {
        transform: scale(0.97);
        transition: transform 0.1s ease;
    }
}

/* 下拉菜单项间距优化 */
.dropdown-item-touch {
    min-height: 44px;
    padding: 12px 16px;
}

/* ========================================
   图片响应式优化
   ======================================== */

/* 响应式图片容器 */
.img-responsive-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.img-responsive-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图片加载占位符 */
.img-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: img-loading 1.5s infinite;
}

@keyframes img-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* 图片加载失败占位符 */
.img-error-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
    color: #9ca3af;
}

.img-error-placeholder::before {
    content: '图片加载失败';
    font-size: 12px;
}

/* 平板优化 */
@media (min-width: 769px) and (max-width: 1024px) {
    .tablet-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .tablet-padding {
        padding: 24px;
    }
}

/* 大屏优化 */
@media (min-width: 1025px) {
    .desktop-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .desktop-padding {
        padding: 32px;
    }

    /* 悬停效果 */
    .hover-lift:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        transition: all 0.3s ease;
    }

    .hover-scale:hover {
        transform: scale(1.02);
        transition: transform 0.3s ease;
    }
}

/* 高DPI屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .high-dpi-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 暗色模式支持 */
@media (prefers-color-scheme: dark) {
    .dark-mode-support {
        background-color: #1f2937;
        color: #f9fafb;
    }

    .dark-mode-card {
        background-color: #374151;
        border-color: #4b5563;
    }

    .dark-mode-text {
        color: #d1d5db;
    }

    .scroll-progress {
        background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    }
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .scroll-progress {
        transition: none;
    }

    .back-to-top {
        transition: none;
    }
}

/* 焦点可见性优化 */
.focus-visible:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* 加载状态优化 */
.loading-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
}

.loading-text {
    height: 1em;
    margin: 0.5em 0;
}

.loading-title {
    height: 1.5em;
    width: 60%;
    margin: 0.5em 0;
}

.loading-paragraph {
    height: 1em;
    margin: 0.25em 0;
}

.loading-paragraph:last-child {
    width: 80%;
}

/* 无障碍优化 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* 打印样式优化 */
@media print {
    .no-print {
        display: none !important;
    }

    .print-break {
        page-break-after: always;
    }

    .print-avoid-break {
        page-break-inside: avoid;
    }

    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 12px;
        color: #666;
    }

    .back-to-top,
    .scroll-progress {
        display: none !important;
    }
}

/* 容器查询支持（现代浏览器） */
@supports (container-type: inline-size) {
    .container-query {
        container-type: inline-size;
    }

    @container (min-width: 400px) {
        .container-responsive {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
    }

    @container (min-width: 600px) {
        .container-responsive {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }
}

/* 性能优化 */
.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.will-change-transform {
    will-change: transform;
}

.will-change-scroll {
    will-change: scroll-position;
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .touch-device .hover-effect:hover {
        /* 禁用悬停效果 */
        transform: none;
        box-shadow: none;
    }

    .touch-device .touch-feedback:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* 网络连接优化 */
@media (prefers-reduced-data: reduce) {
    .reduce-data .background-image {
        background-image: none;
    }

    .reduce-data .lazy-loading {
        animation: none;
    }
}


/* ========================================
   Portal V2 首页移动端优化
   注意：使用更精确的选择器，避免影响机构页面
   ======================================== */

@media (max-width: 767px) {
    /* Portal V2 首页专用 - 只针对首页的特定结构 */
    /* 主要两栏布局：移动端单列 - 只针对 Portal 首页的 w-56 侧边栏结构 */
    .flex.gap-8:has(> .w-56.shrink-0) {
        flex-direction: column !important;
        gap: 1rem !important;
    }
    
    /* 右侧边栏（w-56）：移动端全宽并排到下方 */
    .flex.gap-8 > .w-56.shrink-0 {
        width: 100% !important;
        order: 2 !important;
    }
    
    /* Portal 首页分类板块三栏布局：移动端单列 */
    /* 只针对首页的分类板块，不影响机构页面 */
    .space-y-6 > .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    
    /* 热门考试资讯频道分类网格：移动端两列 */
    .grid.grid-cols-9 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* 培训机构网格：移动端两列 - 只针对首页 */
    .space-y-6 .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    
    /* 顶部导航栏：移动端垂直堆叠 - 只针对首页头部 */
    .container > .flex.items-start.py-6.gap-8 {
        flex-direction: column !important;
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    /* 今日语录和考试提醒卡片 */
    .w-56 .bg-gray-50.p-4.rounded-lg {
        padding: 0.75rem !important;
    }
    
    /* 分类板块内的链接列表 */
    .space-y-6 .border.border-gray-200.rounded.p-3 {
        padding: 0.5rem !important;
    }
    
    .space-y-6 .border.border-gray-200.rounded.p-3 a {
        padding: 0.25rem 0 !important;
        display: inline-block;
    }
}

/* 平板端优化 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    /* 分类板块：平板端两列 - 只针对首页 */
    .space-y-6 > .grid.grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 热门考试资讯频道分类网格：平板端四列 */
    .grid.grid-cols-9 {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ========================================
   Portal V2 首页移动端全面优化
   注意：使用更精确的选择器，避免影响机构页面
   ======================================== */

@media (max-width: 767px) {
    /* ===== 模块1: 顶部工具栏 - 分两排显示 ===== */
    /* 匹配顶部灰色工具栏 - 只针对首页 */
    body:not(.institution-page) .bg-gray-50.border-b,
    body:not(.institution-page) .bg-gray-100.border-b {
        font-size: 0.625rem !important;
        padding: 0.25rem 0 !important;
    }
    
    body:not(.institution-page) .bg-gray-50.border-b .container,
    body:not(.institution-page) .bg-gray-100.border-b .container {
        padding: 0 0.5rem !important;
    }
    
    /* 顶部工具栏内层 flex 容器 - 改为垂直堆叠 */
    body:not(.institution-page) .bg-gray-50.border-b .flex.items-center.justify-between,
    body:not(.institution-page) .bg-gray-100.border-b .flex.items-center.justify-between {
        flex-direction: column !important;
        gap: 0.125rem !important;
        padding: 0.25rem 0 !important;
        font-size: 0.625rem !important;
    }
    
    /* 右侧按钮组 - 改为换行显示 */
    body:not(.institution-page) .bg-gray-50.border-b .flex.items-center.gap-6,
    body:not(.institution-page) .bg-gray-100.border-b .flex.items-center.gap-6 {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.25rem 0.75rem !important;
        font-size: 0.625rem !important;
    }
    
    /* ===== 模块2: Logo + 城市导航 - 只针对首页 ===== */
    /* 整个头部区域 - 垂直堆叠 */
    .container > .flex.items-start.py-6.gap-8 {
        flex-direction: column !important;
        padding: 0.75rem 0.5rem !important;
        gap: 0.75rem !important;
        align-items: stretch !important;
    }
    
    /* Logo 区域 - 居中显示 */
    .container > .flex.items-start.py-6.gap-8 > a:first-child {
        margin-bottom: 0 !important;
        align-self: center !important;
    }
    
    /* ===== 城市导航区域 - 做成卡片样式 ===== */
    /* 只针对首页的城市导航，不影响机构页面 */
    .container > .flex.items-start.py-6.gap-8 .flex.items-center.gap-3 {
        display: block !important;
        width: 100% !important;
        background: #ffffff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 0.5rem !important;
        padding: 0.75rem !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }
    
    /* "当前综合站" 标签 - 作为卡片标题 */
    .container > .flex.items-start.py-6.gap-8 .text-2xl.font-bold.text-blue-600 {
        display: block !important;
        font-size: 0.875rem !important;
        font-weight: 600 !important;
        color: #1f2937 !important;
        padding-bottom: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        border-bottom: 2px solid #3b82f6 !important;
    }
    
    /* 城市链接容器 - 网格布局 */
    .container > .flex.items-start.py-6.gap-8 nav.flex.flex-wrap {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
        width: 100% !important;
        padding-top: 0.25rem !important;
    }
    
    /* 城市链接样式 */
    .container > .flex.items-start.py-6.gap-8 nav.flex.flex-wrap a {
        font-size: 0.75rem !important;
        color: #6b7280 !important;
        padding: 0.125rem 0 !important;
        white-space: nowrap !important;
    }
    
    /* 只显示前12个城市 */
    .container > .flex.items-start.py-6.gap-8 nav.flex.flex-wrap a:nth-child(n+13) {
        display: none !important;
    }
    
    /* ===== 轮播图优化 - 只针对首页 ===== */
    .space-y-6 > .relative.rounded-lg.overflow-hidden {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/9 !important;
    }
    
    /* ===== 热门考试资讯频道 - 只针对首页 ===== */
    .space-y-6 > .bg-white.rounded-lg.shadow-sm.p-6,
    .space-y-6 > .bg-white.rounded-lg.shadow-sm.p-4 {
        padding: 0.75rem !important;
        overflow: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* ===== 分类板块（建筑类、英语类等）- 只针对首页 ===== */
    .space-y-6 .border.border-gray-200.rounded.p-3 {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        overflow: hidden !important;
    }
    
    /* ===== 右侧边栏（今日语录、考试提醒）- 只针对首页 ===== */
    .w-56 .bg-gray-50.p-4.rounded-lg {
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* ===== 全局容器防溢出 ===== */
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    body {
        overflow-x: hidden !important;
    }
}