/* =========================================================
   Blog Category Template — Structural Designs
   Loaded only on category archive pages (see functions.php)

   NOTE: !important is used throughout this file on purpose.
   Astra's own theme/customizer CSS (headings, links, colors)
   loads with high specificity/priority and was overriding this
   design (e.g. the H1 text turning dark instead of white).
   Locking every declaration here guarantees this template's
   look stays fixed regardless of Astra's global typography
   or color settings.
   ========================================================= */

.bcat-wrap{
  --navy-900:#0f1c30;
  --navy-800:#16233d;
  --navy-700:#1e2f4d;
  --slate-500:#5b7291;
  --slate-badge:#6f89a8;
  --slate-badge-text:#eef2f7;
  --ink:#1c2735;
  --muted:#5c6b7d;
  --line:#e6eaf0;
  --bg:#ffffff;
  --bg-soft:#f5f7fa;
  --white:#ffffff;
}

.bcat-wrap *{box-sizing:border-box !important;}
.bcat-wrap{
  font-family:'Inter',sans-serif !important;
  color:var(--ink) !important;
  background:var(--bg) !important;
  -webkit-font-smoothing:antialiased !important;
}
.bcat-wrap h1,
.bcat-wrap h2,
.bcat-wrap h3,
.bcat-wrap h4{
  font-family:'Space Grotesk',sans-serif !important;
  margin:0 !important;
}
.bcat-wrap a{
  text-decoration:none !important;
  color:inherit !important;
}
.bcat-wrap img{
  display:block !important;
  max-width:100% !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}

.bcat-container{max-width:1240px !important; margin:0 auto !important; padding:0 32px !important;}
.bcat-container-wide{max-width:1560px !important; margin:0 auto !important; padding:0 48px !important;}

/* ---------- HERO ---------- */
.bcat-hero{
  position:relative !important;
  background:
    radial-gradient(900px 500px at 8% -15%, rgba(120,145,178,0.22), transparent 60%),
    #153247 !important;
  padding:56px 0 72px !important;
  overflow:hidden !important;
}
.bcat-hero::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  background-image:
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px) !important;
  background-size:64px 64px !important;
  -webkit-mask-image:radial-gradient(1400px 750px at 20% 0%, rgba(0,0,0,0.95), transparent 85%) !important;
  mask-image:radial-gradient(1400px 750px at 20% 0%, rgba(0,0,0,0.95), transparent 85%) !important;
}
.bcat-hero-inner{position:relative !important; z-index:1 !important;}

.bcat-breadcrumb{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  font-size:14.5px !important;
  color:#93a4bb !important;
  margin-bottom:28px !important;
}
.bcat-breadcrumb a{color:#93a4bb !important; transition:color .2s ease !important;}
.bcat-breadcrumb a:hover{color:#cdd8e6 !important;}
.bcat-breadcrumb .current{color:#ffffff !important; font-weight:600 !important;}
.bcat-breadcrumb svg{width:14px !important; height:14px !important; opacity:0.6 !important;}

.bcat-eyebrow{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;
  font-family:'Space Mono',monospace !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:0.16em !important;
  text-transform:uppercase !important;
  color:#8fa3bf !important;
  margin-bottom:22px !important;
}
.bcat-eyebrow::before{
  content:"" !important;
  width:28px !important; height:1.5px !important;
  background:#5b7291 !important;
  display:inline-block !important;
}
.bcat-eyebrow::after{
  content:"" !important;
  width:5px !important; height:5px !important;
  border-radius:50% !important;
  background:#6f89a8 !important;
  display:inline-block !important;
}

/* Heading — locked so Astra's typography/color settings cannot override it */
.bcat-hero h1,
.bcat-hero h1 span,
.bcat-hero h1 .bcat-category-name{
  font-size:clamp(32px, 4.6vw, 54px) !important;
  line-height:1.18 !important;
  font-weight:700 !important;
  color:#ffffff !important;
  max-width:920px !important;
  letter-spacing:-0.01em !important;
}
.bcat-hero h1{display:block !important;}
.bcat-hero h1 mark{
  background:rgba(120,145,178,0.38) !important;
  color:#ffffff !important;
  padding:0 2px !important;
  box-decoration-break:clone !important;
  -webkit-box-decoration-break:clone !important;
}
.bcat-hero p{
  margin-top:22px !important;
  max-width:620px !important;
  font-size:16.5px !important;
  line-height:1.7 !important;
  color:#c4cedb !important;
}

/* ---------- SECTION HEAD ---------- */
.bcat-section{padding:56px 0 80px !important;}
.bcat-section-head{
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
  gap:24px !important;
  margin-bottom:32px !important;
  flex-wrap:wrap !important;
}
.bcat-section-head h2{
  font-size:22px !important;
  font-weight:600 !important;
  color:var(--navy-800) !important;
}
.bcat-section-head h2 .bcat-category-name{
  color:var(--navy-800) !important;
  font-weight:600 !important;
}
.bcat-section-head p{
  margin:6px 0 0 !important;
  color:var(--muted) !important;
  font-size:14.5px !important;
}
.bcat-count-pill{
  font-family:'Space Mono',monospace !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:var(--slate-500) !important;
  background:var(--bg-soft) !important;
  border:1px solid var(--line) !important;
  padding:6px 14px !important;
  border-radius:999px !important;
  letter-spacing:0.02em !important;
}

/* ---------- GRID ---------- */
.bcat-grid{
  display:grid !important;
  grid-template-columns:repeat(3, 1fr) !important;
  gap:32px !important;
}

.bcat-card{
  background:var(--white) !important;
  border:1px solid var(--line) !important;
  border-radius:16px !important;
  overflow:hidden !important;
  display:block !important;
}
.bcat-card:hover{border-color:#d7dee8 !important;}

.bcat-card-media{
  position:relative !important;
  aspect-ratio:16/10.5 !important;
  background:linear-gradient(135deg, var(--navy-800), var(--navy-700)) !important;
  overflow:hidden !important;
}
.bcat-card-media svg{position:absolute !important; inset:0 !important; width:100% !important; height:100% !important;}

.bcat-badge{
  position:absolute !important;
  top:14px !important; left:14px !important;
  background:rgba(111,137,168,0.88) !important;
  backdrop-filter:blur(2px) !important;
  color:var(--slate-badge-text) !important;
  font-family:'Space Mono',monospace !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:0.07em !important;
  text-transform:uppercase !important;
  padding:6px 12px !important;
  border-radius:6px !important;
  z-index:2 !important;
}

.bcat-card-body{padding:20px 22px 24px !important;}
.bcat-meta-line{
  font-family:'Space Mono',monospace !important;
  font-size:11.5px !important;
  color:var(--muted) !important;
  margin-bottom:10px !important;
  font-weight:400 !important;
  letter-spacing:0.01em !important;
}
.bcat-meta-line b{color:var(--slate-500) !important;}
.bcat-card h3{
  font-size:18px !important;
  line-height:1.4 !important;
  font-weight:600 !important;
  color:var(--navy-800) !important;
  margin-bottom:10px !important;
}
.bcat-card p{
  font-size:14px !important;
  line-height:1.62 !important;
  color:var(--muted) !important;
  margin:0 0 16px !important;
  display:-webkit-box !important;
  -webkit-line-clamp:3 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
.bcat-read-more{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  color:var(--navy-700) !important;
}
.bcat-read-more svg{width:14px !important; height:14px !important;}

/* ---------- WORDPRESS PAGINATION (replaces the old "Load more" button) ---------- */
.bcat-pagination{display:flex !important; justify-content:center !important; margin-top:44px !important;}
.bcat-pagination .page-numbers{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:40px !important; height:40px !important; padding:0 12px !important; margin:0 4px !important;
  border:1px solid var(--line) !important;
  background:var(--bg-soft) !important;
  color:var(--navy-800) !important;
  font-family:'Inter',sans-serif !important;
  font-weight:600 !important;
  font-size:14px !important;
  border-radius:10px !important;
}
.bcat-pagination .page-numbers.current{
  background:var(--navy-800) !important;
  color:#fff !important;
  border-color:var(--navy-800) !important;
}
.bcat-pagination a.page-numbers:hover{
  background:#ecf0f5 !important;
  border-color:#d7dee8 !important;
}

/* ---------- NO POSTS FALLBACK ---------- */
.bcat-empty{
  padding:40px !important;
  text-align:center !important;
  color:var(--muted) !important;
  border:1px dashed var(--line) !important;
  border-radius:16px !important;
}

@media (max-width:980px){
  .bcat-grid{grid-template-columns:repeat(2, 1fr) !important;}
}
@media (max-width:1200px){
  .bcat-container-wide{padding:0 32px !important;}
}
@media (max-width:640px){
  .bcat-container{padding:0 20px !important;}
  .bcat-container-wide{padding:0 20px !important;}
  .bcat-grid{grid-template-columns:1fr !important;}
  .bcat-hero{padding:48px 0 40px !important;}
  .bcat-section{padding:40px 0 56px !important;}
}