/* ── Shared article page styles ──────────────────────────────────────────── */

/* Nav / page chrome */
body, #page { background-color: #ffffff !important; }

/* Reading-progress bar */
#reading-progress {
    position: fixed; top: 0; left: 0;
    width: 0%; height: 3px;
    background: linear-gradient(90deg, #f5821f, #ef7c46);
    z-index: 9999; transition: width 0.1s linear;
}

/* ── Page layout ── */
.article-page-wrap {
    padding: 100px 0 80px;
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    min-height: 100vh;
}

/* ── Breadcrumb ── */
.art-breadcrumb { font-size: 13px; color: #8b96a3; margin-bottom: 28px; }
.art-breadcrumb a { color: #8b96a3; font-weight: 400; }
.art-breadcrumb a:hover { color: #5c636b; }

/* ── Category badge ── */
.art-category {
    display: inline-block; font-size: 12px; font-weight: 800;
    letter-spacing: 1px; text-transform: uppercase;
    color: #f5821f; background: #fff4ea;
    padding: 5px 12px; border-radius: 6px; margin-bottom: 16px;
}

/* ── Title & byline ── */
.art-h1 {
    font-size: 40px !important; font-weight: 900 !important;
    line-height: 1.15 !important; letter-spacing: -0.02em;
    color: #5c636b !important; margin-bottom: 18px !important;
}
.art-byline { font-size: 14px; color: #8b96a3; margin-bottom: 32px; }
.art-byline strong { color: #5c636b; }

/* Published badge (some articles) */
.art-pub-badge {
    display: inline-block; font-size: 13px; color: #8b96a3;
    background: #f0f2f5; padding: 3px 10px; border-radius: 5px;
    font-style: italic; margin-bottom: 32px;
}

/* ── Article card ── */
.art-card {
    background: #ffffff; border: 1px solid #e6ebf0;
    border-radius: 22px; padding: 44px 52px;
    box-shadow: 0 10px 30px rgba(47, 55, 66, 0.05);
}
.art-hero-img { width: 100%; border-radius: 14px; margin-bottom: 36px; overflow: hidden; }
.art-hero-img img { width: 100%; height: 360px; object-fit: cover; display: block; }

/* ── Body text ── */
.art-body p  { font-size: 17px !important; line-height: 1.85 !important; color: #5c636b; margin-bottom: 22px !important; }
.art-body h2 { font-size: 24px !important; font-weight: 900 !important; color: #2f3742 !important; margin: 36px 0 16px !important; line-height: 1.2 !important; }
.art-body ul,
.art-body ol  { padding-left: 24px; margin-bottom: 22px; }
.art-body ul li,
.art-body ol li { font-size: 17px; line-height: 1.75; color: #5c636b; margin-bottom: 10px; }
.art-body ul li::marker { color: #f5821f; }
.art-body strong { font-weight: 900; color: #2f3742; }
.art-body img { border-radius: 12px; margin: 24px 0; max-width: 100%; }

/* ── Callout block ── */
.art-callout {
    background: linear-gradient(135deg, #fff4ea, #fff8f0);
    border-left: 4px solid #f5821f;
    border-radius: 0 12px 12px 0;
    padding: 20px 24px; margin: 28px 0;
}
.art-callout p { font-size: 16px !important; margin-bottom: 0 !important; }
.art-callout strong { color: #f5821f !important; }

/* ── Q&A blocks ── */
.art-qa { margin-bottom: 32px; }
.art-qa-q {
    font-size: 17px !important; font-weight: 900 !important;
    color: #2f3742 !important; margin-bottom: 10px !important;
    padding-left: 16px; border-left: 3px solid #f5821f;
}
.art-qa-a {
    font-size: 17px !important; line-height: 1.85 !important;
    color: #5c636b; margin-bottom: 0 !important; padding-left: 16px;
}

/* ── Stat boxes ── */
.stat-row { display: -webkit-flex; display: flex; gap: 16px; margin: 28px 0; flex-wrap: wrap; }
.stat-box {
    flex: 1 1 120px;
    background: linear-gradient(135deg, #fff4ea, #fff8f0);
    border: 1px solid #f5e3cc; border-radius: 14px;
    padding: 20px 16px; text-align: center;
}
.stat-num { font-size: 28px; font-weight: 900; color: #f5821f; line-height: 1; margin-bottom: 6px; }
.stat-lbl { font-size: 13px; line-height: 1.4; color: #6f7b88; }

/* ── Penalty box ── */
.penalty-box { background: #fff; border: 2px solid #ffd4b3; border-radius: 14px; padding: 24px 28px; margin: 28px 0; }
.penalty-box h3 {
    font-size: 15px !important; font-weight: 800 !important;
    color: #c0392b !important; margin-bottom: 14px !important;
    text-transform: uppercase; letter-spacing: .5px;
}
.penalty-box ul { padding-left: 20px; margin-bottom: 0; }
.penalty-box ul li { font-size: 16px; line-height: 1.7; color: #5c636b; margin-bottom: 8px; }

/* ── Comparison boxes (old vs new) ── */
.compare-row { display: -webkit-flex; display: flex; gap: 20px; margin: 28px 0; flex-wrap: wrap; }
.compare-box { flex: 1 1 200px; border: 1px solid #e6ebf0; border-radius: 14px; padding: 22px; }
.compare-box.old { border-top: 3px solid #8b96a3; }
.compare-box.new { border-top: 3px solid #f5821f; }
.compare-box h3 { font-size: 14px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 12px !important; }
.compare-box.old h3 { color: #8b96a3 !important; }
.compare-box.new h3 { color: #f5821f !important; }
.compare-box ul { padding-left: 18px; margin-bottom: 0; }
.compare-box ul li { font-size: 14px; line-height: 1.65; color: #6f7b88; margin-bottom: 8px; }

/* ── Resources list ── */
.art-resources { margin-top: 36px; padding-top: 28px; border-top: 1px solid #e6ebf0; }
.art-resources h3 { font-size: 15px; color: #8b96a3; margin-bottom: 12px; font-weight: 700; }
.art-resources ul { padding-left: 0; list-style: none; margin-bottom: 0; }
.art-resources ul li { margin-bottom: 8px; }
.art-resources ul li a { font-size: 14px; color: #6f7b88; font-weight: 400; }
.art-resources ul li a:hover { color: #f5821f; }

/* ── Author box ── */
.author-box { margin-top: 36px; padding: 24px 28px; background: #f9fafb; border: 1px solid #e6ebf0; border-radius: 14px; }
.author-box h4 { font-size: 16px !important; font-weight: 900 !important; color: #2f3742 !important; margin-bottom: 4px !important; }
.author-box p { font-size: 14px !important; line-height: 1.6 !important; color: #6f7b88; margin-bottom: 0 !important; }

/* ── CTA button ── */
.art-cta-btn {
    display: inline-block; background: #f5821f; color: #fff !important;
    font-size: 15px; font-weight: 700; padding: 13px 28px;
    border-radius: 50px; text-decoration: none !important;
    transition: opacity .15s, transform .15s;
}
.art-cta-btn:hover { opacity: .88; text-decoration: none; transform: translateY(-1px); }

/* ── Keep reading section ── */
.keep-reading-section { padding: 60px 0 120px; background: #ffffff; }

/* ── Related cards ── */
.related-cards-row { display: -webkit-flex; display: flex; gap: 20px; flex-wrap: wrap; }
.related-card {
    flex: 1 1 220px; background: #ffffff;
    border: 1px solid #e6ebf0; border-radius: 16px;
    overflow: hidden; box-shadow: 0 6px 20px rgba(47, 55, 66, 0.05);
    transition: box-shadow .2s, transform .2s;
}
.related-card:hover { box-shadow: 0 10px 30px rgba(47, 55, 66, .10); transform: translateY(-2px); }
.related-card-img { height: 140px; overflow: hidden; }
.related-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.related-card-body { padding: 18px 20px; }
.related-tag {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: .8px; color: #f5821f; display: inline;
}
.related-rt { font-size: 11px; font-weight: 400; color: #8b96a3; text-transform: none; letter-spacing: 0; display: inline; }
.related-rt::after { content: ""; display: block; margin-bottom: 8px; }
.related-card-body h3 { font-size: 16px !important; font-weight: 900 !important; line-height: 1.3 !important; color: #2f3742 !important; margin-bottom: 8px !important; }
.related-card-body h3 a { color: #2f3742 !important; text-decoration: none; }
.related-card-body h3 a:hover { color: #f5821f !important; }
.related-card-body a { font-size: 13px; font-weight: 700; color: #f5821f; }
.related-card-body a:hover { color: #d8731d; }
.related-card-body a.card-link-cover { display: block; text-decoration: none; color: inherit; }

/* ── Responsive ── */
@media (max-width: 767px) {
    .art-card { padding: 28px 20px; }
    .art-hero-img img { height: 220px; }
    .art-h1 { font-size: 28px !important; }
    .article-page-wrap { padding: 70px 0 60px; }
    .related-card { flex-basis: 100%; }
    .stat-box { flex-basis: 100%; }
    .compare-box { flex-basis: 100%; }
}