.blog-section{
  background:#fff; color:#111;
  padding: clamp(24px,4vw,36px) clamp(16px,3.5vw,60px) clamp(56px,8vw,80px);
  font-family:'Inter',sans-serif;
}

.blog-header{
  display:flex; align-items:center; justify-content:space-between;
  gap: clamp(10px,2vw,16px); margin-bottom:18px;
}
.blog-title{
  margin:0; letter-spacing:-.02em; font-weight:800;
  font-size: clamp(1.6rem,3.2vw,2rem);
}


.blog-controls{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

.blog-search{ position:relative; flex:1 1 280px; max-width:420px; }
.blog-search input{
  width:100%; border:1px solid #e3e3e3; border-radius:10px;
  padding:.7rem 2.6rem .7rem .9rem; font-size:.98rem; outline:none;
  transition:border-color .18s, box-shadow .18s;
}
.blog-search input:focus-visible{
  border-color:#c9d4ff; box-shadow:0 0 0 3px #eaf0ff;
}
.blog-search i{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%); color:#888;
}

.blog-filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.blog-section .chip{
  border:1px solid #e3e3e3; background:#fafafa; color:#333;
  padding:.48rem .8rem; border-radius:999px; font-weight:600; font-size:.85rem;
  cursor:pointer; user-select:none; transition:background-color .2s, color .2s, border-color .2s;
}
.blog-section .chip:focus-visible{
  outline: none; box-shadow:0 0 0 3px #eaeefb;
}
.blog-section .chip.active{ background:#111; color:#fff; border-color:#111; }


.blog-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 18px;
}

.blog-card{
  display:flex; flex-direction:column; background:#fff;
  border:1px solid #eee; border-radius:14px; overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  transition:transform .25s, box-shadow .25s;
  text-decoration:none; color:inherit;
}
@media (pointer:fine){
  .blog-card:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.08); }
}

.blog-thumb{ position:relative; aspect-ratio:16/10; background:#f3f3f3; overflow:hidden; }
.blog-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.badge-cat{
  position:absolute; left:10px; bottom:10px; background:#111; color:#fff;
  padding:.32rem .6rem; font-size:.78rem; font-weight:700; border-radius:8px;
}

.blog-body{ padding:14px 14px 12px; display:flex; flex-direction:column; gap:8px; }
.blog-title-sm{ font-size:1.05rem; font-weight:800; line-height:1.25; margin:0; }
.blog-excerpt{ font-size:.95rem; color:#555; margin:0; }
.blog-meta{ display:flex; gap:12px; align-items:center; color:#777; font-size:.82rem; margin-top:4px; }


.blog-load{ text-align:center; margin-top:22px; }
.load-btn{
  background:var(--brand-red,#ee0302); color:#fff; border:none; border-radius:10px; font-weight:700;
  padding:.7rem 1.2rem; cursor:pointer; transition:background .2s, opacity .2s;
}
.load-btn:hover{ background:#c40303; }
.load-btn[disabled]{ opacity:.55; cursor:not-allowed; }

.blog-empty{ display:none; text-align:center; color:#666; padding:26px 10px; font-weight:600; }


@media (max-width:900px){
  .blog-header{ flex-direction:column; align-items:stretch; }
  .blog-title{ font-size: clamp(1.5rem, 5vw, 1.7rem); }
}
@media (max-width:600px){
  .blog-grid{ grid-template-columns: 1fr; }
}


@media (max-height:700px) and (min-width:900px){
  .blog-section{ padding-bottom: 48px; }
}


.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}


.article-section{ background:#fff; color:#111; }
.article-section .container{
  max-width: 980px; margin: 0 auto;
  padding: clamp(22px,4vw,32px) clamp(16px,4vw,24px) clamp(60px,8vw,80px);
}


.article-head h1{
  margin:0 0 8px;
  font-weight:800; letter-spacing:-.02em; line-height:1.15;
  font-size: clamp(1.9rem, 3.2vw, 2.55rem);
}
.article-meta{
  display:flex; flex-wrap:wrap; gap:10px; color:#777;
  font-size:.95rem; margin-bottom:12px;
}
.article-meta .dot{ opacity:.6; }

.lead{
  font-size:1.08rem; line-height:1.75; color:#222;
  margin:6px 0 14px;
}


.toc{
  background:#f7f7f9; border:1px solid #ececf1; border-radius:12px;
  padding:16px 18px; margin:10px 0 20px;
}
.toc h2{ margin:0 0 8px; font-size:1.05rem; font-weight:800; letter-spacing:.02em; }
.toc ol{ margin:0; padding-left:18px; }
.toc a{ color:#111; text-decoration:none; }
.toc a:hover{ text-decoration:underline; }


.article-body{ font-size:1.02rem; line-height:1.75; }
.article-body h2{
  margin-top:2rem; margin-bottom:.35rem; font-weight:800;
  font-size:clamp(1.35rem, 2.2vw, 1.6rem);
  scroll-margin-top: var(--navbar-h,130px);
}
.article-body h3{
  margin-top:1rem; margin-bottom:.3rem; font-weight:800; font-size:1.05rem;
  scroll-margin-top: var(--navbar-h,130px);
}
.article-body p{ margin:.35rem 0 .75rem; }


.article-body ul{ padding-left:18px; margin:.2rem 0 .8rem; }
.article-body ol{ padding-left:20px; margin:.2rem 0 .8rem; }

.article-body ul.check{ list-style:none; padding-left:0; }
.article-body ul.check li{ position:relative; padding-left:26px; margin:.35rem 0; }
.article-body ul.check li::before{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid #17a34a; position:absolute; left:0; top:.3rem;
}


.note{
  background:#f2fbf6; border:1px solid #daf2e3; color:#0b6f3c;
  border-radius:10px; padding:12px 14px; margin:12px 0 16px;
}


pre.code{
  background:#0f1115; color:#eaeefb; border-radius:12px; border:1px solid #131621;
  padding:16px; overflow:auto; font-size:.92rem; line-height:1.6;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
pre.code code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}


.cta-box{
  background:#0a0a0a; color:#fff; border-radius:14px; padding:22px 20px; margin-top:24px;
  box-shadow:0 10px 32px rgba(0,0,0,.25);
}
.cta-box h3{ margin:0 0 6px; font-size:1.2rem; font-weight:800; color:#fff; }
.cta-box p{ color:#d9d9d9; margin:0 0 12px; }
.cta-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.cta-box .btn{
  display:inline-block; font-weight:700; text-decoration:none; cursor:pointer;
  padding:10px 16px; border-radius:10px; border:1px solid transparent;
}
.cta-box .btn-primary{ background:var(--brand-red,#ee0302); color:#fff; border-color:var(--brand-red,#ee0302); }
.cta-box .btn-primary:hover{ background:#c40303; border-color:#c40303; }
.cta-box .btn-outline{ background:transparent; color:#fff; border-color:#555; }
.cta-box .btn-outline:hover{ background:#1a1a1a; border-color:#777; }


.article-body figure{ margin:18px 0; }
.article-body figure img{ width:100%; height:auto; border-radius:10px; display:block; }
.article-body figure figcaption{ text-align:center; color:#666; font-size:.94rem; margin-top:8px; }


@media (max-width:700px){
  .article-section .container{ padding: 30px 30px 60px; }
  .article-head h1{ font-size: clamp(1.7rem, 5.4vw, 2.1rem); }
}


@media (max-height:700px) and (min-width:900px){
  .article-section .container{ padding-bottom:48px; }
}


@media (prefers-reduced-motion:reduce){
  .blog-card{ transition:none; }
}


.blog-card > a {
  color: inherit !important;
  text-decoration: none !important;
}