/* Blog Amoura: gedeelde stijl voor /blog/ en de artikelen. Zelfde tokens als index.html. */
:root{
  --night:#0F131C; --navy:#141A27; --paper:#EEEDE9; --paper-2:#E3E1DB; --card:#FAFAF8;
  --ink:#141927; --ink-soft:#585E6D; --line:rgba(20,25,39,.14);
  --on-night:#EEEAE3; --on-night-soft:#A6ACB9; --night-line:rgba(238,234,227,.14);
  --gold:#B08D3C; --gold-hover:#C09C4E; --gold-ink:#7A6128;
  --f-display:'Bodoni Moda', Didot, 'Bodoni 72', Georgia, serif;
  --f-body:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:'DM Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme:light;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{max-width:100%; height:auto; display:block;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px;}
.wrap{max-width:1120px; margin:0 auto; padding-inline:20px;}
@media (min-width:720px){ .wrap{padding-inline:32px;} }

/* Bovenbalk */
.top{background:var(--night); color:var(--on-night); position:sticky; top:0; z-index:10; border-bottom:1px solid var(--night-line);}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:64px;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand span{font-family:var(--f-display); font-size:19px; letter-spacing:.04em; white-space:nowrap;}
.top nav{display:flex; align-items:center; gap:22px;}
.top nav a:not(.btn){font-size:15px; color:var(--on-night-soft); text-decoration:none; white-space:nowrap;}
.top nav a:not(.btn):hover, .top nav a[aria-current]{color:var(--on-night);}
@media (max-width:520px){ .top nav .hide-s{display:none;} .brand span{font-size:16px;} .top .btn{padding:10px 12px; font-size:11px; letter-spacing:.12em; min-height:40px;} }

/* Knoppen */
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase; padding:15px 24px; border-radius:2px; min-height:48px; white-space:nowrap; transition:background .2s;}
.btn-gold{background:var(--gold); color:var(--navy);}
.btn-gold:hover{background:var(--gold-hover);}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:#000;}
.top .btn{padding:11px 16px; min-height:42px; font-size:12px;}

.label{font-size:12px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-ink);}
.label a{text-decoration:none;}
.label a:hover{text-decoration:underline;}
.meta{font-family:var(--f-mono); font-size:13px; color:var(--ink-soft); margin-top:16px;}

/* Blogoverzicht */
.blog-head{padding-block:72px 32px;}
.blog-head h1{font-family:var(--f-display); font-weight:400; font-size:clamp(40px,7vw,68px); line-height:1.02; margin:12px 0 0;}
.blog-head h1 em{color:var(--gold-ink);}
.blog-head p{color:var(--ink-soft); max-width:520px; margin:18px 0 0;}
.cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; padding-bottom:96px;}
@media (max-width:900px){ .cards{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ .cards{grid-template-columns:1fr;} }
.card{background:var(--card); border:1px solid var(--line); border-radius:2px; text-decoration:none; display:flex; flex-direction:column; transition:border-color .2s;}
.card:hover{border-color:rgba(176,141,60,.6);}
.card .pic{aspect-ratio:4/3; overflow:hidden; background:var(--night);}
.card .pic img{width:100%; height:100%; object-fit:cover;}
.card .body{padding:22px 22px 26px; display:flex; flex-direction:column; gap:10px; flex:1;}
.card h2{font-family:var(--f-display); font-weight:400; font-size:25px; line-height:1.18; margin:0;}
.card p{margin:0; font-size:15.5px; line-height:1.6; color:var(--ink-soft);}
.card .more{margin-top:auto; padding-top:8px; font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-ink);}

/* Mini boarding pass (kaart en artikel zonder foto) */
.pass-art{height:100%; display:grid; place-items:center; background:var(--night); padding:22px;}
.mini-pass{width:100%; max-width:330px; display:grid; grid-template-columns:1fr 78px; border:1px solid rgba(176,141,60,.55); border-radius:4px; color:var(--on-night); background:var(--navy);}
.mini-pass .main{padding:14px 16px; border-right:1px dashed rgba(176,141,60,.45);}
.mini-pass .k{font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--on-night-soft);}
.mini-pass .route{display:flex; align-items:center; gap:10px; font-family:var(--f-display); font-size:30px; margin:6px 0 8px; line-height:1;}
.mini-pass .route svg{color:var(--gold); flex:none;}
.mini-pass .route .q{color:var(--gold);}
.mini-pass .stub{padding:14px 10px; display:flex; flex-direction:column; justify-content:space-between; gap:8px;}
.mini-pass .stub b{display:block; white-space:nowrap; font-family:var(--f-mono); font-weight:400; font-size:12px; color:var(--on-night); letter-spacing:.06em;}
.mini-pass .bars{height:22px; background:repeating-linear-gradient(90deg, var(--on-night-soft) 0 1px, transparent 1px 3px, var(--on-night-soft) 3px 5px, transparent 5px 7px);}
.mini-pass .gold{color:var(--gold);}

/* Artikel */
.post-head{padding-block:64px 28px;}
.post-head .wrap, .post .wrap{max-width:760px;}
.post-head h1{font-family:var(--f-display); font-weight:400; font-size:clamp(36px,6vw,56px); line-height:1.06; margin:12px 0 0; text-wrap:balance;}
.post-head h1 em{color:var(--gold-ink);}
.post-head .intro{font-size:19px; line-height:1.65; color:var(--ink-soft); margin:20px 0 0;}
.hero-pic{max-width:1000px; margin:8px auto 0; padding-inline:20px;}
.hero-pic img{width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 60%; border-radius:2px;}
@media (max-width:600px){ .hero-pic{padding-inline:0;} .hero-pic img{aspect-ratio:4/5; border-radius:0;} }
.hero-pic .pass-art{background:transparent; padding:16px 0 8px;}
.hero-pic .mini-pass{max-width:560px; grid-template-columns:1fr 120px; border-radius:6px;}
.hero-pic .mini-pass .main{padding:24px 28px;}
.hero-pic .mini-pass .stub{padding:24px 18px;}
.hero-pic .mini-pass .k{font-size:12px;}
.hero-pic .mini-pass .route{font-size:52px; gap:16px; margin:12px 0 14px;}
.hero-pic .mini-pass .route svg{width:34px; height:34px;}
.hero-pic .mini-pass .stub b{font-size:15px; margin-top:4px;}
.hero-pic .mini-pass .bars{height:34px;}
@media (max-width:600px){ .hero-pic .pass-art{padding:8px 20px 0;} .hero-pic .mini-pass{grid-template-columns:1fr 96px;} .hero-pic .mini-pass .stub b{font-size:13px;} .hero-pic .mini-pass .main{padding:16px 18px;} .hero-pic .mini-pass .stub{padding:16px 10px;} .hero-pic .mini-pass .route{font-size:36px; gap:10px;} .hero-pic .mini-pass .route svg{width:24px; height:24px;} }
figcaption{font-size:13.5px; color:var(--ink-soft); margin-top:10px; line-height:1.5;}
.hero-pic figcaption{padding-inline:0;}
@media (max-width:600px){ .hero-pic figcaption{padding-inline:20px;} }

.post{padding-block:40px 40px;}
.post h2{font-family:var(--f-display); font-weight:400; font-size:clamp(27px,4vw,34px); line-height:1.18; margin:56px 0 14px; text-wrap:balance;}
.post h3{font-family:var(--f-display); font-weight:500; font-size:min(22px, calc((100vw - 40px) * .0438)); line-height:1.25; margin:36px 0 8px;}
.post p{margin:0 0 16px; color:#30364A;}
.post ul, .post ol{padding-left:22px; margin:0 0 18px; color:#30364A;}
.post li{margin-bottom:8px;}
.post strong{color:var(--ink); font-weight:600;}
.post a:not(.btn){color:var(--ink); text-decoration-color:var(--gold); text-underline-offset:3px;}
.post figure{margin:32px 0;}
.post figure img, .post figure video{display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:2px; background:var(--paper-2);}
.pair figure img, .pair figure video{aspect-ratio:4/5;}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:32px 0;}
.pair figure{margin:0;}
@media (max-width:520px){ .pair{grid-template-columns:1fr;} }

/* Feitenblok */
.facts{background:var(--card); border:1px solid var(--line); border-radius:2px; padding:22px 24px; margin:28px 0 8px;}
.facts dl{display:grid; grid-template-columns:auto 1fr; gap:10px 22px; margin:0;}
.facts dt{font-family:var(--f-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-ink); padding-top:3px;}
.facts dd{margin:0; color:var(--ink); font-size:16px; line-height:1.55;}
@media (max-width:520px){ .facts dl{grid-template-columns:1fr; gap:2px;} .facts dd{margin-bottom:10px;} }

/* Genummerde ideeën */
.idea{display:grid; grid-template-columns:44px 1fr; gap:4px 14px; margin:36px 0 0;}
.idea .n{font-family:var(--f-display); font-style:italic; font-size:30px; line-height:1; color:var(--gold-ink); padding-top:4px;}
.idea h3{margin:0 0 6px;}
.idea p:last-child{margin-bottom:0;}

/* Tip van Joerie */
.tip{border-left:2px solid var(--gold); padding:4px 0 4px 18px; margin:24px 0;}
.tip p{margin:0; font-family:var(--f-display); font-style:italic; font-size:18px; line-height:1.5; color:var(--ink);}
.tip span{display:block; font-family:var(--f-body); font-style:normal; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); margin-top:8px;}

/* Stappen */
.steps{list-style:none; padding:0 !important; margin:24px 0; display:grid; gap:0; border-top:1px solid var(--line);}
.steps li{display:grid; grid-template-columns:72px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); margin:0;}
.steps .t{font-family:var(--f-mono); font-size:13px; color:var(--gold-ink); padding-top:3px;}
.steps b{display:block; color:var(--ink); font-weight:600;}

/* CTA-blok */
.cta-box{background:var(--night); color:var(--on-night); border-radius:2px; padding:40px 32px; margin:56px 0 8px; text-align:left;}
.cta-box .label{color:var(--gold);}
.cta-box h2{color:var(--on-night); margin:10px 0 12px !important;}
.cta-box h2 em{color:var(--gold);}
.cta-box p{color:var(--on-night-soft) !important; max-width:520px;}
.cta-box .btn{margin-top:10px;}
.cta-box .small{font-size:14px; margin:14px 0 0;}
@media (max-width:520px){ .cta-box{padding:32px 22px;} .cta-box .btn{width:100%; justify-content:center;} }

/* Inline CTA (kort) */
.inline-cta{background:var(--card); border:1px solid rgba(176,141,60,.5); border-radius:2px; padding:22px 24px; margin:22px 0;}
.inline-cta p{margin:0 0 12px;}
.inline-cta .btn{font-size:12px;}

/* Vragen */
.faq details{border-bottom:1px solid var(--line); padding:4px 0;}
.faq details:first-of-type{border-top:1px solid var(--line);}
.faq summary{cursor:pointer; list-style:none; padding:14px 30px 14px 0; position:relative; font-weight:500; color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; position:absolute; right:4px; top:12px; font-family:var(--f-body); font-weight:400; font-size:22px; line-height:1; color:var(--gold-ink);}
.faq details[open] summary::after{content:'\2013';}
.faq details p{margin:0 0 16px;}

/* Meer lezen */
.more-posts{border-top:1px solid var(--line); padding-block:48px 88px;}
.more-posts .wrap{max-width:760px;}
.more-posts ul{list-style:none; padding:0; margin:14px 0 0;}
.more-posts li{border-bottom:1px solid var(--line);}
.more-posts a{display:flex; justify-content:space-between; gap:16px; padding:16px 0; text-decoration:none; font-family:var(--f-display); font-size:21px; line-height:1.3;}
.more-posts a span{color:var(--gold-ink); font-family:var(--f-body);}
.more-posts a:hover{color:var(--gold-ink);}

/* Footer */
footer{background:var(--night); color:var(--on-night-soft); font-size:14px; padding-block:36px calc(36px + env(safe-area-inset-bottom, 0px));}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:space-between;}
footer a{color:var(--on-night-soft);}

/* Inhoudsopgave */
.toc{background:var(--card); border:1px solid var(--line); border-radius:2px; padding:20px 24px; margin:28px 0 8px;}
.toc b{display:block; font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:8px;}
.toc ol{margin:0; padding-left:20px;}
.toc li{margin:4px 0;}
.toc a{text-decoration:none !important;}
.toc a:hover{text-decoration:underline !important;}
.post h2[id]{scroll-margin-top:84px;}

/* Kopknop: op mobiel een dun gouden knopje "Aanvragen"; het logo gaat naar de homepage */
.top .btn .s{display:none;}
@media (max-width:520px){ .top .btn{background:transparent; color:var(--gold); border:1px solid var(--gold);} .top .btn:hover{background:rgba(176,141,60,.12);} .top .btn .l{display:none;} .top .btn .s{display:inline;} }
.post .small-facts{font-size:14px; line-height:1.6; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:10px; margin-top:-4px;}
.post .small-facts strong{color:var(--ink); font-weight:600;}
.post h3[id]{scroll-margin-top:84px;}
