/* =====================================================================
   people 详情页公共 CSS (被 kids/youth/midlife/parents/pregnant/
   family-pillar/whitecollar/entrepreneur/freelancer/illness/elderly
   11 个详情页共用)
   引入方式: <link rel="stylesheet" href="people-detail.css">
   配合 shared/css/output.css (Tailwind) 一起使用
   注意: 主题色相关样式 (gradient/toc-link 颜色/cta-button 颜色) 仍
   在各页面单独定义, 这里只放跨页面完全一致的部分
   ===================================================================== */

/* 字体类型 (跨页面统一 Noto Sans SC) */
body { font-family: 'Noto Sans SC', sans-serif; }
h1, h2, h3, h4 { font-family: 'Noto Sans SC', sans-serif; }

/* 动画延迟 (fade-in-up 用) */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* 工具类 */
.hidden { display: none !important; }

/* 平滑滚动 + 锚点偏移 (避免被顶部 fixed header 遮挡) */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 80px; }

/* =====================================================================
   移动端响应式覆盖 (跨页面统一)
   注: 由 add-mobile-css.py 批量插入 (20260623)
   ===================================================================== */
@media (max-width: 768px) {
    /* H1/H2/H3 mobile 字号覆盖 */
    h1.text-4xl { font-size: 1.75rem !important; line-height: 2.25rem !important; }
    h1.text-5xl { font-size: 2rem !important; line-height: 2.5rem !important; }
    .text-3xl { font-size: 1.35rem !important; line-height: 1.75rem !important; }
    .text-2xl { font-size: 1.15rem !important; line-height: 1.5rem !important; }

    /* padding/margin 缩小 */
    .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .py-10 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .mt-12 { margin-top: 2rem !important; }
    .mt-10 { margin-top: 1.5rem !important; }
    .mb-12 { margin-bottom: 2rem !important; }
    .mb-8 { margin-bottom: 1.25rem !important; }
    .mb-6 { margin-bottom: 1rem !important; }

    /* 表格缩小 */
    table { font-size: 12px !important; }
    td, th { padding: 4px 6px !important; }

    /* 装饰元素缩小 */
    .blur-3xl { filter: blur(32px) !important; }
    .blur-\[100px\] { filter: blur(50px) !important; }
    .w-\[600px\].h-\[600px\] { width: 280px !important; height: 280px !important; }
}

/* =====================================================================
   桌面端：隐藏移动端 toggle 按钮和遮罩
   ===================================================================== */
@media (min-width: 769px) {
    .toc-toggle-btn, .toc-overlay { display: none !important; }
}

/* =====================================================================
   移动端：TOC 贴边隐藏 + 浮动 toggle 按钮
   ===================================================================== */
@media (max-width: 768px) {
    #tocContainer {
        transform: translateX(-110%) !important;
        transition: transform 0.3s ease;
    }
    body.toc-open #tocContainer {
        transform: translateX(0) !important;
    }
    .toc-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 35;
    }
    body.toc-open .toc-overlay { display: block; }

    /* 移动端：挑选产品按钮缩小到 48x48 (medical-detail 样式) */
    .product-pick-btn {
        bottom: 32px !important;
        right: 32px !important;
        width: 48px !important;
        height: 48px !important;
    }
    .product-pick-btn span {
        font-size: 13px !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }
}

/* =====================================================================
   移动端：让内容撑满 viewport，清理 desktop 残留
   ===================================================================== */
@media (max-width: 768px) {
    .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl,
    .max-w-2xl, .max-w-xl, .max-w-lg, .max-w-md, .max-w-sm {
        max-width: 100% !important;
    }
    .mx-auto { margin-left: 0 !important; margin-right: 0 !important; }
    .text-center > .inline-block,
    .text-center > .inline-flex,
    div.text-center .inline-block,
    div.text-center .inline-flex {
        display: block !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    aside.flex-shrink-0 { display: none !important; }
    body.toc-open aside.flex-shrink-0 { display: block !important; }
    .px-4, .sm\:px-6, .lg\:px-8 { padding-left: 12px !important; padding-right: 12px !important; }
    .pt-28 { padding-top: 88px !important; }
    .pt-24 { padding-top: 40px !important; }
    .pt-20 { padding-top: 32px !important; }
    .pt-16 { padding-top: 24px !important; }
    .pb-16 { padding-bottom: 24px !important; }
    .pb-20 { padding-bottom: 32px !important; }
    .inline-flex.px-4 { padding-left: 10px !important; padding-right: 10px !important; }
    .p-6 { padding: 6px !important; }
    .p-5 { padding: 6px !important; }
    .p-4 { padding: 4px !important; }
    .p-3 { padding: 4px !important; }
    .px-6, .px-5 { padding-left: 6px !important; padding-right: 6px !important; }
    .px-4, .px-3 { padding-left: 4px !important; padding-right: 4px !important; }
    .py-6, .py-5 { padding-top: 6px !important; padding-bottom: 6px !important; }
    .py-4, .py-3 { padding-top: 4px !important; padding-bottom: 4px !important; }
}