/* ==========================================================================
   Category intro collapse  ·  分类页「品类介绍」折叠块
   --------------------------------------------------------------------------
   站点：zencart22.com（Zen Cart 2.x / 模板 ts_modern）
   用途：分类页 H1 下方，把后台生成的约 1900 字分类描述折叠成 3 行
   作用域：全部 .ci- 前缀，不动站点任何现有规则

   与 brief 的差异（本站适配，必需）：
   · 衬线字体 Cormorant Garamond → Playfair Display
     本站 html_header.php 只加载 Montserrat + Playfair Display 两套字体，
     Cormorant 属于「声明了但从未加载」，直接用会静默回退成 Georgia。
   · 金色 #cda45e → #9a7b2e
   #cda45e 在 #f8f8f8 上对比度约 2.6:1，做 14px 按钮文字不合格；
   #9a7b2e 约 4.7:1，通过 AA。深色底反过来，用 #d4af37 更亮。

   高度预算
   ─────────────────────────────────────────────
   ≥992px  正文 3 行 @15/1.7 = 76.5 + 上 17 + 下 16.5 = 110.0px
           按钮 40px 在独立列内与第 3 行中线齐平，零重叠
   <992px  单列堆叠 10 + 69.3（3 行 @14/1.65）+ 4 + 42 + 8 = 133.3px
           （3 行 69.3 + 按钮 42 = 111.3 已是零留白下限，96px 不可达）

   关于 !important：
   本站 luxe_typography.css 用 html[data-theme] h2 {…!important} 统一劫持标题，
   特异性 (0,1,2) 高于单类选择器。本文件用 .ci[data-ci] 前缀提到 (0,2,x) 再叠 !important，
   只钉字体/字号/行高/颜色/间距，不碰布局属性。
   ========================================================================== */

.ci[data-ci] {
    /* ---- 可调 token ---- */
    --ci-surface: #f8f8f8;
    --ci-ink: #212529;
    --ci-gold: #9a7b2e;
    --ci-gold-hover: #7c6122;
    --ci-radius: 12px;

    --ci-font: Montserrat, "Montserrat Fallback", -apple-system, "Segoe UI", Arial, sans-serif;
    --ci-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;

    --ci-fs: 15px;
    --ci-lh: 1.7;
    --ci-lines: 3;                  /* 收起态可见行数，不要改 */
    --ci-measure: 780px;

    --ci-pad-t: 17px;
    --ci-pad-x: 26px;
    --ci-pad-b: 16.5px;
    --ci-gap: 28px;
    --ci-ctrl-h: 40px;
    --ci-fade-h: 16px;

    display: block;
    position: relative;
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--ci-font);
    text-align: left;
}

.ci[data-ci] *,
.ci[data-ci] *::before,
.ci[data-ci] *::after { box-sizing: border-box; }

.ci-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    column-gap: var(--ci-gap);
    background: var(--ci-surface);
    border: 0;
    border-radius: var(--ci-radius);
    box-shadow: none;
    padding: var(--ci-pad-t) var(--ci-pad-x) var(--ci-pad-b);
    transition: background-color .3s ease;
}

/* ---- 正文列：裁切容器 + 紧贴其底边的渐隐层 ---- */
.ci-body {
    position: relative;
    min-width: 0;
    grid-column: 1;
}

.ci-text {
    max-width: var(--ci-measure);
    max-height: calc(var(--ci-lines) * var(--ci-fs) * var(--ci-lh));
    overflow: hidden;
    transition: max-height 280ms ease-out;
}

.ci[data-ci] .ci-text > *:first-child { margin-top: 0 !important; }
.ci[data-ci] .ci-text > *:last-child  { margin-bottom: 0 !important; }

.ci[data-ci] .ci-text p {
    margin: 0 0 16px !important;
    font-family: var(--ci-font) !important;
    font-size: var(--ci-fs) !important;
    line-height: var(--ci-lh) !important;
    font-weight: 400 !important;
    color: var(--ci-ink) !important;
    letter-spacing: 0 !important;
}

/* 小节标题：Playfair Display 20/500 */
.ci[data-ci] .ci-text h2 {
    margin: 32px 0 12px !important;
    padding: 0 !important;
    font-family: var(--ci-font-serif) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    line-height: 1.35 !important;
    letter-spacing: .01em !important;
    color: var(--ci-ink) !important;
    text-transform: none !important;
    border: 0 !important;
    background: none !important;
}

/* ---- 渐隐：只做颜色过渡，不加模糊/毛玻璃 ---- */
.ci-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--ci-fade-h);
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(248, 248, 248, 0) 0%,
        rgba(248, 248, 248, .52) 52%,
        rgba(248, 248, 248, .95) 100%
    );
}

/* ---- 按钮：独立列，与第 3 行中线齐平 ---- */
.ci[data-ci] .ci-box #ci-toggle {
    grid-column: 2;
    align-self: end;
    justify-self: end;
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: max-content;
    height: var(--ci-ctrl-h) !important;
    min-height: var(--ci-ctrl-h) !important;
    padding: 0 16px !important;
    margin: 0 0 -7px !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: none !important;
    box-shadow: none !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    font-family: var(--ci-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: .01em !important;
    text-transform: none !important;
    color: var(--ci-gold) !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color .2s ease;
}

.ci[data-ci] .ci-box #ci-toggle:hover { color: var(--ci-gold-hover) !important; }

/* 站点有一条全局规则 div, p, span, li … { color: … !important }，
   会把按钮内部的 span / svg 单独染色，这里让子元素回到按钮的颜色 */
.ci[data-ci] .ci-box #ci-toggle .ci-btn-label,
.ci[data-ci] .ci-box #ci-toggle .ci-ico,
.ci[data-ci] .ci-box #ci-toggle .ci-ico svg {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

.ci[data-ci] .ci-box #ci-toggle:focus-visible {
    outline: 2px solid var(--ci-gold);
    outline-offset: 2px;
}

/* 箭头：外层 span 管 hover 平移，内层 svg 管展开旋转，互不覆盖 */
.ci-ico {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.ci[data-ci] .ci-box #ci-toggle:hover .ci-ico { transform: translateX(2px); }

.ci-ico svg {
    display: block;
    width: 24px;
    height: 24px;
    transition: transform .2s ease;
}

/* ---- 展开态 ---- */
.ci[data-ci].is-open .ci-text {
    max-height: none;
    overflow: visible;
}

.ci[data-ci].is-open .ci-fade { display: none; }

.ci[data-ci].is-open .ci-box { padding-bottom: 22px; }

.ci[data-ci].is-open .ci-box #ci-toggle { margin-bottom: 0 !important; }

.ci[data-ci].is-open .ci-ico svg { transform: rotate(180deg); }

.ci[data-ci].is-open .ci-text > * {
    animation: ci-fade-in 200ms ease-out 80ms both;
}

@keyframes ci-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ==========================================================================
   深色主题（本站 html[data-theme="dark"]）
   ========================================================================== */
html[data-theme="dark"] .ci[data-ci],
html[data-bs-theme="dark"] .ci[data-ci],
body.dark-mode .ci[data-ci],
body.theme-dark .ci[data-ci],
.theme-dark .ci[data-ci] {
    --ci-surface: #1e1e1e;
    --ci-ink: #f8f9fa;
    --ci-gold: #d4af37;
    --ci-gold-hover: #e8c96a;
}

html[data-theme="dark"] .ci-fade,
html[data-bs-theme="dark"] .ci-fade,
body.dark-mode .ci-fade,
body.theme-dark .ci-fade,
.theme-dark .ci-fade {
    background: linear-gradient(
        to bottom,
        rgba(30, 30, 30, 0) 0%,
        rgba(30, 30, 30, .52) 52%,
        rgba(30, 30, 30, .95) 100%
    );
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1199px) {
    .ci-text { max-width: none; }
}

@media (max-width: 991px) {
    .ci[data-ci] {
        --ci-radius: 8px;
        --ci-fs: 14px;
        --ci-lh: 1.65;
        --ci-pad-t: 10px;
        --ci-pad-x: 18px;
        --ci-pad-b: 8px;
        --ci-ctrl-h: 42px;
        --ci-fade-h: 15px;
        margin-bottom: 14px;
    }

    .ci-box {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 4px;
    }

    .ci-body { grid-column: 1; }

    .ci[data-ci] .ci-box #ci-toggle {
        grid-column: 1;
        justify-self: stretch;
        width: auto;
        margin: 0 !important;
        padding: 0 14px !important;
    }

    .ci[data-ci] .ci-text h2 { margin: 26px 0 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .ci-text,
    .ci-btn,
    .ci-ico,
    .ci-ico svg { transition: none !important; }
    .ci[data-ci].is-open .ci-text > * { animation: none !important; }
}