/*
 * Roboteka public SEO sites — styles on the design tokens (design-tokens.css).
 * Spectrum palette, Onest + JetBrains Mono, cream bg, cards --r-lg/--shadow-2.
 * Mobile-first, no JS. See .claude/skills/roboteka-design.
 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-violet); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.18; letter-spacing: -0.02em; }
h1 { font-size: var(--t-h2); margin: 0 0 var(--s-3); }
h2 { font-size: var(--t-h3); margin: var(--s-7) 0 var(--s-3); }
h3 { font-size: var(--t-h4); margin: 0 0 var(--s-2); }

.pub-container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 var(--s-5); }

/* ── Header ───────────────────────────────────────────── */
.pub-header {
    position: sticky; top: 0; z-index: 10;
    background: rgba(255, 253, 247, 0.86);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--border);
}
.pub-header-inner { display: flex; align-items: center; gap: var(--s-4); height: var(--hh); }
.pub-brand { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 800; color: var(--ink); }
.pub-brand:hover { text-decoration: none; }
.pub-brand-plate {
    display: inline-flex; padding: 5px; background: var(--brand-cream);
    border-radius: var(--r-icon); box-shadow: var(--shadow-1);
}
.pub-brand-name { font-family: var(--font-display); font-size: var(--t-h4); letter-spacing: -0.02em; }
.pub-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); font-size: var(--t-small); }
.pub-nav > a { color: var(--ink-mid); font-weight: 600; }
.pub-nav > a:hover { color: var(--ink); text-decoration: none; }
.pub-nav-cta {
    background: var(--brand-violet); color: #fff !important; padding: 8px 14px;
    border-radius: var(--r-md); box-shadow: var(--shadow-2);
}
.pub-nav-cta:hover { background: var(--p-d); text-decoration: none; }
.pub-lang { display: inline-flex; gap: 2px; font-family: var(--font-mono); font-size: var(--t-caption); }
.pub-lang a { color: var(--ink-soft); padding: 3px 6px; border-radius: var(--r-sm); }
.pub-lang a.is-current { color: var(--ink); background: var(--bg-deep); }

/* ── Main / footer ────────────────────────────────────── */
.pub-main { padding: var(--s-7) 0 var(--s-9); min-height: 60vh; }
.pub-footer { border-top: 1px solid var(--border); background: var(--surface-2); padding: var(--s-5) 0; }
.pub-footer-inner { display: flex; gap: var(--s-5); font-size: var(--t-small); color: var(--ink-soft); flex-wrap: wrap; }
.pub-footer a { color: var(--ink-mid); }

.overline { font-family: var(--font-mono); font-size: var(--t-overline); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.lede { font-size: var(--t-h4); color: var(--ink-mid); max-width: 60ch; }

/* ── Hero (home) — double CTA, brand non-negotiable ───── */
.hero {
    background: linear-gradient(135deg, #1A1E5C 0%, #2A1B4E 100%);
    border-radius: var(--r-2xl); padding: var(--s-8) var(--s-7);
    color: var(--brand-cream); position: relative; overflow: hidden;
    box-shadow: var(--shadow-3); margin-bottom: var(--s-7);
}
.hero h1 { color: var(--brand-cream); font-size: var(--t-display); max-width: 16ch; }
.hero p { color: rgba(244,240,232,0.78); font-size: var(--t-h4); max-width: 52ch; margin: var(--s-4) 0 var(--s-6); }
.hero-tiles { position: absolute; right: -40px; top: -30px; opacity: 0.14; transform: rotate(8deg); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hero-tiles span { width: 88px; height: 88px; border-radius: 14px; display: block; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); position: relative; }

.btn { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 700; font-size: var(--t-small); padding: 12px 20px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; }
.btn-primary { background: var(--brand-violet); color: #fff; box-shadow: var(--shadow-2); }
.btn-primary:hover { background: var(--p-d); text-decoration: none; }
.btn-ghost { background: rgba(244,240,232,0.10); color: var(--brand-cream); border-color: rgba(244,240,232,0.28); }
.btn-ghost:hover { background: rgba(244,240,232,0.18); text-decoration: none; }

/* ── Category nav ─────────────────────────────────────── */
.cat-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-5) 0 var(--s-6); }
.cat-chip { font-size: var(--t-small); font-weight: 600; color: var(--ink-mid); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 7px 14px; }
.cat-chip:hover { border-color: var(--brand-violet); color: var(--ink); text-decoration: none; }
.cat-chip .n { color: var(--ink-soft); font-family: var(--font-mono); font-size: var(--t-caption); margin-left: 6px; }

/* ── Robot grid + cards ───────────────────────────────── */
.robot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.robot-card {
    display: flex; flex-direction: column; gap: var(--s-2);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 18px; box-shadow: var(--shadow-2);
    transition: box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.robot-card:hover { box-shadow: var(--shadow-3); transform: translateY(-2px); text-decoration: none; }
.robot-card .rc-cat { align-self: flex-start; }
.robot-card h3 { color: var(--ink); margin: 0; font-size: 15px; font-weight: 700; }
.robot-card p { color: var(--ink-mid); font-size: 13px; line-height: 1.45; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Robot page (article) ─────────────────────────────── */
.robot-page { max-width: 760px; }
.crumbs { font-size: var(--t-small); color: var(--ink-soft); margin-bottom: var(--s-4); }
.crumbs a { color: var(--ink-mid); }
.robot-answer { font-size: var(--t-h4); color: var(--ink); font-weight: 500; margin: 0 0 var(--s-4); }
.robot-desc { color: var(--ink-mid); }
.param-table { width: 100%; border-collapse: collapse; margin: var(--s-3) 0 var(--s-5); font-size: var(--t-small); }
.param-table th, .param-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
.param-table thead th { color: var(--ink-soft); font-weight: 600; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.04em; background: var(--surface-2); }
.param-table td:first-child { font-weight: 600; color: var(--ink); }
.param-table .mono { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-mid); }
.robot-example { padding-left: 1.2em; color: var(--ink-mid); }
.robot-example li { margin: var(--s-2) 0; }
.robot-related { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.robot-related a { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 6px 14px; font-size: var(--t-small); font-weight: 600; color: var(--ink-mid); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--border); }
.cta-request { background: var(--surface); color: var(--brand-violet); border: 1px solid var(--brand-violet); padding: 12px 20px; border-radius: var(--r-md); font-weight: 700; font-size: var(--t-small); }
.cta-request:hover { background: var(--p-bg); text-decoration: none; }

/* ── Blog ─────────────────────────────────────────────── */
.post-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-4); margin-top: var(--s-5); }
.post-card .post-date { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-soft); }
.post-read { font-size: var(--t-small); font-weight: 700; color: var(--brand-violet); margin-top: auto; }
.article-page { max-width: 720px; }
.article-page > .post-date { display: block; font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-soft); margin-bottom: var(--s-5); }
.article-body { font-size: var(--t-body); color: var(--ink); }
.article-body h2 { margin-top: var(--s-6); }
.article-body p, .article-body li { color: var(--ink-mid); line-height: 1.7; }
.article-body a { font-weight: 600; }
.article-body code, .article-body pre { font-family: var(--font-mono); font-size: var(--t-small); background: var(--bg-deep); border-radius: var(--r-sm); }
.article-body code { padding: 1px 6px; }
.article-body pre { padding: var(--s-3) var(--s-4); overflow-x: auto; }
.article-body blockquote { margin: var(--s-4) 0; padding: var(--s-3) var(--s-4); background: var(--surface-2); border-radius: var(--r-md); color: var(--ink-mid); }
.robot-articles { list-style: none; padding: 0; }
.robot-articles li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--t-small); }
.robot-articles time { font-family: var(--font-mono); font-size: var(--t-caption); color: var(--ink-soft); white-space: nowrap; }

/* ── 404 ──────────────────────────────────────────────── */
.pub-404 { text-align: center; padding: var(--s-9) 0; }
.pub-404 .tile { width: 64px; height: 64px; border-radius: 14px; background: var(--brand-amber); opacity: 0.5; margin: 0 auto var(--s-4); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
    .pub-container { padding: 0 var(--s-4); }
    .hero { padding: var(--s-6) var(--s-5); }
    .hero h1 { font-size: var(--t-h1); }
    .pub-brand-name { display: none; }
}