@charset "utf-8";
/* ==========================================================================
   CMS PC 端首页专属样式
   通用组件（导航、卡片面板、列表、分页、侧栏、页脚…）已上移到 cyb-ui.css，
   所有页面共用；这里只留「只有首页才有」的结构：
   焦点图高度、商品区栅格、图集行、与焦点图等高的侧栏、热门导航与友情链接
   作用域：body.cyb-home，仅首页生效
   ========================================================================== */

/* 焦点图外层容器。间距交给 .carousel-focus 统一给（cyb-ui.css） */
body.cyb-home .index-focus {
    margin-bottom: 0;
}

/* ---------- 1. 首页商品区 ---------- */
/* 上图下文：图片是视觉锚点，价格与按钮固定在卡片底部 */
body.cyb-home .index-shop > .panel-body {
    padding: 16px 18px 18px;
}

/* 用 CSS Grid 取代 Bootstrap3 的 float 栅格。
   float 不会让同排各列互相等高：只要某个商品多一行「限购」、或价格长到换行，
   那张卡就比邻卡高出一截，整排的基线一起被带歪。
   Grid 默认 align-items:stretch，同排卡片天然等高，与内容多少无关。 */
body.cyb-home .index-shop .shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

@media (min-width: 768px) {
    body.cyb-home .index-shop .shop-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* 清掉 Bootstrap3 列的 float / 宽度 / 内距，避免与 Grid 打架 */
body.cyb-home .index-shop .shop-grid > [class*="col-"] {
    display: flex;
    float: none;
    width: auto;
    max-width: none;
    min-height: 0;
    padding: 0;
}

/* .row 的 ::before/::after 是 display:table 的清浮动占位，
   在 Grid 里会各占一个格子，把首个商品挤到第 2 列、末个挤到下一行 */
body.cyb-home .index-shop .shop-grid::before,
body.cyb-home .index-shop .shop-grid::after {
    display: none;
    content: none;
}

/* ---------- 2. 热门图集 ---------- */
/* 四张图组成「一行的卡片组」：悬停整列上浮，画面轻微推近 */
body.cyb-home .index-gallary .related-article {
    margin-top: 0;
}

body.cyb-home .index-gallary .related-article .row {
    margin: 0 -10px;
}

body.cyb-home .index-gallary .related-article .row::before,
body.cyb-home .index-gallary .related-article .row::after {
    display: none;
    content: none;
}

body.cyb-home .index-gallary .related-article .col-sm-3 {
    padding: 0 10px;
    transition: transform .24s var(--cyb-ease-out);
}

body.cyb-home .index-gallary .related-article .col-sm-3:hover {
    transform: translateY(-2px);
}

/* 首页「热门图集」取的是商品图，与商品卡统一成正方形 */
body.cyb-home .index-gallary .related-article .embed-responsive-4by3 {
    padding-bottom: 100%;
    border-radius: var(--cyb-r);
    background: var(--cyb-bg-mute);
    box-shadow: var(--cyb-shadow-xs);
    transition: box-shadow .24s var(--cyb-ease);
}

body.cyb-home .index-gallary .related-article .col-sm-3:hover .embed-responsive-4by3 {
    box-shadow: var(--cyb-shadow);
}

body.cyb-home .index-gallary .related-article .embed-responsive img {
    transition: transform .5s var(--cyb-ease-out);
}

body.cyb-home .index-gallary .related-article .col-sm-3:hover .embed-responsive img {
    transform: scale(1.06);
}

/* ---------- 3. 侧栏「最新更新」与焦点图等高 ---------- */
/* 高度直接取同一个变量，条目在余量里均分，
   这样换图、增删条目都不会出现一边高一边矮 */
@media (min-width: 992px) {
    body.cyb-home .lasest-update {
        display: flex;
        flex-direction: column;
        height: var(--cyb-hero-h);
    }

    body.cyb-home .lasest-update > .panel-heading {
        flex: 0 0 auto;
    }

    body.cyb-home .lasest-update > .panel-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    body.cyb-home .lasest-update .panel-body ul {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        margin-bottom: 0;
    }
}

/* ---------- 4. 热门导航与友情链接 ---------- */
body.cyb-home .list-partner li {
    width: 152px;
    margin: 0 12px 12px 0;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r);
    background: var(--cyb-surface);
    overflow: hidden;
    transition: border-color .2s var(--cyb-ease), box-shadow .2s var(--cyb-ease),
        transform .24s var(--cyb-ease-out);
}

/* 站点 Logo 默认去色，悬停恢复本色，整屏不会花 */
body.cyb-home .list-partner li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 58px;
    padding: 0 12px;
}

body.cyb-home .list-partner li img {
    height: 44px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(1);
    opacity: .68;
    transition: filter .24s var(--cyb-ease), opacity .24s var(--cyb-ease), transform .3s var(--cyb-ease-out);
}

body.cyb-home .list-partner li:hover {
    border-color: var(--cyb-line-2);
    box-shadow: var(--cyb-shadow-sm);
    transform: translateY(-2px);
}

body.cyb-home .list-partner li:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.04);
}

body.cyb-home .list-links {
    line-height: 2.4;
}

body.cyb-home .list-links a {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 3px 13px;
    border: 1px solid var(--cyb-line);
    border-radius: var(--cyb-r-pill);
    background: var(--cyb-surface-2);
    color: var(--cyb-muted);
    font-size: 13px;
    transition: all .18s var(--cyb-ease);
}

body.cyb-home .list-links a:hover {
    border-color: var(--cyb-brand-line);
    background: var(--cyb-brand-bg);
    color: var(--cyb-brand);
    transform: translateY(-1px);
}

/* ---------- 5. 首页专属响应式 ---------- */
/* 992–1199 是商品卡片最窄的一档（主栏占 2/3，卡片约 180px）：
   价格与按钮同排会挤，把字号与间距收一号，仍然保持一行 */
@media (min-width: 992px) and (max-width: 1199px) {
    body.cyb-home .shop-foot {
        gap: 8px;
    }

    body.cyb-home .shop-price .price-now {
        font-size: 17px;
    }

    body.cyb-home .shop-btn {
        padding: 0 11px;
    }
}

@media (max-width: 767px) {
    body.cyb-home .index-shop > .panel-body {
        padding: 14px 12px 16px;
    }

    body.cyb-home .index-shop .shop-grid {
        gap: 12px;
    }

    body.cyb-home .list-partner li {
        width: calc(50% - 12px);
    }
}

@media (max-width: 480px) {
    body.cyb-home .index-gallary .related-article .row {
        margin: 0 -5px;
    }

    body.cyb-home .index-gallary .related-article .col-sm-3 {
        padding: 0 5px;
    }
}

/* 尊重系统的「减弱动态效果」偏好（通用部分在 cyb-ui.css） */
@media (prefers-reduced-motion: reduce) {
    body.cyb-home .index-gallary .related-article .col-sm-3:hover,
    body.cyb-home .list-partner li:hover,
    body.cyb-home .list-links a:hover {
        transform: none;
    }

    body.cyb-home .index-gallary .related-article .col-sm-3:hover .embed-responsive img {
        transform: none;
    }
}