/* ===== 媒体推荐模块（showDetail.php）优化样式 ===== */
/* 仅作用于 .media-page，不污染后台其他页面 */

.media-page { background: #f3f5fa; }

/* 卡片统一样式 */
.media-page .ibox {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(18, 38, 63, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.media-page .ibox:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(18, 38, 63, .13);
}
.media-page .ibox-title {
    border: 0;
    background: #fff;
    border-left: 4px solid #0d8eff;
    border-radius: 16px 16px 0 0;
    padding: 14px 18px;
}
.media-page .ibox-content {
    border: 0;
    background: #fff;
    border-radius: 0 0 16px 16px;
    padding: 20px;
}

/* ===== 登机牌广告（djp-page）图片展示区 ===== */
.djp-page .wrapper-content > .row:nth-of-type(1) .ibox .ibox-content {
    padding: 10px;
}
.djp-page .wrapper-content > .row:nth-of-type(1) .ibox .ibox-content img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    margin: 0 auto;
    border-radius: 8px;
}

/* ===== LED屏广告（led-page）城市标签栏：对齐首页"广告资源"按钮样式 ===== */
.led-page .wrapper-content > .row:nth-of-type(1) .ibox-title {
    border-left: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 12px;
    padding: 18px;
}
.led-page .wrapper-content > .row:nth-of-type(1) .ibox-title a.btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 44px !important;
    line-height: normal;
    white-space: nowrap;
    border: 1px solid #e3e8f2;
    background: #fff;
    color: #37425a;
    font-size: 14px;
    font-weight: 600;
    padding: 0 10px;
    margin: 0;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(16, 32, 64, .05);
    transition: all .2s ease;
}
.led-page .wrapper-content > .row:nth-of-type(1) .ibox-title a.btn:hover {
    border-color: #0d8eff;
    color: #0d8eff;
    box-shadow: 0 4px 12px rgba(13, 142, 255, .15);
}

/* ===== LED屏广告轮播图：统一高度、满宽铺满，消除窄图右侧空白 ===== */
.led-page .wrapper-content > .row:nth-of-type(1) .carousel-inner > .item > img {
    display: block;
    width: 100%;
    /* 原图约 2:1（1280×642），改用宽高比自适应：不再固定高度裁掉两侧，小屏也能看全 */
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
    border-radius: 10px;
}
.led-page .wrapper-content > .row:nth-of-type(1) .carousel {
    border-radius: 10px;
    overflow: hidden;
}
.led-page .wrapper-content > .row:nth-of-type(1) .carousel-caption {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
    padding-bottom: 10px;
}
.led-page .wrapper-content > .row:nth-of-type(1) .carousel-indicators {
    bottom: 8px;
    margin-bottom: 0;
}
.led-page .wrapper-content > .row:nth-of-type(1) .carousel-indicators li {
    border: 1px solid #fff;
    opacity: .6;
}
.led-page .wrapper-content > .row:nth-of-type(1) .carousel-indicators .active {
    background-color: #0d8eff;
    border-color: #0d8eff;
    opacity: 1;
}

/* ===== 数据表格（登机牌 / 通用） ===== */
.media-page .dataTables-example {
    border-radius: 12px;
    overflow: hidden;
}
.media-page .table > thead > tr > th {
    background: var(--primary) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 600;
    letter-spacing: .3px;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 2;
}
.media-page .table-striped > tbody > tr:nth-of-type(odd) { background: #fafbfe; }
.media-page .table > tbody > tr:hover { background: #eaf3ff !important; }
.media-page .table > tbody > tr > td { padding: 13px 16px; }
.media-page .table td:last-child { font-weight: 600; color: #2b6cb0; }
/* 城市分组列（rowspan）高亮 */
.media-page .table td[rowspan] {
    background: #f0f6ff !important;
    font-weight: 700;
    color: #1b2a4e;
    vertical-align: middle;
    border-right: 1px solid #e3ebf7;
}
.media-page .table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* ===== 移动端收口 ===== */
@media (max-width: 768px) {
    .media-page .ibox-content { padding: 14px; }
    .media-page .table { font-size: 13px; }
    .media-page .table > thead > tr > th { font-size: 12px; padding: 8px 6px; }
    .djp-page .wrapper-content > .row:nth-of-type(1) .ibox .ibox-content img { max-height: 320px; }

    /* ---- 宽表（媒体推荐 / 高铁站排名）：给出可读的最小宽度，横向滑动查看完整列，
       不再把中文压成竖排 ---- */
    .media-page .table-responsive,
    .rank-page .table-responsive {
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }
    .media-page .table-responsive::-webkit-scrollbar,
    .rank-page .table-responsive::-webkit-scrollbar { height: 6px; }
    .media-page .table-responsive::-webkit-scrollbar-thumb,
    .rank-page .table-responsive::-webkit-scrollbar-thumb {
        background: #cfdaea;
        border-radius: 6px;
    }
    .media-page .table-responsive > .table,
    .rank-page .table-responsive > .table { min-width: 620px; }
    .media-page .table > tbody > tr > td,
    .rank-page .table > tbody > tr > td { padding: 10px 12px; }
}

/* 超小屏（手机）：登机牌/LED 轮播降高、表格与 PC 改版对齐 */
@media (max-width: 576px) {
    .media-page .wrapper-content { padding: 12px; }
    .media-page .ibox-title { padding: 12px 14px; }
    .media-page .ibox-content { padding: 12px; }
    .media-page .table { font-size: 12px; }
    .media-page .table > thead > tr > th { padding: 8px 5px; }
    .media-page .table > tbody > tr > td { padding: 10px 6px; }
    .led-page .wrapper-content > .row:nth-of-type(1) .ibox-title {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
        padding: 12px;
    }
    /* 触摸目标：40px 偏小，提到 44px（Apple / Material 建议的最小可点尺寸），减少误触 */
    .led-page .wrapper-content > .row:nth-of-type(1) .ibox-title a.btn { height: 44px !important; font-size: 13px; }
    /* 高度已由 aspect-ratio 自适应，小屏不再固定 300px 把图裁掉 */
    .led-page .wrapper-content > .row:nth-of-type(1) .carousel-inner > .item > img {
        border-radius: 8px;
    }
    .djp-page .wrapper-content > .row:nth-of-type(1) .ibox .ibox-content img { max-height: 280px; }
}

/* ==========================================================
   高铁冠名广告模块（typeId=1 / 11 / 21 —— showDjpWordnew.php）
   作用域 .media-page，去掉原内嵌全局样式对 body / .table 的污染
   ========================================================== */
.gtgm { padding: 18px 0 8px; }

/* ---------- 顶部大图 ---------- */
.gtgm-hero {
    margin: 0 0 22px;
    line-height: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(18, 38, 63, .08);
}
.gtgm-hero img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: cover;
}

/* ---------- 区块卡片 ---------- */
.gtgm-section {
    margin: 0 0 22px;
    padding: 26px 28px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(18, 38, 63, .08);
}

.gtgm-title {
    position: relative;
    margin: 0 0 20px;
    padding-bottom: 14px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .2px;
    text-align: center;
    color: #1b2a4e;
}
.gtgm-title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 46px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, #0d8eff, #5aa9ff);
}
/* 区块内二级标题（刊例价格分段）拉大间距 */
.gtgm-tip + .gtgm-title,
.gtgm-figure + .gtgm-title { margin-top: 34px; }

/* ---------- 优势卡片 ---------- */
.gtgm-adv {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.gtgm-adv-item {
    position: relative;
    overflow: hidden;
    padding: 20px 22px;
    background: linear-gradient(180deg, #f8fafd, #f2f6fc);
    border: 1px solid #e9eef7;
    border-radius: 14px;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.gtgm-adv-item:hover {
    transform: translateY(-5px);
    border-color: #bcdcff;
    box-shadow: 0 14px 30px rgba(18, 38, 63, .13);
}
.gtgm-adv-item h3 {
    display: flex;
    align-items: center;
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #1b2a4e;
}
.gtgm-adv-item h3::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 18px;
    margin-right: 10px;
    border-radius: 8px;
    background: linear-gradient(180deg, #0d8eff, #1a5fd0);
}
.gtgm-adv-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: #5a6678;
}
.gtgm-num {
    position: absolute;
    right: 10px;
    bottom: -18px;
    font-size: 92px;
    line-height: 1;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    color: #0d8eff;
    opacity: .07;
    pointer-events: none;
}

/* ---------- 表格 ---------- */
.gtgm-table-wrap {
    border: 1px solid #e6ecf6;
    border-radius: 14px;
    /* 原来 overflow:hidden 会把超宽表格裁掉且无法滑动 —— 改为横向滚动 */
    overflow-x: auto;
    overflow-y: hidden;
    background: #fff;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
/* 滚动条：桌面细条、移动端隐藏 */
.gtgm-table-wrap::-webkit-scrollbar { height: 6px; }
.gtgm-table-wrap::-webkit-scrollbar-thumb {
    background: #cfdaea;
    border-radius: 6px;
}
.gtgm-table-wrap::-webkit-scrollbar-track { background: transparent; }

/* 「左右滑动」提示：仅窄屏显示（宽表加 .gtgm-wide 后才会溢出） */
.gtgm-scroll-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 0 10px;
    font-size: 12px;
    color: #8b96a8;
}
.gtgm-scroll-hint i { font-size: 12px; color: #0d8eff; }
.gtgm-table {
    margin: 0;
    background: #fff;
}
.gtgm-table > thead > tr > th { white-space: nowrap; }
.gtgm-table > tbody > tr:nth-of-type(odd) { background: #fafbfe; }
.gtgm-table > tbody > tr:hover { background: #eaf3ff; }
.gtgm-table > tbody > tr > td:first-child {
    background: #f0f6ff;
    font-weight: 700;
    color: #1b2a4e;
    white-space: nowrap;
}
.gtgm-table > tbody > tr > td,
.gtgm-table > thead > tr > th {
    padding: 12px 14px;
    border: 1px solid #e6ecf6;
    line-height: 1.7;
    vertical-align: top;
}
.gtgm-table p { margin: 0 0 4px; }
.gtgm-table p:last-child { margin-bottom: 0; }
/* 覆盖通用表格“末列加粗变蓝”规则：本模块末列是段落文本 */
.media-page .gtgm-table > tbody > tr > td:last-child {
    font-weight: 400;
    color: #2b3445;
}

/* ---------- 刊例价格图 ---------- */
.gtgm-figure {
    margin: 20px 0 16px;
    padding: 10px;
    background: #f7f9fd;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(18, 38, 63, .06);
}
.gtgm-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 520px;
    object-fit: contain;
    border-radius: 10px;
}

/* ---------- 说明 / 提示 ---------- */
.gtgm-tip {
    margin: 0 0 16px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.9;
    color: #6b7688;
    background: #f7f9fd;
    border-radius: 12px;
}
.gtgm-tip.is-center {
    text-align: center;
    font-weight: 600;
    color: #1a5fd0;
}
.gtgm-tip.is-note {
    padding: 14px 18px;
    background: #fff;
    border-left: 3px solid #0d8eff;
}
.gtgm-tip p { margin: 0 0 4px; }
.gtgm-tip p:last-child { margin-bottom: 0; }

/* ---------- 移动端收口 ---------- */
@media (max-width: 768px) {
    .gtgm { padding-top: 14px; }
    .gtgm-hero img { max-height: 260px; }
    .gtgm-section { padding: 18px 16px; }
    .gtgm-figure img { max-height: 320px; }
    .gtgm-table > tbody > td,
    .gtgm-table > thead > th { padding: 10px 10px; }
    .gtgm-table > tbody > tr > td:first-child { white-space: normal; }

    /* 宽表：保证列宽可读，允许左右滑动，首列（字段名）吸左常显 */
    .gtgm-wide { min-width: 660px; }
    .gtgm-table > tbody > tr > td:first-child { white-space: nowrap; }
    .gtgm-wide > tbody > tr > td:first-child,
    .gtgm-wide > thead > tr > th:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
    }
    .gtgm-wide > tbody > tr > td:first-child { background: #f0f6ff; }
    .gtgm-wide > thead > tr > th:first-child { z-index: 3; }
    .gtgm-scroll-hint { display: flex; }
}

@media (max-width: 576px) {
    .gtgm { padding-top: 12px; }
    .gtgm-hero { margin-bottom: 14px; border-radius: 12px; }
    .gtgm-hero img { max-height: 180px; }
    .gtgm-section {
        margin-bottom: 14px;
        padding: 16px 14px;
        border-radius: 14px;
    }
    .gtgm-title { font-size: 18px; margin-bottom: 14px; padding-bottom: 11px; }
    .gtgm-tip + .gtgm-title,
    .gtgm-figure + .gtgm-title { margin-top: 26px; }
    .gtgm-adv { grid-template-columns: 1fr; gap: 12px; }
    .gtgm-adv-item { padding: 16px; }
    .gtgm-adv-item h3 { font-size: 16px; }
    .gtgm-adv-item p { font-size: 13.5px; line-height: 1.8; }
    .gtgm-num { font-size: 68px; bottom: -14px; }
    .gtgm-table { font-size: 12px; }
    .gtgm-table > tbody > td,
    .gtgm-table > thead > th { padding: 9px 8px; line-height: 1.6; }
    .gtgm-figure { margin: 14px 0 12px; padding: 6px; border-radius: 12px; }
    .gtgm-figure img { max-height: 260px; }
    .gtgm-tip { padding: 10px 12px; font-size: 12.5px; line-height: 1.8; }
}

/* ==========================================================
   英文 / 俄文版内容块（内联 float 两栏）兜底
   这些页面内容写在 PHP 内联 style 里，仅做响应式兜底，不动其内容
   ========================================================== */
.media-page .ibox-content img[style*="float:left"] {
    border-radius: 10px;
}

@media (max-width: 768px) {
    .media-page .ibox > div[style*="float:left"] {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        padding: 14px 16px !important;
        box-sizing: border-box;
    }
    .media-page .ibox > div[style*="float:left"] label {
        display: block;
        margin-bottom: 8px;
        font-size: 17px !important;
        line-height: 1.5;
        color: #1b2a4e;
    }
    .media-page .ibox > div[style*="float:left"] > div {
        font-size: 15px !important;
        line-height: 1.85;
        margin-bottom: 6px;
    }
}

@media (max-width: 576px) {
    .media-page .ibox-content img[style*="float:left"] {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 10px;
        border-radius: 10px;
    }
    .media-page .ibox > div[style*="float:left"] { padding: 12px 14px !important; }
    .media-page .ibox > div[style*="float:left"] label { font-size: 16px !important; }
    .media-page .ibox > div[style*="float:left"] > div { font-size: 14px !important; }
}
