/* ============ BLOG HERO ============ */
.blog-hero{
  position:relative;
  min-height:650px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0a0a0a;
  background-image:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.45)),url('../img/blog-header.jpg');
  background-size:cover;
  background-position:center;
}
.blog-hero h1{
  font-size:64px;
  font-weight:800;
  color:#fff;
  letter-spacing:-.01em;
  text-shadow:0 2px 24px rgba(0,0,0,.4);
}

/* ============ BLOG INTRO ============ */
.blog-intro{padding:120px 0 70px;text-align:center;}
.blog-intro h2{
  font-size:42px;
  font-weight:800;
  color:#fff;
  line-height:1.12;
  max-width:1000px;
  margin:0 auto;
  text-wrap:balance;
}

/* ============ FILTER TABS ============ */
.blog-filters{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:60px;
  margin-bottom:74px;
}
.filter-tab{
  position:relative;
  background:none;border:none;cursor:pointer;
  font-family:var(--head);
  font-weight:700;
  font-size:19px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  padding:0 2px 14px;
  transition:color .25s ease;
}
.filter-tab::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--red);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.filter-tab:hover{color:#fff;}
.filter-tab.active{color:#fff;}
.filter-tab.active::after{transform:scaleX(1);}

/* ============ BLOG GRID ============ */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:46px;
  padding-bottom:130px;
}
.post-card{
  display:flex;
  flex-direction:column;
  opacity:1;
  transition:opacity .4s ease,transform .4s ease;
}
.post-card.hide{display:none;}
.post-thumb{
  position:relative;
  overflow:hidden;
  aspect-ratio:1/1;
  background:#111;
  margin-bottom:28px;
  display:block;
}
.post-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.post-card:hover .post-thumb img{transform:scale(1.05);}
.post-cat{
  font-family:var(--text);
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  margin-bottom:18px;
}
.post-card h3{
  font-size:27px;
  font-weight:800;
  color:#fff;
  line-height:1.1;
  margin-bottom:24px;
}
.post-card p{
  color:var(--body);
  font-size:16.5px;
  line-height:1.55;
  margin-bottom:30px;
  flex:1 1 auto;
}
.post-read{
  display:inline-flex;
  align-items:center;
  gap:9px;
  align-self:flex-start;
  color:var(--red);
  font-family:var(--head);
  font-weight:700;
  font-size:17px;
  letter-spacing:.02em;
  transition:gap .25s ease,color .25s ease;
}
.post-read svg{width:16px;height:16px;transition:transform .25s ease;}
.post-read:hover{color:#ff3b43;}
.post-read:hover svg{transform:translateX(4px);}

/* pagination */
.blog-pagination{display:flex;justify-content:center;gap:14px;padding-bottom:110px;font-family:var(--text);}
.blog-pagination .page-numbers{color:var(--body);padding:8px 14px;border:1px solid rgba(255,255,255,.18);border-radius:4px;}
.blog-pagination .page-numbers.current,.blog-pagination .page-numbers:hover{color:#fff;border-color:var(--red);}

@media (max-width:1100px){
  .blog-hero h1{font-size:52px;}
  .blog-intro h2{font-size:34px;}
}
@media (max-width:860px){
  .blog-hero{min-height:420px;}
  .blog-hero h1{font-size:40px;}
  .blog-intro{padding:70px 0 50px;}
  .blog-filters{gap:26px 30px;margin-bottom:50px;}
  .filter-tab{font-size:16px;}
  .blog-grid{grid-template-columns:1fr;gap:56px;padding-bottom:80px;}
  .post-thumb{aspect-ratio:16/10;}
}