/* ============================================
   ARTICLE — Shared styles for all blog article
   pages (both RU and EN).
   Loaded via wp_enqueue_scripts for /blog/ URLs.
   ============================================ */

/* ── BREADCRUMB ──────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:.78rem; color:rgba(255,255,255,.4); margin-bottom:20px; flex-wrap:wrap }
.breadcrumb a { color:rgba(255,255,255,.65); transition:color .2s }
.breadcrumb a:hover { color:var(--saffron) }
.breadcrumb svg { width:12px; height:12px }

/* ── ARTICLE HERO ────────────────────────────── */
.article-hero { background:var(--navy); padding:64px 0 72px; position:relative; overflow:hidden }
.article-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 80% 50%,rgba(232,135,58,.07) 0%,transparent 60%) }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:60px 60px }
.article-hero .container { position:relative; z-index:2 }
.article-tag { display:inline-block; background:rgba(232,135,58,.9); color:white; font-size:.72rem; font-weight:700; padding:4px 12px; border-radius:20px; letter-spacing:.06em; text-transform:uppercase; margin-bottom:16px }
.article-hero h1 { color:white; font-size:clamp(1.6rem,3.5vw,2.4rem); line-height:1.2; margin-bottom:20px; max-width:760px }
.article-meta { display:flex; align-items:center; gap:16px; flex-wrap:wrap }
.article-meta span { color:rgba(255,255,255,.5); font-size:.82rem; display:flex; align-items:center; gap:5px }
.article-meta svg { width:14px; height:14px }

/* ── ARTICLE LAYOUT ──────────────────────────── */
.article-section { background:var(--cream); padding:64px 0 80px }
.article-layout { display:grid; grid-template-columns:1fr 300px; gap:48px; align-items:start }
.article-content { background:var(--white); border-radius:var(--radius-lg); padding:40px; border:1px solid var(--border) }
.article-content h2 { color:var(--navy); font-size:1.35rem; margin:36px 0 16px; padding-top:8px; border-top:2px solid var(--cream); line-height:1.3 }
.article-content h2:first-child { margin-top:0; border-top:none; padding-top:0 }
.article-content h3 { color:var(--navy); font-size:1.05rem; margin:24px 0 12px }
.article-content p { color:#374151; line-height:1.65; margin-bottom:18px; font-size:1.05rem }
.article-content ul, .article-content ol { color:#374151; line-height:1.65; margin-bottom:18px; padding-left:24px; font-size:1.05rem }
.article-content li { margin-bottom:8px }
.article-content strong { color:var(--navy); font-weight:700 }

/* ── CALLOUTS ────────────────────────────────── */
.callout { border-left:4px solid var(--saffron); background:rgba(232,135,58,.06); padding:16px 20px; border-radius:0 8px 8px 0; margin:24px 0 }
.callout-warning { border-left-color:#ef4444; background:rgba(239,68,68,.05) }
.callout-success { border-left-color:#10b981; background:rgba(16,185,129,.05) }
.callout-title { font-weight:700; color:var(--navy); margin-bottom:6px; font-size:.9rem; text-transform:uppercase; letter-spacing:.04em }
.callout p { margin-bottom:0; color:#374151; font-size:.9rem }

/* ── CHECKLIST ───────────────────────────────── */
.checklist { list-style:none; padding:0; margin:20px 0 }
.checklist li { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--cream); font-size:.95rem; color:#374151 }
.checklist li:last-child { border-bottom:none }
.check-icon { width:20px; height:20px; min-width:20px; background:var(--saffron); border-radius:50%; display:flex; align-items:center; justify-content:center; margin-top:2px }
.check-icon svg { width:11px; height:11px; color:white }

/* ── SHARE ───────────────────────────────────── */
.article-share { display:flex; align-items:center; gap:12px; margin-top:32px; padding-top:24px; border-top:2px solid var(--cream); flex-wrap:wrap }
.share-label { font-size:.85rem; color:var(--muted); font-weight:600 }
.share-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:8px; font-size:.82rem; font-weight:600; transition:all .2s; border:none; cursor:pointer; text-decoration:none }
.share-tg { background:#229ED9; color:white } .share-tg:hover { background:#1a8bbf }
.share-wa { background:#25D366; color:white } .share-wa:hover { background:#1da851 }

/* ── SIDEBAR ─────────────────────────────────── */
.article-sidebar { display:flex; flex-direction:column; gap:20px; position:sticky; top:88px }
.sidebar-widget { background:var(--white); border-radius:var(--radius-lg); padding:24px; border:1px solid var(--border) }
.widget-title { font-weight:700; color:var(--navy); font-size:.95rem; margin-bottom:16px; padding-bottom:12px; border-bottom:2px solid var(--cream) }
.author-card { display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px }
.author-avatar { width:64px; height:64px; border-radius:50%; background:linear-gradient(135deg,var(--navy),#1a3a5c); display:flex; align-items:center; justify-content:center; font-size:1.5rem }
.author-name { font-weight:700; color:var(--navy); font-size:.95rem }
.author-role { font-size:.8rem; color:var(--muted); line-height:1.4 }
.toc-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px }
.toc-list li a { font-size:.84rem; color:var(--muted); text-decoration:none; display:block; padding:6px 10px; border-radius:6px; transition:all .2s; line-height:1.4; border-left:2px solid transparent }
.toc-list li a:hover { color:var(--saffron); background:rgba(232,135,58,.06); border-left-color:var(--saffron) }
.related-list { display:flex; flex-direction:column; gap:12px }
.related-item { display:flex; gap:10px; align-items:flex-start; text-decoration:none; padding:8px; border-radius:8px; transition:background .2s }
.related-item:hover { background:var(--cream) }
.related-icon { font-size:1.2rem; min-width:24px }
.related-title { font-size:.82rem; font-weight:600; color:var(--navy); line-height:1.35; transition:color .2s }
.related-item:hover .related-title { color:var(--saffron) }
.tg-promo { background:linear-gradient(135deg,#0088CC,#229ED9); border-radius:var(--radius-lg); padding:20px; text-align:center; color:white }
.tg-promo svg { width:32px; height:32px; margin:0 auto 10px; display:block }
.tg-promo h4 { font-size:.9rem; margin-bottom:8px }
.tg-promo p { font-size:.78rem; opacity:.8; margin-bottom:14px; line-height:1.5 }
.tg-promo a { display:inline-flex; align-items:center; gap:6px; background:white; color:#229ED9; padding:8px 18px; border-radius:7px; font-weight:700; font-size:.82rem; transition:all .2s; text-decoration:none }
.tg-promo a:hover { transform:translateY(-2px) }
.sidebar-cta { background:linear-gradient(135deg,var(--navy),#1a3a5c); border-radius:var(--radius-lg); padding:24px; text-align:center; color:white }
.sidebar-cta h4 { font-size:.95rem; margin-bottom:8px; color:white }
.sidebar-cta p { font-size:.8rem; opacity:.75; margin-bottom:16px; line-height:1.5 }

/* ── RELATED ARTICLES ────────────────────────── */
.related-section { background:var(--white); padding:64px 0 }
.related-section h2 { color:var(--navy); margin-bottom:32px }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.rel-card { background:var(--cream); border-radius:var(--radius); padding:24px; border:1px solid var(--border); transition:all .3s; text-decoration:none; display:block }
.rel-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.rel-card-tag { font-size:.7rem; font-weight:700; color:var(--saffron); text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px }
.rel-card h3 { color:var(--navy); font-size:.95rem; line-height:1.35; margin-bottom:10px }
.rel-card p { color:var(--muted); font-size:.82rem; line-height:1.5; margin-bottom:0 }

/* ── ARTICLE CTA ─────────────────────────────── */
.article-cta { background:var(--navy); padding:64px 0 }
.article-cta .container { display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center }
.article-cta h2 { color:white; font-size:clamp(1.4rem,2.5vw,1.9rem); margin-bottom:10px }
.article-cta p { color:rgba(255,255,255,.6); font-size:.95rem; line-height:1.6 }
.cta-buttons { display:flex; gap:12px; flex-direction:column; flex-shrink:0 }

/* ── ARTICLE-SPECIFIC COMPONENTS ────────────────────────────────────────── */

/* Stats grid (trends articles) */
.stat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:24px 0 }
.stat-card { background:var(--cream); border-radius:var(--radius); padding:18px; text-align:center; border:1px solid var(--border) }
.stat-number, .stat-num { font-size:1.6rem; font-weight:900; color:var(--navy); display:block }
.stat-label { font-size:.78rem; color:var(--muted); line-height:1.4; margin-top:4px }

/* Category blocks (trends, customs articles) */
.category-block { background:var(--cream); border-radius:var(--radius); padding:16px 20px; margin:16px 0; border-left:3px solid var(--saffron) }
.category-name { font-weight:700; color:var(--navy); font-size:.95rem; margin-bottom:6px }
.category-detail { font-size:.88rem; color:#374151; line-height:1.6 }
.category-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:20px 0 }
.cat-item { background:var(--cream); border-radius:var(--radius); padding:14px 16px; border-left:3px solid var(--saffron) }
.cat-name { font-weight:700; color:var(--navy); font-size:.9rem; margin-bottom:4px }
.cat-detail { font-size:.83rem; color:var(--muted); line-height:1.5 }

/* Data tables */
.data-table { width:100%; border-collapse:collapse; margin:20px 0; font-size:.88rem }
.data-table th { background:var(--navy); color:white; padding:10px 14px; text-align:left; font-weight:600 }
.data-table td { padding:10px 14px; border-bottom:1px solid var(--cream); color:#374151 }
.data-table tr:nth-child(even) td { background:var(--cream) }

/* GST breakdown (gst article) */
.gst-number-box { background:var(--navy); border-radius:var(--radius); padding:20px; color:white; text-align:center; margin:20px 0; font-family:monospace; font-size:1.2rem }
.gst-breakdown { display:flex; gap:4px; justify-content:center; flex-wrap:wrap; margin-top:12px }
.gst-part { text-align:center; padding:8px; background:rgba(255,255,255,.08); border-radius:6px; min-width:60px }
.gst-part-label { font-size:.65rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px }
.gst-part-value { font-size:.85rem; font-weight:700; color:var(--saffron) }
.gst-row { display:flex; gap:16px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--cream) }
.gst-row:last-child { border-bottom:none }
.gst-seg { font-family:monospace; font-weight:700; color:var(--navy); font-size:1rem; flex-shrink:0; min-width:80px }
.gst-label { color:var(--muted); font-size:.88rem; line-height:1.5 }

/* Q&A cards (10questions article) */
.question-card { background:var(--white); border-radius:var(--radius-lg); padding:24px 28px; border:1px solid var(--border); margin-bottom:20px }
.question-number { font-size:.72rem; font-weight:700; color:var(--saffron); text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px }
.question-text { color:var(--navy); font-weight:700; font-size:1.05rem; margin-bottom:12px; line-height:1.4 }
.green-flag { display:inline-flex; align-items:center; gap:6px; background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); border-radius:6px; padding:4px 10px; font-size:.82rem; color:#059669; font-weight:600; margin:4px 4px 4px 0 }
.red-flag { display:inline-flex; align-items:center; gap:6px; background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.15); border-radius:6px; padding:4px 10px; font-size:.82rem; color:#dc2626; font-weight:600; margin:4px 4px 4px 0 }

/* License cards (licenses article) */
.license-card { background:var(--white); border-radius:var(--radius-lg); padding:24px; border:1px solid var(--border); transition:all .3s }
.license-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg) }
.lic-badge, .licence-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px }
.lic-badge.required { background:rgba(239,68,68,.1); color:#dc2626; border:1px solid rgba(239,68,68,.2) }
.lic-badge.optional { background:rgba(16,185,129,.1); color:#059669; border:1px solid rgba(16,185,129,.2) }
.lic-info { font-size:.85rem; color:var(--muted); line-height:1.6; margin-top:8px }

/* Timeline (case40k RU) */
.timeline { display:flex; flex-direction:column; gap:0; margin:28px 0 }
.tl-item { display:flex; gap:20px; padding-bottom:28px; position:relative }
.tl-item:not(:last-child)::after { content:''; position:absolute; left:19px; top:38px; bottom:0; width:2px; background:var(--cream) }
.tl-dot { width:38px; height:38px; min-width:38px; border-radius:50%; background:var(--navy); color:white; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; z-index:1 }
.tl-dot.success { background:#10b981 }
.tl-body { flex:1 }
.tl-week { font-size:.75rem; font-weight:700; color:var(--saffron); text-transform:uppercase; letter-spacing:.05em; margin-bottom:4px }
.tl-title { font-weight:700; color:var(--navy); font-size:1rem; margin-bottom:8px }

/* Result box (case40k RU + EN) */
.result-box { background:linear-gradient(135deg,var(--navy),#1a3a5c); border-radius:var(--radius-lg); padding:28px; text-align:center; color:white; margin:24px 0 }
.result-num, .result-number { font-size:2rem; font-weight:900; color:var(--saffron); display:block; margin-bottom:6px }
.result-label { font-size:.9rem; color:rgba(255,255,255,.7); line-height:1.4 }

/* Q&A cards (10questions RU) */
.q-card { background:var(--white); border-radius:var(--radius-lg); padding:22px 26px; border:1px solid var(--border); margin-bottom:18px }
.q-num { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; background:var(--saffron); color:white; border-radius:50%; font-weight:700; font-size:.9rem; margin-bottom:10px }
.q-title { font-weight:700; color:var(--navy); font-size:1rem; margin-bottom:10px; line-height:1.4 }
.q-flags { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.q-flag { display:inline-flex; align-items:center; padding:5px 12px; border-radius:6px; font-size:.81rem; font-weight:600; line-height:1.4 }
.flag-green { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); color:#059669 }
.flag-red { background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.15); color:#dc2626 }

/* Contract clauses (contract RU) */
.point-num { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; background:var(--saffron); color:white; border-radius:50%; font-weight:700; font-size:.82rem; margin-right:8px; vertical-align:middle; flex-shrink:0 }
.clause-box { background:var(--cream); border:1px solid var(--border); border-left:4px solid var(--navy); border-radius:0 8px 8px 0; padding:18px 20px; margin:18px 0 }
.clause-label { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px }
.clause-en { font-style:italic; color:#374151; font-size:.88rem; line-height:1.7 }

/* Contract clauses (contract EN) */
.contract-clause { background:var(--cream); border:1px solid var(--border); border-left:4px solid var(--navy); border-radius:0 8px 8px 0; padding:18px 20px; margin:18px 0 }
.contract-clause-title { font-size:.72rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px }

/* Checklist blocks (checklist RU) */
.checklist-block { background:var(--white); border-radius:var(--radius); border:1px solid var(--border); overflow:hidden; margin-bottom:16px }
.cl-item { display:flex; align-items:flex-start; gap:12px; padding:10px 16px; border-bottom:1px solid var(--cream); font-size:.9rem; color:#374151 }
.cl-item:last-child { border-bottom:none }
.cl-num { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; min-width:24px; background:var(--saffron); color:white; border-radius:50%; font-weight:700; font-size:.75rem; margin-top:1px }

/* Numbered checklist (checklist EN) */
.numbered-checklist { list-style:none; padding:0; margin:0; counter-reset:nl-counter }
.numbered-checklist li { display:flex; align-items:flex-start; gap:12px; padding:10px 0; border-bottom:1px solid var(--cream); font-size:.9rem; color:#374151; counter-increment:nl-counter }
.numbered-checklist li:last-child { border-bottom:none }
.numbered-checklist li::before { content:counter(nl-counter); display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:24px; background:var(--saffron); color:white; border-radius:50%; font-weight:700; font-size:.75rem; margin-top:1px }

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width:1024px) {
  .article-layout { grid-template-columns:1fr }
  .article-sidebar { position:static }
  .related-grid { grid-template-columns:1fr 1fr }
  .article-cta .container { grid-template-columns:1fr }
  .cta-buttons { flex-direction:row; flex-shrink:1 }
  .stat-grid { grid-template-columns:1fr 1fr }
  .category-grid { grid-template-columns:1fr }
}
@media (max-width:768px) {
  .related-grid { grid-template-columns:1fr }
  .cta-buttons { flex-direction:column }
  .article-content { padding:24px }
  .stat-grid { grid-template-columns:1fr }
}