/* CSS Document */

/* ============================================================
   article.css - 内容详情页
   ============================================================ */

.article-panel{min-width:0;}
.article{background:#fff;border-radius:16px;border:1px solid #EEF2FA;box-shadow:0 10px 36px rgba(27,58,140,.07);padding:clamp(26px,3.5vw,46px) clamp(24px,3.5vw,48px) clamp(30px,3.5vw,44px);position:relative;overflow:hidden;}
.article::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#2B5CE6 0%,#1B3A8C 70%,#2B5CE6 100%);}

.art-head{padding-bottom:26px;margin-bottom:34px;border-bottom:1px solid #EEF2FA;position:relative;}
.art-head::after{content:"";position:absolute;left:0;bottom:-1px;width:64px;height:3px;border-radius:2px;background:linear-gradient(90deg,#2B5CE6,#1B3A8C);}
.art-cat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;letter-spacing:1.5px;color:var(--ctbu-blue-accent);margin-bottom:14px;padding:5px 12px;border-radius:15px;background:var(--ctbu-blue-light);font-weight:600;}
.art-cat::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ctbu-blue-accent);box-shadow:0 0 0 3px rgba(43,92,230,.16);}
.art-title{font-size:clamp(22px,2.6vw,30px);line-height:1.45;font-weight:700;color:var(--text-primary);letter-spacing:.5px;margin-bottom:20px;word-break:break-word;}
.art-meta{display:flex;align-items:center;gap:24px;flex-wrap:wrap;font-size:13.5px;color:var(--text-muted);}
.art-meta span{display:inline-flex;align-items:center;gap:6px;}
.art-meta span::before{content:"";display:inline-block;width:13px;height:13px;opacity:.85;background-repeat:no-repeat;background-position:center;background-size:contain;}
.art-meta .am-date::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");}
.art-meta .am-author::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");}
.art-meta .am-source::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 21V5a2 2 0 0 1 2-2h9l7 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M14 3v7h7'/%3E%3C/svg%3E");}
.art-meta .am-view::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");}

.art-body{font-size:18px;line-height:2.15;color:#3A3A3A;word-break:break-word;}
.art-body > p{margin-bottom:32px;text-indent:2em;text-align:justify;}
.art-body > p:last-child{margin-bottom:0;}
.art-body h2{font-size:22px;font-weight:700;color:var(--ctbu-blue);line-height:1.5;margin:46px 0 22px;padding-left:15px;position:relative;letter-spacing:.5px;}
.art-body h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:21px;border-radius:2px;background:linear-gradient(180deg,#2B5CE6,#1B3A8C);}
.art-body h3{font-size:19.5px;font-weight:700;color:#2A3A5C;line-height:1.5;margin:34px 0 16px;letter-spacing:.3px;}

.art-figure{margin:30px 0;border-radius:12px;overflow:hidden;position:relative;}
.art-figure .fig-img{width:100%;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);position:relative;overflow:hidden;}
.art-figure .fig-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.art-figure .fig-img::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(43,92,230,.18) 0%,transparent 60%);pointer-events:none;}
.art-figure .fig-ph{width:56px;height:56px;opacity:.85;position:relative;z-index:2;}
.art-figure figcaption{padding:12px 18px;font-size:13.5px;color:var(--text-muted);line-height:1.7;text-align:center;background:#F8FAFF;border-top:1px solid #EEF2FA;}
.art-figure figcaption b{color:var(--ctbu-blue);font-weight:600;}

.art-quote{margin:30px 0;padding:22px 26px 22px 28px;background:linear-gradient(90deg,#F3F7FF 0%,#F8FAFF 100%);border-left:4px solid var(--ctbu-blue-accent);border-radius:0 10px 10px 0;font-size:17px;line-height:2;color:#4A5568;position:relative;font-style:normal;}
.art-quote::before{content:"“";position:absolute;left:8px;top:-6px;font-size:48px;line-height:1;color:rgba(43,92,230,.18);font-family:Georgia,serif;}
.art-quote p{text-indent:0;margin:0;}

.art-body ul.dotted{margin:8px 0 32px;padding-left:6px;}
.art-body ul.dotted li{position:relative;padding-left:22px;margin-bottom:14px;line-height:2;text-align:justify;}
.art-body ul.dotted li::before{content:"";position:absolute;left:4px;top:14px;width:7px;height:7px;border-radius:50%;background:var(--ctbu-blue-accent);box-shadow:0 0 0 3px rgba(43,92,230,.14);}

.art-body ol.numlist{margin:8px 0 32px;counter-reset:artnum;padding-left:2px;}
.art-body ol.numlist li{position:relative;padding-left:36px;margin-bottom:16px;line-height:2;counter-increment:artnum;text-align:justify;}
.art-body ol.numlist li::before{content:counter(artnum);position:absolute;left:0;top:5px;width:24px;height:24px;border-radius:6px;background:var(--ctbu-blue-light);color:var(--ctbu-blue);font-size:13px;font-weight:700;font-family:"Arial",sans-serif;display:flex;align-items:center;justify-content:center;line-height:1;}

.art-body strong{color:#1B3A8C;font-weight:700;}

.art-end{margin-top:46px;padding-top:22px;border-top:1px dashed #DDE6F5;display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--text-muted);letter-spacing:2px;}
.art-end::before,.art-end::after{content:"";width:40px;height:1px;background:linear-gradient(90deg,transparent,#DDE6F5);}
.art-end::after{background:linear-gradient(90deg,#DDE6F5,transparent);}

.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;}
.art-nav a{display:flex;flex-direction:column;gap:6px;padding:18px 22px;border-radius:12px;background:#fff;border:1px solid #EEF2FA;box-shadow:0 4px 16px rgba(27,58,140,.05);transition:all .28s ease;position:relative;overflow:hidden;}
.art-nav a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#2B5CE6,#1B3A8C);transform:scaleY(0);transform-origin:center;transition:transform .3s ease;}
.art-nav a:hover{border-color:#DCE6FA;box-shadow:0 12px 30px rgba(27,58,140,.12);transform:translateY(-2px);}
.art-nav a:hover::before{transform:scaleY(1);}
.art-nav .an-label{font-size:12.5px;letter-spacing:1.5px;color:var(--ctbu-blue-accent);display:inline-flex;align-items:center;gap:6px;}
.art-nav .an-label::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ctbu-blue-accent);}
.art-nav .an-title{font-size:15px;font-weight:600;color:var(--text-primary);line-height:1.6;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-word;transition:color .25s;}
.art-nav a:hover .an-title{color:var(--ctbu-blue);}
.art-nav .an-next{text-align:right;}
.art-nav .an-next .an-label{justify-content:flex-end;}

@media(max-width:768px){
  .article{padding:22px 18px 26px;border-radius:12px;}
  .art-head{padding-bottom:20px;margin-bottom:24px;}
  .art-cat{font-size:11.5px;padding:4px 10px;margin-bottom:12px;}
  .art-title{font-size:19px;line-height:1.5;margin-bottom:14px;}
  .art-meta{gap:14px;font-size:12.5px;}
  .art-body{font-size:16.5px;line-height:2;}
  .art-body > p{margin-bottom:24px;}
  .art-body h2{font-size:19px;margin:34px 0 16px;padding-left:12px;}
  .art-body h2::before{width:3px;height:17px;}
  .art-body h3{font-size:17.5px;margin:26px 0 14px;}
  .art-quote{padding:18px 20px 18px 22px;font-size:16px;margin:24px 0;}
  .art-quote::before{font-size:38px;left:6px;}
  .art-figure{margin:24px 0;}
  .art-figure .fig-ph{width:42px;height:42px;}
  .art-figure figcaption{padding:10px 14px;font-size:12.5px;}
  .art-body ul.dotted{margin:6px 0 24px;}
  .art-body ul.dotted li{padding-left:20px;margin-bottom:12px;}
  .art-body ol.numlist{margin:6px 0 24px;}
  .art-body ol.numlist li{padding-left:32px;margin-bottom:14px;}
  .art-nav{grid-template-columns:1fr;gap:12px;margin-top:20px;}
  .art-nav a{padding:14px 18px;}
  .art-nav .an-title{font-size:14px;}
}