.blog-hub{padding:clamp(40px,5vw,80px) 0;background-color:var(--bg)}
.blog-hub__header{text-align:center;max-width:860px;margin:0 auto 50px}
.blog-hub__title{font-size:clamp(36px,5vw,60px);color:var(--text);font-weight:900;text-transform:uppercase;line-height:1.1;margin:0 0 20px}
.blog-hub__desc{font-size:clamp(16px,2vw,18px);color:var(--text2);line-height:1.5;margin:0}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.blog-grid-item{display:block;text-decoration:none;color:inherit;height:100%;transition:transform .2s ease,box-shadow .2s ease}
.card-blog{display:flex;flex-direction:column;background-color:var(--card-bg);border-radius:0;overflow:hidden;height:100%}
.card-blog .card-img-area{height:260px;width:100%;position:relative;background-color:#ddd}
.card-blog .card-img-area img{width:100%;height:100%;object-fit:cover;display:block}
.badge-category{position:absolute;top:20px;left:20px;background-color:var(--accent);color:var(--text);padding:8px 16px;border-radius:8px;font-size:14px;font-weight:700;text-transform:uppercase;z-index:2;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.card-meta{display:flex;align-items:center;gap:16px;font-size:13px;font-weight:500;color:var(--text2);opacity:.75;margin-bottom:12px}
.card-views{display:flex;align-items:center;gap:5px}
.card-views svg{width:16px;height:16px;fill:currentColor}
.card-blog .card-body{padding:30px;flex-grow:1;display:flex;flex-direction:column}
.blog-grid-item:hover .btn-card{transform:translateX(5px)}
.blog-grid-item:hover{transform:translateY(-4px)}
@media (max-width:1024px){.blog-grid{grid-template-columns:repeat(2,1fr);gap:20px}}
@media (max-width:640px){.blog-grid{grid-template-columns:1fr;gap:24px}.blog-hub__header{margin-bottom:30px}}
.article-section{padding:clamp(40px,6vw,80px) 0;background-color:var(--bg)}
.article-body{max-width:960px;margin:0 auto;font-family:"Montserrat",sans-serif;color:var(--text2);font-size:18px;line-height:1.65}
.article-h1{font-size:clamp(32px,4.5vw,48px);font-weight:900;color:var(--text);margin:0 0 24px;text-transform:uppercase;line-height:1.15}
.article-body h2{font-size:clamp(24px,3vw,30px);font-weight:700;color:var(--text);margin:40px 0 20px;text-transform:uppercase;line-height:1.2}
.article-body h3{font-size:clamp(20px,2.5vw,24px);font-weight:600;color:var(--text);margin:32px 0 16px;line-height:1.3}
.article-body p{margin:0 0 20px}
.article-lead{font-size:clamp(20px,2.5vw,24px);font-weight:500;line-height:1.5;color:var(--text);margin-bottom:40px!important}
.article-body ul{list-style:none;padding:0;margin:0 0 24px}
.article-body ul li{position:relative;padding-left:28px;margin-bottom:12px}
.article-body ul li::before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;background-color:var(--accent);border-radius:50%}
.article-carousel-container{position:relative;margin-bottom:40px;width:100%}
.article-carousel-wrapper{overflow:hidden;width:100%;border-radius:15px}
.article-carousel-track{display:flex;will-change:transform;cursor:grab}
.article-carousel-track:active{cursor:grabbing}
.article-slide{flex-shrink:0;position:relative}
.article-slide img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:16/9;border-radius:15px;pointer-events:none}
.article-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:rgba(255,255,255,0.7);border:0;cursor:pointer;padding:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background 0.2s}
.article-nav:hover{background:rgba(255,255,255,1)}
.article-nav img{width:44px;height:44px;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))}
.article-nav.prev{left:10px}
.article-nav.next{right:10px}
.article-carousel-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.article-carousel-dot{width:10px;height:10px;border-radius:50%;background:rgba(42,42,42,.2);border:0;padding:0;cursor:pointer;transition:background .2s ease,transform .2s ease}
.article-carousel-dot.is-active{background:var(--accent);transform:scale(1.2)}
.article-meta-top{display:flex;align-items:center;gap:16px;font-size:14px;font-weight:600;color:var(--text2);opacity:0.8;margin-bottom:20px}
.article-meta-top .card-views{display:flex;align-items:center;gap:6px}

@media (max-width:768px){
  .article-nav{display:none!important}
  .article-slide img{height:440px;aspect-ratio:auto}
  .article-h1{font-size:24px!important;line-height:1.25}
}