@charset "UTF-8";

/* ===== Article Layout (T4 Technical Manual) ===== */
.article-section{padding:50px 0 80px;background:#fff}
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:50px}

/* Article Header */
.article-header{margin-bottom:35px;padding-bottom:25px;border-bottom:2px solid var(--c-border)}
.article-meta{display:flex;gap:20px;margin-bottom:16px;font-size:13px;color:var(--c-accent);flex-wrap:wrap}
.article-meta span{display:flex;align-items:center;gap:6px}
.article-meta svg{width:14px;height:14px;fill:var(--c-primary)}
.article-header h1{font-size:32px;font-weight:900;color:var(--c-dark);line-height:1.3}

/* Article Body - Technical Manual Style */
.article-body{font-size:16px;line-height:1.9;color:var(--c-text)}
.article-body h2{font-size:24px;font-weight:900;color:var(--c-dark);margin:40px 0 18px;padding-bottom:10px;border-bottom:1px solid var(--c-border);position:relative}
.article-body h2::after{content:"";position:absolute;bottom:-1px;left:0;width:50px;height:1px;background:var(--c-primary)}
.article-body h3{font-size:20px;font-weight:800;color:var(--c-dark);margin:30px 0 14px}
.article-body p{margin-bottom:16px;text-align:justify}
.article-body strong{color:var(--c-dark);font-weight:700}
.article-body ul,.article-body ol{margin:16px 0;padding-left:24px}
.article-body ul li,.article-body ol li{margin-bottom:10px;line-height:1.7}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body a{color:var(--c-primary);text-decoration:underline;text-underline-offset:3px}
.article-body a:hover{color:var(--c-dark)}
.article-body table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
.article-body th,.article-body td{padding:12px 16px;border:1px solid var(--c-border);text-align:left}
.article-body th{background:var(--c-bg);font-weight:700;color:var(--c-dark)}
.article-body td{background:#fff}
.article-body tr:nth-child(even) td{background:#FAFAFA}
.article-body code{background:var(--c-bg);padding:2px 8px;border-radius:3px;font-size:14px;color:var(--c-dark);border:1px solid var(--c-border)}
.article-body blockquote{border-left:4px solid var(--c-primary);padding:16px 24px;background:var(--c-bg);margin:20px 0;font-style:italic;color:var(--c-accent)}
.article-body blockquote p{margin:0}

/* Internal Links Block */
.int-links{background:var(--c-bg);border-radius:8px;padding:25px;margin:35px 0;border:1px solid var(--c-border)}
.int-links h4{font-size:16px;font-weight:700;color:var(--c-dark);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.int-links h4 svg{width:18px;height:18px;fill:var(--c-primary)}
.int-links ul{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.int-links li a{font-size:14px;color:var(--c-accent);transition:color .2s}
.int-links li a:hover{color:var(--c-dark)}

/* Article Footer */
.article-footer{margin-top:40px;padding-top:30px;border-top:2px solid var(--c-border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.article-tags{display:flex;gap:8px;flex-wrap:wrap}
.article-tags a{padding:6px 14px;background:var(--c-bg);border-radius:4px;font-size:13px;color:var(--c-accent);border:1px solid var(--c-border);transition:all .2s}
.article-tags a:hover{background:var(--c-dark);color:#fff}

/* ===== Related Articles ===== */
.related-section{padding:70px 0;background:var(--c-bg)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}
.related-card{background:#fff;border-radius:8px;padding:22px;border:1px solid var(--c-border);transition:all .3s}
.related-card:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(46,33,27,.1)}
.related-card .date{font-size:12px;color:var(--c-accent);margin-bottom:8px}
.related-card h4{font-size:15px;font-weight:700;color:var(--c-dark);line-height:1.5;transition:color .2s}
.related-card:hover h4{color:var(--c-primary)}

/* ===== Recommendations (8 hardcoded) ===== */
.rec-section{padding:70px 0;background:#fff}
.rec-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:35px}
.rec-item{display:flex;align-items:center;gap:12px;padding:16px;background:var(--c-bg);border-radius:6px;border:1px solid var(--c-border);transition:all .2s}
.rec-item:hover{background:#fff;box-shadow:0 4px 12px rgba(46,33,27,.08)}
.rec-num{width:36px;height:36px;border-radius:6px;background:var(--c-dark);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.rec-item h5{font-size:14px;font-weight:600;color:var(--c-dark);line-height:1.4}

@media(max-width:900px){
  .article-layout{grid-template-columns:1fr}
  .article-header h1{font-size:26px}
  .article-body h2{font-size:22px}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .rec-list{grid-template-columns:1fr}
  .int-links ul{grid-template-columns:1fr}
}
@media(max-width:600px){
  .article-header h1{font-size:22px}
  .article-body h2{font-size:20px}
  .related-grid{grid-template-columns:1fr}
  .article-footer{flex-direction:column;align-items:flex-start}
}