/* =============================================
   podstavec.cz — Blog Shared Styles
   Design tokens + base article styles
   extracted from homepage design system
   ============================================= */

/* ---------- DESIGN TOKENS ---------- */
:root{
  --bg:#F2EFE8;
  --fg:#0B0B0B;
  --muted:#6A6A66;
  --card:#FFFFFF;
  --line:#0B0B0B;
  --accent:#3E8BFF;
  --accent-fg:#FFFFFF;
  --grid:rgba(11,11,11,.08);
}
:root[data-theme="dark"]{
  --bg:#0B0B0B;
  --fg:#F2EFE8;
  --muted:#9A978E;
  --card:#141413;
  --line:#F2EFE8;
  --grid:rgba(242,239,232,.08);
}

/* ---------- RESET & BASE ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);overflow-x:hidden}
body{
  font-family:"Space Grotesk", system-ui, sans-serif;
  font-size:17px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit}
.mono{font-family:"JetBrains Mono", ui-monospace, monospace}
.wrap{max-width:1280px;margin:0 auto;padding:0 28px}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:40;
  background:var(--bg);
  border-bottom:2px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 28px;gap:16px;max-width:1280px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;text-decoration:none}
.brand-dot{width:14px;height:14px;background:var(--accent);border:2px solid var(--line);display:inline-block}
.nav-links{display:flex;gap:22px;font-size:14px;flex-wrap:wrap}
.nav-links a{text-decoration:none;border-bottom:2px solid transparent;padding:2px 0;transition:border-color .15s}
.nav-links a:hover{border-bottom-color:var(--line)}
.nav-cta{display:flex;gap:10px;align-items:center}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--card);border:2px solid var(--line);cursor:pointer;
  transition:transform .12s ease;
}
.icon-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--line)}
.theme-btn{color:var(--fg);font-size:18px;line-height:1;font-family:"JetBrains Mono",monospace;background:transparent;border:0}

/* ---------- BTN ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;
  background:var(--fg);color:var(--bg);
  border:2px solid var(--line);
  font-weight:600;font-size:15px;
  text-decoration:none;cursor:pointer;font-family:inherit;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--line)}
.btn.primary{background:var(--accent);color:var(--accent-fg)}
.btn.ghost{background:transparent;color:var(--fg)}
.btn .arr{display:inline-block;transition:transform .2s}
.btn:hover .arr{transform:translateX(4px)}

/* ---------- HAMBURGER & MOBILE MENU ---------- */
.hamburger{
  display:none;
  width:38px;height:38px;
  background:var(--card);border:2px solid var(--line);cursor:pointer;
  font-size:20px;line-height:1;color:var(--fg);
  font-family:"JetBrains Mono",monospace;
  place-items:center;
  transition:transform .12s ease;
}
.hamburger:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--line)}
.mobile-menu{
  position:fixed;inset:0;z-index:100;
  background:var(--bg);
  display:flex;flex-direction:column;
  padding:0 28px 40px;
  overflow-y:auto;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
.mobile-menu.open{opacity:1;pointer-events:auto}
.mobile-menu-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 0;margin-bottom:12px;
  border-bottom:2px solid var(--line);
}
.mobile-menu-close{
  width:38px;height:38px;display:grid;place-items:center;
  background:var(--card);border:2px solid var(--line);cursor:pointer;
  font-size:22px;color:var(--fg);font-family:"JetBrains Mono",monospace;
}
.mobile-menu-links{display:flex;flex-direction:column;flex:1}
.mobile-menu-links a{
  display:block;font-size:28px;font-weight:600;
  letter-spacing:-.01em;
  padding:18px 0;border-bottom:2px solid var(--line);
  text-decoration:none;color:var(--fg);
  transition:color .15s;
}
.mobile-menu-links a:hover{color:var(--accent)}
.mobile-menu-cta{margin-top:auto;padding-top:32px}

/* ---------- FOOTER ---------- */
footer{border-top:2px solid var(--line);padding:40px 0;background:var(--bg)}
footer .fw{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
footer .fw a{border-bottom:2px solid transparent;text-decoration:none}
footer .fw a:hover{border-bottom-color:var(--line);color:var(--fg)}

/* ---------- ARTICLE ---------- */
.article-header{
  padding:80px 0 40px;
  border-bottom:2px solid var(--line);
}
.article-meta{
  font-family:"JetBrains Mono", monospace;
  font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);
  display:flex;gap:20px;align-items:center;
  margin-bottom:16px;
}
.article-meta .tag{
  padding:4px 10px;border:2px solid var(--line);
  display:inline-flex;
}
.article-header h1{
  font-size:clamp(34px, 5vw, 64px);
  line-height:1;letter-spacing:-.02em;font-weight:700;
  margin:0 0 20px;text-wrap:balance;
}
.article-header .lede{
  font-size:19px;color:var(--muted);max-width:760px;margin:0;
}

.article-body{
  padding:60px 0;
  max-width:760px;
}
.article-body h2{
  font-size:clamp(26px, 3.5vw, 38px);
  line-height:1.1;letter-spacing:-.02em;font-weight:700;
  margin:56px 0 16px;
}
.article-body h2:first-child{margin-top:0}
.article-body h3{
  font-size:22px;line-height:1.2;letter-spacing:-.01em;font-weight:600;
  margin:40px 0 12px;
}
.article-body p{
  margin:0 0 20px;line-height:1.65;
}
.article-body a{
  color:var(--accent);text-decoration:underline;
  text-underline-offset:3px;
}
.article-body a:hover{text-decoration-thickness:2px}
.article-body strong{font-weight:600}
.article-body ul,.article-body ol{
  margin:0 0 20px;padding:0 0 0 24px;
}
.article-body li{margin:0 0 8px;line-height:1.55}
.article-body li::marker{color:var(--accent)}
.article-body blockquote{
  margin:32px 0;padding:24px 28px;
  background:var(--accent);color:var(--accent-fg);
  border:2px solid var(--line);
  font-size:20px;font-weight:500;line-height:1.35;
  transform:rotate(-.4deg);
}
.article-body blockquote p{margin:0;color:var(--accent-fg)}
.article-body img{
  max-width:100%;border:2px solid var(--line);
  margin:32px 0;display:block;
}
.article-body figure{margin:32px 0}
.article-body figure img{margin:0}
.article-body figcaption{
  font-family:"JetBrains Mono",monospace;font-size:12px;
  color:var(--muted);margin-top:10px;
  text-transform:uppercase;letter-spacing:.06em;
}

/* ---------- CODE ---------- */
.article-body code{
  font-family:"JetBrains Mono",monospace;font-size:14px;
  background:var(--card);border:1px solid color-mix(in srgb, var(--line) 20%, transparent);
  padding:2px 6px;
}
.article-body pre{
  margin:24px 0;padding:24px;
  background:var(--fg);color:var(--bg);
  border:2px solid var(--line);
  overflow-x:auto;font-size:14px;line-height:1.55;
}
.article-body pre code{
  background:transparent;border:0;padding:0;color:inherit;
}

/* ---------- CALLOUT ---------- */
.callout{
  margin:32px 0;padding:24px;
  border:2px solid var(--line);background:var(--card);
  position:relative;
}
.callout::before{
  content:"";position:absolute;top:-2px;left:-2px;
  width:60px;height:6px;background:var(--accent);
}
.callout p:last-child{margin-bottom:0}

/* ---------- INTERACTIVE: CAROUSEL ---------- */
.carousel{
  position:relative;border:2px solid var(--line);
  background:var(--card);overflow:hidden;margin:32px 0;
}
.carousel-track{display:flex;transition:transform .3s ease}
.carousel-slide{min-width:100%;padding:32px}
.carousel-nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-top:2px solid var(--line);
  font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--muted);
}
.carousel-btn{
  width:36px;height:36px;display:grid;place-items:center;
  background:var(--card);border:2px solid var(--line);cursor:pointer;
  font-size:16px;color:var(--fg);font-family:"JetBrains Mono",monospace;
  transition:transform .12s ease;
}
.carousel-btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--line)}
.carousel-btn:disabled{opacity:.3;cursor:default;transform:none;box-shadow:none}

/* ---------- INTERACTIVE: COMPARISON ---------- */
.comparison{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:2px solid var(--line);margin:32px 0;
}
.comparison > div{padding:24px}
.comparison > div:first-child{border-right:2px solid var(--line);background:var(--card)}
.comparison > div:last-child{background:var(--bg)}
.comparison h4{
  font-family:"JetBrains Mono",monospace;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  margin:0 0 12px;
}
@media (max-width:640px){
  .comparison{grid-template-columns:1fr}
  .comparison > div:first-child{border-right:0;border-bottom:2px solid var(--line)}
}

/* ---------- BLOG INDEX ---------- */
.blog-list{border-top:2px solid var(--line)}
.blog-item{
  display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:baseline;
  padding:28px 8px;border-bottom:2px solid var(--line);
  text-decoration:none;color:inherit;
  transition:background .15s, transform .15s;
}
.blog-item:hover{background:var(--accent);color:var(--accent-fg);transform:translateX(6px)}
.blog-item:hover .blog-date{color:var(--accent-fg)}
.blog-item:hover .blog-desc{color:var(--accent-fg);opacity:.8}
.blog-date{font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--muted);white-space:nowrap}
.blog-title{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:0 0 6px}
.blog-desc{font-size:14px;color:var(--muted);margin:0;line-height:1.45}

/* ---------- SCROLL FX ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------- MOBILE ---------- */
@media (max-width:860px){
  .wrap{padding:0 18px}
  .nav-inner{padding:12px 18px;flex-wrap:nowrap;gap:10px}
  .nav-links{display:none}
  .brand{font-size:14px}
  .hamburger{display:grid}
  .nav-cta .btn.primary{display:none}
  .nav-cta .btn{padding:9px 12px;font-size:12px}
  .article-header{padding:48px 0 28px}
  .article-header h1{font-size:clamp(28px, 8vw, 44px)}
  .article-header .lede{font-size:17px}
  .article-body{padding:40px 0}
  .article-body h2{font-size:clamp(22px, 6vw, 32px);margin:40px 0 12px}
  .article-body h3{font-size:19px}
  .article-body blockquote{padding:18px 22px;font-size:18px}
  .blog-item{grid-template-columns:1fr;gap:6px;padding:22px 4px}
  .blog-date{font-size:12px}
  .blog-title{font-size:18px}
  footer{padding:28px 0}
  footer .fw{flex-direction:column;align-items:flex-start;gap:10px;font-size:11px}
}

/* Touch: disable hover effects */
@media (hover:none){
  .btn:hover,.icon-btn:hover{transform:none;box-shadow:none}
  .blog-item:hover{background:transparent;color:var(--fg);transform:none}
  .blog-item:hover .blog-date{color:var(--muted)}
  .blog-item:hover .blog-desc{color:var(--muted);opacity:1}
}