/* ===== 贵宾室广告模块（guibin.php）样式优化 ===== */
.guibin-page { background: #f3f5fa; }

/* ---- 价格表 ---- */
.guibin-page .ibox-content { border: 0; border-radius: 0 0 16px 16px; padding: 20px; }
.guibin-page .ibox-title {
    border: 0; background: #fff; border-left: 4px solid #0d8eff;
    border-radius: 16px 16px 0 0; padding: 14px 18px;
}
.guibin-page .ibox {
    border: 0; border-radius: 16px;
    box-shadow: 0 8px 24px rgba(18, 38, 63, .08);
}
.guibin-page .footable {
    border-collapse: separate; border-spacing: 0;
    font-size: 14px; color: #37425a; border-radius: 12px; overflow: hidden;
}
.guibin-page .footable > thead > tr > th {
    background: var(--primary) !important;
    color: #fff !important;
    border: 0 !important; font-weight: 600; padding: 14px 16px;
    white-space: nowrap;
}
.guibin-page .footable > tbody > tr > td {
    padding: 13px 16px; vertical-align: top; border-top: 1px solid #eef2f8;
}
.guibin-page .footable > tbody > tr:nth-of-type(even) { background: #fafbfe; }
.guibin-page .footable > tbody > tr:hover { background: #eaf3ff; }
.guibin-page .footable > tbody > tr > td:first-child { font-weight: 700; color: #1b2a4e; }
.guibin-page .footable > tbody > tr > td:last-child { font-weight: 600; color: var(--primary); white-space: nowrap; }

/* 媒体数量列的明细行（原 footable-row-detail-* 裸 div 规整化） */
.guibin-page .footable .footable-row-detail-row {
    display: flex; gap: 8px; padding: 3px 0; border: 0; font-size: 13px;
}
.guibin-page .footable .footable-row-detail-name {
    flex: 0 0 auto; color: #8a97ad; font-weight: 600;
}
.guibin-page .footable .footable-row-detail-value { color: #37425a; }

/* ---- 展示形式卡片网格（图片在上 + 蓝色信息块在下） ---- */
.guibin-page .gb-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px; margin-top: 8px;
}
.guibin-page .gb-card {
    position: relative; border-radius: 16px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(18, 38, 63, .10);
    background: #fff;
    display: flex; flex-direction: column;
    transition: transform .3s ease, box-shadow .3s ease;
}
.guibin-page .gb-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(18, 38, 63, .16);
}
.guibin-page .gb-card img {
    display: block; width: 100%; height: 230px; flex: 0 0 auto;
    object-fit: cover; transition: transform .4s ease;
}
.guibin-page .gb-card:hover img { transform: scale(1.05); }
.guibin-page .gb-cap {
    position: static;
    flex: 1 1 auto;
    padding: 16px 18px 18px;
    color: #fff !important;
    background: linear-gradient(135deg, #0d8eff, #2f86e8);
}
.guibin-page .gb-cap-label { display: none; }
.guibin-page .gb-cap-title {
    margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.4;
    color: #fff !important;
    display: flex; align-items: baseline; gap: 8px;
}
.guibin-page .gb-cap-title::before {
    content: ""; flex: 0 0 auto;
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    transform: translateY(-2px);
}
.guibin-page .gb-cap-sub {
    margin: 0; font-size: 13px; line-height: 1.7; color: #fff !important;
}

/* ---- 区块标题 ---- */
.guibin-page .gb-section-title {
    margin: 30px 0 16px; font-size: 20px; font-weight: 700; color: #1b2a4e;
    padding-left: 12px; border-left: 4px solid #0d8eff;
}

@media (max-width: 768px) {
    .guibin-page .gb-gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    .guibin-page .gb-card img { height: 150px; }
    .guibin-page .gb-cap { padding: 12px 14px 14px; }
    .guibin-page .gb-cap-title { font-size: 15px; }
    .guibin-page .gb-cap-sub { font-size: 12px; }
    .guibin-page .footable { font-size: 13px; }

    /* ---- 价格表（.footable）：本页表格没有 .table-responsive 包裹，
       让承载容器可横向滚动，并给表格一个可读的最小宽度，避免窄屏把中文压成竖排 ---- */
    .guibin-page .ibox-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
    /* 滚动容器的左右内边距会让被裁切的列露出残影，仅对承载价格表的容器归零
       （单元格自带内边距，视觉内缩不受影响） */
    .guibin-page .ibox-content:has(.footable) {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .guibin-page .ibox-content::-webkit-scrollbar { height: 6px; }
    .guibin-page .ibox-content::-webkit-scrollbar-thumb {
        background: #cfdaea;
        border-radius: 6px;
    }
    .guibin-page .footable { min-width: 620px; }
    .guibin-page .footable > thead > tr > th { white-space: nowrap; }
}

/* 超小屏（手机）：展示卡单列铺满，信息密度与 PC 改版一致 */
@media (max-width: 576px) {
    .guibin-page .wrapper-content { padding: 12px; }
    .guibin-page .ibox-title { padding: 12px 14px; }
    .guibin-page .ibox-content { padding: 14px; }
    .guibin-page .gb-gallery { grid-template-columns: 1fr; gap: 14px; }
    .guibin-page .gb-card img { height: 190px; }
    .guibin-page .gb-section-title { font-size: 17px; margin: 22px 0 12px; }
    .guibin-page .footable > thead > tr > th { padding: 10px 10px; }
    .guibin-page .footable > tbody > tr > td { padding: 10px 10px; }
}
