/* ============================================================
   JETEDCO BLOG ARTICLE — light + blue template
   Loaded after homepage.css; reuses its :root tokens.
   ============================================================ */

/* --- Article hero (image + overlay + title) --- */
.ba-hero { position: relative; min-height: 56vh; display: flex; align-items: flex-end; overflow: hidden; }
.ba-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.ba-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.30) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.82) 100%);
}
.ba-hero-inner { position: relative; z-index: 2; width: 100%; max-width: 860px; margin: 0 auto; padding: 0 24px clamp(40px, 6vw, 72px); }
.ba-cat { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 6px 14px; border-radius: 100px; margin-bottom: 20px; }
.ba-title { font-size: clamp(30px, 5vw, 52px); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: #fff; margin-bottom: 18px; text-shadow: 0 2px 30px rgba(0,0,0,0.3); }
.ba-meta { font-size: 14px; color: rgba(255,255,255,0.82); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ba-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.5); }

/* --- Article body --- */
.ba-article { padding: clamp(48px, 7vw, 80px) 0 clamp(40px, 5vw, 56px); background: var(--white); }
.ba-body { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.ba-lead { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.6; color: var(--gray-700); font-weight: 500; margin-bottom: 34px; }
.ba-body h2 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; letter-spacing: -0.02em; color: var(--black); margin: 46px 0 16px; line-height: 1.2; }
.ba-body h3 { font-size: clamp(19px, 2.4vw, 23px); font-weight: 700; color: var(--black); margin: 32px 0 12px; }
.ba-body p { font-size: 17px; line-height: 1.8; color: var(--gray-700); margin-bottom: 22px; }
.ba-body a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ba-body ul, .ba-body ol { margin: 0 0 24px; padding-left: 22px; }
.ba-body li { font-size: 17px; line-height: 1.7; color: var(--gray-700); margin-bottom: 11px; padding-left: 4px; }
.ba-body li::marker { color: var(--accent); font-weight: 700; }
.ba-body strong { color: var(--black); font-weight: 700; }

/* --- Stat callout row --- */
.ba-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 38px 0; }
.ba-stat { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 16px; padding: 26px 18px; text-align: center; }
.ba-stat-num { display: block; font-size: clamp(26px, 4vw, 36px); font-weight: 900; color: var(--accent); line-height: 1.05; letter-spacing: -0.02em; }
.ba-stat-label { display: block; font-size: 13px; color: var(--gray-600); margin-top: 9px; line-height: 1.4; }

/* --- Pull quote --- */
.ba-quote { margin: 38px 0; padding: 6px 0 6px 26px; border-left: 4px solid var(--accent); }
.ba-quote p { font-size: clamp(20px, 2.6vw, 25px); font-weight: 600; font-style: italic; color: var(--black); line-height: 1.4; margin: 0; }

/* --- Mid-article inline CTA --- */
.ba-inline-cta { background: linear-gradient(135deg, #eef3fb 0%, #f8f9fa 100%); border: 1px solid var(--accent-light); border-radius: 20px; padding: clamp(28px, 4vw, 40px); margin: 44px 0; text-align: center; }
.ba-inline-cta h3 { font-size: clamp(20px, 2.6vw, 26px); font-weight: 800; color: var(--black); margin-bottom: 10px; }
.ba-inline-cta p { font-size: 15.5px; color: var(--gray-600); line-height: 1.6; max-width: 520px; margin: 0 auto 22px; }
.ba-inline-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 15px 32px; border-radius: 100px; text-decoration: none; transition: background .2s, transform .1s; }
.ba-inline-btn:hover { background: #3f78c4; }
.ba-inline-btn:active { transform: translateY(1px); }

/* --- Sources + back link --- */
.ba-sources { max-width: 760px; margin: 50px auto 0; padding: 30px 24px 0; border-top: 1px solid var(--gray-200); }
.ba-sources h4 { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-500); margin-bottom: 16px; }
.ba-sources ol { padding-left: 20px; margin: 0; }
.ba-sources li { font-size: 13.5px; line-height: 1.65; color: var(--gray-600); margin-bottom: 9px; }
.ba-sources a { color: var(--accent); word-break: break-word; }
.ba-back { max-width: 760px; margin: 30px auto 0; padding: 0 24px; }
.ba-back a { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ba-back a:hover { text-decoration: underline; }

@media (max-width: 600px) {
  .ba-stats { grid-template-columns: 1fr; }
}