/* ============================================================
   BLOG — index (cards) + article pages
   Framework free. Inherits the Quanteec design tokens.
   ============================================================ */

/* ---------- Shared hero ---------- */
.blog-hero{max-width:760px;margin-bottom:clamp(36px,5vw,60px);}
.blog-hero .marker{margin-bottom:16px;}
.blog-hero h1{margin:0;}
.blog-hero .lead{margin-top:18px;}

/* ============================================================
   INDEX GRID
   ============================================================ */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.4vw,32px);
}

.blog-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  text-decoration:none;
  color:inherit;
  transition:box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.blog-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
  border-color:var(--border-accent);
}
.blog-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring);}

.blog-card__media{
  position:relative;
  aspect-ratio:16/9;
  background:var(--surface-2);
  overflow:hidden;
}
.blog-card__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform var(--dur-slow) var(--ease);
}
.blog-card:hover .blog-card__media img{transform:scale(1.04);}

.blog-card__body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:clamp(18px,1.8vw,24px);
  flex:1;
}

.blog-card__meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:var(--text-xs);
  color:var(--fg-muted);
}
.blog-card__cat{
  display:inline-flex;
  align-items:center;
  font-weight:600;
  font-size:var(--text-eyebrow);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--blue-700);
  background:var(--signal-bg);
  border:1px solid var(--border-accent);
  border-radius:var(--r-pill);
  padding:3px 10px;
}
.blog-card__meta time,
.blog-article__rt{color:var(--fg-2);}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .blog-card__cat{color:#8bdfff;}
}
[data-theme="dark"] .blog-card__cat{color:#8bdfff;}
.blog-card__meta time{font-variant-numeric:tabular-nums;}

.blog-card__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(1.1rem,1rem+.45vw,1.32rem);
  line-height:1.22;
  color:var(--fg-strong);
  margin:0;
}
.blog-card__excerpt{
  font-size:var(--text-sm);
  color:var(--fg-2);
  line-height:1.55;
  margin:0;
}
.blog-card__more{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--accent);
  padding-top:6px;
}
.blog-card__more svg{width:16px;height:16px;transition:transform var(--dur) var(--ease);}
.blog-card:hover .blog-card__more svg{transform:translateX(4px);}

@media (max-width:900px){.blog-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.blog-grid{grid-template-columns:1fr;}}

/* ============================================================
   ARTICLE PAGE
   ============================================================ */
.blog-article__wrap{max-width:780px;}

.blog-article__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--fg-2);
  text-decoration:none;
  margin-bottom:clamp(24px,3vw,36px);
  transition:color var(--dur) var(--ease);
}
.blog-article__back:hover{color:var(--accent);}
.blog-article__back svg{width:18px;height:18px;}

.blog-article__head{margin-bottom:clamp(24px,3vw,36px);}
.blog-article__head .blog-card__meta{margin-bottom:16px;}
.blog-article__rt{color:var(--fg-2);}
.blog-article__title{margin:0;font-size:clamp(1.9rem,1.3rem+2.4vw,3rem);line-height:1.08;}

.blog-article__hero{
  border-radius:var(--r-lg);
  overflow:hidden;
  margin-bottom:clamp(28px,3.4vw,44px);
  border:1px solid var(--border);
  background:var(--surface-2);
}
.blog-article__hero img{width:100%;height:auto;display:block;}

/* ---------- Body typography (WordPress content, cleaned) ---------- */
.blog-article__body{
  font-size:var(--text-lg);
  line-height:1.75;
  color:var(--fg);
}
.blog-article__body > *{margin-bottom:1.15em;}
.blog-article__body > *:last-child{margin-bottom:0;}

.blog-article__body h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.5rem,1.2rem+1vw,2rem);line-height:1.2;
  color:var(--fg-strong);
  margin-top:1.8em;margin-bottom:.6em;
}
.blog-article__body h3{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.25rem,1.1rem+.6vw,1.6rem);line-height:1.25;
  color:var(--fg-strong);
  margin-top:1.6em;margin-bottom:.5em;
}
.blog-article__body h4,
.blog-article__body h5,
.blog-article__body h6{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.1rem,1rem+.4vw,1.3rem);
  color:var(--fg-strong);
  margin-top:1.4em;margin-bottom:.4em;
}

.blog-article__body p{margin:0 0 1.15em;}
.blog-article__body a{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.blog-article__body a:hover{color:var(--accent-hover);}

.blog-article__body .stk-table-of-contents__table a{
  display:flex;
  align-items:center;
  min-height:44px;
}

.blog-article__body strong{color:var(--fg-strong);font-weight:700;}

.blog-article__body ul,
.blog-article__body ol{margin:0 0 1.15em;padding-left:1.4em;}
.blog-article__body li{margin-bottom:.5em;}
.blog-article__body li::marker{color:var(--accent);}

.blog-article__body img{
  max-width:100%;height:auto;display:block;
  border-radius:var(--r-md);
}
.blog-article__body figure{margin:1.6em 0;}
.blog-article__body figure img{margin-inline:auto;}
.blog-article__body figcaption{
  margin-top:10px;
  font-size:var(--text-sm);
  color:var(--fg-2);
  text-align:center;
}

.blog-article__body blockquote{
  margin:1.6em 0;
  padding:16px 18px;
  border:1px solid var(--border-accent);
  border-radius:var(--r-md);
  background:var(--signal-bg);
  color:var(--fg-2);
  font-size:1.05em;
  font-style:italic;
}
.blog-article__body blockquote cite{display:block;margin-top:8px;font-size:var(--text-sm);color:var(--fg-2);font-style:normal;}

.blog-article__body iframe{
  width:100%;
  aspect-ratio:16/9;
  height:auto;
  border:0;
  border-radius:var(--r-md);
}

.blog-article__body table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-sm);
  margin:1.6em 0;
}
.blog-article__body th,
.blog-article__body td{
  border:1px solid var(--border);
  padding:10px 12px;
  text-align:left;
  vertical-align:top;
}
.blog-article__body th{background:var(--surface-2);font-weight:600;color:var(--fg-strong);}

/* Tame stray inline alignment from WP */
.blog-article__body .aligncenter{margin-inline:auto;}
.blog-article__body .alignright{margin-left:auto;}

/* ---------- Prev / next pager ---------- */
.blog-pager{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--border);
}
.blog-pager__link{
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  text-decoration:none;
  color:inherit;
  background:var(--surface);
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.blog-pager__link:hover{border-color:var(--border-accent);box-shadow:var(--shadow-sm);transform:translateY(-2px);}
.blog-pager__older{text-align:right;align-items:flex-end;}
.blog-pager__link span{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:600;}
.blog-pager__link strong{font-family:var(--font-display);font-weight:600;font-size:var(--text-sm);color:var(--fg-strong);line-height:1.3;}

@media (max-width:560px){
  .blog-pager{grid-template-columns:1fr;}
  .blog-pager__older{text-align:left;align-items:flex-start;}
}