/* ==========================================================================
   MacSeeds — Page Blog
   ========================================================================== */

.macseeds-blog{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--ms-ink, #17181A);
  position: relative;
}
.macseeds-blog h1,
.macseeds-blog h2{
  font-family: "Bricolage Grotesque", -apple-system, sans-serif;
}

.ms-mesh{
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 12% 18%, rgba(27,107,123,0.14), transparent 38%),
    radial-gradient(circle at 85% 10%, rgba(224,92,58,0.12), transparent 42%),
    radial-gradient(circle at 70% 80%, rgba(107,63,160,0.12), transparent 40%),
    var(--ms-bg, #FAFAF9);
  filter: blur(40px) saturate(115%);
}

.ms-blog-wrap{ max-width: 820px; margin: 0 auto; padding: 48px 28px 100px; }

.ms-blog-header{ margin: 0 auto 40px; max-width: 620px; text-align:center; }
.ms-blog-header h1{ font-size: 38px; font-weight:700; letter-spacing:-0.02em; margin:0 0 10px; }
.ms-blog-header p{ color: var(--ms-ink-soft, #55585E); font-size:16px; margin:0; line-height:1.5; }

.ms-blog-list{ display:flex; flex-direction:column; gap:22px; }

.ms-post-row{
  display:flex; align-items:stretch; gap:0;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 28px; overflow:hidden;
  text-decoration:none; color:inherit;
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
  min-height: 210px;
}
.ms-post-row:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px rgba(0,0,0,0.11); }

.ms-post-row-thumb{
  flex:none; width: 220px;
  background:#C7C7CC;
}
.ms-post-row-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.ms-post-row-body{
  flex:1; min-width:0;
  padding: 28px 32px;
  display:flex; flex-direction:column; justify-content:center; gap:12px;
}
.ms-post-row-body h2,
.ms-post-row .ms-post-row-body h2{
  font-size:24px; font-weight:700; margin:0; letter-spacing:-0.01em; line-height:1.25;
  color:#1D1D1F !important;
  transition: color .2s ease;
}
.ms-post-row:hover .ms-post-row-body h2{ color:#007AFF !important; }
.ms-post-row-body p{
  font-size:15px; color: var(--ms-ink-soft, #55585E); line-height:1.5; margin:0;
}

.ms-post-row-meta{ display:flex; align-items:center; gap:12px; margin-top:2px; }
.ms-post-row-date{
  font-family: "Bricolage Grotesque", sans-serif;
  font-size:15px; font-weight:700; color: var(--ms-ink, #17181A);
}
.ms-post-row-cat{
  font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em;
  color:#0A6CD9; background: rgba(10,132,255,0.12);
  border-radius:6px; padding:5px 10px;
}

@media (max-width: 640px){
  .ms-post-row{ min-height:0; }
  .ms-post-row-thumb{ width:120px; }
  .ms-post-row-body{ padding:16px 18px; gap:6px; }
  .ms-post-row-body h2{ font-size:16px; line-height:1.3; }
  .ms-post-row-body p{ display:none; } /* trop peu de place pour l'extrait en mobile, on garde titre + méta */
  .ms-post-row-date{ font-size:13px; }
  .ms-post-row-cat{ font-size:10.5px; padding:4px 8px; }
}

.ms-blog-empty{ color: var(--ms-ink-soft, #55585E); font-size:15px; }

html[data-theme="dark"] .ms-post-row{
  background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.09);
}
html[data-theme="dark"] .ms-post-row-body h2{ color:#F2F2F3 !important; }
html[data-theme="dark"] .ms-post-row:hover .ms-post-row-body h2{ color:#0A84FF !important; }
html[data-theme="dark"] .ms-post-row-body p{ color:#9A9CA2; }
html[data-theme="dark"] .ms-post-row-date{ color:#F2F2F3; }

/* pagination */
.ms-blog-pagination{
  display:flex; gap:8px; justify-content:center; margin-top: 48px; flex-wrap:wrap;
}
.ms-blog-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border-radius: 100px; text-decoration:none;
  font-size:14px; font-weight:600; color: var(--ms-ink-soft, #55585E);
  background: rgba(0,0,0,0.045);
}
.ms-blog-pagination .page-numbers.current{
  background: var(--ms-ink, #17181A); color:#fff;
}
.ms-blog-pagination .page-numbers:hover:not(.current){ background: rgba(0,0,0,0.08); }

html[data-theme="dark"] .ms-blog-pagination .page-numbers{
  background: rgba(255,255,255,0.08); color:#9A9CA2;
}
html[data-theme="dark"] .ms-blog-pagination .page-numbers.current{
  background:#F2F2F3; color:#121214;
}
html[data-theme="dark"] .ms-blog-pagination .page-numbers:hover:not(.current){
  background: rgba(255,255,255,0.14);
}