/* ============================================================
   THESEO BLOG — blog-specific components (light mode)
   Depends on tokens.css + components.css
   ============================================================ */

/* ---- Blog hero / page header ---- */
.blog-hero{
  background:var(--grad-hero-light);
  border-bottom:1px solid var(--color-border);
  padding-top:calc(4.5rem + clamp(2.5rem,2rem + 3vw,4rem));
  padding-bottom:clamp(2.5rem,2rem + 3vw,4rem);
  position:relative;overflow:hidden;
}
.blog-hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(105,56,239,.12) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 60% 90% at 90% 10%,#000 10%,transparent 70%);
  pointer-events:none;
}
.blog-hero h1{font-size:var(--text-3xl);max-width:40rem;position:relative}
.blog-hero .lede{margin-top:var(--sp-4);max-width:38rem;color:var(--color-fg-muted);font-size:var(--text-lg);position:relative}

/* ---- Layout: content + sidebar ---- */
.site-main{padding-block:var(--section-y)}
.content-sidebar{
  display:grid;grid-template-columns:minmax(0,1fr) 19rem;
  gap:clamp(2rem,4vw,4rem);align-items:start;
}
.content-full{max-width:46rem;margin-inline:auto}

/* ---- Post cards grid ---- */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:var(--sp-8)}
.post-card{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform var(--dur-med) var(--ease-out),box-shadow var(--dur-med);
}
.post-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-float)}
.post-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--color-bg-alt);position:relative}
.post-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-med) var(--ease-out)}
.post-card:hover .post-card__media img{transform:scale(1.04)}
.post-card__media--placeholder{display:grid;place-items:center;background:var(--grad-hero-light)}
.post-card__media--placeholder svg{width:2.5rem;height:2.5rem;color:var(--violet-300)}
.post-card__body{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);flex:1}
.post-card__title{font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--leading-snug);letter-spacing:-.01em}
.post-card__title a{transition:color var(--dur-fast)}
.post-card__title a:hover{color:var(--color-accent)}
.post-card__excerpt{font-size:var(--text-sm);color:var(--color-fg-muted);flex:1}
.post-card__meta{display:flex;flex-wrap:wrap;gap:var(--sp-3);align-items:center;
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-soft);margin-top:auto}

/* category chip */
.cat-chip{
  display:inline-flex;align-items:center;
  font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.04em;
  padding:.25rem .7rem;border-radius:var(--radius-pill);
  background:var(--color-accent-soft);color:var(--color-accent-strong);
  text-transform:uppercase;transition:background var(--dur-fast),color var(--dur-fast);
  width:max-content;
}
a.cat-chip:hover{background:var(--violet-600);color:#fff}

/* ---- Single post ---- */
.single-hero{
  background:var(--grad-hero-light);border-bottom:1px solid var(--color-border);
  padding-top:calc(4.5rem + clamp(2.5rem,2rem + 3vw,4rem));padding-bottom:clamp(2rem,2rem + 2vw,3rem);
  position:relative;overflow:hidden;
}
.single-hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(105,56,239,.1) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse 70% 90% at 85% 0%,#000 5%,transparent 65%);
}
.single-hero__inner{max-width:46rem;margin-inline:auto;position:relative}
.single-hero h1{font-size:var(--text-3xl);margin:var(--sp-4) 0;letter-spacing:-.02em}
.entry-meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-soft)}
.entry-meta span{display:inline-flex;align-items:center;gap:.4rem}
.entry-meta svg{width:1rem;height:1rem;flex:none;color:var(--color-accent)}
.entry-meta .avatar{border-radius:50%;vertical-align:middle}
.entry-meta a:hover{color:var(--color-accent)}
.entry-meta .sep{opacity:.5}
/* global default for inline brand icons emitted by theseo_icon() */
.ico{width:1.05em;height:1.05em;flex:none;vertical-align:middle}
.entry-meta .ico{width:1rem;height:1rem}
/* generic guard: any stray inline icon in prose/meta stays reasonable */
.entry-tags > svg{width:1.1rem;height:1.1rem;color:var(--color-accent)}

.featured-wrap{max-width:56rem;margin:0 auto;margin-top:calc(-1*clamp(1.5rem,3vw,3rem));position:relative;z-index:2;padding-inline:var(--container-pad)}
.featured-wrap img{width:100%;border-radius:var(--radius-lg);box-shadow:var(--shadow-float);border:1px solid var(--color-border)}

/* ---- Article prose ---- */
.entry-content{max-width:44rem;margin-inline:auto;font-size:var(--text-lg);line-height:var(--leading-body);color:var(--ink-2)}
.entry-content > *{margin-block:var(--sp-6)}
.entry-content h2{font-family:var(--font-display);font-size:var(--text-2xl);margin-top:var(--sp-12);letter-spacing:-.02em}
.entry-content h3{font-family:var(--font-display);font-size:var(--text-xl);margin-top:var(--sp-8)}
.entry-content h4{font-family:var(--font-display);font-size:var(--text-lg);margin-top:var(--sp-6)}
.entry-content p{color:var(--color-fg-muted)}
.entry-content a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.entry-content a:hover{color:var(--color-accent-strong)}
.entry-content strong{color:var(--ink-2);font-weight:600}
.entry-content ul,.entry-content ol{padding-left:1.4rem;color:var(--color-fg-muted)}
.entry-content li{margin-block:var(--sp-2)}
.entry-content ul li{list-style:disc}
.entry-content ol li{list-style:decimal}
.entry-content blockquote{
  border-left:3px solid var(--violet-500);background:var(--violet-50);
  padding:var(--sp-4) var(--sp-6);border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:var(--text-lg);color:var(--ink-2);
}
.entry-content blockquote p{color:var(--ink-2)}
.entry-content code{font-family:var(--font-mono);font-size:.9em;background:var(--color-bg-alt);
  padding:.15em .4em;border-radius:.4rem;border:1px solid var(--color-border)}
.entry-content pre{background:var(--ink-1);color:var(--color-fg-invert);padding:var(--sp-6);
  border-radius:var(--radius-md);overflow-x:auto;font-family:var(--font-mono);font-size:var(--text-sm)}
.entry-content pre code{background:none;border:0;color:inherit;padding:0}
.entry-content img,.entry-content figure{border-radius:var(--radius-md)}
.entry-content figure figcaption{font-size:var(--text-sm);color:var(--color-fg-soft);text-align:center;margin-top:var(--sp-2)}
.entry-content table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.entry-content th,.entry-content td{border:1px solid var(--color-border);padding:.6rem .8rem;text-align:left}
.entry-content th{background:var(--color-bg-alt);font-family:var(--font-display)}
.entry-content hr{border:0;border-top:1px solid var(--color-border)}

/* tags + footer of entry */
.entry-tags{max-width:44rem;margin:var(--sp-8) auto 0;display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.tag-pill{font-family:var(--font-mono);font-size:var(--text-xs);padding:.3rem .7rem;border-radius:var(--radius-pill);
  border:1px solid var(--color-border);color:var(--color-fg-muted);transition:border-color var(--dur-fast),color var(--dur-fast)}
.tag-pill:hover{border-color:var(--color-accent);color:var(--color-accent)}

/* author box */
.author-box{max-width:44rem;margin:var(--sp-12) auto 0;display:flex;gap:var(--sp-4);
  background:var(--white);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--sp-6);box-shadow:var(--shadow-card)}
.author-box img{border-radius:50%;flex:none}
.author-box h3{font-size:var(--text-lg)}
.author-box p{font-size:var(--text-sm);color:var(--color-fg-muted);margin-top:var(--sp-1)}

/* post navigation */
.post-nav{max-width:44rem;margin:var(--sp-12) auto 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.post-nav a{display:block;padding:var(--sp-4) var(--sp-6);border:1px solid var(--color-border);
  border-radius:var(--radius-md);background:var(--white);transition:border-color var(--dur-med),transform var(--dur-med)}
.post-nav a:hover{border-color:var(--color-accent);transform:translateY(-2px)}
.post-nav .dir{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-soft)}
.post-nav .ttl{font-family:var(--font-display);font-weight:600;font-size:var(--text-base);margin-top:var(--sp-1)}
.post-nav .next{text-align:right}

/* ---- Sidebar ---- */
.sidebar{display:grid;gap:var(--sp-6);position:sticky;top:5.5rem}
.widget{background:var(--white);border:1px solid var(--color-border);border-radius:var(--radius-lg);
  padding:var(--sp-6);box-shadow:var(--shadow-card)}
.widget-title{font-family:var(--font-display);font-size:var(--text-lg);margin-bottom:var(--sp-4)}
.widget ul{display:grid;gap:var(--sp-1)}
.widget li{border-bottom:1px solid var(--gray-100)}
.widget li:last-child{border-bottom:0}
.widget li a{display:flex;justify-content:space-between;gap:var(--sp-2);padding:.55rem 0;
  color:var(--color-fg-muted);font-size:var(--text-sm);transition:color var(--dur-fast)}
.widget li a:hover{color:var(--color-accent)}
.widget-cta{background:var(--grad-ink);color:var(--color-fg-invert);border-color:transparent;overflow:hidden;position:relative}
.widget-cta::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(122,90,248,.25) 1px,transparent 1px);background-size:20px 20px;
  mask-image:radial-gradient(ellipse 80% 80% at 100% 0%,#000,transparent 70%)}
.widget-cta *{position:relative}
.widget-cta .widget-title{color:#fff}
.widget-cta p{font-size:var(--text-sm);color:var(--color-fg-invert-muted);margin-bottom:var(--sp-4)}
.widget-cta .btn{width:100%}

/* search form */
.search-form{display:flex;gap:var(--sp-2)}
.search-form input[type=search]{flex:1;min-height:2.7rem;padding:.55rem .8rem;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-md);font:inherit;background:var(--white)}
.search-form input[type=search]:focus{outline:none;border-color:var(--violet-500);box-shadow:0 0 0 3px rgba(122,90,248,.18)}
.search-form button{flex:none;display:grid;place-items:center;width:2.7rem;height:2.7rem;
  border-radius:var(--radius-md);background:var(--grad-violet);color:#fff}
.search-form button svg{width:1.1rem;height:1.1rem}

/* ---- Pagination ---- */
.pagination{margin-top:var(--sp-12);display:flex;justify-content:center}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.pagination .page-numbers{display:inline-grid;place-items:center;min-width:2.6rem;height:2.6rem;padding:0 .6rem;
  border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--white);
  font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-fg-muted);
  transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.pagination .page-numbers:hover{border-color:var(--color-accent);color:var(--color-accent)}
.pagination .page-numbers.current{background:var(--grad-violet);color:#fff;border-color:transparent}
.pagination .dots{border:0;background:none}

/* ---- Comments ---- */
.comments-area{max-width:44rem;margin:var(--sp-16) auto 0}
.comments-title,.comment-reply-title{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--sp-6)}
.comment-list{display:grid;gap:var(--sp-6)}
.comment-list ol{list-style:none;margin-top:var(--sp-6);padding-left:var(--sp-8);display:grid;gap:var(--sp-6)}
.comment-body{background:var(--white);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--sp-6)}
.comment-author{display:flex;align-items:center;gap:var(--sp-3);font-family:var(--font-display);font-weight:600}
.comment-author img{border-radius:50%}
.comment-metadata{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-fg-soft);margin:var(--sp-2) 0}
.comment-content{font-size:var(--text-sm);color:var(--color-fg-muted)}
.comment-content p{margin-block:var(--sp-2)}
.reply a{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-accent)}
.comment-respond{margin-top:var(--sp-8);background:var(--white);border:1px solid var(--color-border);
  border-radius:var(--radius-lg);padding:var(--sp-6)}
.comment-form{display:grid;gap:var(--sp-4)}
.comment-form label{display:block;font-weight:600;font-size:var(--text-sm);margin-bottom:var(--sp-2)}
.comment-form input:not([type=submit]),.comment-form textarea{width:100%;padding:.6rem .8rem;
  border:1px solid var(--color-border-strong);border-radius:var(--radius-md);font:inherit;background:var(--white)}
.comment-form input:focus,.comment-form textarea:focus{outline:none;border-color:var(--violet-500);box-shadow:0 0 0 3px rgba(122,90,248,.18)}
.comment-form .form-submit input{display:inline-flex;align-items:center;min-height:2.9rem;padding:.7rem 1.4rem;
  border-radius:var(--radius-pill);background:var(--grad-violet);color:#fff;font-family:var(--font-display);font-weight:600;cursor:pointer}

/* ---- 404 / none ---- */
.state-panel{max-width:40rem;margin-inline:auto;text-align:center;padding-block:var(--sp-16)}
.state-panel .big{font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,10vw,7rem);
  background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.state-panel h1{font-size:var(--text-2xl);margin:var(--sp-4) 0}
.state-panel p{color:var(--color-fg-muted);margin-bottom:var(--sp-8)}
.state-panel .search-form{max-width:26rem;margin-inline:auto}

/* ---- Responsive ---- */
@media (max-width:900px){
  .content-sidebar{grid-template-columns:1fr}
  .sidebar{position:static;order:2}
  .post-nav{grid-template-columns:1fr}
  .post-nav .next{text-align:left}
}