/* Blog overview page — v0111 cleanup
   Scoped page layout only.
   Do not style global header/footer/buttons/forms/review components here.
*/

.blog-page main,
.blog-page-main{
  background:var(--cream);
}

.blog-hero{
  position:relative;
  overflow:hidden;
  padding:150px 0 54px;
  background:var(--cream);
}

.blog-hero h1{
  max-width:16ch;
  margin-top:22px;
  font-size:clamp(2.7rem, 5.4vw, 4.4rem);
  letter-spacing:-.02em;
}

.blog-hero h1 em{
  font-style:italic;
  color:var(--terracotta);
}

.blog-hero-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:var(--df-media-content-gap-desktop, 56px);
  align-items:end;
  margin-top:34px;
}

.blog-lead{
  max-width:46ch;
  color:var(--ink-soft);
  font-size:1.16rem;
  line-height:1.7;
}

.blog-hero-actions{
  margin-top:30px;
}

.blog-stat{
  text-align:right;
}

.blog-stat-number{
  font-family:var(--serif);
  font-size:3.3rem;
  line-height:1;
  font-weight:600;
  color:var(--terracotta);
}

.blog-stat-label{
  margin-top:6px;
  color:var(--ink-soft);
  font-size:.8rem;
  line-height:1.3;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.blog-ticker{
  overflow:hidden;
  padding:16px 0;
  white-space:nowrap;
  background:var(--ink);
  color:var(--cream);
  border-top:3px solid #e0a458;
}

.blog-ticker-track{
  display:inline-flex;
  animation:blog-scroll 38s linear infinite;
}

.blog-ticker span{
  display:inline-flex;
  align-items:center;
  gap:26px;
  padding:0 26px;
  font-family:var(--serif);
  font-size:1.45rem;
  font-style:italic;
}

.blog-ticker span::after{
  content:"✦";
  color:#e0a458;
  font-size:.9rem;
  font-style:normal;
}

@keyframes blog-scroll{
  to{transform:translateX(-50%)}
}

.blog-topics{
  padding:var(--df-section-y, 92px) 0;
}

.blog-section-head{
  max-width:42rem;
  margin-bottom:42px;
}

.blog-section-head h2{
  margin-top:16px;
  font-size:clamp(2rem,4vw,3.1rem);
}

.blog-section-head p{
  max-width:42ch;
  margin-top:16px;
  color:var(--ink-soft);
  font-size:1.05rem;
}

.blog-theme-list{
  gap:12px;
}

.blog-who-tags .tag-list__item{
  border:1px solid rgba(44,38,32,.16);
  background:rgba(252,250,243,.72);
  color:var(--ink);
}

.blog-reads{
  padding:48px 0 var(--df-section-y, 96px);
}

.blog-reads-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:38px;
}

.blog-reads-head h2{
  font-size:clamp(2rem,4vw,3rem);
}

.blog-text-link{
  color:var(--ink);
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid #e0a458;
  padding-bottom:3px;
}







.blog-byline{
  font-size:.86rem;
  color:var(--ink-soft);
}


.blog-tag{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;
  margin-bottom:20px;
  padding:7px 15px;
  border-radius:999px;
  background:var(--terracotta);
  color:var(--cream);
  font-size:.7rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.blog-tag-olive{
  background:var(--olive);
  color:var(--cream);
}

.blog-tag-gold{
  background:#e0a458;
  color:var(--ink);
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
}

.blog-card{
  display:flex;
  overflow:hidden;
  flex-direction:column;
  border:1px solid rgba(34,30,24,.14);
  border-radius:18px;
  background:#fcfaf3;
  color:var(--ink);
  text-decoration:none;
  transition:transform .28s ease, box-shadow .28s ease;
}

.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:0 30px 50px -32px rgba(34,30,24,.45);
}

.blog-card-image{
  position:relative;
  height:190px;
  background:var(--sand-deep);
}

.blog-card-image img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.blog-card-image .blog-tag{
  position:absolute;
  top:14px;
  left:14px;
  margin:0;
}

.blog-card-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:22px 22px 24px;
}

.blog-card h3{
  margin-bottom:12px;
  font-size:1.25rem;
  line-height:1.2;
}

.blog-card .blog-byline{
  margin-top:auto;
  padding-top:16px;
}

.blog-card .card-link{
  margin-top:16px;
}

.blog-card:hover .card-link .arr{
  transform:translateX(4px);
}

.blog-winwin{
  padding:90px 0;
  background:var(--olive);
  color:var(--cream);
}

.blog-winwin .eyebrow{
  color:#e0a458;
}

.blog-winwin h2{
  max-width:16ch;
  margin:16px 0;
  color:var(--cream);
  font-size:clamp(2rem,4vw,3.1rem);
}

.blog-winwin-lede{
  max-width:50ch;
  margin-bottom:44px;
  color:rgba(250,246,236,.82);
  font-size:1.07rem;
}

.blog-winwin-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.blog-win-card{
  padding:32px 28px;
  border:1px solid rgba(250,246,236,.22);
  border-radius:20px;
  background:rgba(250,246,236,.1);
}

.blog-icon{
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  margin-bottom:18px;
  border-radius:14px;
  background:#e0a458;
  color:var(--ink);
  font-weight:700;
}

.blog-win-card h3{
  margin-bottom:12px;
  color:var(--cream);
  font-size:1.32rem;
}

.blog-win-card p{
  color:rgba(250,246,236,.78);
  font-size:.95rem;
}

.blog-voices{
  padding:var(--df-section-y, 96px) 0;
}

.blog-voices-grid{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
}

.blog-voices h2{
  max-width:14ch;
  margin-top:16px;
  font-size:clamp(2rem,3.8vw,3rem);
}

.blog-voices-body p{
  margin-bottom:20px;
  color:var(--ink-soft);
  font-size:1.1rem;
}

.blog-voices-body strong{
  color:var(--ink);
}

.blog-who-tags{
  margin-top:12px;
}

.blog-pullquote{
  margin-top:30px;
  color:var(--ink)!important;
  font-family:var(--serif);
  font-size:1.55rem!important;
  font-style:italic;
  line-height:1.35;
}

.blog-join{
  padding:0 0 var(--df-section-y, 104px);
}

.blog-join-inner{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px;
  align-items:center;
  overflow:hidden;
  padding:64px 56px;
  border-radius:28px;
  background:var(--ink);
  color:var(--cream);
}

.blog-join-inner::before{
  content:"";
  position:absolute;
  top:-120px;
  right:-60px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:var(--terracotta);
  opacity:.28;
  filter:blur(20px);
}

.blog-join-inner>*{
  position:relative;
  z-index:2;
}

.blog-join .eyebrow{
  color:#e0a458;
}

.blog-join h2{
  max-width:13ch;
  margin:16px 0 18px;
  color:var(--cream);
  font-size:clamp(2.1rem,4vw,3.1rem);
}

.blog-join p{
  max-width:38ch;
  margin-bottom:26px;
  color:rgba(250,246,236,.82);
}

.blog-join-facts{
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  margin-bottom:32px;
}

.blog-join-facts strong{
  display:block;
  color:#e0a458;
  font-family:var(--serif);
  font-size:1.55rem;
  font-weight:500;
}

.blog-join-facts span{
  color:rgba(250,246,236,.62);
  font-size:.76rem;
  line-height:1.3;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.blog-steps{
  display:grid;
}

.blog-step{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:20px 0;
  border-bottom:1px solid rgba(250,246,236,.18);
}

.blog-step:last-child{
  border-bottom:none;
}

.blog-step>span{
  min-width:36px;
  color:#e0a458;
  font-family:var(--serif);
  font-size:1.35rem;
  line-height:1.1;
}

.blog-step h3{
  margin-bottom:4px;
  color:var(--cream);
  font-size:1.16rem;
}

.blog-step p{
  margin:0;
  color:rgba(250,246,236,.72);
  font-size:.92rem;
}

@media(max-width:980px){
  .blog-hero-grid,
  .blog-voices-grid,
  .blog-join-inner{
    grid-template-columns:1fr;
  }

  .blog-stat{
    text-align:left;
  }

  .blog-grid{
    grid-template-columns:1fr 1fr;
  }

  .blog-winwin-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:680px){
  .blog-hero{
    padding:126px 0 44px;
  }
  .blog-hero h1{
    font-size:clamp(2.45rem,12vw,3.6rem);
  }

  .blog-hero-grid{
    gap:var(--df-media-content-gap-mobile, 44px);
  }

  .blog-grid{
    grid-template-columns:1fr;
  }

  .blog-join-inner{
    padding:42px 28px;
  }

  .blog-reads,
  .blog-topics,
  .blog-voices{
    padding-top:var(--df-section-y-mobile, 64px);
    padding-bottom:var(--df-section-y-mobile, 64px);
  }

  .blog-join{
    padding-bottom:var(--df-section-y-mobile, 64px);
  }
}


/* v0112 Blog overview consistency
   Featured blog block removed so all posts use the same blog card system.
*/

/* v0113 Blog consistency fixes
   Blog H1 now follows the shared hero title scale.
   Win-win card icons use the original semantic set: plane, clock, document.
*/
.blog-icon svg{
  width:22px;
  height:22px;
  display:block;
}

/* v0114 Blog topic filtering */
.blog-theme-list{
  align-items:center;
}

.blog-theme-list .tag-list__item{
  border:1px solid rgba(44,38,32,.16);
  background:rgba(252,250,243,.72);
  color:var(--ink);
  cursor:pointer;
}

.blog-theme-list .tag-list__item:hover,
.blog-theme-list .tag-list__item:focus-visible{
  border-color:rgba(181,98,62,.52);
  background:rgba(181,98,62,.10);
  color:var(--terracotta-deep);
}

.blog-theme-list .tag-list__item.is-active{
  border-color:var(--terracotta);
  background:var(--terracotta);
  color:var(--cream);
}

.blog-filter-status{
  margin:-18px 0 26px;
  color:var(--ink-soft);
  font-size:.94rem;
}

.blog-card.is-hidden{
  display:none;
}

/* v0115 Blog card metadata */
.blog-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  margin-top:auto;
  padding-top:16px;
  color:var(--ink-soft);
  font-size:.82rem;
  line-height:1.35;
}

.blog-card-meta span{
  display:inline-flex;
  align-items:center;
}

.blog-card-meta span:not(:last-child)::after{
  content:"";
  width:4px;
  height:4px;
  margin-left:10px;
  border-radius:50%;
  background:currentColor;
  opacity:.42;
}

.blog-card .card-link{
  margin-top:14px;
}

/* v0116 Blog card comment count */
.blog-card-meta{
  row-gap:5px;
}

@media(max-width:420px){
  .blog-card-meta{
    font-size:.8rem;
  }
}

/* v0118 Final blog card style
   Variant 1 chosen and cleaned up.
   Cards show one primary topic label; multiple topic slugs remain for filtering/Meku.
*/
.blog-card-meta{
  order:-1;
  display:flex;
  flex-wrap:wrap;
  gap:7px 12px;
  margin:0 0 13px;
  padding:0;
  color:var(--ink-soft);
  font-size:.8rem;
  line-height:1.35;
}

.blog-card-meta span{
  display:inline-flex;
  align-items:center;
  min-width:0;
}

.blog-card-meta span::after{
  display:none !important;
}

.blog-card-meta svg,
.blog-card-comments svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
  margin-right:6px;
  opacity:.7;
}

.blog-card h3{
  margin-bottom:0;
}

.blog-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:auto;
  padding-top:18px;
}

.blog-card-footer .card-link{
  margin-top:0;
}

.blog-card-comments{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  color:var(--ink-soft);
  font-size:.82rem;
  line-height:1.35;
  white-space:nowrap;
}

.blog-card:hover .blog-card-comments{
  color:var(--terracotta-deep);
}

@media(max-width:420px){
  .blog-card-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .blog-card-comments{
    justify-content:flex-start;
  }
}

/* v0119 Blog card excerpts + desktop row alignment */
.blog-card-excerpt{
  margin:12px 0 0;
  color:var(--ink-soft);
  font-size:.94rem;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media(min-width:981px){
  .blog-grid{
    align-items:stretch;
  }

  .blog-card{
    height:100%;
  }

  .blog-card h3{
    display:-webkit-box;
    min-height:calc(1.2em * 3);
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .blog-card-excerpt{
    min-height:calc(1.55em * 3);
  }

  .blog-card-footer{
    margin-top:auto;
  }
}

@media(max-width:980px){
  .blog-card h3{
    min-height:0;
  }

  .blog-card-excerpt{
    min-height:0;
  }
}

/* v0120 Blog card desktop alignment polish
   Desktop rows: reserve meta space so titles align even when author/meta wraps.
   Mobile stays natural because cards stack vertically.
*/
.blog-card-excerpt{
  margin-top:8px;
  text-overflow:ellipsis;
}

@media(min-width:981px){
  .blog-card-meta{
    min-height:calc(1.35em * 2);
    align-content:flex-start;
  }

  .blog-card h3{
    margin-top:0;
    margin-bottom:0;
  }

  .blog-card-excerpt{
    margin-top:8px;
    max-height:calc(1.55em * 3);
  }
}

@media(max-width:980px){
  .blog-card-meta{
    min-height:0;
  }

  .blog-card-excerpt{
    margin-top:10px;
    max-height:none;
  }
}

/* v0121 Blog card metadata compact fit
   Desktop: keep meta on one line. If it does not fit, JS adds .is-compact-meta to hide icons.
   Long author names then truncate with ellipsis.
*/
.blog-card-meta{
  column-gap:7px;
}

.blog-card-meta span{
  gap:3px;
}

.blog-card-meta svg,
.blog-card-comments svg{
  width:12px;
  height:12px;
  flex-basis:12px;
  margin-right:3px;
}

@media(min-width:981px){
  .blog-card-meta{
    flex-wrap:nowrap;
    overflow:hidden;
    min-height:1.35em;
  }

  .blog-card-meta span{
    white-space:nowrap;
  }

  .blog-card-meta .blog-meta-author{
    min-width:0;
    flex:1 1 auto;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .blog-card-meta .blog-meta-date,
  .blog-card-meta .blog-meta-time{
    flex:0 0 auto;
  }

  .blog-card.is-compact-meta .blog-card-meta svg{
    display:none;
  }

  .blog-card.is-compact-meta .blog-card-meta{
    column-gap:6px;
  }

  .blog-card.is-compact-meta .blog-card-meta span{
    gap:0;
  }
}

@media(max-width:980px){
  .blog-card-meta{
    flex-wrap:wrap;
  }
}

/* v0122 Blogcard metadata icon polish */
.blog-card-meta .blog-meta-author svg{
  display:none;
}

.blog-card-meta .blog-meta-date svg,
.blog-card-meta .blog-meta-time svg,
.blog-card-comments svg{
  width:14px;
  height:14px;
  flex-basis:14px;
  margin-right:2px;
  opacity:.74;
}

.blog-card-meta span,
.blog-card-comments{
  gap:2px;
}

/* v0123 Blogcard title/excerpt spacing polish
   Desktop keeps row alignment, but title space is reduced to 2 lines.
*/
.blog-card-excerpt{
  margin-top:5px;
}

@media(min-width:981px){
  .blog-card h3{
    min-height:calc(1.2em * 2);
    -webkit-line-clamp:2;
  }

  .blog-card-excerpt{
    margin-top:5px;
  }
}

@media(max-width:980px){
  .blog-card h3{
    min-height:0;
    -webkit-line-clamp:unset;
  }

  .blog-card-excerpt{
    margin-top:7px;
  }
}

/* v0124 Blog themes naming
   Topics are now called themes. Cards show one primary theme; filters use theme slugs.
*/

/* v0125 Blogcard metadata icon size */
.blog-card-meta .blog-meta-date svg,
.blog-card-meta .blog-meta-time svg,
.blog-card-comments svg{
  width:16px;
  height:16px;
  flex-basis:16px;
  margin-right:1px;
  opacity:.78;
}

.blog-card-meta .blog-meta-date,
.blog-card-meta .blog-meta-time,
.blog-card-comments{
  gap:1px;
}

/* v0126 Blog theme filters/results spacing
   Themes and results should feel like one filter/results block.
   On mobile the theme filters scroll horizontally instead of wrapping into many rows.
*/
.blog-topics{
  padding-bottom:34px;
}

.blog-reads{
  padding-top:0;
}

.blog-theme-list{
  margin-bottom:0;
}

.blog-reads-head{
  margin-bottom:14px;
}

.blog-filter-status{
  margin:0 0 28px;
}

@media(max-width:680px){
  .blog-topics{
    padding-bottom:28px;
  }

  .blog-reads{
    padding-top:0;
  }

  .blog-theme-list{
    display:flex;
    flex-wrap:nowrap;
    gap:10px;
    overflow-x:auto;
    overflow-y:hidden;
    margin-left:calc(var(--df-page-x-mobile, 20px) * -1);
    margin-right:calc(var(--df-page-x-mobile, 20px) * -1);
    padding:2px var(--df-page-x-mobile, 20px) 10px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }

  .blog-theme-list .tag-list__item{
    flex:0 0 auto;
    scroll-snap-align:start;
    white-space:nowrap;
  }

  .blog-theme-list::-webkit-scrollbar{
    height:0;
  }

  .blog-reads-head{
    align-items:flex-start;
    margin-bottom:10px;
  }

  .blog-filter-status{
    margin-bottom:22px;
  }
}

/* v0127 Blog theme filter compact polish */
.blog-theme-list .tag-list__item{
  padding:8px 13px;
  font-size:.82rem;
  line-height:1.15;
}

@media(max-width:680px){
  .blog-theme-list{
    margin-left:0;
    margin-right:0;
    padding:2px 0 10px;
  }

  .blog-theme-list .tag-list__item{
    padding:8px 12px;
    font-size:.8rem;
  }
}

/* v0128 Blog load more demo */
.blog-card--load-hidden,
.blog-card.is-load-hidden{
  display:none;
}

.blog-load-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:38px;
}

.blog-load-more{
  min-width:190px;
}

.blog-pagination-fallback{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

@media(max-width:680px){
  .blog-load-more-wrap{
    margin-top:30px;
  }

  .blog-load-more{
    width:100%;
  }
}

/* v0129 Blog load-more UX fix */
.blog-card--load-hidden{
  display:none;
}

.blog-load-more-wrap{
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.blog-load-more-status{
  margin:0;
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.45;
  text-align:center;
}

.blog-load-more[hidden],
.blog-load-more-wrap[hidden]{
  display:none !important;
}

@media(max-width:680px){
  .blog-load-more-status{
    font-size:.86rem;
  }
}

/* v0130 Blog load-more polish */
.blog-load-more-wrap{
  margin-top:32px;
  gap:0;
}

.blog-load-more{
  min-width:218px;
  padding-inline:28px;
}

.blog-card.is-load-enter{
  animation:blogCardReveal .46s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes blogCardReveal{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:680px){
  .blog-load-more-wrap{
    margin-top:26px;
  }

  .blog-load-more{
    width:auto;
    min-width:210px;
  }
}

/* v0131 Blog load-more cursor */
.blog-load-more,
.blog-load-more:hover,
.blog-load-more:focus-visible{
  cursor:pointer;
}

/* v0183 Unified page H1 size
   All main page H1 titles use the homepage H1 scale.
*/
:where(
  .home-hero h1,
  .rh-title,
  .podcast-hero h1,
  .podcast-title,
  .aanbod-hero h1,
  .team-title,
  .blog-hero h1,
  .blog-post-hero-copy h1,
  .contact-hero h1,
  .guestblog-hero h1,
  .privacy-hero h1
){
  font-size:var(--ls-page-h1-size, clamp(3rem, 6.5vw, 5.6rem)) !important;
}

/* v0183 Safety net for top-level page heroes */
body :is(
  #home-hero-title,
  #ruimte-hero-title,
  #team-title,
  .blog-post-hero-copy > h1,
  .contact-hero-title,
  .guestblog-title,
  .privacy-title
){
  font-size:var(--ls-page-h1-size, clamp(3rem, 6.5vw, 5.6rem)) !important;
}

/* v0184 Simple fixed desktop H1 scale
   Desktop:
   - homepage H1: 85px
   - all other main H1s: 70px
   Mobile/tablet remains safe and consistent.
*/
:root{
  --ls-page-h1-size:70px;
  --ls-home-h1-size:90px;
  --ls-mobile-page-h1-size:clamp(2.55rem, 11vw, 4.35rem);
}

:where(
  .rh-title,
  .podcast-hero h1,
  .podcast-title,
  .aanbod-hero h1,
  .team-title,
  .blog-hero h1,
  .blog-post-hero-copy h1,
  .contact-hero h1,
  .guestblog-hero h1,
  .privacy-hero h1
){
  font-size:var(--ls-page-h1-size) !important;
}

:where(.home-hero h1, #home-hero-title){
  font-size:var(--ls-home-h1-size) !important;
}

body :is(
  #ruimte-hero-title,
  #team-title,
  .blog-post-hero-copy > h1,
  .contact-hero-title,
  .guestblog-title,
  .privacy-title
){
  font-size:var(--ls-page-h1-size) !important;
}

@media(max-width:680px){
  :where(
    .home-hero h1,
    #home-hero-title,
    .rh-title,
    .podcast-hero h1,
    .podcast-title,
    .aanbod-hero h1,
    .team-title,
    .blog-hero h1,
    .blog-post-hero-copy h1,
    .contact-hero h1,
    .guestblog-hero h1,
    .privacy-hero h1
  ),
  body :is(
    #ruimte-hero-title,
    #team-title,
    .blog-post-hero-copy > h1,
    .contact-hero-title,
    .guestblog-title,
    .privacy-title
  ){
    font-size:var(--ls-mobile-page-h1-size) !important;
  }
}