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

/* Hero sizing (reuses .hp-hero from homepage.css) */
.ia-hero { min-height: 52vh; }
.ia-hero-label {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-light); margin-bottom: 16px;
}

/* Article body */
.ia-section { padding: clamp(56px, 8vw, 100px) 0; background: var(--white); }
.ia-wrap { display: grid; grid-template-columns: 1fr 360px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.ia-content h3 { font-size: clamp(20px, 3vw, 28px); font-weight: 800; color: var(--black); letter-spacing: -0.02em; margin: 36px 0 16px; line-height: 1.2; }
.ia-content h3:first-child { margin-top: 0; }
.ia-content p { font-size: 16.5px; line-height: 1.75; color: var(--gray-600); margin-bottom: 18px; }
.ia-content ol { padding-left: 22px; margin: 0 0 20px; }
.ia-content ol li { font-size: 16px; line-height: 1.7; color: var(--gray-600); margin-bottom: 14px; padding-left: 6px; }
.ia-content ol li::marker { color: var(--accent); font-weight: 700; }
.ia-content ol li strong { color: var(--black); font-weight: 700; }

/* Sidebar eBook card */
.ia-sidebar { position: sticky; top: 110px; }
.ia-card {
  background: linear-gradient(135deg, #eef3fb 0%, #f8f9fa 100%);
  border: 1px solid var(--accent-light); border-radius: 18px; padding: 28px;
}
.ia-card h4 { font-size: 18px; font-weight: 800; color: var(--black); margin-bottom: 10px; }
.ia-card p { font-size: 14.5px; line-height: 1.6; color: var(--gray-600); margin-bottom: 20px; }
.ia-btn, .ia-btn-outline {
  display: block; width: 100%; text-align: center; padding: 13px 20px; border-radius: 100px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; transition: all .2s; margin-bottom: 10px;
}
.ia-btn { background: var(--accent); color: #fff; }
.ia-btn:hover { background: #3f78c4; }
.ia-btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.ia-btn-outline:hover { background: var(--accent); color: #fff; }

/* Related segments */
.ia-related-sec { padding: clamp(56px, 8vw, 100px) 0; background: var(--gray-50); }
.ia-related-head { text-align: center; margin-bottom: 44px; }
.ia-related-head h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 800; color: var(--black); letter-spacing: -0.02em; margin-top: 12px; }
.ia-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ia-related-card {
  display: block; background: var(--white); border: 1px solid var(--gray-200); border-radius: 16px;
  padding: 28px; text-decoration: none; transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ia-related-card:hover { transform: translateY(-5px); box-shadow: 0 20px 50px rgba(11,17,32,0.1); border-color: var(--accent-light); }
.ia-related-card .wk { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.ia-related-card h3 { font-size: 17px; font-weight: 700; color: var(--black); line-height: 1.3; margin-bottom: 8px; }
.ia-related-card p { font-size: 13px; color: var(--gray-500); }

@media (max-width: 900px) {
  .ia-wrap { grid-template-columns: 1fr; }
  .ia-sidebar { position: static; }
  .ia-related { grid-template-columns: 1fr; }
}