/* Blog index — solid visible grid (overrides art-direction collapse) */
.blog-index-page .blog-listing-wrap{
  padding: 1.25rem 0 3.5rem !important;
  background: var(--charcoal, #0c0b0a) !important;
}
.blog-index-page .blog-grid{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 1.25rem !important;
  align-items: stretch !important;
}
@media (max-width: 960px){
  .blog-index-page .blog-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px){
  .blog-index-page .blog-grid{ grid-template-columns: 1fr !important; gap: 1rem !important; }
}

.blog-index-page .blog-card{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 320px !important;
  background: linear-gradient(165deg, #16130f 0%, #0f0d0b 100%) !important;
  border: 1px solid rgba(201,168,108,.22) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.35) !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
}
.blog-index-page .blog-card:hover{
  transform: translateY(-4px) !important;
  border-color: rgba(201,168,108,.5) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,.5) !important;
}

.blog-index-page .blog-card-media{
  position: relative !important;
  aspect-ratio: 16/10 !important;
  overflow: hidden !important;
  background: #1a1612 !important;
  flex: 0 0 auto !important;
}
.blog-index-page .blog-card-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: saturate(.92) brightness(.88) !important;
  transform: none !important;
}
.blog-index-page .blog-card:hover .blog-card-media img{
  filter: saturate(1) brightness(.95) !important;
  transform: scale(1.04) !important;
  transition: transform .45s ease, filter .35s ease !important;
}
.blog-index-page .blog-card-cat{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 2 !important;
  background: rgba(12,11,10,.88) !important;
  color: #e8d5a3 !important;
  border: 1px solid rgba(201,168,108,.35) !important;
  border-radius: 999px !important;
  padding: .28rem .7rem !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
}
.blog-index-page .blog-card-num{
  position: absolute !important;
  bottom: 10px !important;
  left: 12px !important;
  z-index: 2 !important;
  color: rgba(242,234,216,.75) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  background: rgba(0,0,0,.45) !important;
  padding: .2rem .45rem !important;
  border-radius: 6px !important;
}

.blog-index-page .blog-card-body{
  display: flex !important;
  flex-direction: column !important;
  gap: .55rem !important;
  padding: 1.1rem 1.15rem 1.25rem !important;
  flex: 1 1 auto !important;
  background: transparent !important;
}
.blog-index-page .blog-card-title{
  margin: 0 !important;
  font-family: var(--font-d, "Noto Kufi Arabic", sans-serif) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  color: #f2ead8 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  max-width: none !important;
}
.blog-index-page .blog-card-desc{
  margin: 0 !important;
  font-size: .92rem !important;
  line-height: 1.65 !important;
  color: #c8bca8 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 1 1 auto !important;
  max-width: none !important;
  font-family: var(--font-b, Tajawal, sans-serif) !important;
  font-style: normal !important;
}
.blog-index-page .blog-card-more{
  margin-top: .35rem !important;
  font-size: .82rem !important;
  font-weight: 800 !important;
  color: #c9a86c !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
  border: 0 !important;
  padding: 0 !important;
}

/* toolbar */
.blog-toolbar{
  padding: 1.25rem 0 .5rem !important;
  border-bottom: 1px solid rgba(201,168,108,.12) !important;
  background: #0c0b0a !important;
}
.blog-chips{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem !important;
  margin-bottom: .75rem !important;
}
.blog-chip{
  display: inline-flex !important;
  align-items: center !important;
  padding: .45rem .9rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201,168,108,.28) !important;
  color: #e8d5a3 !important;
  text-decoration: none !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  background: rgba(22,19,15,.9) !important;
}
.blog-chip:hover,
.blog-chip.is-active{
  background: rgba(201,168,108,.18) !important;
  border-color: rgba(201,168,108,.55) !important;
  color: #f2ead8 !important;
}
.blog-count{
  margin: 0 !important;
  color: #a89880 !important;
  font-size: .88rem !important;
}

/* pager */
.blog-pager{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .75rem 1rem !important;
  margin-top: 2.25rem !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(201,168,108,.14) !important;
}
.blog-pager-btn{
  display: inline-flex !important;
  padding: .65rem 1.1rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201,168,108,.35) !important;
  color: #e8d5a3 !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  font-size: .88rem !important;
  background: #16130f !important;
}
.blog-pager-btn:hover{ border-color: #c9a86c !important; color: #fff !important; }
.blog-pager-btn.is-disabled{
  opacity: .35 !important;
  pointer-events: none !important;
}
.blog-pager-status{
  color: #c8bca8 !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
}
.blog-pager-nums{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .35rem !important;
  align-items: center !important;
}
.blog-pager-nums a{
  min-width: 2.1rem !important;
  height: 2.1rem !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  border: 1px solid rgba(201,168,108,.2) !important;
  color: #e8d5a3 !important;
  text-decoration: none !important;
  font-size: .85rem !important;
  font-weight: 700 !important;
  background: #12100e !important;
}
.blog-pager-nums a.is-current,
.blog-pager-nums a:hover{
  background: rgba(201,168,108,.22) !important;
  border-color: #c9a86c !important;
  color: #fff !important;
}
.blog-pager-nums span{ color: #7a6f5f !important; }

/* CTA */
.blog-cta-band{
  border-top: 1px solid rgba(201,168,108,.14) !important;
  background: linear-gradient(180deg, #12100e, #0c0b0a) !important;
  padding: 2.5rem 0 3.5rem !important;
}
.blog-cta-inner{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1.25rem 2rem !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.blog-cta-inner h2{
  margin: 0 0 .4rem !important;
  color: #f2ead8 !important;
  font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
}
.blog-cta-inner p{
  margin: 0 !important;
  color: #c8bca8 !important;
  max-width: 36rem !important;
}
.blog-cta-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .6rem !important;
}

/* hero tweak for blog */
.blog-index-page .blog-hero{
  min-height: clamp(280px, 40vw, 420px) !important;
}
.blog-index-page .blog-hero h1{
  max-width: 14ch !important;
}