/* 内容页:文章、教师详情、关于我们、联系我们、法务与错误页 */
.article-page { max-width: 820px; margin: auto; padding: 52px 24px 72px; }
.article-page > header h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.25; margin: 10px 0 8px; }
.article-page > header time { color: var(--muted); font-size: .9rem; }
.article-cover { margin: 26px 0 0; }
.article-cover img { width: 100%; border-radius: var(--radius); }
.article-page article { margin-top: 30px; font-size: 1.02rem; color: var(--ink-soft); }
.article-page article h2 { color: var(--ink); font-size: 1.35rem; margin: 34px 0 12px; }
.article-page article h3 { color: var(--ink); font-size: 1.12rem; margin: 26px 0 10px; }
.article-page article img { border-radius: var(--radius-sm); }
.article-page article a { color: var(--primary); }
.article-cta { margin-top: 48px; background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.article-cta h2 { margin: 0 0 4px; font-size: 1.2rem; }
.article-cta p { margin: 0; color: var(--muted); }

.teacher-profile { display: flex; gap: 26px; align-items: center; }
.teacher-avatar-lg { width: 120px; height: 120px; font-size: 2.6rem; flex-shrink: 0; margin: 0; }
.teacher-profile h1 { margin: 6px 0 2px; }
.teacher-profile p { margin: 4px 0 0; color: var(--muted); }

/* 讲师主页:统计行 + 简介 + 名下课程 + 评价(course detail 的讲师卡也复用 .teacher-stats) */
.teacher-stats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 14px 0 0; padding: 0; }
.teacher-stats li { display: flex; align-items: baseline; gap: 6px; }
.teacher-stats strong { font-size: 1.15rem; color: var(--primary); }
.teacher-stats span { color: var(--muted); font-size: .86rem; }
.teacher-page .teacher-bio { max-width: 860px; margin-top: 34px; font-size: 1.02rem; color: var(--ink-soft); }
.teacher-page .teacher-bio h2 { color: var(--ink); font-size: 1.35rem; margin: 34px 0 12px; }
.teacher-page .section { margin-top: 44px; }
.teacher-review-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.teacher-review-grid li { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.teacher-review-grid p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.teacher-review-grid .review-course { margin-top: auto; color: var(--muted); font-size: .84rem; text-decoration: none; }
.teacher-review-grid .review-course:hover { color: var(--primary); }
@media (max-width: 1024px) { .teacher-review-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .teacher-review-grid { grid-template-columns: 1fr; } }

/* 关于我们 */
.about-intro { padding-bottom: 10px; }

/* 通用图框:固定宽高比 + cover 裁切,任何尺寸/朝向的照片塞进来都是齐整的一格。
   多租户场景下各校自行上传的照片千差万别,统一走这个框才不会「挑图」。 */
.media-frame { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--soft); box-shadow: var(--shadow-sm); }
.media-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-frame-wide { aspect-ratio: 16 / 9; }

.about-gallery { display: grid; gap: 18px; margin-top: 14px; }
/* 首屏:一张主图横跨两列,下面两张并排——只用了 3 张图,少传也不塌 */
.about-gallery-hero { grid-template-columns: repeat(2, 1fr); }
.about-gallery-hero > .media-frame-wide { grid-column: 1 / -1; }
.about-gallery-grid { grid-template-columns: repeat(3, 1fr); }

.about-stats-band { background: var(--soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 40px; }
.about-stats { max-width: var(--max); margin: auto; padding: 30px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.about-stats strong { display: block; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--primary); line-height: 1.2; }
.about-stats span { color: var(--muted); font-size: .9rem; }

/* FAQ:原生 details/summary,CSP 下零 JS */
.about-faq { display: grid; gap: 10px; }
.about-faq details { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.about-faq summary { display: flex; align-items: center; gap: 12px; padding: 15px 20px; cursor: pointer; font-weight: 700; list-style: none; }
.about-faq summary::-webkit-details-marker { display: none; }
.about-faq summary::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .18s ease; }
.about-faq details[open] summary::before { transform: rotate(45deg); }
.about-faq details[open] summary { border-bottom: 1px solid var(--border); }
.about-faq p { margin: 0; padding: 15px 20px 17px; color: var(--muted); line-height: 1.75; }

.about-values { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.about-values article { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 28px; box-shadow: var(--shadow-sm); }
.about-values h3 { margin: 0 0 8px; font-size: 1.12rem; }
.about-values p { margin: 0; color: var(--muted); }

/* 联系我们 */
.about-contact { scroll-margin-top: 74px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 34px; align-items: start; }
.contact-block { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 30px; box-shadow: var(--shadow-sm); }
.contact-block h3 { font-size: 1.05rem; margin: 0 0 14px; }
.contact-block h3:not(:first-child) { margin-top: 26px; }
.contact-phone-list { list-style: none; margin: 0; padding: 0; }
.contact-phone-list li { margin-bottom: 10px; }
.contact-phone-list a { color: var(--primary); font-weight: 800; font-size: 1.25rem; text-decoration: none; }
.qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
.qr-grid figure { margin: 0; text-align: center; }
.qr-grid img { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.qr-grid figcaption { font-size: .82rem; color: var(--muted); margin-top: 6px; }
.contact-address { font-size: 1.05rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 16px; }
.contact-map { margin: 0; }
.contact-map img { width: 100%; border-radius: var(--radius-sm); }
.traffic-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.traffic-grid article { background: var(--soft); border-radius: var(--radius); padding: 20px 24px; }
.traffic-grid h3 { margin: 0 0 6px; color: var(--primary); font-size: 1rem; }
.traffic-grid p { margin: 0; color: var(--ink-soft); font-size: .94rem; }

/* 法务页与错误页(沿用原有结构) */
.page-shell > .auth-card { max-width: 680px; }
.legal-page { max-width: 900px; }
.legal-page .prose h2 { margin-top: 38px; scroll-margin-top: 80px; }
.legal-page .prose p { color: var(--muted); }
.legal-dates { color: var(--muted); font-size: .92rem; }

/* 导读框:协议开头的「重要提示 / 政策导读」,深色描边强调 */
.legal-notice { margin-top: 26px; background: var(--soft); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: var(--radius-sm); padding: 22px 26px; }
.legal-notice h2 { margin: 0 0 10px; font-size: 1.1rem; }
.legal-notice p, .legal-notice li { color: var(--ink-soft); font-size: .94rem; line-height: 1.75; margin: 8px 0 0; }
.legal-notice ul { margin: 8px 0 0; padding-left: 20px; }

/* 条款目录:两列锚点,长文档必备 */
.legal-toc { margin-top: 22px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 20px 26px 22px; }
.legal-toc h2 { margin: 0 0 12px; font-size: 1.05rem; }
.legal-toc ol { columns: 2; column-gap: 34px; margin: 0; padding-left: 20px; }
.legal-toc li { margin-bottom: 7px; break-inside: avoid; }
.legal-toc a { color: var(--ink-soft); text-decoration: none; font-size: .92rem; }
.legal-toc a:hover { color: var(--primary); text-decoration: underline; }

.legal-body { margin-top: 8px; }
.legal-body h3 { color: var(--ink); font-size: 1.04rem; margin: 24px 0 8px; }
.legal-body p { line-height: 1.85; margin: 10px 0; }
.legal-body strong { color: var(--ink); }
.legal-body ul { color: var(--muted); line-height: 1.85; padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body a { color: var(--primary); }
.legal-sign { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); text-align: right; }

.legal-table { width: 100%; border-collapse: collapse; margin: 14px 0 6px; font-size: .92rem; }
.legal-table th, .legal-table td { border: 1px solid var(--border); padding: 10px 14px; text-align: left; vertical-align: top; }
.legal-table th { background: var(--soft); color: var(--ink); font-weight: 700; }
.legal-table td { color: var(--muted); }

.legal-related { margin-top: 32px; color: var(--muted); font-size: .92rem; }
.legal-related a { color: var(--primary); }

@media (max-width: 700px) { .legal-toc ol { columns: 1; } }
.error-page { width: min(680px, calc(100% - 40px)); margin: 15vh auto; text-align: center; }
.error-page h1 { font-size: clamp(2rem, 6vw, 3.5rem); margin: .2em 0; }
.error-page > p:not(.eyebrow) { color: var(--muted); margin-bottom: 28px; }
.error-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1024px) {
    .about-gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .about-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; }
}

@media (max-width: 860px) {
    .about-gallery-hero, .about-gallery-grid { grid-template-columns: 1fr; }
    .about-values { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .traffic-grid { grid-template-columns: 1fr; }
    .teacher-profile { flex-direction: column; align-items: flex-start; }
}