/* ===================================================================
   article.css — Shared styles for Insight & Learn articles
   =================================================================== */

/* ===== BACK LINK ===== */
.back-link { display: flex; align-items: center; gap: 6px; width: fit-content; font-size: 15px; font-weight: 500; color: var(--coral); text-decoration: none; margin-bottom: 24px; transition: opacity 0.2s; }
.back-link:hover { opacity: 0.7; }
.back-link svg { width: 16px; height: 16px; }

/* ===== ARTICLE HERO — TWO COLUMN ===== */
.article-hero { padding-top: 120px; padding-bottom: 48px; background-color: #FDFCFB; }
.article-hero-grid { max-width: 1152px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.article-hero-left { position: relative; z-index: 1; }
.article-type-badge { display: inline-flex; align-items: center; padding: 8px 20px; border-radius: 999px; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: -0.2px; background: transparent; margin-top: 50px; margin-bottom: 24px; }
.badge-positioning { color: #D4915E; border: 1px solid #FFCFA0; }
.badge-research { color: #7A5DC7; border: 1px solid #E8D9FF; }
.badge-insights { color: #FF89A1; border: 1px solid #FFC4D6; }
.badge-sales { color: #6FA0D4; border: 1px solid #B8D4FF; }
.article-h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 42px; line-height: 1.12; letter-spacing: -2px; margin-bottom: 32px; color: var(--dark); }
.article-author { display: flex; align-items: center; gap: 14px; }
.article-author img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; }
.article-author-info { display: flex; flex-direction: column; }
.article-author-name { font-size: 15px; font-weight: 600; color: var(--dark); line-height: 1.4; }
.article-author-meta { font-size: 14px; color: var(--body-muted); font-weight: 400; }
.article-hero-image { border-radius: 20px; overflow: hidden; aspect-ratio: 16/9; margin-top: 93px; }
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* ===== LEARN HERO — CENTERED ===== */
.learn-hero { padding: 150px 24px 64px; text-align: center; position: relative; }
.learn-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse at 50% 0%, rgba(255,159,181,0.08) 0%, transparent 60%); pointer-events: none; }
.learn-hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 48px; line-height: 1.12; letter-spacing: -2.5px; color: var(--dark); margin-bottom: 20px; max-width: 700px; margin-left: auto; margin-right: auto; }
.learn-hero-subtitle { font-size: 19px; line-height: 1.6; color: var(--body-muted); max-width: 580px; margin: 0 auto; font-weight: 400; letter-spacing: -0.2px; }

/* ===== TWO-COLUMN BODY LAYOUT ===== */
.article-layout { max-width: 1152px; margin: 0 auto; padding: 0 24px 80px; display: grid; grid-template-columns: 1fr 280px; gap: 64px; align-items: start; }

/* ===== ARTICLE BODY TYPOGRAPHY ===== */
.article-body p { font-size: 17px; line-height: 1.75; color: #3D3A38; margin-bottom: 24px; }
.article-body h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.25; letter-spacing: -1px; color: var(--dark); margin-top: 48px; margin-bottom: 20px; scroll-margin-top: 100px; }
.article-body h2:first-child { margin-top: 0; }
.article-body strong { color: #1A1816; font-weight: 600; }
.article-body blockquote { border-left: 3px solid var(--coral); padding: 4px 0 4px 24px; margin: 32px 0; font-style: italic; color: #4A4643; }
.article-body blockquote p { margin-bottom: 0; font-size: 17px; line-height: 1.7; }
.article-body hr { border: none; border-top: 1px solid #EEECEA; margin: 48px 0; }

/* ===== LEAD PARAGRAPH ===== */
.article-lead { font-size: 20px !important; line-height: 1.65 !important; color: var(--navy) !important; font-weight: 400; }

/* ===== TABLE STYLES ===== */
.article-table-wrap { overflow-x: auto; margin: 32px 0; border-radius: 12px; border: 1px solid #EEECEA; }
.article-body table { width: 100%; border-collapse: collapse; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; }
.article-body thead th { background: #F7F5F3; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--body-muted); padding: 14px 20px; text-align: left; border-bottom: 1px solid #EEECEA; }
.article-body tbody td { padding: 14px 20px; color: #3D3A38; border-bottom: 1px solid #F3F1EF; }
.article-body tbody tr:last-child td { border-bottom: none; }
.article-body tbody tr:nth-child(even) { background: #FDFCFB; }
.article-body tbody tr:nth-child(odd) { background: #FFFFFF; }
.article-body tbody tr.highlight-row { background: #FFF9F7; }
.article-body tbody tr.highlight-row td { font-weight: 600; color: var(--dark); }

/* ===== ORDERED & UNORDERED LISTS ===== */
.article-body ol, .article-body ul { margin: 24px 0; padding-left: 24px; }
.article-body ol li, .article-body ul li { font-size: 17px; line-height: 1.75; color: #3D3A38; margin-bottom: 16px; padding-left: 8px; }
.article-body ol li strong, .article-body ul li strong { color: #1A1816; }

/* ===== SOURCES ===== */
.article-sources { margin-top: 48px; padding-top: 32px; border-top: 1px solid #EEECEA; }
.article-sources h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--body-muted); margin-bottom: 12px; }
.article-sources ul { list-style: none; padding: 0; }
.article-sources li { font-size: 14px; line-height: 1.7; color: var(--body-muted); padding: 4px 0; }

/* ===== STRATEGY CARDS (LEARN) ===== */
.strategy-card { background: #FFFFFF; border: 1px solid #EEECEA; border-radius: 16px; padding: 28px 28px 24px; margin-bottom: 20px; }
.strategy-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.strategy-number { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #FF9FB5, #FFBAA0); color: #fff; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.strategy-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 19px; letter-spacing: -0.5px; color: var(--dark); }
.strategy-card p { font-size: 16px; line-height: 1.7; color: #3D3A38; margin-bottom: 12px; }
.strategy-card p:last-child { margin-bottom: 0; }
.strategy-tag { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px; border-radius: 6px; margin-top: 8px; }
.strategy-tag-rare { background: rgba(76, 175, 80, 0.1); color: #2E7D32; }
.strategy-tag-capital { background: rgba(255, 152, 0, 0.1); color: #E65100; }
.strategy-tag-available { background: rgba(244, 132, 95, 0.1); color: #C24620; }

/* ===== MOAT CARDS (LEARN) ===== */
.moats-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 28px 0; }
.moat-card { background: #FFFFFF; border: 1px solid #EEECEA; border-radius: 14px; padding: 22px 24px; }
.moat-card h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: var(--dark); margin-bottom: 6px; }
.moat-card p { font-size: 15px; line-height: 1.65; color: #3D3A38; margin-bottom: 0; }

/* ===== TABLE OF CONTENTS SIDEBAR ===== */
.toc { position: sticky; top: 100px; padding-top: 8px; }
.toc-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 18px; color: var(--dark); margin-bottom: 20px; letter-spacing: -0.3px; }
.toc-list { list-style: none; padding: 0; }
.toc-list li { margin-bottom: 4px; }
.toc-list a { display: block; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--body-muted); text-decoration: none; padding: 8px 12px; border-radius: 8px; border-left: 2px solid transparent; transition: all 0.2s ease; }
.toc-list a:hover { color: var(--dark); }
.toc-list a.active { color: var(--dark); font-weight: 500; background: rgba(255, 159, 181, 0.08); border-left-color: var(--coral-border); }

/* ===== ADDITIONAL READING ===== */
.additional-reading { padding: 64px 0 0; background: #FDFCFB; }
.additional-reading-inner { max-width: 1152px; margin: 0 auto; padding: 0 24px; }
.additional-reading h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 28px; letter-spacing: -1px; color: var(--dark); margin-bottom: 32px; }
.reading-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.reading-card { position: relative; background: linear-gradient(#FFFFFF, #FFFFFF) padding-box, linear-gradient(135deg, #FF9FB5, #FFBAA0, #D0BEFF) border-box; border: 1.5px solid transparent; border-radius: var(--radius-card); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s; overflow: hidden; }
.reading-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,0.1), 0 0 60px rgba(255,182,193,0.15); }
.reading-card:hover .reading-card-image { background: linear-gradient(135deg, #EDE5FF 0%, #FFD6E4 50%, #FFE8D4 100%); }
.reading-card:hover .reading-card-body h3 { color: var(--coral); }
.reading-card-tag-row { padding: 16px 20px 0; }
.reading-card-tag { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: -0.2px; background: transparent; }
.reading-tag-research { border: 1px solid #E8D9FF; color: #7A5DC7; }
.reading-tag-insights { border: 1px solid #FFC4D6; color: #FF89A1; }
.reading-tag-positioning { border: 1px solid #FFCFA0; color: #D4915E; }
.reading-tag-sales { border: 1px solid #B8D4FF; color: #6FA0D4; }
.reading-tag-learn { border: 1px solid #C8E6C9; color: #5B8A5E; }
.reading-card-image { margin: 20px 20px 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1.78; background: linear-gradient(135deg, #F5F0FF 0%, #FFE8F0 50%, #FFF5EB 100%); transition: background 0.4s ease; }
.reading-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.reading-card:hover .reading-card-image img { transform: scale(1.03); }
.reading-card-body { padding: 14px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.reading-card-body h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.3; letter-spacing: -0.3px; color: var(--dark); margin-bottom: 8px; transition: color 0.3s ease; }
.reading-card-excerpt { font-size: 13px; line-height: 1.5; color: var(--body-muted); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.reading-card-author { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.reading-card-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.reading-card-author-info { display: flex; flex-direction: column; }
.reading-card-author-name { font-size: 13px; font-weight: 600; color: var(--dark); line-height: 1.3; }
.reading-card-author-date { font-size: 12px; color: var(--body-muted); font-weight: 400; line-height: 1.3; }
.reading-card-arrow { position: absolute; bottom: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%; background: #F0EDF8; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease, transform 0.3s ease; }
.reading-card-arrow svg { width: 16px; height: 16px; color: #2D2B3A; }
.reading-card:hover .reading-card-arrow { background: var(--coral); transform: translateX(2px); }
.reading-card:hover .reading-card-arrow svg { color: #fff; }

/* ===== CTA SECTION ===== */
.article-cta { text-align: center; padding: 80px 24px; background: linear-gradient(180deg, #FDFCFB 0%, #F9F7F5 100%); }
.article-cta-inner { max-width: 560px; margin: 0 auto; }
.article-cta h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 32px; line-height: 1.2; letter-spacing: -1.2px; color: var(--dark); margin-bottom: 16px; }
.article-cta p { font-size: 17px; line-height: 1.6; color: var(--body-muted); margin-bottom: 32px; }

/* ===== MOBILE TABLET (max-width: 768px) ===== */
@media (max-width: 768px) {
  .article-hero { padding-top: 85px; padding-bottom: 36px; }
  .article-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .article-hero-image { max-width: 400px; margin-top: 0; }
  .article-type-badge { margin-top: 0; }
  .article-h1 { font-size: 30px; letter-spacing: -1.2px; }
  .learn-hero { padding: 100px 24px 40px; }
  .learn-hero h1 { font-size: 32px; letter-spacing: -1.5px; }
  .learn-hero-subtitle { font-size: 17px; }
  .article-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { position: static; order: -1; margin-bottom: 40px; padding: 20px; background: #F9F7F5; border-radius: 16px; }
  .article-body p { font-size: 16px; }
  .article-body h2 { font-size: 24px; margin-top: 40px; }
  .article-lead { font-size: 18px !important; }
  .article-body ol li, .article-body ul li { font-size: 16px; }
  .article-body thead th { padding: 12px 14px; font-size: 12px; }
  .article-body tbody td { padding: 12px 14px; font-size: 14px; }
  .strategy-card { padding: 22px 20px 20px; }
  .moat-card { padding: 18px 20px; }
  .article-cta h2 { font-size: 26px; }
  .article-cta p { font-size: 16px; }
  .reading-grid { grid-template-columns: 1fr; gap: 20px; }
  .additional-reading h2 { font-size: 24px; }
}

/* ===== MOBILE SMALL PHONE (max-width: 480px) ===== */
@media (max-width: 480px) {
  .article-h1 { font-size: 26px; letter-spacing: -1px; }
  .learn-hero h1 { font-size: 28px; letter-spacing: -1.2px; }
  .learn-hero-subtitle { font-size: 16px; }
  .article-body p { font-size: 15px; }
  .article-body h2 { font-size: 22px; }
  .article-lead { font-size: 17px !important; }
  .article-body ol li, .article-body ul li { font-size: 15px; }
  .article-cta h2 { font-size: 24px; }
  .strategy-card h3 { font-size: 17px; }
}