/* Mobile Responsive Fix for news1.true4news.com */
/* 彻底修复手机端新闻卡片布局问题 */

/* ============================================
   手机端基础设置
   ============================================ */
@media (max-width: 1279px) {
    /* 防止水平滚动 */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    .container {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow-x: hidden !important;
    }
}

/* ============================================
   手机端新闻卡片 - 完整卡片式布局
   ============================================ */
@media (max-width: 767px) {
    
    /* ========== 核心修复：bg_gradient_top 新闻卡片 ========== */
    
    /* 1. 新闻卡片容器 - 改为流式布局而非绝对定位覆盖 */
    .bg_gradient_top {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        background: #fff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    
    /* 2. 新闻卡片内的图片 - 固定高度，完整显示 */
    .bg_gradient_top > img,
    .bg_gradient_top > figure > img,
    .bg_gradient_top img:first-of-type {
        width: 100% !important;
        height: 180px !important;
        object-fit: cover !important;
        border-radius: 8px 8px 0 0 !important;
        flex-shrink: 0 !important;
        position: relative !important;
    }
    
    /* 3. 文字内容区域 - 移除绝对定位，改为正常流式布局 */
    .bg_gradient_top > div[class*="absolute"],
    .bg_gradient_top > div.absolute,
    .bg_gradient_top > .absolute {
        position: relative !important;
        z-index: 1 !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        padding: 12px !important;
        background: #fff !important;
        border-radius: 0 0 8px 8px !important;
    }
    
    /* 4. 分类标签样式 */
    .bg_gradient_top .clip-hex-right {
        display: inline-flex !important;
        height: 24px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
        margin-bottom: 8px !important;
    }
    
    /* 5. 新闻标题 - 黑色文字，清晰可读 */
    .bg_gradient_top h1,
    .bg_gradient_top h2 {
        color: #1a1a1a !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        line-height: 1.4 !important;
        margin: 0 0 8px 0 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        text-shadow: none !important;
    }
    
    /* 6. 元信息（作者、日期）- 灰色文字 */
    .bg_gradient_top > div[class*="absolute"] > div:last-child,
    .bg_gradient_top .text-white.capitalize {
        color: #666 !important;
        font-size: 12px !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: wrap !important;
    }
    
    .bg_gradient_top .text-white.capitalize svg {
        color: #999 !important;
    }
    
    .bg_gradient_top .text-white.capitalize span {
        color: #666 !important;
    }
    
    /* ========== 首页顶部新闻区域 ========== */
    
    /* 顶部新闻网格 - 单列布局 */
    section.grid.md\\:grid-cols-3,
    .md\\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    /* 左侧主新闻 */
    section.md\\:col-span-2 {
        width: 100% !important;
    }
    
    section.md\\:col-span-2 > a.bg_gradient_top {
        height: auto !important;
    }
    
    section.md\\:col-span-2 > a.bg_gradient_top img {
        height: 200px !important;
    }
    
    /* 中间新闻区域 - 垂直布局 */
    section.flex.md\\:flex-col {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        height: auto !important;
    }
    
    section.flex.md\\:flex-col > a.bg_gradient_top {
        height: auto !important;
        flex: none !important;
    }
    
    section.flex.md\\:flex-col > a.bg_gradient_top img {
        height: 160px !important;
    }
    
    /* ========== 世界新闻区域 ========== */
    
    section.grid.md\\:grid-cols-2.lg\\:grid-cols-4 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    section.grid.md\\:grid-cols-2.lg\\:grid-cols-4 > section {
        width: 100% !important;
        order: 0 !important;
    }
    
    /* 中间大图新闻 */
    section.order-1.col-span-2 a.bg_gradient_top {
        height: auto !important;
    }
    
    section.order-1.col-span-2 a.bg_gradient_top img {
        height: 220px !important;
    }
    
    /* 小新闻卡片 */
    .flex.lg\\:flex-col.xl\\:flex-row {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .flex.lg\\:flex-col.xl\\:flex-row > a.bg_gradient_top {
        height: auto !important;
        width: 100% !important;
    }
    
    .flex.lg\\:flex-col.xl\\:flex-row > a.bg_gradient_top img {
        height: 160px !important;
    }
    
    /* ========== 列表式新闻 ========== */
    
    /* 右侧新闻列表区域 */
    section.border.px-2,
    .border.px-2.rounded-md {
        padding: 12px !important;
        border-radius: 8px !important;
    }
    
    .border.px-2 .py-3,
    .divide-y .py-3 {
        padding: 12px 0 !important;
    }
    
    /* 列表新闻标题 */
    .py-3 a.line-clamp-2,
    .py-3 a.text-lg {
        font-size: 15px !important;
        line-height: 1.5 !important;
        color: #1a1a1a !important;
        font-weight: 600 !important;
    }
    
    /* 列表新闻摘要 */
    .py-3 p.line-clamp-2,
    .py-3 p.text-sm {
        font-size: 13px !important;
        line-height: 1.5 !important;
        color: #666 !important;
        margin-top: 6px !important;
    }
    
    /* ========== 通用文字样式修复 ========== */
    
    /* 确保 line-clamp 正常工作 */
    .line-clamp-1,
    .line-clamp-2,
    .line-clamp-3 {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        word-break: break-word !important;
    }
    
    .line-clamp-1 {
        -webkit-line-clamp: 1 !important;
    }
    
    .line-clamp-2 {
        -webkit-line-clamp: 2 !important;
    }
    
    .line-clamp-3 {
        -webkit-line-clamp: 3 !important;
    }
    
    /* ========== 图片网格新闻 ========== */
    
    /* 新闻网格容器 */
    .grid.grid-cols-3,
    .grid.md\\:grid-cols-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }
    
    .grid.grid-cols-3 > a,
    .grid.md\\:grid-cols-3 > a {
        width: 100% !important;
    }
    
    /* ========== 顶部周新闻 ========== */
    
    .my-4.space-y-3 a.bg_gradient_top {
        height: auto !important;
    }
    
    .my-4.space-y-3 a.bg_gradient_top img {
        height: 180px !important;
    }
    
    /* 小图+文字的新闻列表 */
    .grid.grid-cols-3.gap-2 {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    
    .grid.grid-cols-3.gap-2 figure {
        width: 80px !important;
        height: 60px !important;
        flex-shrink: 0 !important;
    }
    
    .grid.grid-cols-3.gap-2 figure img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 4px !important;
    }
    
    .grid.grid-cols-3.gap-2 a.col-span-2 {
        flex: 1 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    
    /* ========== 隐藏不必要的间距元素 ========== */
    
    .hidden.md\\:block,
    .hidden.lg\\:block,
    .hidden.xl\\:block {
        display: none !important;
    }
}

/* ============================================
   小屏手机特殊处理 (< 375px)
   ============================================ */
@media (max-width: 375px) {
    .container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    
    .bg_gradient_top h1,
    .bg_gradient_top h2 {
        font-size: 14px !important;
    }
    
    .bg_gradient_top > div[class*="absolute"] {
        padding: 10px !important;
    }
    
    .bg_gradient_top img:first-of-type {
        height: 150px !important;
    }
}

/* ============================================
   暗色模式适配
   ============================================ */
@media (max-width: 767px) {
    .dark .bg_gradient_top {
        background: #1a1a1a !important;
    }
    
    .dark .bg_gradient_top > div[class*="absolute"] {
        background: #1a1a1a !important;
    }
    
    .dark .bg_gradient_top h1,
    .dark .bg_gradient_top h2 {
        color: #fff !important;
    }
    
    .dark .bg_gradient_top .text-white.capitalize span {
        color: #aaa !important;
    }
}

/* ============================================
   平板适配 (768px - 1279px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1279px) {
    .bg_gradient_top {
        position: relative !important;
    }
    
    .bg_gradient_top > div[class*="absolute"] {
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 70%, transparent 100%) !important;
    }
}