/* ============ BLOG PREVIEW — additions on top of site.css ============
   Reuses site.css variables (--indigo, --indigo-2, --blue, --tan, --border, --shadow-card, --radius-*).
   Nothing here overrides site.css; it only adds blog-specific components. */

/* ---------- Breadcrumb ---------- */
.breadcrumb{display:flex;flex-wrap:wrap;gap:.4rem;font-size:.82rem;color:var(--text-2);margin-bottom:1.4rem;}
.breadcrumb a{color:var(--text-2);text-decoration:none;}
.breadcrumb a:hover{color:var(--blue);}
.breadcrumb .sep{color:var(--border);}
.breadcrumb .current{color:var(--text);font-weight:600;}

/* ---------- Category filter row ---------- */
.blog-filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin:2.4rem 0 3rem;}
.blog-filter-btn{
  padding:.55rem 1.15rem;border-radius:999px;border:1.5px solid var(--border);
  font-size:.85rem;font-weight:700;color:var(--text-2);background:#fff;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.blog-filter-btn:hover{border-color:var(--indigo);color:var(--indigo);}
.blog-filter-btn.is-active{background:var(--indigo);border-color:var(--indigo);color:#fff;}

/* ---------- Shared grid ---------- */
.blog-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;
  align-items:stretch;
}
.blog-grid > *{height:100%;}

/* ---------- VARIANT A: image-led cards ---------- */
.blog-card{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .18s ease,box-shadow .18s ease;
}
a.blog-card{cursor:pointer;}
a.blog-card:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(14,9,41,.06),0 20px 40px -18px rgba(14,9,41,.18);}
.blog-card-media{aspect-ratio:16/10;overflow:hidden;background:var(--indigo-2);}
.blog-card-media img{width:100%;height:100%;object-fit:cover;display:block;}
.blog-card-body{padding:1.5rem 1.5rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1;}
.blog-card-cat{
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--blue);
}
.blog-card h3{font-size:1.12rem;line-height:1.32;font-weight:800;color:var(--text);}
.blog-card-excerpt{font-size:.92rem;color:var(--text-2);line-height:1.55;flex:1;}
.blog-card-meta{
  font-size:.78rem;color:var(--text-2);padding-top:.9rem;margin-top:.2rem;
  border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;
}
.blog-card-meta .read-more{color:var(--blue);font-weight:700;}

/* Featured card (first item): spans two columns, media on the side on desktop */
.blog-card.is-featured{grid-column:span 2;}
.blog-card.is-featured .blog-card-inner{display:grid;grid-template-columns:1.05fr 1fr;height:100%;}
.blog-card.is-featured .blog-card-media{aspect-ratio:auto;height:100%;}
.blog-card.is-featured .blog-card-body{padding:2.1rem 2.2rem;justify-content:center;}
.blog-card.is-featured h3{font-size:1.55rem;line-height:1.28;}
.blog-card.is-featured .blog-card-excerpt{font-size:1rem;}
.blog-card.is-featured .blog-card-cat{color:var(--blue);}

/* ---------- VARIANT B: no-photo typographic cards ---------- */
.blog-grid.is-typographic{gap:1.4rem;}
.tcard{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--border);border-top:3px solid var(--cat-color,var(--blue));
  border-radius:var(--radius-sm);padding:2rem 1.9rem 1.8rem;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
a.tcard{cursor:pointer;}
a.tcard:hover{transform:translateY(-3px);box-shadow:0 20px 40px -20px rgba(14,9,41,.18);}
.tcard-cat{
  font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  color:var(--cat-color,var(--blue));margin-bottom:1.3rem;
}
.tcard-rule{width:34px;height:2px;background:var(--cat-color,var(--blue));margin-bottom:1.3rem;}
.tcard h3{font-size:1.32rem;line-height:1.28;font-weight:800;color:var(--text);letter-spacing:-0.01em;}
.tcard-excerpt{font-size:.93rem;color:var(--text-2);line-height:1.6;margin-top:.9rem;flex:1;}
.tcard-meta{
  font-size:.78rem;color:var(--text-2);padding-top:1.1rem;margin-top:1.4rem;
  border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;
}
.tcard-meta .read-more{color:var(--cat-color,var(--blue));font-weight:700;}

/* Featured typographic card */
.tcard.is-featured{grid-column:span 2;padding:2.6rem 2.8rem;justify-content:center;}
.tcard.is-featured h3{font-size:2rem;line-height:1.2;}
.tcard.is-featured .tcard-excerpt{font-size:1.02rem;max-width:640px;}

/* Category colour system (Variant B) — derived tints of the existing brand palette */
.cat-careers{--cat-color:var(--blue);}
.cat-compliance{--cat-color:var(--indigo-2);}
.cat-interviews{--cat-color:#5c7ba3;}
.cat-salary{--cat-color:var(--indigo);}
.cat-certifications{--cat-color:#8a6f5e;}

/* ---------- Article page ---------- */
.article-head{max-width:760px;margin:0 auto;text-align:left;}
.article-cat{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:1rem;}
.article-head h1{font-size:clamp(2rem,4.4vw,2.8rem);text-align:left;}
.article-dek{font-size:1.12rem;color:var(--text-2);margin-top:1.1rem;line-height:1.6;}
.article-byline{
  display:flex;align-items:center;gap:.9rem;margin-top:1.8rem;padding-top:1.6rem;
  border-top:1px solid var(--border);font-size:.9rem;color:var(--text-2);
}
.article-byline .avatar{
  width:42px;height:42px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1px solid var(--border);
}
.article-byline strong{color:var(--text);display:block;font-size:.94rem;}
.article-hero-media{max-width:960px;margin:2.6rem auto 0;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);}
.article-hero-media img{width:100%;height:auto;max-height:440px;object-fit:cover;display:block;}

.article-body{max-width:680px;margin:3rem auto 0;font-size:1.06rem;line-height:1.75;color:var(--text);}
.article-body p{margin-top:1.4rem;color:var(--text);}
.article-body h2{font-size:1.5rem;text-align:left;margin-top:2.6rem;letter-spacing:-0.01em;}
.article-body h3{font-size:1.14rem;text-align:left;margin-top:1.8rem;color:var(--indigo);}
.article-body blockquote{
  margin:2.2rem 0;padding:1.6rem 1.8rem;background:var(--indigo-2);color:#fff;
  border-radius:var(--radius-sm);font-size:1.18rem;font-weight:700;line-height:1.5;letter-spacing:-0.01em;
}
.article-body blockquote cite{display:block;margin-top:.8rem;font-size:.8rem;font-weight:600;color:#9fc1ea;font-style:normal;}
.takeaway-box{
  margin:2.2rem 0;padding:1.7rem 1.9rem;background:#eef4fb;border:1px solid #d7e6f5;border-radius:var(--radius-sm);
}
.takeaway-box p.takeaway-h{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--blue);margin-bottom:1rem;}
.takeaway-box ul{display:flex;flex-direction:column;gap:.7rem;}
.takeaway-box li{padding-left:1.5rem;position:relative;font-size:.96rem;color:var(--text);line-height:1.5;}
.takeaway-box li::before{content:"";position:absolute;left:.15rem;top:.42rem;width:.42rem;height:.42rem;border-radius:50%;background:var(--blue);}
/* In-article text links: brand blue + underline so they read as links (were navy, no underline).
   Buttons (the mid-body CTA) are excluded. #2E6FBD on the page bg = 4.97:1, hover #22548f = 7.5:1. */
.article-body a:not(.btn){
  color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(46,111,189,.55);
  transition:color .15s ease,text-decoration-color .15s ease;
}
.article-body a:not(.btn):hover,.article-body a:not(.btn):focus-visible{
  color:var(--blue-dark);text-decoration-color:currentColor;text-decoration-thickness:2px;
}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .blog-card.is-featured{grid-column:span 2;}
  .blog-card.is-featured .blog-card-inner{grid-template-columns:1fr;}
  .blog-card.is-featured .blog-card-media{aspect-ratio:16/9;}
}
@media (max-width:640px){
  .blog-grid{grid-template-columns:1fr;}
  .blog-card.is-featured,.tcard.is-featured{grid-column:span 1;}
  .blog-card.is-featured h3,.tcard.is-featured h3{font-size:1.4rem;}
  .tcard.is-featured{padding:2rem 1.7rem;}
  .article-byline{flex-wrap:wrap;}
}

/* ---- In-article booking CTA (mid-body). Deliberately visually distinct from the
   surrounding prose so it reads as an offer, not as a paragraph. ---- */
.article-cta-inline{
  margin:2.6rem 0;padding:1.9rem 2rem;border-radius:var(--radius-lg,18px);
  background:linear-gradient(160deg,#0B1F3D 0%,#03152E 100%);color:#fff;
  box-shadow:var(--shadow-card,0 10px 30px rgba(3,21,46,.12));
}
.article-cta-inline .aci-eyebrow{
  font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em;
  color:#6BA6FF;margin:0 0 .6rem;
}
.article-cta-inline .aci-copy{
  font-size:1rem;line-height:1.6;color:#D7E2F2;margin:0 0 1.3rem;max-width:52ch;
}
.article-cta-inline .btn{margin:0;}
@media (max-width:600px){
  .article-cta-inline{padding:1.5rem 1.3rem;}
  .article-cta-inline .btn{width:100%;justify-content:center;}
}