/* =========================================================
   BSchoolBuzz — Blog / News listing professional UI
   Scoped to blog listing markup (cards containing .blog-card-image)
   and news listing cards (.news-card-solid).
   ========================================================= */

:root{
  --bb-navy:#0b1b3a;
  --bb-navy-2:#122a55;
  --bb-ink:#0f172a;
  --bb-gold:#d4a53a;
  --bb-gold-soft:#f2e0b5;
  --bb-line:#e3e7ee;
  --bb-muted:#5b6577;
}

/* ---------- Listing hero (blogs page reuses .colleges-hero) ---------- */
body:has(.blog-card-image) .colleges-hero{
  background:linear-gradient(160deg,#0b1b3a 0%,#0f2246 45%,#08132b 100%) !important;
  padding-top:104px !important;
  padding-bottom:44px !important;
  border-bottom:3px solid var(--bb-gold);
}
body:has(.blog-card-image) .colleges-hero::before{
  background:
    radial-gradient(circle at 15% 0%, rgba(212,165,58,.16), transparent 55%),
    radial-gradient(circle at 85% 10%, rgba(255,255,255,.07), transparent 55%) !important;
  mix-blend-mode:normal !important;
}
body:has(.blog-card-image) .colleges-hero h1{
  font-family:'Urbanist',system-ui,sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(2rem,4.4vw,3.4rem);
  line-height:1.08;
}
body:has(.blog-card-image) .colleges-hero h1::after{
  content:"";
  display:block;
  width:74px;height:3px;
  margin:18px auto 0;
  background:var(--bb-gold);
  border-radius:2px;
}
body:has(.blog-card-image) .colleges-hero p{
  color:#c9d3e6 !important;
  font-family:'Epilogue',system-ui,sans-serif;
  font-size:clamp(.95rem,1.6vw,1.05rem);
  max-width:660px;
  margin-left:auto;margin-right:auto;
}

/* ---------- Search bar ---------- */
body:has(.blog-card-image) .hero-search-wrap{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(212,165,58,.35);
  box-shadow:0 14px 34px rgba(3,10,26,.45);
  border-radius:10px;
}
body:has(.blog-card-image) .hero-search-btn{
  background:var(--bb-gold) !important;
  border:none !important;
  color:#0b1b3a !important;
  border-radius:8px;
  box-shadow:none !important;
  letter-spacing:.01em;
}
body:has(.blog-card-image) .hero-search-btn:hover{
  background:#e5b64b !important;
  transform:none;
}
body:has(.blog-card-image) .hero-search-btn i{display:none;}

/* ---------- Category filters ---------- */
body:has(.blog-card-image) .filter-outer{
  background:transparent !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:999px;
}
body:has(.blog-card-image) .filter-inner{
  background:var(--bb-gold) !important;
  color:#0b1b3a !important;
  border:1px solid var(--bb-gold);
  font-weight:700;
  font-size:13.5px;
  padding:7px 16px;
  border-radius:999px;
}
body:has(.blog-card-image) .filter-outer.inactive{background:transparent !important;box-shadow:none !important;}
body:has(.blog-card-image) .filter-inner.inactive{
  background:rgba(255,255,255,.05) !important;
  color:#d7dfee !important;
  border:1px solid rgba(255,255,255,.22);
  font-weight:600;
}
body:has(.blog-card-image) .filter-inner.inactive:hover{
  border-color:var(--bb-gold);
  color:#fff !important;
}
body:has(.blog-card-image) .category-row{gap:10px;margin-top:18px;}

/* ---------- Grid ---------- */
body:has(.blog-card-image) section.bg-white{
  background:#f7f8fa !important;
  padding-top:56px !important;
  padding-bottom:72px !important;
}
body:has(.blog-card-image) section.bg-white > .grid{
  gap:26px !important;
  max-width:1240px;
  margin:0 auto;
}

/* ---------- Card ---------- */
.grid > div:has(> a > div > .blog-card-image),
.grid > div:has(.blog-card-image){
  border:1px solid var(--bb-line) !important;
  border-radius:14px !important;
  background:#fff;
  overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display:flex;
  flex-direction:column;
}
.grid > div:has(.blog-card-image):hover{
  transform:translateY(-4px);
  border-color:#cfd6e2 !important;
  box-shadow:0 18px 40px -18px rgba(11,27,58,.35) !important;
}
.grid > div:has(.blog-card-image) > a{
  display:flex;flex-direction:column;height:100%;text-decoration:none;
}

/* Image */
.blog-card-image{
  height:212px !important;
  object-fit:contain !important;
  background:#eef1f6 !important;
  transition:transform .5s ease;
}
.grid > div:has(.blog-card-image) > a > div:first-child{
  overflow:hidden;
  border-bottom:1px solid var(--bb-line);
}
.grid > div:has(.blog-card-image):hover .blog-card-image{transform:scale(1.04);}

/* Body */
.grid > div:has(.blog-card-image) > a > div.p-5{
  padding:20px 22px 22px !important;
  display:flex;flex-direction:column;flex:1;
}

/* Category chip → editorial kicker */
.grid > div:has(.blog-card-image) span.bg-blue-950{
  background:transparent !important;
  color:var(--bb-navy) !important;
  padding:0 !important;
  border-radius:0 !important;
  font-family:'Epilogue',system-ui,sans-serif;
  font-size:11px !important;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-left:3px solid var(--bb-gold);
  padding-left:9px !important;
  display:inline-block;
}

/* Title */
.grid > div:has(.blog-card-image) h2{
  font-family:'Urbanist',system-ui,sans-serif;
  font-size:1.12rem !important;
  line-height:1.35;
  font-weight:750;
  color:var(--bb-ink);
  margin:14px 0 9px !important;
  letter-spacing:-.01em;
}
.grid > div:has(.blog-card-image):hover h2{color:var(--bb-navy-2);}

/* Excerpt */
.grid > div:has(.blog-card-image) p{
  font-family:'Epilogue',system-ui,sans-serif;
  color:var(--bb-muted) !important;
  font-size:.9rem !important;
  line-height:1.62;
  margin-bottom:2px;
}

/* Meta row */
.grid > div:has(.blog-card-image) > a > div.p-5 > div:last-child{
  margin-top:auto !important;
  padding-top:16px;
  border-top:1px solid #eef1f5;
}
.grid > div:has(.blog-card-image) > a > div.p-5 > div:last-child span:first-child{
  color:#8792a6 !important;
  font-size:.78rem !important;
  letter-spacing:.03em;
  text-transform:uppercase;
  font-weight:600;
}
.grid > div:has(.blog-card-image) span.bg-yellow-400{
  background:transparent !important;
  color:var(--bb-navy) !important;
  padding:0 !important;
  font-size:.82rem !important;
  font-weight:700;
  letter-spacing:.02em;
  border-bottom:2px solid var(--bb-gold);
  border-radius:0 !important;
  padding-bottom:2px !important;
  transition:color .2s ease,border-color .2s ease;
}
.grid > div:has(.blog-card-image):hover span.bg-yellow-400{
  color:var(--bb-gold) !important;
  border-color:var(--bb-navy);
  text-decoration:none !important;
}
.grid > div:has(.blog-card-image) span.bg-yellow-400:hover{text-decoration:none !important;}

/* ---------- News listing cards ---------- */
.news-card-solid{
  background:#fff !important;
  border:1px solid var(--bb-line) !important;
  border-left:4px solid var(--bb-gold) !important;
  border-radius:12px !important;
  padding:22px 24px !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
  transition:transform .22s ease, box-shadow .22s ease;
}
.news-card-solid:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 36px -18px rgba(11,27,58,.35) !important;
}
.news-card-solid .news-title{
  font-family:'Urbanist',system-ui,sans-serif !important;
  font-size:1.12rem !important;
  font-weight:750 !important;
  color:var(--bb-ink) !important;
  line-height:1.35 !important;
  margin-bottom:8px !important;
}
.news-card-solid .news-desc{
  font-family:'Epilogue',system-ui,sans-serif !important;
  color:var(--bb-muted) !important;
  font-size:.92rem !important;
  line-height:1.65 !important;
}
.news-card-solid .read-btn,
.view-older-btn{
  display:inline-block;
  margin-top:14px;
  background:var(--bb-navy) !important;
  color:#fff !important;
  border:none !important;
  border-radius:8px !important;
  padding:9px 18px !important;
  font-size:.85rem !important;
  font-weight:700 !important;
  letter-spacing:.01em;
  text-decoration:none !important;
  transition:background .2s ease;
}
.news-card-solid .read-btn:hover,
.view-older-btn:hover{background:var(--bb-gold) !important;color:#0b1b3a !important;}
.news-section-title{
  font-family:'Urbanist',system-ui,sans-serif !important;
  font-size:1.35rem !important;
  font-weight:800 !important;
  color:var(--bb-navy) !important;
  letter-spacing:-.01em;
  margin-bottom:18px !important;
  padding-bottom:10px;
  border-bottom:2px solid var(--bb-gold);
  display:block;
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .blog-card-image{height:200px !important;}
}
@media (max-width:768px){
  body:has(.blog-card-image) .colleges-hero{padding-top:92px !important;padding-bottom:32px !important;}
  body:has(.blog-card-image) section.bg-white{
    padding:36px 16px 52px !important;
  }
  body:has(.blog-card-image) section.bg-white > .grid{gap:18px !important;}
  .blog-card-image{height:190px !important;}
  .grid > div:has(.blog-card-image) > a > div.p-5{padding:16px 18px 18px !important;}
  .grid > div:has(.blog-card-image) h2{font-size:1.05rem !important;}
  .news-card-solid{padding:18px !important;}
}
@media (max-width:480px){
  .blog-card-image{height:176px !important;}
}