/* ============================================================
   Marvel Aircond — Blog CSS
   Loaded on /blog/, /ms/blog/, /blog/<slug>/, /ms/blog/<slug>/.
   ============================================================ */

/* ---------- Blog INDEX ---------- */

.blog-index-hero{
  padding:96px 0 32px;
  background:linear-gradient(180deg, var(--surface-container-low), var(--surface));
  border-bottom:1px solid var(--outline-variant);
}
.blog-index-hero h1{font-size:clamp(28px,4.2vw,44px);margin:.2em 0 .3em;line-height:1.15}
.blog-index-hero .lead{color:var(--on-surface-variant);font-size:17px;max-width:640px;margin:0}

.blog-filters{padding:20px 0;background:var(--surface)}
.blog-chips{display:flex;flex-wrap:wrap;gap:8px}
.blog-chip{
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:999px;
  background:var(--surface-container);
  border:1px solid var(--outline-variant);
  color:var(--on-surface);
  font-size:13px;font-weight:600;
  text-decoration:none;
  transition:background .15s ease;
}
.blog-chip:hover{background:var(--surface-container-high)}
.blog-chip.is-active{
  background:var(--primary);color:#fff;border-color:var(--primary);
}

.blog-index{padding:32px 0 64px;background:var(--surface)}
.blog-grid{
  display:grid;gap:24px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.blog-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--outline-variant);
  border-radius:16px;overflow:hidden;
  text-decoration:none;color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;
}
.blog-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(11,21,40,.08);
}
.blog-card-img{
  aspect-ratio:16/10;overflow:hidden;background:var(--surface-container);
}
.blog-card-img img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.blog-card:hover .blog-card-img img{transform:scale(1.04)}
.blog-card-body{padding:20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.blog-card-cat{
  display:inline-block;align-self:flex-start;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);
  padding:4px 10px;border-radius:999px;
  background:var(--primary-fixed);
  margin-bottom:4px;
}
.blog-card-body h2,
.blog-card-body h3{
  font-size:19px;line-height:1.3;margin:0;color:var(--on-surface);font-weight:800;
}
.blog-card-body p{
  color:var(--on-surface-variant);font-size:14.5px;line-height:1.5;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.blog-card-meta{
  color:var(--outline);font-size:12.5px;margin-top:auto;padding-top:8px;
}

/* ---------- Blog SINGLE POST ---------- */

.blog-single{background:var(--surface);padding:96px 0 32px}
.blog-hero{max-width:780px;margin:0 auto}
.blog-crumb{
  color:var(--on-surface-variant);font-size:13px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px;
}
.blog-crumb a{color:var(--primary);font-weight:700;text-decoration:none}
.blog-crumb a:hover{text-decoration:underline}
.blog-cat{
  display:inline-block;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);padding:3px 10px;border-radius:999px;
  background:var(--primary-fixed);
}
.blog-title{
  font-size:clamp(28px,4.6vw,44px);
  line-height:1.15;margin:0 0 16px;color:var(--on-surface);font-weight:900;letter-spacing:-.01em;
}
.blog-meta{color:var(--on-surface-variant);font-size:14px;margin:0 0 24px}
.blog-lede{
  font-size:19px;line-height:1.55;color:var(--on-surface);
  font-weight:500;margin:0 0 32px;
  padding-left:16px;border-left:3px solid var(--primary);
}

.blog-hero-img{max-width:900px;margin:0 auto 40px}
.blog-hero-img img{
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border-radius:16px;display:block;
}

.blog-body{max-width:720px;margin:0 auto;padding-bottom:64px}
.blog-body h2{
  font-size:26px;line-height:1.25;margin:40px 0 14px;
  color:var(--on-surface);font-weight:800;letter-spacing:-.01em;
}
.blog-body h2:first-child{margin-top:0}
.blog-body h3{
  font-size:20px;line-height:1.3;margin:28px 0 10px;color:var(--on-surface);font-weight:800;
}
.blog-body p{
  font-size:17px;line-height:1.7;color:var(--on-surface);margin:0 0 18px;
}
.blog-body ul,
.blog-body ol{
  padding-left:24px;margin:0 0 20px;
}
.blog-body li{
  font-size:17px;line-height:1.65;color:var(--on-surface);margin:0 0 8px;
}
.blog-body strong{color:var(--on-surface);font-weight:800}
.blog-body em{font-style:italic}
.blog-body a{
  color:var(--primary);
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;
  text-decoration-color:rgba(0,56,165,.3);
}
.blog-body a:hover{text-decoration-color:var(--primary)}
.blog-body code{
  background:var(--surface-container);color:var(--on-surface);
  padding:2px 6px;border-radius:6px;font-size:14.5px;
  font-family:'SF Mono',Consolas,monospace;
}

/* ---------- Related posts ---------- */

.blog-related{padding:56px 0;background:var(--surface-container-low);border-top:1px solid var(--outline-variant)}
.blog-related .section-title{margin:0 0 24px;font-size:24px}
.blog-related-grid{
  display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  margin-bottom:20px;
}
.blog-back{
  display:inline-block;margin-top:16px;
  color:var(--primary);font-weight:700;text-decoration:none;
}
.blog-back:hover{text-decoration:underline}

/* ---------- Small screens ---------- */

@media (max-width:680px){
  .blog-index-hero{padding:80px 0 24px}
  .blog-single{padding:80px 0 24px}
  .blog-hero-img{margin-bottom:28px}
  .blog-hero-img img{border-radius:0;aspect-ratio:16/10}
  .blog-body h2{font-size:22px;margin-top:32px}
  .blog-body p,.blog-body li{font-size:16px}
  .blog-lede{font-size:17px}
}