/* ==========================================================================
   Blog page styles - page-blog.php (index), single.php (article),
   parts/blog-sidebar.php (sidebar).

   Scope: .blog-* only. Shared components (.v-*) live in main.css and are
   composed in markup, never redefined here. Token variables only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout: main column + sticky sidebar
   -------------------------------------------------------------------------- */
.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start}
.blog-main{min-width:0}

/* section padding tweaks (top only; vertical rhythm comes from .v-section) */
.blog-index{padding-top:72px}
.blog-hero{padding-bottom:64px}
.blog-hero-perf{margin:64px 0 0}

/* --------------------------------------------------------------------------
   Meta row (date / category / reading time) - ticket metadata
   -------------------------------------------------------------------------- */
.blog-meta-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.blog-meta-row .blog-cat{color:var(--violet-d)}
.blog-dot{width:4px;height:4px;border-radius:50%;background:var(--faint);flex:0 0 auto}

/* --------------------------------------------------------------------------
   Branded cover fallback (post has no usable thumbnail):
   violet gradient + v-mark + mono label
   -------------------------------------------------------------------------- */
.blog-cover-fb{position:absolute;inset:0;display:flex;align-items:flex-end;
  padding:20px;overflow:hidden;background:var(--grad)}
.blog-cover-fb::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(360px 220px at 88% -12%,rgba(255,255,255,.3),transparent 62%),
    radial-gradient(300px 260px at -10% 110%,rgba(20,16,60,.28),transparent 60%)}
.blog-cover-fb-v{position:absolute;right:-12px;bottom:-34px;pointer-events:none;
  font-family:var(--display);font-weight:700;font-size:190px;line-height:.78;
  letter-spacing:-.05em;color:rgba(255,255,255,.16)}
.blog-cover-fb-meta{position:relative;display:flex;align-items:center;gap:10px}
.blog-cover-fb-meta .v-mono{color:rgba(255,255,255,.94)}

/* --------------------------------------------------------------------------
   Featured latest post (index, page 1)
   -------------------------------------------------------------------------- */
.blog-feature{display:grid;grid-template-columns:1fr;margin-bottom:32px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s}
.blog-feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
/* covers are branded 16:10 graphics with baked-in titles - keep the natural
   aspect so object-fit:cover never crops the lettering (split columns did) */
.blog-feature-cover{position:relative;display:block;aspect-ratio:16/10;min-height:0;overflow:hidden;background:var(--paper-soft)}
.blog-feature-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.blog-feature:hover .blog-feature-cover img{transform:scale(1.035)}
.blog-feature-cover .blog-cover-fb{padding:28px}
.blog-feature-cover .blog-cover-fb-v{right:-16px;bottom:-52px;font-size:300px}
.blog-feature-body{display:flex;flex-direction:column;align-items:flex-start;padding:46px 48px}
.blog-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--violet-d)}
.blog-kicker svg{width:14px;height:14px}
.blog-feature-body h2{margin:0 0 16px;font-size:clamp(25px,2.6vw,34px);
  letter-spacing:-.025em;line-height:1.14;text-wrap:balance}
.blog-feature-body h2 a{color:var(--ink);transition:color .15s}
.blog-feature-body h2 a:hover{color:var(--violet-d)}
.blog-feature-body .blog-meta-row{margin-bottom:16px}
.blog-feature-excerpt{margin:0 0 24px;font-size:16.5px;line-height:1.66;color:var(--text)}
.blog-feature-body .v-link{margin-top:auto}

/* --------------------------------------------------------------------------
   Post grid + cards
   -------------------------------------------------------------------------- */
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.blog-card{display:flex;flex-direction:column;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-2)}
.blog-card-cover{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-soft)}
.blog-card-cover img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.blog-card:hover .blog-card-cover img{transform:scale(1.045)}
.blog-card-body{display:flex;flex-direction:column;align-items:flex-start;flex:1;
  padding:22px 24px 24px}
.blog-card-body .blog-meta-row{margin-bottom:12px}
.blog-card-body h3{margin:0 0 10px;font-size:19.5px;letter-spacing:-.018em;line-height:1.32}
.blog-card-body h3 a{color:var(--ink);transition:color .15s}
.blog-card-body h3 a:hover{color:var(--violet-d)}
.blog-card-body p{margin:0 0 18px;font-size:15px;line-height:1.62;color:var(--text)}
.blog-card-body .v-link{margin-top:auto}

/* --------------------------------------------------------------------------
   Pagination (?pg=N links rendered by paginate_links, type list)
   -------------------------------------------------------------------------- */
.blog-pagination{margin-top:64px}
/* paginate_links(type=list) puts .page-numbers on the UL itself AND on every
   item - item styles must target li only, or the list becomes a boxed bar */
.blog-pagination ul.page-numbers{display:flex;justify-content:center;align-items:center;gap:6px;
  flex-wrap:wrap;margin:0;padding:0;list-style:none}
.blog-pagination li .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:42px;height:42px;padding:0 12px;border:0;border-radius:999px;background:transparent;
  font-family:var(--mono);font-weight:500;font-size:13px;letter-spacing:.04em;color:var(--muted);
  transition:background .16s,color .16s,transform .16s,box-shadow .16s}
.blog-pagination li a.page-numbers:hover{background:var(--violet-tint);color:var(--violet-d)}
.blog-pagination li .page-numbers.current{background:var(--violet);color:#fff;
  box-shadow:0 10px 22px -10px rgba(124,92,255,.55)}
.blog-pagination li .page-numbers.dots{color:var(--faint)}
.blog-pagination li .page-numbers.prev,.blog-pagination li .page-numbers.next{
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink);padding:0 18px}
.blog-pagination li a.page-numbers.prev:hover,.blog-pagination li a.page-numbers.next:hover{
  border-color:var(--violet);background:var(--paper);color:var(--violet-d);
  transform:translateY(-1px);box-shadow:var(--shadow-sm)}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */
.blog-empty{padding:88px 28px;text-align:center;background:var(--paper-soft);
  border:1px dashed var(--line-2);border-radius:var(--r-lg)}
.blog-empty h3{margin:0 0 8px;font-size:24px;letter-spacing:-.02em}
.blog-empty p{margin:0;color:var(--muted)}

/* --------------------------------------------------------------------------
   Sidebar: search, latest posts, promo
   -------------------------------------------------------------------------- */
.blog-side{position:sticky;top:calc(var(--header-h) + 28px);display:grid;gap:22px}
.blog-side-card{background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow-sm)}
.blog-side-title{margin:0 0 16px;color:var(--muted)}

.blog-search{display:flex;gap:8px}
.blog-search input{flex:1;min-width:0;font:inherit;font-size:14.5px;color:var(--ink);
  background:var(--paper-soft);border:1px solid var(--line-2);border-radius:11px;
  padding:12px 14px;transition:border-color .15s,box-shadow .15s,background .15s}
.blog-search input::placeholder{color:var(--faint)}
.blog-search input:focus{outline:none;border-color:var(--violet);background:var(--paper);
  box-shadow:0 0 0 4px rgba(124,92,255,.14)}
.blog-search button{flex:0 0 auto;width:47px;border:0;border-radius:11px;cursor:pointer;
  display:grid;place-items:center;background:var(--violet);color:var(--paper);
  box-shadow:0 10px 20px -10px rgba(124,92,255,.6);transition:background .15s,transform .15s}
.blog-search button:hover{background:var(--violet-d);transform:translateY(-1px)}
.blog-search button svg{width:18px;height:18px}

.blog-side-posts{margin:0;padding:0;list-style:none}
.blog-side-posts li+li{border-top:1px solid var(--line)}
.blog-side-posts a{display:block;padding:13px 2px;transition:transform .15s}
.blog-side-posts a:hover{transform:translateX(2px)}
.blog-side-posts strong{display:block;font-family:var(--display);font-weight:600;
  font-size:15px;letter-spacing:-.01em;line-height:1.42;color:var(--ink);transition:color .15s}
.blog-side-posts a:hover strong{color:var(--violet-d)}
.blog-side-posts em{display:block;margin-top:5px;font-style:normal;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* promo - night card with aurora glow + perforation top edge */
.blog-side-promo{position:relative;overflow:hidden;isolation:isolate;
  background:var(--ink-900);border:1px solid var(--d-line);
  border-radius:var(--r-lg);padding:28px;color:var(--d-text)}
.blog-side-promo::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(300px 200px at 50% -30%,rgba(124,92,255,.34),transparent 62%)}
.blog-side-promo::after{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.22) 0 7px,transparent 7px 15px);
  background-size:15px 2px;background-repeat:repeat-x;opacity:.5}
.blog-side-promo .v-mark{margin-bottom:18px}
.blog-side-promo h4{margin:0 0 8px;color:var(--paper);font-size:20px;letter-spacing:-.02em}
.blog-side-promo p{margin:0 0 22px;font-size:14.5px;line-height:1.66;color:var(--d-text)}
.blog-side-promo p strong{color:var(--paper)}
.blog-side-promo .v-btn{width:100%}

/* --------------------------------------------------------------------------
   Single post - premium reading experience
   -------------------------------------------------------------------------- */
.blog-single{padding:calc(var(--header-h) + 64px) 0 96px}
.blog-article{max-width:720px;margin:0 auto}
.blog-article-head{margin-bottom:44px;text-align:center}
.blog-article-head .blog-meta-row{justify-content:center;margin-bottom:22px}
.blog-title{margin:0;text-wrap:balance}
.blog-figure{margin:0 0 52px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.blog-figure img{display:block;width:100%;height:auto}

/* user-authored content (the_content) */
.blog-content{font-size:18px;line-height:1.8;color:var(--text)}
.blog-content>*:first-child{margin-top:0}
.blog-content p{margin:0 0 1.5em}
.blog-content h2{margin:2.1em 0 .7em;font-size:clamp(26px,3vw,33px);
  letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.blog-content h3{margin:1.9em 0 .6em;font-size:24px;letter-spacing:-.02em;
  line-height:1.25;color:var(--ink)}
.blog-content h4{margin:1.7em 0 .5em;font-size:19px;letter-spacing:-.01em;color:var(--ink)}
.blog-content a{color:var(--violet);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(124,92,255,.45);
  transition:color .15s,text-decoration-color .15s}
.blog-content a:hover{color:var(--violet-d);text-decoration-color:var(--violet-d)}
.blog-content strong{color:var(--ink)}
.blog-content ul,.blog-content ol{padding-left:1.35em;margin:0 0 1.5em}
.blog-content li{margin-bottom:.5em}
.blog-content li::marker{color:var(--violet)}
.blog-content blockquote{margin:2em 0;padding:26px 30px;background:var(--paper-tint);
  border-left:3px solid var(--violet);border-radius:0 var(--r) var(--r) 0;
  color:var(--ink);font-size:1.04em}
.blog-content blockquote p{margin:0 0 .8em}
.blog-content blockquote p:last-child{margin-bottom:0}
.blog-content code{font-family:var(--mono);font-size:.84em;background:var(--violet-tint);
  color:var(--violet-dd);padding:3px 7px;border-radius:6px}
.blog-content pre{margin:1.8em 0;padding:22px 24px;background:var(--ink-900);
  color:var(--d-text);border-radius:var(--r);overflow-x:auto;font-size:14px;line-height:1.7}
.blog-content pre code{background:none;color:inherit;padding:0;font-size:inherit}
.blog-content img{max-width:100%;height:auto;margin:.6em auto;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.blog-content figure{margin:1.8em 0}
.blog-content figcaption{margin-top:12px;text-align:center;font-size:13.5px;color:var(--faint)}
.blog-content hr{position:relative;height:22px;margin:2.6em 0;border:0;background:none}
.blog-content hr::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  transform:translateY(-50%);
  background-image:linear-gradient(90deg,var(--line-2) 0 7px,transparent 7px 15px);
  background-size:15px 2px;background-repeat:repeat-x}
.blog-content table{width:100%;border-collapse:collapse;margin:1.8em 0;font-size:15.5px}
.blog-content th,.blog-content td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.blog-content thead th{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);border-bottom-color:var(--line-2)}

/* prev / next footer */
.blog-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:72px}
.blog-nav-card{display:block;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:22px 24px;box-shadow:var(--shadow-sm);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s}
.blog-nav-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--violet)}
.blog-nav-card .v-mono{display:block;margin-bottom:10px;color:var(--faint)}
.blog-nav-card strong{display:block;font-family:var(--display);font-weight:600;
  font-size:16.5px;letter-spacing:-.015em;line-height:1.42;color:var(--ink)}
.blog-nav-card.next{text-align:right}
.blog-nav-slot{display:block}
.blog-back{margin:36px 0 0;text-align:center}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:1024px){
  .blog-layout{grid-template-columns:1fr;gap:56px}
  .blog-side{position:static;max-width:640px}
  .blog-feature-body{padding:38px 36px}
}
@media(max-width:768px){
  .blog-index{padding-top:56px}
  .blog-hero{padding-bottom:48px}
  .blog-hero-perf{margin-top:48px}
  .blog-feature-cover .blog-cover-fb-v{bottom:-38px;font-size:220px}
  .blog-feature-body{padding:30px 26px}
  .blog-single{padding:calc(var(--header-h) + 48px) 0 72px}
  .blog-figure{margin-bottom:40px}
  .blog-content{font-size:17px}
}
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .blog-nav{grid-template-columns:1fr}
  .blog-nav-card.next{text-align:left}
  .blog-pagination{margin-top:48px}
}
@media(max-width:520px){
  .blog-feature-body{padding:24px 20px}
  .blog-card-body{padding:18px 18px 20px}
  .blog-card-body h3{font-size:18px}
  .blog-side-card{padding:20px}
  .blog-side-promo{padding:22px 20px}
  .blog-content{font-size:16px}
  .blog-empty{padding:56px 20px}
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .blog-card-cover img,.blog-feature-cover img{transition:none}
  .blog-card:hover,.blog-feature:hover,.blog-nav-card:hover{transform:none}
}