/* /blogs/ listing page (added by apply_blog_index_layout.py). Builds on main.css tokens and the
   existing .blog-* listing styles; everything new is .bx-*. */

/* ---------- hero ---------- */
.bx-hero {
  position: relative; overflow: hidden; padding: var(--sp-8) 0 var(--sp-7);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(255,107,0,0.12), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(123,97,255,0.08), transparent 60%),
    var(--bg-alt-2);
}
.bx-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(17,17,17,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(17,17,17,0.04) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: linear-gradient(180deg, #000 0%, transparent 85%); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
}
.bx-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.bx-hero .kicker { display: inline-block; padding: 0.32rem 0.8rem; border-radius: var(--radius-pill); background: var(--orange-tint); color: #B84A00; font-size: var(--fs-tiny); letter-spacing: 0.1em; }
.bx-hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.3rem); line-height: 1.08; letter-spacing: -0.03em; margin: var(--sp-4) 0 var(--sp-4); }
.bx-hero-copy > p:not(.kicker) { color: var(--muted-2); font-size: 1.1rem; line-height: 1.65; max-width: 56ch; margin: 0 0 var(--sp-5); }
.bx-hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.bx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.bx-stats .blog-stat, .bx-stat {
  display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; padding: var(--sp-5);
  background: rgba(255,255,255,0.85); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); backdrop-filter: blur(6px);
}
.bx-stats b { font-family: var(--font-head); font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1; color: var(--ink-strong); letter-spacing: -0.02em; }
.bx-stats span { font-size: 0.9rem; color: var(--muted-2); }
.bx-stats > :first-child { background: var(--ink-strong); border-color: var(--ink-strong); }
.bx-stats > :first-child b { color: #fff; }
.bx-stats > :first-child span { color: rgba(255,255,255,0.7); }

/* ---------- sticky search + chips ---------- */
.blog-controls { box-shadow: 0 6px 20px rgba(17,17,17,0.04); }
.blog-search { border-radius: var(--radius-pill); }

/* ---------- section heads ---------- */
.bx-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--sp-5); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.bx-head h2 { margin: var(--sp-1) 0 0; font-size: clamp(1.6rem, 3vw, 2.2rem); letter-spacing: -0.02em; }
.bx-head .muted { max-width: 46ch; margin: 0; }
.bx-head .blog-results-meta { margin: 0; }

/* ---------- topics ---------- */
.bx-topics { padding-top: var(--sp-7); }
.bx-topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.bx-topic {
  --tc: var(--orange); --tb: var(--orange-tint);
  position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; column-gap: var(--sp-4); row-gap: var(--sp-3);
  padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; color: var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bx-topic:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--tc); text-decoration: none; }
.bx-topic-ic { grid-row: 1 / span 2; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--tb); color: var(--tc); }
.bx-topic-ic svg { width: 23px; height: 23px; }
.bx-topic-txt { display: flex; flex-direction: column; gap: 0.3rem; }
.bx-topic-h { font-family: var(--font-head); font-weight: 800; font-size: 1.08rem; line-height: 1.25; }
.bx-topic-p { font-size: 0.88rem; line-height: 1.5; color: var(--muted-2); }
.bx-topic-n { font-size: var(--fs-tiny); color: var(--muted-2); display: flex; align-items: center; gap: 0.3rem; }
.bx-topic-n b { font-family: var(--font-head); font-size: 0.95rem; color: var(--tc); }
.bx-topic-n::after { content: "\2192"; margin-left: auto; color: var(--tc); transition: transform .15s ease; }
.bx-topic:hover .bx-topic-n::after { transform: translateX(3px); }
.bx-t-learning-guides, .bx-t-ai-careers { --tc: #5B44E0; --tb: rgba(123,97,255,0.12); }
.bx-t-career-roadmaps, .bx-t-salary-outcomes { --tc: #1F7A4D; --tb: rgba(31,122,77,0.1); }
.bx-t-aerospace-defence-ai, .bx-t-choosing-a-course { --tc: #1F5FB4; --tb: rgba(77,159,255,0.14); }
.bx-t-fireblaze-news-events { --tc: #B4235A; --tb: rgba(180,35,90,0.09); }

/* ---------- article cards ---------- */
#blogGrid { gap: var(--sp-5); }
#blogGrid .post-card {
  padding: 0; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#blogGrid .post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #DADAE0; }
#blogGrid .post-card-thumb { margin: 0; border-radius: 0; aspect-ratio: 16 / 9; }
#blogGrid .post-card-thumb img { transition: transform .4s ease; }
#blogGrid .post-card:hover .post-card-thumb img { transform: scale(1.04); }
#blogGrid .post-card > :not(.post-card-thumb) { margin-left: var(--sp-5); margin-right: var(--sp-5); }
#blogGrid .post-cat {
  align-self: flex-start; margin-top: var(--sp-4); margin-bottom: var(--sp-2); padding: 0.22rem 0.65rem; border-radius: var(--radius-pill);
  background: var(--orange-tint); color: #B84A00; font-size: 0.7rem; letter-spacing: 0.08em;
}
#blogGrid .post-card h3 { font-size: 1.1rem; line-height: 1.35; margin-bottom: var(--sp-2); }
#blogGrid .post-card h3 a::after { content: ""; position: absolute; inset: 0; } /* whole card is clickable */
#blogGrid .post-card { position: relative; }
#blogGrid .post-card .muted.small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; line-height: 1.55; }
#blogGrid .post-card-meta { margin-bottom: var(--sp-5); display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: var(--sp-3); }
#blogGrid .post-card-meta::after { content: "Read \2192"; font-weight: 700; color: var(--orange); font-size: var(--fs-tiny); }

/* first card on page one */
@media (min-width: 900px) {
  #blogGrid .post-card.is-featured { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; column-gap: var(--sp-6); }
  #blogGrid .post-card.is-featured .post-card-thumb { grid-row: 1 / -1; aspect-ratio: auto; min-height: 300px; height: 100%; }
  #blogGrid .post-card.is-featured > :not(.post-card-thumb) { margin-left: 0; margin-right: var(--sp-6); }
  #blogGrid .post-card.is-featured .post-cat { margin-top: var(--sp-6); }
  #blogGrid .post-card.is-featured h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.02em; line-height: 1.2; }
  #blogGrid .post-card.is-featured .muted.small { font-size: 1rem; -webkit-line-clamp: 4; line-clamp: 4; }
  #blogGrid .post-card.is-featured::before { content: "Latest"; position: absolute; top: var(--sp-4); left: var(--sp-4); z-index: 1; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); background: var(--ink-strong); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
}

/* pagination */
.blog-page-btn { border-radius: 12px; min-width: 42px; }

/* ---------- community + counselling band ---------- */
.bx-band { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.bx-band-card { position: relative; overflow: hidden; padding: var(--sp-7) var(--sp-6); border-radius: var(--radius-lg); }
.bx-band-card h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; letter-spacing: -0.02em; margin: var(--sp-2) 0 var(--sp-3); max-width: 22ch; }
.bx-band-card p:not(.kicker) { margin: 0 0 var(--sp-5); max-width: 44ch; line-height: 1.6; }
.bx-band-app { background: var(--ink-strong); color: #fff; }
.bx-band-app::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(123,97,255,0.45), transparent 70%); }
.bx-band-app h2 { color: #fff; }
.bx-band-app .kicker { color: #FFA14A; }
.bx-band-app p:not(.kicker) { color: rgba(255,255,255,0.72); }
.bx-band-cta { background: linear-gradient(135deg, #FFF1E6 0%, #FFE3CC 100%); border: 1px solid var(--orange-tint-2); }
.bx-band-cta::after { content: ""; position: absolute; width: 260px; height: 260px; right: -100px; bottom: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(255,107,0,0.25), transparent 70%); }
.bx-band-card > * { position: relative; z-index: 1; }
.bx-band .pa-play { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.2rem 0.6rem 0.9rem; border-radius: 12px; background: #fff; color: #000; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; line-height: 1.05; transition: transform .15s ease; }
.bx-band .pa-play svg { width: 24px; height: 24px; }
.bx-band .pa-play small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.7; }
.bx-band .pa-play:hover { transform: translateY(-2px); text-decoration: none; color: #000; }

/* about */
.bx-about { padding-bottom: var(--sp-8); }
.bx-about-box { max-width: 900px; margin: 0 auto; border-radius: var(--radius-lg); }
.bx-about-box .kicker { margin-bottom: var(--sp-2); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .bx-hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .bx-topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bx-band { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bx-hero { padding: var(--sp-6) 0; }
  .bx-hero-cta { flex-wrap: nowrap; }
  .bx-hero-cta .btn { flex: 1 1 0; justify-content: center; padding-left: 0.8rem; padding-right: 0.8rem; font-size: 0.95rem; }
  .bx-stats { gap: var(--sp-2); }
  .bx-stats .blog-stat, .bx-stat { padding: var(--sp-4); }
  .bx-topic-grid { grid-template-columns: 1fr; }
  .bx-topic-p { display: none; }
  .bx-band-card { padding: var(--sp-6) var(--sp-5); }
}
@media (prefers-reduced-motion: reduce) {
  .bx-topic, #blogGrid .post-card, #blogGrid .post-card-thumb img, .bx-band .pa-play { transition: none; }
}