/* Blog Layout v1.1.0.0 — SINGLE SOURCE OF TRUTH for all .ai blog posts
 * v1.1: Added sidebar layout (2-column grid) + sidebar component styles
 * All posts should use <link rel="stylesheet" href="../shared/blog-layout.css">
 * NO inline <style> blocks needed. This file IS the template.
 * 
 * HTML structure:
 *   <div class="blog-header"><a>🌊 海岸線</a> · <a>部落格</a></div>
 *   <div class="blog-wrapper">
 *     <article>...</article>
 *     <aside class="blog-sidebar">...</aside>
 *   </div>
 *   <footer>...</footer>
 */

/* ========== Variables ========== */
:root {
  --bg: #0a0a0a;
  --bg-card: rgba(255,255,255,0.03);
  --accent: #a78bfa;
  --coast: #14b8a6;
  --gold: #fca311;
  --red: #ef4444;
  --green: #22c55e;
  --blue: #3b82f6;
  --text: #e0e7ef;
  --text-muted: #8899aa;
  --border: rgba(255,255,255,0.06);
}

/* ========== Reset ========== */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter','Noto Sans TC',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.8;}

/* ========== Nav (simple header) ========== */
.blog-header{padding:20px 24px;border-bottom:1px solid var(--border);}
.blog-header a{color:var(--accent);text-decoration:none;font-weight:700;font-size:0.9rem;}

/* ========== Blog Wrapper (2-column layout) ========== */
.blog-wrapper{display:grid;grid-template-columns:1fr 280px;gap:32px;max-width:1100px;margin:0 auto;padding:40px 24px 80px;}

/* ========== Article ========== */
article{max-width:760px;padding:0;}
h1{font-size:1.8rem;font-weight:900;margin-bottom:12px;line-height:1.3;}
.subtitle{color:var(--text-muted);font-size:1rem;margin-bottom:32px;}
.meta{color:var(--text-muted);font-size:0.85rem;margin-bottom:32px;}
h2{font-size:1.35rem;font-weight:800;margin:40px 0 16px;padding-bottom:8px;border-bottom:1px solid var(--border);}
h3{font-size:1.05rem;font-weight:700;margin:28px 0 12px;color:var(--accent);}
p{margin-bottom:14px;}
ul,ol{margin:0 0 14px 24px;}
li{margin-bottom:6px;}
a{color:var(--accent);}
a:hover{text-decoration:underline;}

/* ========== Language Toggle ========== */
.lang-toggle{position:fixed;top:16px;right:16px;z-index:100;display:flex;gap:4px;background:rgba(0,0,0,0.85);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:8px;padding:4px;font-size:0.8rem;}
.lang-toggle button{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:6px 12px;border-radius:6px;font-weight:700;font-family:inherit;}
.lang-toggle button.active{background:var(--accent);color:var(--bg);}

/* ========== Cards ========== */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px;margin:16px 0;}
.card.highlight{border-color:rgba(167,139,250,0.3);}
.card.gold{border-color:rgba(252,163,17,0.3);}

/* ========== Code ========== */
code{background:rgba(255,255,255,0.08);padding:2px 8px;border-radius:4px;font-family:'Fira Code',monospace;font-size:0.85rem;color:var(--accent);}
pre{background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:8px;padding:16px;overflow-x:auto;margin:12px 0;font-family:'Fira Code',monospace;font-size:0.82rem;line-height:1.5;color:var(--accent);}

/* ========== Tables ========== */
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:0.85rem;}
th{background:rgba(167,139,250,0.08);color:var(--accent);padding:10px 12px;text-align:left;font-weight:700;border-bottom:2px solid rgba(167,139,250,0.2);}
td{padding:10px 12px;border-bottom:1px solid var(--border);}
tr:hover{background:rgba(255,255,255,0.02);}

/* ========== Callout Boxes ========== */
blockquote{border-left:3px solid var(--gold);padding:16px 24px;margin:24px 0;background:rgba(252,163,17,0.04);border-radius:0 12px 12px 0;}
blockquote p{color:var(--text);font-style:italic;margin:0;}
.tip{background:rgba(59,130,246,0.05);border-left:3px solid var(--blue);padding:12px 16px;margin:14px 0;border-radius:0 8px 8px 0;font-size:0.88rem;}
.warn{background:rgba(239,68,68,0.05);border-left:3px solid var(--red);padding:12px 16px;margin:14px 0;border-radius:0 8px 8px 0;font-size:0.88rem;}
.success{background:rgba(34,197,94,0.05);border-left:3px solid var(--green);padding:12px 16px;margin:14px 0;border-radius:0 8px 8px 0;font-size:0.88rem;}
.pivot-box{border-left:3px solid var(--red);padding:16px 24px;margin:24px 0;background:rgba(239,68,68,0.04);border-radius:0 12px 12px 0;}

/* ========== TOC ========== */
.toc{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px 24px;margin:24px 0;}
.toc h3{color:var(--accent);margin:0 0 12px;font-size:1rem;}
.toc ol{margin:0;padding:0 0 0 20px;}
.toc li{margin-bottom:6px;font-size:0.88rem;}
.toc a{color:var(--text);text-decoration:none;}
.toc a:hover{color:var(--accent);}

/* ========== Model Cards (OpenClaw guide) ========== */
.model-card{display:grid;grid-template-columns:auto 1fr;gap:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin:12px 0;align-items:start;}
.model-rank{font-size:1.8rem;font-weight:900;}
.model-info h4{margin:0 0 4px;font-size:0.95rem;font-weight:700;}
.model-info p{margin:0;font-size:0.82rem;color:var(--text-muted);}
.model-info .price{color:var(--gold);font-weight:700;font-size:0.85rem;}

/* ========== CTA Box ========== */
.cta-box{background:linear-gradient(135deg,rgba(167,139,250,0.1),rgba(20,184,166,0.1));border:1px solid rgba(167,139,250,0.2);border-radius:12px;padding:24px;text-align:center;margin:40px 0;}
.cta-box a.btn{display:inline-block;background:var(--accent);color:var(--bg);padding:12px 32px;border-radius:8px;font-weight:800;text-decoration:none;margin:4px;}
.cta-box a.btn:hover{opacity:0.9;}
.cta-box a.btn-outline{display:inline-block;background:rgba(255,255,255,0.06);color:var(--text);padding:12px 28px;border-radius:8px;font-weight:700;text-decoration:none;border:1px solid var(--border);margin:4px;}

/* ========== Prompt Box ========== */
.prompt-box{background:rgba(167,139,250,0.05);border:1px solid rgba(167,139,250,0.2);border-radius:8px;padding:16px;margin:12px 0;font-style:italic;font-size:0.88rem;color:var(--text);line-height:1.6;}
.prompt-box::before{content:"💬 ";font-style:normal;}

/* ========== Badges ========== */
.badge{display:inline-block;padding:2px 10px;border-radius:4px;font-size:0.72rem;font-weight:800;margin-left:8px;}
.badge-best{background:rgba(167,139,250,0.15);color:var(--accent);}
.badge-good{background:rgba(59,130,246,0.15);color:var(--blue);}
.badge-budget{background:rgba(34,197,94,0.15);color:var(--green);}
.badge-free{background:rgba(255,255,255,0.08);color:var(--text-muted);}

/* ========== Details/FAQ ========== */
details{margin:8px 0;padding:12px;background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:8px;}
details summary{cursor:pointer;font-weight:700;}
details p{margin-top:8px;font-size:0.9rem;color:var(--text-muted);}

/* ========== Figures ========== */
figure{margin:32px 0;text-align:center;}
figure img{max-width:100%;border-radius:12px;border:1px solid var(--border);}
figcaption{color:var(--text-muted);font-size:0.8rem;margin-top:8px;}

/* ========== Sidebar ========== */
.blog-sidebar{position:sticky;top:80px;align-self:start;}
.sidebar-section{background:rgba(255,255,255,0.02);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px;}
.sidebar-section h4{font-size:0.8rem;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;}
.sidebar-post-link{display:block;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--accent);font-size:0.82rem;text-decoration:none;line-height:1.4;}
.sidebar-post-link:hover{color:#fff;text-decoration:none;}
.sidebar-cat{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.03);color:var(--text-muted);font-size:0.82rem;}
.cat-count{background:rgba(167,139,250,0.1);color:var(--accent);padding:1px 8px;border-radius:10px;font-size:0.72rem;}

/* ========== Footer ========== */
footer{max-width:1100px;margin:0 auto;padding:24px;border-top:1px solid var(--border);color:var(--text-muted);font-size:0.78rem;text-align:center;}
footer a{color:var(--accent);}

/* ========== Responsive ========== */
@media(max-width:768px){
  .blog-wrapper{grid-template-columns:1fr !important;padding:24px 16px 60px;}
  .blog-sidebar{position:static;}
  article{padding:0;}
  h1{font-size:1.4rem;}
  h2{font-size:1.15rem;}
  table{font-size:0.75rem;}
  th,td{padding:8px 6px;}
  .model-card{grid-template-columns:1fr;}
}