/* ============================================================
   THE BANKING CLUB - Resources / Blog
   Extends the shared design system. Navy #11243f, gold #C9A84C,
   cream #F5F4EF, Inter body, Fraunces for editorial headings.
   ============================================================ */

/* ---------- hero ---------- */
.bl-hero{
  background:linear-gradient(160deg,#16294a 0%,#0f2039 75%);
  position:relative;overflow:hidden;
}
.bl-hero:before{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(80% 70% at 75% 10%,#000,transparent);
  mask-image:radial-gradient(80% 70% at 75% 10%,#000,transparent);
}
/* keep .wrap's 28px side gutters, only change the vertical rhythm */
.bl-hero .wrap{position:relative;padding:56px 28px 64px;max-width:1160px}
.bl-hero .page-h1{max-width:820px;font-size:44px}
/* styles.css scopes its .sub colour to .phero, so it must be restated here
   or the copy inherits dark --ink and disappears against the navy. */
.bl-hero .sub{
  max-width:680px;color:#c2cdde;font-size:18.5px;line-height:1.6;margin:22px 0 0;
}
.bl-hero-index .wrap{padding:70px 28px 76px}
.bl-hero-index .page-h1{font-size:50px}

.bl-crumb{font-size:13px;color:#8ea0ba;margin-bottom:22px;letter-spacing:.01em}
.bl-crumb a{color:#8ea0ba;text-decoration:none;transition:color .18s}
.bl-crumb a:hover{color:var(--gold-soft)}
.bl-crumb span{margin:0 8px;opacity:.6}

.bl-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:26px;font-size:13.5px;color:#9fb0c6;letter-spacing:.02em;
}
.bl-meta span[aria-hidden]{opacity:.5}

/* ---------- cover ---------- */
.bl-coverwrap{margin-top:-44px;position:relative;z-index:2}
.bl-cover{aspect-ratio:16/9;background:#fff}
.bl-cover img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- article body ---------- */
.bl-body{padding:56px 0 20px;background:#fff}
.bl-prose{max-width:720px;margin:0 auto}
.bl-prose > *:first-child{margin-top:0}

.bl-prose p{
  font-size:17.5px;line-height:1.75;color:var(--ink);margin:0 0 24px;
}
.bl-prose h2{
  font-family:'Fraunces',Georgia,serif;
  color:var(--navy);font-size:30px;line-height:1.2;font-weight:600;
  letter-spacing:-.01em;margin:52px 0 18px;
}
.bl-prose h3{
  color:var(--navy);font-size:20.5px;line-height:1.3;font-weight:800;
  letter-spacing:-.005em;margin:38px 0 14px;
}
.bl-prose h4{
  color:var(--navy);font-size:17px;font-weight:800;margin:28px 0 10px;
}
.bl-prose ul,.bl-prose ol{margin:0 0 26px;padding-left:22px}
.bl-prose li{
  font-size:17.5px;line-height:1.7;color:var(--ink);margin-bottom:11px;padding-left:4px;
}
.bl-prose li::marker{color:var(--gold);font-weight:700}
.bl-prose a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--gold);transition:color .18s}
.bl-prose a:hover{color:var(--gold)}
.bl-prose strong{color:var(--navy);font-weight:700}
.bl-prose hr{border:none;border-top:1px solid var(--line);margin:44px 0}
.bl-prose blockquote{
  margin:34px 0;padding:22px 26px;background:var(--cream);
  border-left:3px solid var(--gold);border-radius:0 12px 12px 0;
}
.bl-prose blockquote p{margin:0;font-size:18px;line-height:1.65;color:var(--navy);font-weight:500}
.bl-prose code{
  background:var(--cream);padding:2px 6px;border-radius:5px;
  font-size:15px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ---------- cards ---------- */
.bl-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:14px;
}
.bl-card{
  display:flex;flex-direction:column;text-decoration:none;background:#fff;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
.bl-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm)}
.bl-card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.bl-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.bl-card:hover .bl-card-img img{transform:scale(1.04)}
.bl-card-body{display:flex;flex-direction:column;padding:20px 22px 24px;flex:1}
.bl-card-tag{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:11px;
}
.bl-card-title{
  font-size:19px;line-height:1.3;font-weight:800;color:var(--navy);
  letter-spacing:-.01em;margin-bottom:10px;
}
.bl-card-ex{font-size:14.5px;line-height:1.6;color:var(--muted);margin-bottom:16px;flex:1}
.bl-card-meta{font-size:12.5px;color:var(--muted);opacity:.85}

/* ---------- closing cta ---------- */
.bl-cta{background:var(--cream)}
.bl-cta-in{text-align:center;max-width:720px;margin:0 auto}
.bl-cta-in h2{
  color:var(--navy);font-size:33px;line-height:1.22;font-weight:600;letter-spacing:-.015em;
}
.bl-cta-in p{
  color:var(--muted);font-size:16.5px;line-height:1.65;margin:20px auto 28px;max-width:560px;
}

.bl-related{background:#fff;padding-top:76px}
.bl-related .bl-grid{grid-template-columns:repeat(2,1fr)}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .bl-grid{grid-template-columns:repeat(2,1fr)}
  .bl-hero .page-h1{font-size:37px}
  .bl-hero-index .page-h1{font-size:40px}
}
@media(max-width:680px){
  .bl-grid,.bl-related .bl-grid{grid-template-columns:1fr}
  .bl-hero .wrap,.bl-hero-index .wrap{padding:40px 28px 48px}
  .bl-hero .page-h1{font-size:30px;line-height:1.14}
  .bl-hero-index .page-h1{font-size:31px;line-height:1.14}
  .bl-hero .sub{font-size:16.5px}
  .bl-coverwrap{margin-top:-26px}
  .bl-body{padding:36px 0 8px}
  .bl-prose p,.bl-prose li{font-size:16.5px;line-height:1.72}
  .bl-prose h2{font-size:25px;margin:40px 0 15px}
  .bl-prose h3{font-size:18.5px;margin:30px 0 12px}
  .bl-cta-in h2{font-size:25px}
  .bl-related{padding-top:56px}
}