/* ------------------------------------------------------------------
 * YOOAN · Products 总览 → 01 PRODUCT FAMILIES
 * Fluid Expanding Grid：鼠标悬停的那张卡片流体式撑满整行，
 * 同行的邻居滑到另一行；点击行为不变，仍然进入分类页。
 * 纯 CSS + 原生 JS（绝对定位 + left/top/width 过渡），无动画库。
 * 配套脚本：assets/js/product-families-fluid.js
 * ------------------------------------------------------------------ */

@media (min-width: 1024px) {

    .yp-overview .yp-system-grid.is-fluid {
        --ypg-cap: 118px;
        --ypg-img: clamp(296px, 28.5vw, 430px);

        position: relative;
        display: block;
        grid-template-rows: none;
        min-height: 0;
    }

    .yp-overview .yp-system-grid.is-fluid .yp-system-card {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: calc(var(--ypg-img) + var(--ypg-cap));
        grid-column: auto;
        grid-row: auto;
    }

    /* 首帧不做动画，避免卡片从 0 位置“飞”进来 */
    .yp-overview .yp-system-grid.is-fluid.is-animated .yp-system-card {
        transition:
            left .82s cubic-bezier(.22, 1, .36, 1),
            top .82s cubic-bezier(.22, 1, .36, 1),
            width .82s cubic-bezier(.22, 1, .36, 1),
            opacity .75s cubic-bezier(.2, .75, .2, 1),
            transform .75s cubic-bezier(.2, .75, .2, 1);
    }

    /* 展开中的那张：图片轻微推近 + 去掉降饱和，强化“被选中”的感觉 */
    .yp-overview .yp-system-grid.is-fluid .yp-system-card img {
        transition: filter .8s ease, object-position .9s cubic-bezier(.22, 1, .36, 1);
    }

    .yp-overview .yp-system-grid.is-fluid .yp-system-card.is-expanded img {
        filter: saturate(.95) contrast(1);
    }

    /* 未展开的两张压暗一点点，形成层级 */
    .yp-overview .yp-system-grid.is-fluid .yp-system-card:not(.is-expanded) img {
        filter: saturate(.68) contrast(.97) brightness(.96);
    }

    /* 标题栏下方的细线随展开状态变成品牌橙，给出“当前这张”的指示 */
    .yp-overview .yp-system-grid.is-fluid .yp-system-card__copy {
        transition: border-color .5s ease;
    }

    .yp-overview .yp-system-grid.is-fluid .yp-system-card.is-expanded .yp-system-card__copy {
        border-bottom-color: var(--yp-orange, #f5a20e);
    }

    /* 展开态下标题右侧的说明文字常驻显示（空间够了） */
    .yp-overview .yp-system-grid.is-fluid .yp-system-card.is-expanded .yp-system-card__detail {
        max-height: 80px;
        margin-top: 0;
        opacity: .86;
    }
}

@media (prefers-reduced-motion: reduce) {
    .yp-overview .yp-system-grid.is-fluid.is-animated .yp-system-card {
        transition-duration: .01ms;
    }
}