/* ==========================================================
   vd-faq.css — 页面问答板块（vickongdentists.com 英文站）
   2026-11-02 新建

   用法：五个页面各一个 <section class="vd-faq vd-faq--{variant}">
     --home     首页 /
     --about    品牌简介 /about/
     --dentists 医生团队 /dentists/
     --prices   收费标准 /prices/
     --contact  就医指引 /contact-us/

   设计原则
   1. 骨架只有一套：编号（01–06）+ 问题 + 圆形加号 + <details> 折叠，
      纯 CSS，无 JS 依赖，禁用 JS 也能完整阅读。
   2. 差异只在三处：容器宽度、标题形态、条目表皮（卡片 / 细线 / 边框 / 阴影），
      各自沿用所在页面既有的视觉语言，不新造风格。
   3. 所有选择器挂在 .vd-faq 之下，不污染全局；字体不声明，
      跟随各页面自身的 font-family。
   4. 断点与各页既有断点对齐：1440 / 1024 / 768 / 425。
   ========================================================== */

.vd-faq {
    --vd-accent: #095398;
    --vd-ink: #0E2837;
    --vd-muted: #5b6b76;
    --vd-line: #dbe6f0;
    --vd-soft: #f5f9fd;
    --vd-width: 1120px;
    --vd-gap: 14px;

    box-sizing: border-box;
    width: 100%;
    padding: 0 20px;
    color: var(--vd-ink);
    -webkit-text-size-adjust: 100%;
}

.vd-faq *,
.vd-faq *::before,
.vd-faq *::after {
    box-sizing: inherit;
}

.vd-faq__inner {
    max-width: var(--vd-width);
    margin: 0 auto;
}

/* ---------- 标题区 ---------- */
.vd-faq__head {
    margin: 0 0 36px;
    text-align: center;
}

.vd-faq__kicker {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--vd-accent);
    opacity: .85;
}

.vd-faq__title {
    margin: 12px 0 0;
    font-size: 32px;
    line-height: 1.28;
    font-weight: 700;
    color: var(--vd-ink);
    letter-spacing: .2px;
}

.vd-faq__lead {
    max-width: 660px;
    margin: 14px auto 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--vd-muted);
}

/* 收费页：渐隐蓝线，取自 .title .line-blue，收窄到标题宽度避免变成整行分割线 */
.vd-faq__rule {
    display: block;
    width: 100%;
    max-width: 460px;
    height: 4px;
    margin: 18px auto 0;
    background: linear-gradient(90deg, #ffffff 0%, #00ACFF 50%, #ffffff 100%);
}

/* 医生页：短横，取自居中标题的收口方式 */
.vd-faq__shortline {
    display: block;
    width: 40px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 2px;
    background: var(--vd-accent);
}

/* ---------- 列表骨架 ---------- */
.vd-faq__list {
    display: grid;
    gap: var(--vd-gap);
}

.vd-faq__item {
    margin: 0;
}

.vd-faq__summary {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 28px;
    align-items: start;
    gap: 12px;
    cursor: pointer;
    list-style: none;
    outline: none;
}

/* Safari / 旧 WebKit 的小三角 */
.vd-faq__summary::-webkit-details-marker {
    display: none;
}

.vd-faq__summary:focus-visible {
    outline: 2px solid var(--vd-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.vd-faq__num {
    padding-top: 3px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .06em;
    color: var(--vd-accent);
    opacity: .55;
    font-variant-numeric: tabular-nums;
}

.vd-faq__q {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.52;
    color: var(--vd-ink);
    transition: color .2s ease;
}

.vd-faq__icon {
    position: relative;
    width: 26px;
    height: 26px;
    margin-top: 1px;
    border: 1px solid var(--vd-line);
    border-radius: 50%;
    background: transparent;
    transition: transform .3s ease, background-color .3s ease, border-color .3s ease;
}

.vd-faq__icon::before,
.vd-faq__icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    background: var(--vd-accent);
    transform: translate(-50%, -50%);
    transition: background-color .3s ease, opacity .3s ease;
}

.vd-faq__icon::before {
    width: 11px;
    height: 2px;
}

.vd-faq__icon::after {
    width: 2px;
    height: 11px;
}

.vd-faq__item[open] > .vd-faq__summary .vd-faq__icon {
    border-color: var(--vd-accent);
    background: var(--vd-accent);
    transform: rotate(90deg);
}

.vd-faq__item[open] > .vd-faq__summary .vd-faq__icon::before,
.vd-faq__item[open] > .vd-faq__summary .vd-faq__icon::after {
    background: #fff;
}

/* 竖线转横后隐藏：加号 → 减号
   注意旋转的是整个图标（90°），横线::before 会转成竖线、竖线::after 转成横线，
   所以这里要隐藏的是 ::before，留下 ::after 作为减号 */
.vd-faq__item[open] > .vd-faq__summary .vd-faq__icon::before {
    opacity: 0;
}

.vd-faq__body {
    padding: 12px 40px 0 56px;
}

.vd-faq__body p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.78;
    color: var(--vd-muted);
    text-wrap: pretty;
}

/* 折叠内容不加淡入动画：无头浏览器 / 打印 / 部分阅读模式下动画会被冻结，
   一旦停在首帧文字就整段透明，得不偿失。展开只做即时呈现。 */
@media (prefers-reduced-motion: reduce) {
    .vd-faq__icon {
        transition: none;
    }
}

/* ---------- 底部追问 ---------- */
.vd-faq__foot {
    margin: 32px 0 0;
    text-align: center;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--vd-muted);
}

.vd-faq__foot a {
    color: var(--vd-accent);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
    transition: opacity .2s ease;
}

.vd-faq__foot a:hover {
    opacity: .72;
}

/* ==========================================================
   变体一：首页
   沿用 .box 的居中节奏 + .service-item 的圆角淡蓝底
   ========================================================== */
.vd-faq--home {
    --vd-accent: #095398;
    --vd-width: 1120px;
    --vd-gap: 14px;
    margin: 0 auto 7%;
}

.vd-faq--home .vd-faq__title {
    /* 与首页 h1.start-title 同节奏（1.8vw），两端夹住避免过小/过大 */
    font-size: clamp(24px, 1.8vw, 30px);
    letter-spacing: 0;
}

.vd-faq--home .vd-faq__item {
    padding: 22px 26px;
    border-radius: 16px;
    background: #F7FAFD;
    transition: background-color .25s ease, box-shadow .25s ease;
}

.vd-faq--home .vd-faq__item:hover {
    background: #EFF6FD;
}

/* 展开项：整块换成 .service-item 的淡蓝，并托起一点阴影 */
.vd-faq--home .vd-faq__item[open] {
    background: #EBF3FC;
    box-shadow: 0 10px 26px rgba(9, 83, 152, .07);
}

/* ==========================================================
   变体二：品牌简介 /about/（模板 index_article_yyjj.html）
   页面用 h1.title：36px / #0078FF / 字重 500 / 居中；
   正文容器 .about-intro 1300px。此处对齐同一套比例，
   条目沿用细线分隔，展开行借用 .honor 的浅蓝渐变
   ========================================================== */
.vd-faq--about {
    --vd-accent: #0078FF;
    --vd-ink: #0E2837;
    --vd-muted: #4f6170;
    --vd-width: 1300px;
    --vd-gap: 0;
    padding: 6% 20px 5%;
}

.vd-faq--about .vd-faq__head {
    margin-bottom: 26px;
}

.vd-faq--about .vd-faq__kicker {
    font-size: 13px;
    letter-spacing: .3em;
    color: #0078FF;
    opacity: 1;
}

.vd-faq--about .vd-faq__title {
    margin-top: 10px;
    font-size: 36px;
    font-weight: 500;
    color: #0078FF;
    letter-spacing: 0;
}

.vd-faq--about .vd-faq__lead {
    margin-top: 12px;
    font-size: 16px;
    color: #5b6b76;
}

.vd-faq--about .vd-faq__list {
    border-top: 1px solid #e6eef6;
}

.vd-faq--about .vd-faq__item {
    padding: 22px 8px 22px 16px;
    border-bottom: 1px solid #e6eef6;
    transition: background .25s ease;
}

/* 展开行：左侧 3px 色条 + 取自荣誉区块的浅蓝渐变 */
.vd-faq--about .vd-faq__item[open] {
    background: #F4F9FF;
    box-shadow: inset 3px 0 0 var(--vd-accent);
}

.vd-faq--about .vd-faq__q {
    font-size: 19px;
}

.vd-faq--about .vd-faq__body {
    padding: 12px 46px 4px 64px;
}

.vd-faq--about .vd-faq__body p {
    font-size: 16.5px;
    line-height: 1.82;
}

/* ==========================================================
   变体三：医生团队
   沿用医生卡的 1200 视觉宽度与轻描边卡面
   ========================================================== */
.vd-faq--dentists {
    --vd-accent: #0078FF;
    --vd-width: 1200px;
    --vd-gap: 16px;
    padding: 2% 20px 7%;
}

.vd-faq--dentists .vd-faq__item {
    padding: 22px 26px;
    border: 1px solid #e4edf5;
    border-radius: 10px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.vd-faq--dentists .vd-faq__item:hover {
    border-color: #cfe3f5;
}

.vd-faq--dentists .vd-faq__item[open] {
    border-color: #cfe3f5;
    box-shadow: 0 12px 30px rgba(14, 40, 55, .07);
}

/* ==========================================================
   变体四：收费标准
   页面是表格体例，问答也做成描边表格：连体边框 + 蓝线标题
   ========================================================== */
.vd-faq--prices {
    --vd-accent: #0c4d9a;
    --vd-width: 1200px;
    --vd-gap: 0;
    padding: 8% 20px 6%;
}

.vd-faq--prices .vd-faq__head {
    margin-bottom: 40px;
}

.vd-faq--prices .vd-faq__title {
    font-size: 34px;
    color: #0c4d9a;
    font-weight: 600;
}

.vd-faq--prices .vd-faq__list {
    border: 1px solid #cfd8e3;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.vd-faq--prices .vd-faq__item {
    padding: 20px 26px;
    border-top: 1px solid #cfd8e3;
    transition: background-color .25s ease;
}

.vd-faq--prices .vd-faq__item:first-child {
    border-top: 0;
}

.vd-faq--prices .vd-faq__item:hover {
    background: #fafcff;
}

.vd-faq--prices .vd-faq__item[open] {
    background: #f4f9ff;
}

.vd-faq--prices .vd-faq__num {
    opacity: 1;
    font-size: 14px;
}

/* ==========================================================
   变体五：就医指引
   沿用 jc-branch 的 1240 容器与 jc-card 的柔和投影
   ========================================================== */
.vd-faq--contact {
    --vd-accent: #169BFF;
    --vd-ink: #1a1a1a;
    --vd-muted: #5d6b78;
    --vd-width: 1240px;
    --vd-gap: 14px;
    padding: 54px 20px 76px;
}

.vd-faq--contact .vd-faq__title {
    font-size: 32px;
    letter-spacing: .2px;
}

.vd-faq--contact .vd-faq__title span {
    color: var(--vd-accent);
}

.vd-faq--contact .vd-faq__item {
    padding: 22px 26px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 22px rgba(22, 155, 255, .08);
    transition: box-shadow .25s ease, transform .25s ease;
}

.vd-faq--contact .vd-faq__item:hover {
    box-shadow: 0 10px 28px rgba(22, 155, 255, .13);
}

.vd-faq--contact .vd-faq__item[open] {
    box-shadow: 0 12px 32px rgba(22, 155, 255, .15);
}

/* ==========================================================
   响应式
   ========================================================== */
@media screen and (max-width: 1024px) {
    .vd-faq__title {
        font-size: 27px;
    }

    .vd-faq--prices .vd-faq__title {
        font-size: 28px;
    }

    .vd-faq--about .vd-faq__q {
        font-size: 17px;
    }
}

@media screen and (max-width: 768px) {
    .vd-faq {
        padding: 0 18px;
    }

    .vd-faq__head {
        margin-bottom: 26px;
    }

    .vd-faq__title {
        margin-top: 10px;
        font-size: 22px;
        line-height: 1.35;
    }

    .vd-faq__lead {
        margin-top: 11px;
        font-size: 14px;
        line-height: 1.65;
    }

    .vd-faq__summary {
        grid-template-columns: 32px minmax(0, 1fr) 24px;
        gap: 9px;
    }

    .vd-faq__num {
        padding-top: 2px;
        font-size: 12px;
    }

    .vd-faq__q {
        font-size: 15.5px;
        line-height: 1.5;
    }

    .vd-faq__icon {
        width: 23px;
        height: 23px;
    }

    .vd-faq__icon::before {
        width: 9px;
    }

    .vd-faq__icon::after {
        height: 9px;
    }

    .vd-faq__body {
        padding: 10px 6px 0 41px;
    }

    .vd-faq__body p {
        font-size: 14.5px;
        line-height: 1.72;
    }

    .vd-faq__foot {
        margin-top: 24px;
        font-size: 13.5px;
    }

    /* 各页移动端内边距 */
    .vd-faq--home {
        margin-bottom: 10%;
    }

    .vd-faq--home .vd-faq__title {
        font-size: 22px;
    }

    .vd-faq--home .vd-faq__item {
        padding: 18px 18px;
        border-radius: 14px;
    }

    .vd-faq--about {
        padding: 8% 18px;
    }

    .vd-faq--about .vd-faq__head {
        margin-bottom: 20px;
    }

    .vd-faq--about .vd-faq__title {
        margin-top: 8px;
        font-size: 24px;
    }

    .vd-faq--about .vd-faq__item {
        padding: 16px 4px 16px 10px;
    }

    .vd-faq--about .vd-faq__q {
        font-size: 16px;
    }

    .vd-faq--about .vd-faq__body {
        padding: 8px 8px 2px 41px;
    }

    .vd-faq--about .vd-faq__body p {
        font-size: 14.5px;
    }

    .vd-faq--dentists {
        padding: 6% 18px 9%;
    }

    .vd-faq--dentists .vd-faq__item,
    .vd-faq--prices .vd-faq__item,
    .vd-faq--contact .vd-faq__item {
        padding: 18px 18px;
    }

    .vd-faq--prices {
        padding: 9% 18px 8%;
    }

    .vd-faq--prices .vd-faq__head {
        margin-bottom: 26px;
    }

    .vd-faq--prices .vd-faq__title {
        font-size: 24px;
    }

    .vd-faq--prices .vd-faq__rule {
        max-width: 220px;
        height: 3px;
    }

    .vd-faq--contact {
        padding: 40px 18px 52px;
    }

    .vd-faq--contact .vd-faq__title {
        font-size: 24px;
        letter-spacing: .2px;
    }
}

@media screen and (max-width: 425px) {
    .vd-faq__title {
        font-size: 20px;
    }

    .vd-faq--home .vd-faq__title {
        font-size: 20px;
    }

    .vd-faq--about .vd-faq__title,
    .vd-faq--prices .vd-faq__title,
    .vd-faq--contact .vd-faq__title {
        font-size: 21px;
    }

    .vd-faq__summary {
        grid-template-columns: 28px minmax(0, 1fr) 22px;
        gap: 8px;
    }

    .vd-faq__q {
        font-size: 15px;
    }

    .vd-faq__body {
        padding-left: 36px;
    }

    .vd-faq__icon {
        width: 21px;
        height: 21px;
    }

    .vd-faq--home .vd-faq__item,
    .vd-faq--dentists .vd-faq__item,
    .vd-faq--prices .vd-faq__item,
    .vd-faq--contact .vd-faq__item {
        padding: 16px 15px;
    }
}