/*
 * 产品页基础层（只在产品页加载，token 见 css/tokens-product.css）：
 * 接管遗留 body / section 规则、容器、区块留白、标题、副标题、灰色 mono 小字、文字链接、按钮、标签。
 * 类名统一带 p- 前缀，不与 style.css 的旧类冲突。数值取自视觉稿 design/mockups/assets/product.css。
 */

/* style.css 的遗留 body 规则锁死了 100vh + overflow:hidden，产品页一律原生长滚动 */
body.stbledge-product-page {
    height: auto;
    overflow: visible;
}

.p-page {
    font-family: var(--font-sans);
    color: var(--fg);
}

.p-page ul,
.p-page ol {
    list-style: none;
}

.p-page img {
    display: block;
    max-width: 100%;
}

.p-page a {
    color: inherit;
    text-decoration: none;
}

/* style.css 给 section 加了 100vw 宽和 48px 内边距，这里收回 */
.p-page .p-sec {
    width: 100%;
    padding: var(--p-section-y) 0 0;
}

.p-page .p-sec:last-child {
    padding-bottom: var(--p-section-y);
}

/* 锚点跳转时让出固定导航 */
.p-page [id] {
    scroll-margin-top: calc(var(--nav-h) + var(--space-6));
}

.p-wrap {
    width: 100%;
    max-width: var(--p-wrap-max);
    margin-inline: auto;
    padding-inline: var(--page-px);
}

/* ---------- 标题 / 副标题 / 小字 ---------- */
.p-title {
    font-family: var(--font-sans);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--p-tracking-title);
    line-height: var(--lh-snug);
    color: var(--fg);
    text-wrap: balance;
}

.p-title--1 {
    font-size: var(--p-fs-h1);
}

.p-title--2 {
    max-width: var(--p-title-max);
    font-size: var(--p-fs-h2);
}

.p-title--2 + .p-lead {
    margin-top: var(--space-5);
}

/* 中文标题只在逗号处折行 */
.p-nowrap {
    display: inline-block;
}

.p-lead {
    max-width: var(--p-lead-max);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--fg-secondary);
}

.p-meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: var(--lh-normal);
    color: var(--fg-muted);
}

.p-mono {
    font-family: var(--font-mono);
}

/* ---------- 文字链接 ---------- */
.p-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--fs-sm);
    color: var(--fg);
    transition: color var(--dur-base) var(--ease-out);
}

.p-link span {
    transition: transform var(--dur-base) var(--ease-out);
}

.p-page .p-link:hover,
.p-page .p-link:focus-visible {
    color: var(--brand-blue);
}

.p-link:hover span,
.p-link:focus-visible span {
    transform: translateX(var(--space-1));
}

/* ---------- 按钮：每屏只留一个蓝色实心按钮 ---------- */
.p-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--p-btn-h);
    padding: 0 var(--space-5);
    border: var(--line-width) solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out),
        color var(--dur-base) var(--ease-out);
}

.p-page .p-btn--primary {
    background: var(--brand-blue);
    color: var(--fg-on-brand);
}

.p-page .p-btn--primary:hover,
.p-page .p-btn--primary:focus-visible {
    background: var(--brand-blue-hover);
}

.p-page .p-btn--ghost {
    border-color: var(--line-strong);
    background: transparent;
    color: var(--fg);
}

.p-page .p-btn--ghost:hover,
.p-page .p-btn--ghost:focus-visible {
    border-color: var(--fg-muted);
    background: var(--p-surface-hover);
}

.p-btn--lg {
    min-height: var(--p-btn-h-lg);
    padding-inline: var(--space-6);
    font-size: var(--fs-base);
}

.p-page a:focus-visible,
.p-page button:focus-visible,
.p-page summary:focus-visible {
    outline: var(--line-width) solid var(--brand-blue);
    outline-offset: var(--space-1);
}

/* ---------- 标签 ---------- */
.p-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: var(--line-width) solid var(--line);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular);
    line-height: var(--lh-normal);
    letter-spacing: var(--p-tracking-kicker);
    color: var(--fg-muted);
}

/* ---------- 折叠：原生 details，summary 只是一行灰字 ---------- */
.p-page summary {
    list-style: none;
    cursor: pointer;
}

.p-page summary::-webkit-details-marker {
    display: none;
}

@media (max-width: 768px) {
    .p-wrap {
        padding-inline: var(--page-px-mobile);
    }
}

@media (prefers-reduced-motion: reduce) {
    .p-link,
    .p-link span,
    .p-btn {
        transition: none;
    }
}