/* Xavira AI — Blog styles.
 * Reuses tokens.css + portal.css components. Carries the marketing nav styles
 * (which live inline in index.html) so blog pages render the same top bar,
 * plus blog-index card grid and article prose. */

/* ───── Marketing top bar (mirrors index.html) ───── */
.x-marketing-nav { position: sticky; top: 0; z-index: 50; background: rgba(250,246,242,0.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--x-line); }
.x-marketing-nav-inner { max-width: 1200px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 24px; }
.x-marketing-nav .x-brand { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; }
.x-marketing-nav .x-brand .x-wordmark { font: 900 18px/1 var(--x-sans); letter-spacing: -0.025em; color: var(--x-fg); }
.x-marketing-nav .x-links { display: flex; gap: 22px; }
.x-marketing-nav .x-links a { font: 500 13px/1 var(--x-sans); color: var(--x-fg-soft); text-decoration: none; }
.x-marketing-nav .x-links a:hover { color: var(--x-fg); }
.x-marketing-nav .x-links a.x-active { color: var(--x-accent); }
.x-marketing-nav .x-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

.x-nav-hamburger { display: none; width: 38px; height: 38px; padding: 0; border: 1px solid var(--x-line); background: transparent; border-radius: 8px; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 4px; transition: background var(--x-dur-fast); }
.x-nav-hamburger:hover { background: var(--x-ink-2); }
.x-nav-hamburger span { display: block; width: 18px; height: 1.6px; background: var(--x-fg); border-radius: 2px; transition: transform var(--x-dur-fast), opacity var(--x-dur-fast); }
.x-nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.x-nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.x-nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

.x-mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(250,246,242,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--x-line); padding: 14px 24px 20px; }
.x-mobile-menu.x-show { display: block; }
.x-mobile-menu nav { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.x-mobile-menu nav a { padding: 12px 8px; font: 500 15px/1 var(--x-sans); color: var(--x-fg); text-decoration: none; border-bottom: 1px solid var(--x-line); }
.x-mobile-menu nav a:last-child { border-bottom: 0; }
.x-mobile-menu .x-mobile-auth { display: flex; flex-direction: column; gap: 10px; }
.x-mobile-menu .x-mobile-auth .x-btn { width: 100%; justify-content: center; }

@media (max-width: 720px) {
  .x-marketing-nav .x-links { display: none; }
  .x-nav-hamburger { display: inline-flex; }
  .x-marketing-nav .x-right > .x-btn-ghost { display: none; }
}

/* ───── Layout ───── */
.x-blog-main { max-width: 1080px; margin: 0 auto; padding: 56px 32px 32px; }
.x-article-main { max-width: 760px; margin: 0 auto; padding: 48px 32px 32px; }
@media (max-width: 720px) { .x-blog-main, .x-article-main { padding-left: 20px; padding-right: 20px; } }

.x-eyebrow { font: 500 11px/1 var(--x-mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--x-fg-muted); margin-bottom: 14px; }
.x-grad { background: var(--x-gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ───── Blog index ───── */
.x-blog-head { margin-bottom: 44px; }
.x-blog-head h1 { font: 600 52px/1.03 var(--x-sans); letter-spacing: -0.04em; margin: 0 0 16px; }
@media (max-width: 720px) { .x-blog-head h1 { font-size: 38px; } }
.x-blog-head p { font: 400 18px/1.55 var(--x-sans); color: var(--x-fg-soft); max-width: 620px; margin: 0; }

.x-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.x-blog-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--x-line); border-radius: var(--x-r-4); background: var(--x-ink-1); text-decoration: none; transition: border-color var(--x-dur), box-shadow var(--x-dur), transform var(--x-dur); }
.x-blog-card:hover { border-color: var(--x-accent-line); box-shadow: var(--x-shadow-md); transform: translateY(-2px); }
.x-blog-card.x-feature { grid-column: 1 / -1; background: var(--x-gradient-hero); border-color: var(--x-accent-line); }
.x-blog-card .x-tagrow { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.x-blog-card h2 { font: 600 22px/1.2 var(--x-sans); letter-spacing: -0.02em; color: var(--x-fg); margin: 0 0 10px; }
.x-blog-card.x-feature h2 { font-size: 30px; letter-spacing: -0.03em; }
.x-blog-card p { font: 400 14px/1.55 var(--x-sans); color: var(--x-fg-soft); margin: 0 0 16px; }
.x-blog-card .x-readmore { margin-top: auto; font: 500 13px/1 var(--x-sans); color: var(--x-accent); }
.x-blog-card .x-meta { font: 400 11px/1 var(--x-mono); color: var(--x-fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ───── Article prose ───── */
.x-article-head { margin-bottom: 36px; padding-bottom: 28px; border-bottom: 1px solid var(--x-line); }
.x-article-head .x-meta { display: flex; gap: 10px; align-items: center; font: 400 12px/1 var(--x-mono); color: var(--x-fg-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.x-article-head h1 { font: 600 44px/1.06 var(--x-sans); letter-spacing: -0.035em; margin: 0 0 16px; }
@media (max-width: 720px) { .x-article-head h1 { font-size: 32px; } }
.x-article-head .x-standfirst { font: 400 19px/1.5 var(--x-sans); color: var(--x-fg-soft); margin: 0; }

.x-article { font: 400 17px/1.7 var(--x-sans); color: var(--x-fg); letter-spacing: -0.003em; }
.x-article > * { max-width: 100%; }
.x-article h2 { font: 600 28px/1.18 var(--x-sans); letter-spacing: -0.025em; margin: 48px 0 16px; }
.x-article h3 { font: 600 20px/1.3 var(--x-sans); letter-spacing: -0.015em; margin: 32px 0 12px; }
.x-article p { margin: 0 0 20px; }
/* Inline prose links get the accent + underline — but NOT buttons (.x-btn),
   which must keep their own component colours (white text on the primary CTA). */
.x-article a:not(.x-btn) { color: var(--x-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.x-article ul, .x-article ol { margin: 0 0 20px; padding-left: 22px; }
.x-article li { margin: 0 0 8px; }
.x-article strong { font-weight: 600; }
.x-article blockquote { margin: 28px 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--x-accent); color: var(--x-fg-soft); font-style: italic; }
.x-article code { font: 500 14px/1 var(--x-mono); background: var(--x-ink-2); border: 1px solid var(--x-line); border-radius: var(--x-r-1); padding: 2px 6px; }
.x-article pre { font: 400 13px/1.6 var(--x-mono); background: var(--x-ink-2); border: 1px solid var(--x-line); border-radius: var(--x-r-3); padding: 16px 18px; overflow-x: auto; margin: 0 0 24px; color: var(--x-fg); }
.x-article pre code { background: none; border: 0; padding: 0; font-size: 13px; }
.x-article hr { border: 0; border-top: 1px solid var(--x-line); margin: 40px 0; }

/* Comparison table */
.x-article .x-table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font: 400 14px/1.4 var(--x-sans); }
.x-article .x-table th, .x-article .x-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--x-line); }
.x-article .x-table thead th { font: 600 12px/1.2 var(--x-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--x-fg-muted); background: var(--x-ink-2); }
.x-article .x-table td.x-win { color: var(--x-accent); font-weight: 600; }
.x-article .x-table tr.x-xavira td:first-child { font-weight: 600; }

/* CTA block inside articles */
.x-article-cta { margin: 44px 0 8px; padding: 28px; border: 1px solid var(--x-accent-line); border-radius: var(--x-r-4); background: var(--x-accent-soft); text-align: center; }
/* Belt-and-suspenders: CTA buttons keep white text, never inherit prose-link colour. */
.x-article-cta .x-btn-primary, .x-article .x-btn-primary { color: #fff; text-decoration: none; }
.x-article-cta .x-btn-secondary, .x-article-cta .x-btn-ghost { text-decoration: none; }
.x-article-cta h3 { font: 600 22px/1.2 var(--x-sans); letter-spacing: -0.02em; margin: 0 0 8px; }
.x-article-cta p { font: 400 15px/1.5 var(--x-sans); color: var(--x-fg-soft); margin: 0 0 18px; }

.x-back-link { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1 var(--x-sans); color: var(--x-fg-muted); margin-bottom: 28px; }
.x-back-link:hover { color: var(--x-accent); }

.x-disclaimer { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--x-line); font: 400 12px/1.6 var(--x-sans); color: var(--x-fg-muted); }