/* Makrolife Biotech — Blog templates
   Brand-matched styling for post listing + single article.
   Relies on tokens from style.css (:root), with safe fallbacks. */

.ml-blog{
  --b-accent: var(--accent, #18b89a);
  --b-accent-50: var(--accent-50, #e6f8f3);
  --b-primary: var(--primary, #0b5d6b);
  --b-ink: var(--ink, #0f1b2d);
  --b-ink2: var(--ink-2, #46556b);
  --b-line: var(--line, #e4e9f0);
  color: var(--b-ink);
}

/* ---------- Blog hero ---------- */
.ml-blog-hero{
  background: linear-gradient(135deg, var(--b-accent-50) 0%, #ffffff 70%);
  border-bottom: 1px solid var(--b-line);
  padding: 64px 0 48px;
}
.ml-blog-hero .eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--b-accent); margin-bottom:12px;
}
.ml-blog-hero h1{
  font-size: clamp(2rem, 4vw, 2.9rem); line-height:1.1; margin:0 0 12px; color:var(--b-ink);
}
.ml-blog-hero p{ font-size:1.08rem; color:var(--b-ink2); max-width:640px; margin:0; }

/* ---------- Post grid ---------- */
.ml-blog-wrap{ padding: 56px 0 72px; }
.ml-post-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.ml-post-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid var(--b-line); border-radius:16px; overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ml-post-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(11,93,107,.12);
  border-color: rgba(24,184,154,.35);
}
.ml-post-thumb{ display:block; aspect-ratio: 16/9; overflow:hidden; background:var(--b-accent-50); }
.ml-post-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease; }
.ml-post-card:hover .ml-post-thumb img{ transform:scale(1.04); }
.ml-post-thumb--empty{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--b-accent-50), #fff);
}
.ml-post-thumb--empty svg{ width:52px; height:52px; color:var(--b-accent); opacity:.6; }
.ml-post-body{ padding: 22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.ml-post-cat{
  align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--b-primary); background:var(--b-accent-50);
  padding:5px 10px; border-radius:999px; margin-bottom:12px;
}
.ml-post-body h2{ font-size:1.22rem; line-height:1.3; margin:0 0 10px; }
.ml-post-body h2 a{ color:var(--b-ink); text-decoration:none; }
.ml-post-body h2 a:hover{ color:var(--b-primary); }
.ml-post-excerpt{ color:var(--b-ink2); font-size:.96rem; line-height:1.6; margin:0 0 18px; flex:1; }
.ml-post-meta{
  display:flex; align-items:center; gap:10px; font-size:.82rem; color:var(--b-ink2);
  border-top:1px solid var(--b-line); padding-top:14px;
}
.ml-post-meta .dot{ width:3px;height:3px;border-radius:50%;background:var(--b-ink2);opacity:.5; }
.ml-post-more{ margin-left:auto; font-weight:600; color:var(--b-accent); text-decoration:none; }
.ml-post-more:hover{ text-decoration:underline; }

/* ---------- Pagination ---------- */
.ml-pagination{ margin-top:48px; display:flex; justify-content:center; }
.ml-pagination .nav-links{ display:flex; gap:8px; flex-wrap:wrap; }
.ml-pagination .page-numbers{
  min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 14px; border:1px solid var(--b-line); border-radius:10px;
  color:var(--b-ink); text-decoration:none; font-weight:600; background:#fff;
}
.ml-pagination .page-numbers:hover{ border-color:var(--b-accent); color:var(--b-primary); }
.ml-pagination .page-numbers.current{ background:var(--b-accent); border-color:var(--b-accent); color:#fff; }
.ml-pagination .page-numbers.dots{ border:none; background:none; }

/* ---------- Single article ---------- */
.ml-article-head{
  background: linear-gradient(135deg, var(--b-accent-50) 0%, #ffffff 70%);
  border-bottom:1px solid var(--b-line); padding:52px 0 40px;
}
.ml-crumbs{ font-size:.85rem; color:var(--b-ink2); margin-bottom:18px; }
.ml-crumbs a{ color:var(--b-ink2); text-decoration:none; }
.ml-crumbs a:hover{ color:var(--b-primary); }
.ml-crumbs .sep{ margin:0 8px; opacity:.5; }
.ml-article-head h1{
  font-size: clamp(1.9rem, 3.6vw, 2.7rem); line-height:1.15; margin:0 0 16px;
  max-width:820px; color:var(--b-ink);
}
.ml-article-meta{ display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--b-ink2); }
.ml-article-meta .ml-post-cat{ margin:0; }
.ml-article-meta .dot{ width:3px;height:3px;border-radius:50%;background:var(--b-ink2);opacity:.5; }

.ml-article-body{ padding: 48px 0 64px; }
.ml-article-inner{ max-width: 760px; margin:0 auto; }
.ml-article-hero{ margin: 0 auto 36px; max-width:900px; }
.ml-article-hero img{ width:100%; border-radius:16px; display:block; }

.ml-article-inner p{ font-size:1.06rem; line-height:1.75; color:#26313f; margin:0 0 20px; }
.ml-article-inner h2{ font-size:1.6rem; line-height:1.25; margin:38px 0 14px; color:var(--b-ink); }
.ml-article-inner h3{ font-size:1.28rem; line-height:1.3; margin:30px 0 12px; color:var(--b-ink); }
.ml-article-inner ul, .ml-article-inner ol{ font-size:1.06rem; line-height:1.75; color:#26313f; margin:0 0 20px; padding-left:24px; }
.ml-article-inner li{ margin:6px 0; }
.ml-article-inner a{ color:var(--b-primary); text-decoration:underline; text-underline-offset:2px; }
.ml-article-inner img{ max-width:100%; height:auto; border-radius:12px; margin:12px 0; }
.ml-article-inner blockquote{
  border-left:4px solid var(--b-accent); background:var(--b-accent-50);
  margin:24px 0; padding:16px 22px; border-radius:0 12px 12px 0; color:var(--b-ink);
}
.ml-article-inner blockquote p{ margin:0; font-style:italic; }
.ml-article-inner figure{ margin:24px 0; }
.ml-article-inner figcaption{ font-size:.85rem; color:var(--b-ink2); text-align:center; margin-top:8px; }
.ml-article-inner code{ background:#f2f5f8; padding:2px 6px; border-radius:6px; font-size:.92em; }
.ml-article-inner pre{ background:#0f1b2d; color:#e6f8f3; padding:18px 20px; border-radius:12px; overflow-x:auto; }
.ml-article-inner pre code{ background:none; padding:0; color:inherit; }

.ml-article-foot{
  max-width:760px; margin:44px auto 0; padding-top:28px; border-top:1px solid var(--b-line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.ml-back-blog{
  display:inline-flex; align-items:center; gap:8px; font-weight:600;
  color:var(--b-primary); text-decoration:none;
}
.ml-back-blog:hover{ color:var(--b-accent); }
.ml-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.ml-tags a{
  font-size:.8rem; color:var(--b-ink2); background:#f2f5f8; padding:5px 11px;
  border-radius:999px; text-decoration:none;
}
.ml-tags a:hover{ background:var(--b-accent-50); color:var(--b-primary); }

/* ---------- Related posts ---------- */
.ml-related{ background:#f7f9fb; border-top:1px solid var(--b-line); padding:56px 0 64px; }
.ml-related h2{ font-size:1.5rem; margin:0 0 28px; color:var(--b-ink); }

/* ---------- Empty state ---------- */
.ml-blog-empty{ text-align:center; padding:60px 0; color:var(--b-ink2); }
.ml-blog-empty h2{ color:var(--b-ink); margin-bottom:10px; }

@media (max-width: 600px){
  .ml-blog-hero{ padding:48px 0 36px; }
  .ml-blog-wrap{ padding:40px 0 56px; }
  .ml-post-grid{ grid-template-columns:1fr; gap:22px; }
  .ml-article-body{ padding:36px 0 48px; }
}