/* ==================================================================
 * YOOAN 首页 · 01 PRODUCT SYSTEMS
 * 「居中 tab 胶囊 + 大圆角卡片横向切换」轮播（对标参考视频）
 *  + 02 SYSTEM COMPONENTS 品牌段的文字排版对齐
 *
 * 纯 CSS + 原生 JS（transform 位移），无动画库。
 * 配套脚本：assets/js/home-showcase-carousel.js
 * ================================================================== */

.yh-showcase--carousel {
    /* 一处改全站对齐：与页面其它板块共用的左右留白 */
    --yh-gutter: max(clamp(22px, 5vw, 72px), calc((100vw - 1420px) / 2));

    /* 轮播三个可调参数 */
    --yhc-w: min(72vw, 1120px);          /* 当前卡片宽度（左右邻居露出多少由它决定） */
    --yhc-gap: clamp(16px, 2.2vw, 34px); /* 卡片间距 */
    --yhc-radius: clamp(26px, 3.6vw, 58px); /* 大圆角，想收敛就改这一个值 */

    padding-top: clamp(56px, 6.4vw, 104px);
    padding-right: var(--yh-gutter);
    padding-bottom: clamp(56px, 6.4vw, 104px);
    padding-left: var(--yh-gutter);
    overflow: hidden;
}

/* 标题层级：首页 H1 是 89px，板块标题必须明显小于它。
   这里定为第一档 66px；卡内标题 38px，比例 1.7 倍，读起来不打架。 */
.yh-showcase--carousel .yh-showcase__head {
    align-items: start;
    margin-bottom: clamp(26px, 3vw, 42px);
}

/* 右栏与标题顶端对齐，不再吊在底部 */
.yh-showcase--carousel .yh-showcase__head > div {
    padding-top: 6px;
    padding-bottom: 0;
}

.yh-showcase--carousel .yh-showcase__head h2 {
    max-width: 13ch;
    font-size: clamp(38px, 4.4vw, 66px);
    line-height: 1.02;
    letter-spacing: -.055em;
}

/* ---------- tab 胶囊行 ---------- */

.yhc__tabs {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: clamp(24px, 3vw, 44px);
}

/* 跟随当前 tab 滑动的实心胶囊 */
.yhc__pill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 10px;
    background: var(--ys-ink, #0e1733);
    opacity: 0;
    transition:
        transform .55s cubic-bezier(.22, 1, .36, 1),
        width .55s cubic-bezier(.22, 1, .36, 1),
        opacity .3s ease;
    pointer-events: none;
}

.yhc.is-ready .yhc__pill { opacity: 1; }

.yhc__tab {
    position: relative;
    z-index: 1;
    padding: 12px 22px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #6a7190;
    font-family: var(--wp--preset--font-family--body, inherit);
    font-size: clamp(13.5px, 1.1vw, 16px);
    font-weight: 500;
    letter-spacing: -.01em;
    cursor: pointer;
    transition: color .35s ease;
}

.yhc__tab:hover { color: var(--ys-ink, #0e1733); }

.yhc__tab.is-active { color: var(--ys-paper, #fbf7e9); }

/* 脚本未接管时（无 JS）退回实心底，保证当前项仍可辨认 */
.yhc:not(.is-ready) .yhc__tab.is-active {
    background: var(--ys-ink, #0e1733);
}

.yhc__tab:focus-visible {
    outline: 2px solid var(--ys-orange, #f5a20e);
    outline-offset: 3px;
}

/* ---------- 轨道与卡片 ---------- */

.yhc__viewport {
    /* 撑出板块的左右留白，让邻居卡片在视口边缘被裁切 */
    margin-right: calc(-1 * var(--yh-gutter));
    margin-left: calc(-1 * var(--yh-gutter));
    overflow: hidden;
}

.yhc__track {
    display: flex;
    gap: var(--yhc-gap);
    will-change: transform;
}

.yhc.is-ready .yhc__track {
    transition: transform .85s cubic-bezier(.22, 1, .36, 1);
}

.yhc__slide {
    position: relative;
    flex: 0 0 var(--yhc-w);
    width: var(--yhc-w);
    aspect-ratio: 1.85;
    max-height: min(64vh, 580px);
    overflow: hidden;
    border-radius: var(--yhc-radius);
    background: #19223a;
    isolation: isolate;
}

.yhc__slide img,
.yhc__scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.yhc__slide img {
    z-index: -2;
    object-fit: cover;
    filter: saturate(.76) brightness(.84);
    transition: filter .8s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
}

.yhc__slide.is-active img {
    filter: saturate(.92) brightness(.93);
}

.yhc__scrim {
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(8, 15, 36, .88) 0%, rgba(8, 15, 36, .68) 26%, rgba(8, 15, 36, .28) 56%, rgba(8, 15, 36, .10) 76%, rgba(8, 15, 36, .34) 100%);
}

/* 非当前卡整体可点，点一下滑过去 */
.yhc__slide:not(.is-active) { cursor: pointer; }

/* ---------- 卡内文字：左对齐、垂直居中 ---------- */

.yhc__copy {
    position: absolute;
    top: 50%;
    left: clamp(28px, 4vw, 64px);
    z-index: 2;
    width: min(46ch, 62%);
    color: #fff;
    transform: translateY(-50%);
}

.yhc__copy h3 {
    margin: 0;
    color: #fff;
    font-family: var(--wp--preset--font-family--display, inherit);
    font-size: clamp(21px, 2.15vw, 31px);
    font-weight: 480;
    line-height: 1.1;
    letter-spacing: -.03em;
}

.yhc__copy p {
    max-width: 38ch;
    margin: clamp(14px, 1.5vw, 20px) 0 0;
    color: rgba(255, 255, 255, .86);
    font-size: clamp(14px, 1.2vw, 17.5px);
    line-height: 1.58;
}

.yhc__copy .yhc__link {
    --cta-ink: #FBF7E9;
    margin-top: clamp(18px, 2vw, 28px);
}

/* 邻居卡的文字压暗，视觉重量集中在当前卡 */
.yhc__slide:not(.is-active) .yhc__copy {
    opacity: .62;
    transition: opacity .6s ease;
}

.yhc__slide.is-active .yhc__copy {
    opacity: 1;
    transition: opacity .6s ease;
}

/* ---------- 下方留资行：细线 + 右侧实心按钮 ---------- */

.yh-support {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px clamp(28px, 5vw, 96px);
    align-items: center;
    margin-top: clamp(22px, 2.4vw, 36px);
    padding-top: clamp(18px, 2vw, 26px);
    border-top: 1px solid #d9d2b8;
}

.yh-support__eyebrow {
    margin: 0;
    color: #7b6b3a;
    font: 600 10px/1.2 var(--wp--preset--font-family--spec, monospace);
    letter-spacing: .14em;
    text-transform: uppercase;
}

.yh-support__text {
    max-width: 66ch;
    margin: 10px 0 0;
    color: #4c5676;
    font-size: clamp(14px, 1.1vw, 16.5px);
    line-height: 1.55;
}

.yh-support__text strong {
    color: var(--ys-ink, #0e1733);
    font-weight: 500;
}

.yh-support__cta { white-space: nowrap; }

/* ==================================================================
   02 SYSTEM COMPONENTS · 品牌段文字排版与产品段对齐
   左边缘、眉标、正文字号、两栏节奏统一；logo 滚动带保持不变。
   标题级别刻意比产品段小一档 —— 它是支撑性板块，不该和主板块一样响。
   ================================================================== */

.yooan-partners {
    --yh-gutter: max(clamp(22px, 5vw, 72px), calc((100vw - 1420px) / 2));
}

/* ------------------------------------------------------------------
   品牌段改为「小标签 + 大 logo 条」：这一段的主角是 logo，不是标题。
   文字全部退成说明性的小字并居中，把面积让给 logo。
   （.alignfull / 两层类是为了压过后加载的 brand-refinements.css）
   ------------------------------------------------------------------ */

.yooan-partners.alignfull {
    --yooan-partner-gap: clamp(34px, 4.2vw, 70px);

    padding-top: clamp(34px, 3.8vw, 58px);
    padding-bottom: clamp(34px, 3.8vw, 58px);
}

.yooan-partners .yooan-partners__heading {
    display: block;
    width: auto;
    margin: 0 0 clamp(22px, 2.6vw, 36px);
    padding-right: var(--yh-gutter);
    padding-left: var(--yh-gutter);
    text-align: center;
}

/* 只保留主标题一行：居中、收小，把面积全部让给 logo */
.yooan-partners .yooan-partners__heading h2 {
    max-width: none;
    margin: 0 auto;
    color: var(--yb-ink, #0e1733);
    font-size: clamp(15px, 1.35vw, 19px);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -.015em;
}

/* logo 条：从无限横滚改成一排等距静态排列。
   横滚会让 logo 永远不在固定位置 —— 既难辨认，也没法截图，
   而这一段的全部价值就在于"一眼认出几个熟悉的名字"。 */
.yooan-partners .yooan-partners__marquee {
    padding: 6px var(--yh-gutter);
    mask-image: none;
    -webkit-mask-image: none;
}

.yooan-partners .yooan-partners__track {
    display: block;
    width: auto;
    animation: none;
}

/* PHP 里为了滚动复制了第二组，静态排列下隐藏它（它本就是 aria-hidden） */
.yooan-partners .yooan-partners__group[aria-hidden="true"] {
    display: none;
}

.yooan-partners .yooan-partners__group {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: clamp(14px, 2.2vw, 40px);
    padding: 0;
}

.yooan-partners .yooan-partners__group li {
    flex: 1 1 0;
    min-width: 0;
    height: 70px;
}

.yooan-partners .yooan-partners__group img {
    height: 56px;
    opacity: .8;
}

.yooan-partners .yooan-partners__note {
    width: auto;
    margin: clamp(20px, 2.4vw, 30px) 0 0;
    padding-right: var(--yh-gutter);
    padding-left: var(--yh-gutter);
    color: #767d94;
    font-size: 11.5px;
    text-align: center;
}

/* ---------- 响应式 ---------- */

@media (max-width: 900px) {
    .yh-showcase--carousel {
        --yhc-w: 86vw;
        --yhc-radius: clamp(20px, 5vw, 32px);
    }

    .yhc__tabs {
        margin-right: calc(-1 * var(--yh-gutter));
        margin-left: calc(-1 * var(--yh-gutter));
        padding-right: var(--yh-gutter);
        padding-left: var(--yh-gutter);
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .yhc__tabs::-webkit-scrollbar { display: none; }

    .yhc__tab {
        padding: 10px 16px;
        white-space: nowrap;
    }

    .yhc__slide {
        aspect-ratio: 3 / 4;
        max-height: none;
    }

    .yhc__copy {
        top: auto;
        right: clamp(20px, 5vw, 32px);
        bottom: clamp(24px, 5vw, 36px);
        left: clamp(20px, 5vw, 32px);
        width: auto;
        transform: none;
    }

    .yhc__scrim {
        background: linear-gradient(0deg, rgba(8, 15, 36, .88) 0%, rgba(8, 15, 36, .34) 52%, rgba(8, 15, 36, .12) 100%);
    }

    .yh-support {
        grid-template-columns: 1fr;
    }

    .yh-support__cta { justify-self: start; }

    .yooan-partners .yooan-partners__heading h2 { max-width: none; }

    /* 窄屏放不下 10 个 logo：改成可横向滑动的一排，取消等分 */
    .yooan-partners .yooan-partners__marquee {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .yooan-partners .yooan-partners__marquee::-webkit-scrollbar { display: none; }

    .yooan-partners .yooan-partners__group {
        width: max-content;
        justify-content: flex-start;
        gap: 30px;
    }

    .yooan-partners .yooan-partners__group li {
        flex: 0 0 104px;
        height: 62px;
    }

    .yooan-partners .yooan-partners__group img { height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .yhc.is-ready .yhc__track,
    .yhc__pill,
    .yhc__slide img,
    .yhc__copy {
        transition-duration: .01ms;
    }
}

/* ==================================================================
   02 SYSTEM COMPONENTS · Logo 网格交互（2026-09-26）
   参考：细线网格 + 交叉点"+"号 + 悬停格子描边与柔光，离开后光晕慢慢褪去。
   纯 CSS 实现；光晕跟随鼠标位置由 home-showcase-carousel.js 里 10 行 JS 写入 --mx/--my。
   占位与原静态 logo 条基本一致（1440 宽约 +10px）。
   ================================================================== */

.yooan-partners--grid {
    --yp-line: rgba(14, 23, 51, .1);
    --yp-cross: rgba(14, 23, 51, .34);
    --yp-accent: rgba(245, 162, 14, .72);
    --yp-glow: rgba(245, 162, 14, .2);
    --yp-cell-h: clamp(78px, 6.6vw, 96px);
    --yp-extend: clamp(18px, 2vw, 30px);
}

/* 容器：去掉旧的裁切，让竖线能向上下延伸出去 */
.yooan-partners--grid .yooan-partners__marquee {
    position: relative;
    overflow: visible;
    padding-top: 0;
    padding-bottom: 0;
}

/* 两条横线：贯穿整个屏宽，两端淡出 */
.yooan-partners--grid .yooan-partners__marquee::before,
.yooan-partners--grid .yooan-partners__marquee::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--yp-line);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    pointer-events: none;
}

.yooan-partners--grid .yooan-partners__marquee::before { top: 0; }
.yooan-partners--grid .yooan-partners__marquee::after { bottom: 0; }

.yooan-partners--grid .yooan-partners__group {
    position: relative;
    gap: 0;
}

/* 最右一条竖线 */
.yooan-partners--grid .yooan-partners__group::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--yp-extend));
    right: 0;
    bottom: calc(-1 * var(--yp-extend));
    width: 1px;
    background: var(--yp-line);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--yp-extend), #000 calc(100% - var(--yp-extend)), transparent);
    mask-image: linear-gradient(180deg, transparent, #000 var(--yp-extend), #000 calc(100% - var(--yp-extend)), transparent);
}

/* 单元格 */
.yooan-partners--grid .yooan-partners__group li {
    position: relative;
    height: var(--yp-cell-h);
    padding: 0 clamp(10px, 1.2vw, 20px);
    transform: none;
    transition: none;
}

.yooan-partners--grid .yooan-partners__group li:hover { transform: none; }

/* 每格左侧竖线：上下各延伸一截并淡出 */
.yooan-partners--grid .yooan-partners__group li::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--yp-extend));
    bottom: calc(-1 * var(--yp-extend));
    left: 0;
    width: 1px;
    background: var(--yp-line);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 var(--yp-extend), #000 calc(100% - var(--yp-extend)), transparent);
    mask-image: linear-gradient(180deg, transparent, #000 var(--yp-extend), #000 calc(100% - var(--yp-extend)), transparent);
    pointer-events: none;
}

/* 交叉点"+"号：奇数格放在左上角，偶数格放在左下角，错落不死板 */
.yooan-partners--grid .yooan-partners__group li::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: -5px;
    left: -5px;
    width: 11px;
    height: 11px;
    background:
        linear-gradient(var(--yp-cross), var(--yp-cross)) center / 11px 1px no-repeat,
        linear-gradient(var(--yp-cross), var(--yp-cross)) center / 1px 11px no-repeat;
    pointer-events: none;
}

.yooan-partners--grid .yooan-partners__group li:nth-child(even)::after {
    top: auto;
    bottom: -6px;
}

/* 悬停层：琥珀色描边 + 跟随鼠标的柔光。
   进入快（.18s），离开慢（.9s）——鼠标划过时会留下一道渐隐的"拖尾"。 */
.yooan-partners--grid .yooan-partners__cell-fx {
    position: absolute;
    z-index: 0;
    inset: 0 0 0 0;
    border: 1px solid var(--yp-accent);
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 60%), var(--yp-glow) 0%, rgba(245, 162, 14, .06) 45%, rgba(245, 162, 14, 0) 72%);
    opacity: 0;
    transition: opacity .9s cubic-bezier(.22, .61, .36, 1);
    pointer-events: none;
}

.yooan-partners--grid .yooan-partners__group li:hover .yooan-partners__cell-fx {
    opacity: 1;
    transition-duration: .18s;
}

.yooan-partners--grid .yooan-partners__group img {
    position: relative;
    z-index: 1;
    height: 50px;
    opacity: .78;
    transition: filter .35s ease, opacity .35s ease;
}

.yooan-partners--grid .yooan-partners__group li:hover img {
    filter: none;
    opacity: 1;
    transition-duration: .15s;
}

.yooan-partners--grid .yooan-partners__note {
    margin-top: clamp(18px, 2vw, 26px);
}

@media (max-width: 900px) {
    .yooan-partners--grid {
        --yp-cell-h: 76px;
        --yp-extend: 0px;
    }

    /* 窄屏继续横向滑动；滑动容器会裁掉上下延伸，所以竖线不再延伸 */
    .yooan-partners--grid .yooan-partners__marquee {
        overflow-x: auto;
        overflow-y: hidden;
    }

    .yooan-partners--grid .yooan-partners__marquee::before,
    .yooan-partners--grid .yooan-partners__marquee::after {
        -webkit-mask-image: none;
        mask-image: none;
    }

    .yooan-partners--grid .yooan-partners__group { gap: 0; }

    .yooan-partners--grid .yooan-partners__group li {
        flex: 0 0 116px;
        height: var(--yp-cell-h);
    }

    .yooan-partners--grid .yooan-partners__group img { height: 44px; }

    /* 窄屏"+"号会被裁掉一半，干脆不画 */
    .yooan-partners--grid .yooan-partners__group li::after { display: none; }
}

@media (hover: none) {
    .yooan-partners--grid .yooan-partners__group img { filter: none; opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
    .yooan-partners--grid .yooan-partners__cell-fx,
    .yooan-partners--grid .yooan-partners__group img { transition: none; }
}