/* ============================================================
   Bluesky Financial Group - Blog layer (article + index)
   Builds on bluesky.css + bluesky-inner.css. Same palette and type.
   ============================================================ */

/* ---------- Compact navy header for blog pages ---------- */
.ihero.ihero-blog{min-height:0;background:var(--navy);padding-top:clamp(132px,14vw,184px);padding-bottom:clamp(44px,5.5vw,72px);}
.ihero.ihero-blog .ih-inner{max-width:720px;}
.ihero.ihero-blog .h1{max-width:none;}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:22px;
    font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(241,240,230,.72);}
.crumbs a{color:var(--sky);border-bottom:1px solid rgba(168,196,217,.4);padding-bottom:2px;}
.crumbs a:hover{color:var(--offwhite);}
.crumbs .sep{opacity:.6;}

/* ---------- Article body column ---------- */
.article-wrap{background:var(--offwhite);padding:clamp(40px,5vw,72px) var(--pad) clamp(72px,8vw,120px);}
.article-body{max-width:720px;margin:0 auto;line-height:1.7;color:var(--charcoal);
    font-size:clamp(16px,1.15vw,18px);}
.article-body p{margin:0 0 1.1em;}
.article-body p+p{margin-top:0;}
.article-body h2{font-family:var(--bergen);letter-spacing:.04em;font-weight:400;line-height:1.14;
    font-size:clamp(26px,2.6vw,36px);color:var(--navy);margin:1.65em 0 .7em;}
.article-body a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--sky);
    text-underline-offset:3px;text-decoration-thickness:2px;}
.article-body a:hover{text-decoration-color:var(--navy);}
.article-body ul,.article-body ol{margin:0 0 1.3em;padding-left:1.4em;}
.article-body ul{list-style:disc;}
.article-body ol{list-style:decimal;}
.article-body li{margin-bottom:.6em;padding-left:.2em;}
.article-body strong{font-weight:600;color:var(--navy);}

/* ---------- Images ---------- */
.article-body img{display:block;max-width:100%;height:auto;margin:0 0 1.6em;}
.article-body img.feat{width:100%;margin-bottom:2em;}
.article-body img.wide{width:100%;}
.article-body img.portrait{max-width:400px;width:100%;margin-left:auto;margin-right:auto;}

/* ---------- Repayment table ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em;border:1px solid rgba(26,58,92,.18);}
.table-wrap table{border-collapse:collapse;width:100%;min-width:600px;font-size:15px;line-height:1.45;background:#fff;}
.table-wrap th,.table-wrap td{border:1px solid rgba(26,58,92,.14);padding:12px 14px;vertical-align:top;}
.table-wrap thead th{background:var(--navy);color:var(--offwhite);font-weight:500;text-align:right;}
.table-wrap td{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}
.table-wrap th:first-child,.table-wrap td:first-child{text-align:left;}
.table-wrap tbody tr:nth-child(even) td{background:rgba(212,196,176,.18);}

/* ---------- Formula box ---------- */
.article-body .formula{background:rgba(168,196,217,.22);border-left:3px solid var(--sky);
    padding:18px 22px;font-size:.95em;}

/* ---------- Closing disclaimers ---------- */
.article-body .disclaimer{font-size:13px;line-height:1.6;color:rgba(45,52,54,.68);margin-bottom:.8em;}
.article-body .disclaimer:first-of-type{margin-top:2.6em;}
.article-body .disclaimer + .disclaimer{margin-top:0;}

/* ---------- Blog index cards ---------- */
.blog-list{max-width:1080px;margin:0 auto;display:grid;gap:clamp(24px,3vw,40px);
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}
.blog-card{display:flex;flex-direction:column;background:#fff;border-top:2px solid var(--sky);
    color:var(--charcoal);transition:transform .3s ease,box-shadow .3s ease;}
.blog-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(26,58,92,.12);}
.blog-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;}
.blog-card .bc-body{padding:22px 24px 26px;}
.blog-card .bc-date{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(45,52,54,.62);}
.blog-card h2{font-family:var(--bergen);letter-spacing:.03em;font-weight:400;line-height:1.2;
    font-size:clamp(21px,1.8vw,25px);color:var(--navy);margin:10px 0 12px;}
.blog-card p{font-size:15px;line-height:1.6;margin:0;}
.blog-card .bc-more{display:inline-block;margin-top:16px;font-size:14px;color:var(--navy);
    border-bottom:1px solid var(--sky);padding-bottom:2px;}