/* Blog (overzicht + detail) — laadt naast trade.css. */
.adlabel { background: #F3EAD7; color: #8A6D2F; border: 1px solid #E4D4AE; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.blogavatar { width: 46px; height: 46px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 15px; flex: none; }
.blogavatar--sm { width: 26px; height: 26px; font-size: 10px; }
.blogavatar--lg { width: 60px; height: 60px; font-size: 20px; }
.blogauthor { display: flex; align-items: center; gap: 13px; font-size: 13.5px; line-height: 1.4; }
.blogauthor--center { justify-content: center; }
.blogauthor__id { text-align: left; }
.blogauthor__meta { display: block; color: #8A8B91; }

/* Masthead */
.blogmast { max-width: 1200px; margin: 0 auto; padding: 30px 32px 26px; }
.blogmast__eyebrow { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 16px; }
.blogmast__dot { width: 5px; height: 5px; border-radius: 50%; background: #C9C6BE; }
.blogmast__cadence { color: #8A8B91; font-weight: 500; }
.blogmast__title { font-size: 58px; font-weight: 700; letter-spacing: -.04em; line-height: 1.02; max-width: 860px; margin-bottom: 18px; }
.blogmast__lead { font-size: 19px; line-height: 1.5; color: #55565C; max-width: 620px; }
.blogmast__chips { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 28px; }
.blogchip { font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: 100px; border: 1px solid; text-decoration: none; }
.blogmast__disclaimer { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; font-size: 12.5px; color: #8A8B91; }

/* Featured column */
.blogfeat__wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px 56px; }
.blogfeat { display: grid; grid-template-columns: 1fr 1fr; background: #fff; border-radius: 30px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 30px 60px -40px rgba(0,0,0,.3); transition: transform .2s; }
.blogfeat:hover { transform: translateY(-3px); }
.blogfeat__media { position: relative; min-height: 380px; display: flex; align-items: flex-end; padding: 30px; }
.blogfeat__badge { position: absolute; top: 26px; left: 30px; background: rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 7px 14px; border-radius: 100px; backdrop-filter: blur(6px); }
.blogfeat__body { padding: 48px 46px; display: flex; flex-direction: column; justify-content: center; }
.blogfeat__topic { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 14px; }
.blogfeat__title { font-size: 36px; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; margin-bottom: 16px; }
.blogfeat__excerpt { font-size: 16.5px; line-height: 1.55; color: #55565C; margin-bottom: 26px; }

/* Feed + sidebar */
.bloglayout { max-width: 1200px; margin: 0 auto; padding: 0 32px 90px; display: grid; grid-template-columns: 1fr 330px; gap: 52px; align-items: start; }
.blogfeed__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; padding-bottom: 18px; border-bottom: 2px solid #17181C; }
.blogfeed__title { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.blogfeed__sub { font-size: 13.5px; color: #8A8B91; }
.blogrow { display: grid; grid-template-columns: 200px 1fr; gap: 26px; padding: 26px 0; border-bottom: 1px solid #E7E2DA; text-decoration: none; color: inherit; }
.blogrow:hover { opacity: .92; }
.blogrow__thumb { height: 148px; border-radius: 18px; display: flex; align-items: flex-start; gap: 6px; padding: 14px; position: relative; overflow: hidden; }
.blogrow__tag { font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 100px; border: 1px solid transparent; }
.blogrow__body { display: flex; flex-direction: column; justify-content: center; }
.blogrow__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; line-height: 1.18; margin-bottom: 9px; }
.blogrow__excerpt { font-size: 14.5px; line-height: 1.5; color: #55565C; margin-bottom: 16px; }
.blogrow__meta { display: flex; align-items: center; gap: 11px; font-size: 13px; color: #8A8B91; flex-wrap: wrap; }
.blogrow__author { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #55565C; }
.blogsep { color: #C9C6BE; }
.blogrow__react { margin-left: auto; color: #B0AFA6; }

.blogside { position: sticky; top: 90px; display: grid; gap: 22px; }
.blogside__card { background: #fff; border-radius: 24px; padding: 26px 24px; }
.blogside__label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8A8B91; margin-bottom: 6px; }
.blogpop { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px 0; border-top: 1px solid #F0ECE4; text-decoration: none; color: inherit; }
.blogpop__n { font-family: "Bricolage Grotesque", sans-serif; font-size: 22px; font-weight: 700; color: #DAD6CD; line-height: 1; }
.blogpop__topic { display: block; font-size: 11px; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.blogpop__title { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.25; margin-bottom: 5px; }
.blogpop__read { display: block; font-size: 12.5px; color: #8A8B91; }
.blognews { background: var(--accent); color: var(--accent-ink); border-radius: 24px; padding: 28px 24px; }
.blognews__title { font-size: 21px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 10px; }
.blognews__body { font-size: 14px; line-height: 1.5; opacity: .88; margin-bottom: 18px; }
.blognews__input { width: 100%; border: none; outline: none; background: rgba(255,255,255,.92); border-radius: 100px; padding: 12px 18px; font-family: inherit; font-size: 14px; color: #17181C; margin-bottom: 9px; }
.blognews__btn { width: 100%; background: #17181C; color: #fff; border: none; font-family: inherit; font-size: 14px; font-weight: 700; padding: 12px; border-radius: 100px; cursor: pointer; }
.blogtags { display: flex; flex-wrap: wrap; gap: 8px; }
.blogtag { background: #F3F0EB; color: #55565C; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 100px; }

/* Blog detail */
.blogpost__crumb, .blogpost__narrow { max-width: 760px; margin-left: auto; margin-right: auto; }
.blogpost__head { max-width: 760px; margin: 0 auto; padding: 30px 32px 0; text-align: center; }
.blogpost__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; margin-bottom: 20px; }
.blogpost__topic { padding: 6px 14px; border-radius: 100px; }
.blogpost__date { color: #8A8B91; font-weight: 500; }
.blogpost__title { font-size: 50px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05; margin-bottom: 20px; }
.blogpost__standfirst { font-size: 21px; line-height: 1.5; color: #55565C; margin: 0 auto 28px; max-width: 640px; }
.blogpost__narrow { padding: 24px 32px 0; }
.blogpost__indep { text-align: center; }
.blogindep { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: #1E9E62; font-weight: 600; }
.addisclosure { display: flex; gap: 14px; align-items: flex-start; background: #FBF2DD; border: 1px solid #E9D9B4; border-radius: 18px; padding: 18px 20px; }
.addisclosure p { font-size: 14px; line-height: 1.5; color: #6E5A2C; margin: 0; }
.blogpost__hero { max-width: 1080px; margin: 0 auto; padding: 34px 32px 0; }
.blogpost__heroimg { height: 440px; border-radius: 28px; }
img.blogpost__heroimg { width: 100%; object-fit: cover; display: block; }
/* Gegenereerde chart-hero: laat 'm op eigen 2:1-ratio schalen i.p.v. vaste hoogte. */
.blogpost__herochart { height: auto; overflow: hidden; line-height: 0; }
.blogpost__herochart svg { display: block; width: 100%; height: auto; border-radius: 28px; }
.blogpost__herocap { font-size: 12.5px; color: #9A9BA1; margin-top: 12px; text-align: center; }
.blogpost__body { max-width: 680px; margin: 0 auto; padding: 40px 32px 0; }
/* Marktanalyse: verplichte 'geen beleggingsadvies'-voetnoot onder de analyse. */
.analysenote { margin: 36px 0 0; padding: 16px 20px; background: #FBF9F6; border: 1px solid #ECE8E1; border-left: 3px solid #1F9D57; border-radius: 12px; font-size: 14px; line-height: 1.55; color: #5A5B61; }
.analysenote strong { color: #17181C; }
/* Marktanalyse: bronnenlijst (web search + data-API's) onderaan de analyse. */
.analyse-bronnen { margin: 30px 0 0; }
.analyse-bronnen ul { margin: 0; padding-left: 20px; }
.analyse-bronnen li { font-size: 14px; margin-bottom: 6px; word-break: break-word; }
.analyse-bronnen a { color: var(--accent); }

.adsteps { display: grid; gap: 14px; margin: 30px 0; }
.adstep { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: start; background: #fff; border: 1px solid #E7E2DA; border-radius: 18px; padding: 20px 22px; }
.adstep__n { width: 46px; height: 46px; border-radius: 13px; background: #17181C; color: #fff; display: flex; align-items: center; justify-content: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px; }
.adstep__t { font-size: 17px; font-weight: 700; margin-bottom: 5px; }
.adstep__d { font-size: 15px; line-height: 1.5; color: #55565C; }
.adcta { background: #17181C; border-radius: 24px; padding: 30px 32px; margin-top: 8px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.adcta__id { display: flex; align-items: center; gap: 16px; }
.adcta__logo { width: 54px; height: 54px; border-radius: 14px; background: #fff; color: #17181C; display: flex; align-items: center; justify-content: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 16px; }
.adcta__label { color: #fff; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.adcta__sub { color: #9A9BA1; font-size: 13px; margin-top: 3px; }
.addisclaimer { font-size: 12px; color: #9A9BA1; line-height: 1.5; margin-top: 14px; }
.blogreact { display: flex; align-items: center; gap: 14px; padding: 22px 0; margin-top: 8px; border-top: 1px solid #E7E2DA; border-bottom: 1px solid #E7E2DA; }
.blogreact__like { background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 100px; }
.blogreact__comments { background: #fff; color: #55565C; border: 1px solid #E6E2DC; font-weight: 600; font-size: 14px; padding: 11px 18px; border-radius: 100px; text-decoration: none; }
.blogbio { display: flex; gap: 18px; align-items: flex-start; background: #fff; border-radius: 24px; padding: 28px; margin-top: 28px; max-width: 680px; margin-left: auto; margin-right: auto; }
.blogbio__label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8A8B91; margin-bottom: 5px; }
.blogbio__name { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.blogbio__text { font-size: 14.5px; line-height: 1.55; color: #55565C; margin-bottom: 12px; }
.blogbio__more { font-size: 14px; font-weight: 700; color: var(--accent); text-decoration: none; }

.blogcomments__title { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 20px; }
.blogcomment__form { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: #fff; border-radius: 18px; padding: 12px; margin-bottom: 26px; }
.blogcomment__name { flex: none; width: 150px; border: 1px solid #E6E2DC; border-radius: 100px; padding: 11px 16px; font-family: inherit; font-size: 14.5px; }
.blogcomment__text { flex: 1; min-width: 180px; border: 1px solid #E6E2DC; border-radius: 100px; padding: 11px 16px; font-family: inherit; font-size: 15px; }
.blogcomment__btn { background: #17181C; color: #fff; border: none; font-family: inherit; font-size: 14px; font-weight: 600; padding: 11px 22px; border-radius: 100px; cursor: pointer; }
.blogcomment { display: grid; grid-template-columns: 42px 1fr; gap: 14px; padding: 18px 0; border-top: 1px solid #E7E2DA; }
.blogcomment__head { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.blogcomment__name2 { font-size: 14.5px; font-weight: 700; }
.blogcomment__badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 100px; }
.blogcomment__time { font-size: 12.5px; color: #9A9BA1; }
.blogcomment__body { font-size: 15px; line-height: 1.55; color: #3A3B40; margin: 0; }
.formnote--ok { background: #E7F3EA; color: #1E7A47; border-radius: 12px; padding: 12px 16px; font-size: 14px; margin-bottom: 16px; max-width: 760px; margin-left: auto; margin-right: auto; }

.blognext { max-width: 1200px; margin: 0 auto; padding: 56px 32px 90px; }
.blognext__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 2px solid #17181C; }
.blognext__title { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.blognext__link { font-size: 14.5px; font-weight: 600; color: #8A8B91; text-decoration: none; }
.blognextcard { background: #fff; border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 4px rgba(0,0,0,.03), 0 20px 40px -30px rgba(0,0,0,.2); transition: transform .2s; }
.blognextcard:hover { transform: translateY(-4px); }
.blognextcard__thumb { height: 150px; display: flex; align-items: flex-start; padding: 18px; position: relative; overflow: hidden; }
.blognextcard__tag { background: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 100px; position: relative; z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
/* Featured image (analyse chart-kaart) over de gradient/thumb_color in blog-kaarten. */
.blogthumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.blogrow__tag { position: relative; z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.blognextcard__body { padding: 24px; }
.blognextcard__title { font-size: 19px; font-weight: 700; letter-spacing: -.01em; line-height: 1.22; margin-bottom: 12px; }
.blognextcard__meta { font-size: 13.5px; color: #8A8B91; }
.blognextcard__meta strong { color: #55565C; }

@media (max-width: 920px) {
  .blogmast__title { font-size: 40px; }
  .blogfeat { grid-template-columns: 1fr; }
  .blogfeat__media { min-height: 220px; }
  .blogfeat__body { padding: 32px 28px; }
  .bloglayout { grid-template-columns: 1fr; gap: 40px; }
  .blogside { position: static; }
  .blogrow { grid-template-columns: 130px 1fr; gap: 16px; }
  .blogrow__thumb { height: 100px; }
  .blogrow__title { font-size: 18px; }
  .blogpost__title { font-size: 34px; }
  .blogpost__heroimg { height: 280px; }
}