/* LS blog-detail canonical layout — v0200
   Purpose: clean 4-row blog detail template.
   This file is loaded after legacy blog-detail.css and owns layout only.

   Row 1: left title/intro, right image, 50/50 columns.
   Row 2: left author info 40%, right icon meta + themes 60%, no row background.
   Row 3: left 70% content/comments/author box, right 30% real sticky sidebar.
   Row 4: related blogs.
*/

.blog-post-detail-template,
.blog-post-detail-template .blog-post-detail-article,
.blog-post-detail-template .blog-post-row,
.blog-post-detail-template .wrap,
.blog-post-detail-template .blog-post-hero-grid,
.blog-post-detail-template .blog-post-meta-grid,
.blog-post-detail-template .blog-post-body-grid,
.blog-post-detail-template .blog-post-body-sidebar{
  overflow:visible !important;
  transform:none !important;
}

.blog-post-detail-template{
  background:var(--cream);
}

.blog-post-detail-template .wrap{
  width:min(1180px, calc(100% - 48px));
  margin-inline:auto;
}

.blog-post-row-hero{
  position:relative;
  padding:118px 0 0;
  background:var(--cream);
}

.blog-post-hero-grid{
  display:grid;
  grid-template-columns:minmax(0, 7fr) minmax(300px, 3fr);
  gap:clamp(36px,5vw,64px);
  align-items:start;
}

.blog-post-hero-copy{
  min-width:0;
  padding:0;
  margin:0;
}

.blog-post-hero-copy h1{
  margin:0 0 22px !important;
}

.blog-post-hero-copy .blog-detail-excerpt{
  max-width:680px;
  margin:0 !important;
}

.blog-post-hero-image{
  width:100%;
  margin:0 !important;
  padding:0 !important;
  align-self:start;
}

.blog-post-hero-image img{
  display:block;
  width:100%;
  aspect-ratio:16 / 10.2 !important;
  height:auto;
  object-fit:cover;
  border-radius:28px;
}

.blog-post-hero-image .blog-detail-tags-under-image{
  padding-top:14px !important;
}

.blog-post-row-meta{
  background:#f4eddf;
}

.blog-post-meta-grid{
  display:grid;
  grid-template-columns:minmax(0, 7fr) minmax(300px, 3fr);
  gap:clamp(36px,5vw,64px);
  align-items:center;
  padding:22px 0;
  margin-top:28px;
  border-top:1px solid rgba(44,38,32,.12);
  border-bottom:1px solid rgba(44,38,32,.12);
}

.blog-post-author-block{
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-width:0;
}

.blog-post-author-block img{
  width:54px !important;
  height:54px !important;
  border-radius:50%;
  object-fit:cover;
}

.blog-post-reading-block{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 !important;
  padding:0 !important;
}

.blog-post-reading-block > div{
  display:flex;
  align-items:baseline;
  gap:6px;
  min-height:32px;
  padding:6px 11px;
  border:1px solid rgba(44,38,32,.10);
  border-radius:999px;
  background:rgba(255,255,255,.46);
}

.blog-post-row-body{
  background:var(--cream);
}

.blog-post-body-grid{
  display:grid;
  grid-template-columns:minmax(0, 7fr) minmax(300px, 3fr);
  gap:clamp(36px,5vw,64px);
  align-items:stretch !important;
  padding-top:30px;
  padding-bottom:var(--df-section-y-tight,78px);
}

.blog-post-body-main{
  grid-column:1;
  min-width:0;
  width:100%;
  margin:0 !important;
  padding:0 !important;
}

.blog-post-body-main .blog-detail-prose > :first-child{
  margin-top:0 !important;
}

.blog-post-body-sidebar{
  grid-column:2;
  min-width:0;
  width:100%;
  height:100%;
  min-height:100%;
  align-self:stretch !important;
  margin:0 !important;
  padding:0 !important;
  position:relative !important;
  contain:none !important;
}

.blog-post-sidebar-sticky{
  position:-webkit-sticky !important;
  position:sticky !important;
  top:96px !important;
  display:grid !important;
  gap:18px !important;
  width:100%;
  align-self:start;
  z-index:5;
}

.blog-post-sidebar-sticky .detail-side-card{
  width:100%;
  box-sizing:border-box;
}

.blog-post-row-related{
  position:relative;
  z-index:1;
}

@media(max-width:980px){
  .blog-post-detail-template .wrap{
    width:min(1180px, calc(100% - 32px));
  }

  .blog-post-row-hero{
    padding-top:92px;
  }

  .blog-post-hero-grid,
  .blog-post-meta-grid,
  .blog-post-body-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .blog-post-meta-grid{
    align-items:start;
    margin-top:24px;
  }

  .blog-post-reading-block{
    justify-content:flex-start !important;
  }

  .blog-post-body-grid{
    padding-top:24px;
    gap:36px;
  }

  .blog-post-body-sidebar{
    height:auto;
    min-height:0;
  }

  .blog-post-sidebar-sticky{
    position:static !important;
    top:auto !important;
  }
}

@media(max-width:680px){
  .blog-post-row-hero{
    padding-top:84px;
  }

  .blog-post-hero-copy h1{
    margin-bottom:18px !important;
  }

  .blog-post-author-block{
    grid-template-columns:48px minmax(0,1fr);
  }

  .blog-post-author-block img{
    width:48px !important;
    height:48px !important;
  }

  .blog-post-reading-block{
    display:grid !important;
    grid-template-columns:1fr;
  }

  .blog-post-reading-block > div{
    width:max-content;
    max-width:100%;
  }
}

/* v0181 style pass
   Requested refinements:
   - template width 1260px;
   - row 1 columns 50/50;
   - H1 matches site hero style with one terracotta italic word;
   - themes moved into meta bar;
   - row 2 is 40/60 without background;
   - date/reading/comments labels replaced by icons.
*/
.blog-post-detail-template .wrap{
  width:min(1260px, calc(100% - 48px)) !important;
}

.blog-post-row-hero{
  background:var(--cream) !important;
}

.blog-post-hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  gap:clamp(42px,5.2vw,78px) !important;
}

.blog-post-hero-copy h1{
  max-width:12.8ch !important;
  margin:0 0 24px !important;
  color:var(--ink) !important;
  font-family:var(--serif) !important;
  font-size:clamp(3rem,5.1vw,5.25rem) !important;
  line-height:.98 !important;
  letter-spacing:-.055em !important;
}

.blog-post-hero-copy h1 em{
  color:var(--terracotta) !important;
  font-style:italic !important;
  font-weight:500 !important;
}

.blog-post-hero-copy .blog-detail-excerpt{
  max-width:620px !important;
}

.blog-post-hero-image img{
  aspect-ratio:16 / 10.2 !important;
}

.blog-post-row-meta{
  background:transparent !important;
}

.blog-post-meta-grid{
  grid-template-columns:minmax(0, 4fr) minmax(0, 6fr) !important;
  gap:clamp(32px,4.8vw,70px) !important;
  margin-top:34px !important;
  padding:24px 0 !important;
  background:transparent !important;
}

.blog-post-meta-side{
  display:grid;
  justify-items:end;
  gap:12px;
  min-width:0;
}

.blog-post-reading-block{
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin:0 !important;
  padding:0 !important;
}

.blog-post-reading-block > div,
.blog-post-reading-block > a,
.blog-post-meta-chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-height:38px !important;
  padding:8px 12px !important;
  border:1px solid rgba(44,38,32,.11) !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.56) !important;
  color:var(--ink) !important;
  text-decoration:none !important;
  font-size:.94rem !important;
  font-weight:700 !important;
  line-height:1 !important;
}

.blog-post-meta-chip--link:hover{
  border-color:rgba(181,98,62,.32) !important;
  color:var(--terracotta) !important;
  background:rgba(255,255,255,.78) !important;
}

.blog-post-meta-icon,
.blog-post-theme-icon{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  flex:0 0 22px;
  color:var(--terracotta);
}

.blog-post-meta-svg,
.blog-post-theme-svg{
  width:20px;
  height:20px;
  display:block;
}

.blog-post-meta-value{
  white-space:nowrap;
}

.blog-post-reading-block dt,
.blog-post-reading-block dd{
  display:none !important;
}

.blog-post-theme-strip{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px;
  color:var(--ink-soft);
  font-size:.93rem;
  font-weight:700;
}

.blog-post-theme-strip a{
  color:var(--ink-soft);
  text-decoration:none;
}

.blog-post-theme-strip a:hover{
  color:var(--terracotta);
}

.blog-post-theme-separator{
  color:rgba(44,38,32,.35);
}

.blog-post-body-grid{
  grid-template-columns:minmax(0, 7fr) minmax(300px, 3fr) !important;
  width:min(1260px, calc(100% - 48px)) !important;
}

.blog-post-row-related .wrap{
  width:min(1260px, calc(100% - 48px)) !important;
}

#comments-title{
  scroll-margin-top:120px;
}

@media(max-width:980px){
  .blog-post-detail-template .wrap,
  .blog-post-body-grid,
  .blog-post-row-related .wrap{
    width:min(1260px, calc(100% - 32px)) !important;
  }

  .blog-post-hero-grid,
  .blog-post-meta-grid{
    grid-template-columns:1fr !important;
  }

  .blog-post-meta-side{
    justify-items:start;
  }

  .blog-post-reading-block,
  .blog-post-theme-strip{
    justify-content:flex-start !important;
  }

  .blog-post-hero-copy h1{
    font-size:clamp(2.6rem,12vw,4.35rem) !important;
  }
}

/* v0182 Mobile spacing consistency
   Desktop keeps the 1260px canonical detail layout.
   Mobile/tablet must use the same horizontal rhythm as the global LifeSkool pages.
*/
@media(max-width:980px){
  .blog-post-detail-template .wrap,
  .blog-post-body-grid,
  .blog-post-row-related .wrap{
    width:min(1260px, calc(100% - 32px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .blog-post-hero-grid,
  .blog-post-meta-grid,
  .blog-post-body-grid{
    grid-template-columns:1fr !important;
    gap:24px !important;
  }

  .blog-post-row-hero{
    padding-top:92px !important;
  }

  .blog-post-row-meta,
  .blog-post-row-body{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .blog-post-meta-grid{
    margin-top:24px !important;
    padding:20px 0 !important;
  }

  .blog-post-body-grid{
    padding-top:24px !important;
    padding-bottom:72px !important;
  }

  .blog-post-body-main,
  .blog-post-body-sidebar,
  .blog-post-hero-copy,
  .blog-post-hero-image{
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .blog-post-meta-side{
    justify-items:start !important;
  }

  .blog-post-reading-block,
  .blog-post-theme-strip{
    justify-content:flex-start !important;
  }
}

@media(max-width:680px){
  .blog-post-detail-template .wrap,
  .blog-post-body-grid,
  .blog-post-row-related .wrap{
    width:calc(100% - 32px) !important;
  }

  .blog-post-row-hero{
    padding-top:84px !important;
  }

  .blog-post-hero-grid{
    gap:22px !important;
  }

  .blog-post-meta-grid{
    gap:18px !important;
    padding:18px 0 !important;
  }

  .blog-post-body-grid{
    gap:34px !important;
    padding-top:22px !important;
  }
}

/* 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;
  }
}

/* v0187 Desktop blogdetail row background continuity
   Desktop-only: row 2 and row 3 use the same warm hero background tone,
   so the blog detail template reads as one calm editorial surface.
*/
@media(min-width:981px){
  .blog-post-row-meta,
  .blog-post-row-body{
    background:#f6efe3 !important;
  }

  .blog-post-row-meta{
    border-top:0 !important;
  }

  .blog-post-meta-grid{
    background:transparent !important;
  }
}

/* v0188 Blogdetail desktop meta bar refinement
   Meta items are information, not buttons.
   Themes are subtle tag badges.
*/
@media(min-width:981px){
  .blog-post-row-meta .wrap,
  .blog-post-meta-grid{
    width:min(1260px, calc(100% - 48px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .blog-post-meta-grid{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .blog-post-reading-block{
    gap:18px !important;
  }

  .blog-post-reading-block > div,
  .blog-post-reading-block > a,
  .blog-post-meta-chip{
    min-height:auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:rgba(44,38,32,.68) !important;
    font-size:.95rem !important;
    font-weight:500 !important;
    letter-spacing:-.01em !important;
  }

  .blog-post-meta-chip--link:hover{
    color:var(--terracotta) !important;
    background:transparent !important;
  }

  .blog-post-meta-icon{
    width:26px !important;
    height:26px !important;
    flex-basis:26px !important;
    color:var(--terracotta) !important;
    opacity:.86;
  }

  .blog-post-meta-svg{
    width:24px !important;
    height:24px !important;
  }

  .blog-post-meta-value{
    font-weight:500 !important;
  }

  .blog-post-theme-strip{
    gap:7px !important;
    font-size:.88rem !important;
    font-weight:400 !important;
  }

  .blog-post-theme-icon,
  .blog-post-theme-separator{
    display:none !important;
  }

  .blog-post-theme-strip a{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:5px 10px;
    border:1px solid rgba(44,38,32,.10);
    border-radius:999px;
    background:rgba(255,255,255,.38);
    color:rgba(44,38,32,.58) !important;
    font-weight:400 !important;
    line-height:1;
    text-decoration:none;
  }

  .blog-post-theme-strip a:hover{
    color:var(--terracotta) !important;
    border-color:rgba(181,98,62,.22);
    background:rgba(255,255,255,.55);
  }
}

/* v0189 Blogdetail row 3 desktop column ratio
   Desktop row 3:
   - main article column: 63%
   - sticky sidebar column: 37%
*/
@media(min-width:981px){
  .blog-post-body-grid{
    grid-template-columns:minmax(0, 63fr) minmax(320px, 37fr) !important;
  }
}

/* v0190 Blogdetail desktop polish
   - Remove white strip between row 1 and row 2.
   - Add subtle theme label styling.
   - Place back-to-blogs link below row 4 cards.
*/
@media(min-width:981px){
  .blog-post-row-hero,
  .blog-post-row-meta,
  .blog-post-row-body{
    background:#f6efe3 !important;
  }

  .blog-post-row-hero{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }

  .blog-post-row-meta{
    margin-top:0 !important;
    padding-top:0 !important;
  }

  .blog-post-meta-grid{
    margin-top:0 !important;
  }
}

.blog-post-theme-label{
  color:rgba(44,38,32,.48);
  font-size:.86rem;
  font-weight:400;
  margin-right:2px;
}

.blog-detail-related-back-row{
  display:flex;
  justify-content:center;
  width:100%;
  margin-top:34px;
}

.blog-detail-back-link-bottom{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--terracotta);
  font-size:.95rem;
  font-weight:700;
  text-decoration:none;
}

.blog-detail-back-link-bottom:hover{
  color:var(--ink);
}

/* v0192 Blogdetail meta width + row spacing
   Source reset: built from v0190, not v0191.
   Goal:
   - meta row aligns exactly with row 1 and row 3 content width;
   - no extra horizontal padding on meta row;
   - add calm vertical breathing room between row 1 and row 2.
*/
@media(min-width:981px){
  .blog-post-row-meta{
    padding-left:0 !important;
    padding-right:0 !important;
    padding-top:34px !important;
    padding-bottom:0 !important;
    box-sizing:border-box !important;
  }

  .blog-post-row-meta .wrap,
  .blog-post-meta-grid{
    width:min(1260px, calc(100% - 48px)) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  .blog-post-meta-grid{
    margin-top:0 !important;
    padding-top:24px !important;
    padding-bottom:24px !important;
  }

  .blog-post-row-hero{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
  }
}

/* v0194 Blogdetail meta bottom padding
   Desktop-only: add 10px extra breathing room below the meta bar.
*/
@media(min-width:981px){
  .blog-post-row-meta{
    padding-bottom:10px !important;
  }
}

/* v0200 Mobile blogdetail UX
   Desktop v0199 remains locked. These rules only refine tablet/mobile.
   Goal: same visual language as desktop, but stacked, readable, and consistent with global mobile margins.
*/
@media(max-width:980px){
  .blog-post-detail-template{
    background:#f6efe3 !important;
  }

  .blog-post-detail-template .wrap,
  .blog-post-row-related .wrap,
  .blog-post-body-grid{
    width:calc(100% - 32px) !important;
    max-width:1260px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  .blog-post-row-hero{
    padding-top:92px !important;
    padding-bottom:0 !important;
    background:var(--cream) !important;
  }

  .blog-post-hero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:24px !important;
    align-items:start !important;
  }

  .blog-post-hero-copy{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .blog-post-hero-copy h1{
    max-width:100% !important;
    margin:0 0 18px !important;
    font-size:clamp(2.55rem, 11vw, 4.35rem) !important;
    line-height:1.02 !important;
    letter-spacing:-.05em !important;
  }

  .blog-post-hero-copy .blog-detail-excerpt{
    max-width:100% !important;
    font-size:1.16rem !important;
    line-height:1.55 !important;
  }

  .blog-post-hero-image{
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
  }

  .blog-post-hero-image img{
    width:100% !important;
    aspect-ratio:4 / 3.05 !important;
    border-radius:22px !important;
    object-fit:cover !important;
  }

  .blog-post-row-meta{
    background:#f6efe3 !important;
    padding:22px 0 0 !important;
    margin:0 !important;
  }

  .blog-post-meta-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    width:calc(100% - 32px) !important;
    margin:0 auto !important;
    padding:18px 0 20px !important;
    border-top:1px solid rgba(44,38,32,.12) !important;
    border-bottom:1px solid rgba(44,38,32,.12) !important;
    background:transparent !important;
  }

  .blog-post-author-block{
    display:grid !important;
    grid-template-columns:48px minmax(0, 1fr) !important;
    gap:12px !important;
    align-items:center !important;
  }

  .blog-post-author-block img{
    width:48px !important;
    height:48px !important;
  }

  .blog-detail-byline-main strong{
    font-size:.98rem !important;
  }

  .blog-detail-byline-main span{
    font-size:.88rem !important;
    line-height:1.35 !important;
  }

  .blog-post-meta-side{
    display:grid !important;
    justify-items:start !important;
    gap:12px !important;
  }

  .blog-post-reading-block{
    display:flex !important;
    justify-content:flex-start !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    gap:12px 16px !important;
    margin:0 !important;
    padding:0 !important;
  }

  .blog-post-reading-block > div,
  .blog-post-reading-block > a,
  .blog-post-meta-chip{
    display:inline-flex !important;
    align-items:center !important;
    gap:7px !important;
    min-height:auto !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:rgba(44,38,32,.70) !important;
    font-size:.9rem !important;
    font-weight:500 !important;
    text-decoration:none !important;
  }

  .blog-post-meta-icon{
    width:24px !important;
    height:24px !important;
    flex-basis:24px !important;
    color:var(--terracotta) !important;
    opacity:.88;
  }

  .blog-post-meta-svg{
    width:22px !important;
    height:22px !important;
  }

  .blog-post-theme-strip{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
    gap:7px !important;
    color:rgba(44,38,32,.55) !important;
    font-size:.84rem !important;
    font-weight:400 !important;
  }

  .blog-post-theme-label{
    color:rgba(44,38,32,.50) !important;
    font-weight:400 !important;
    margin-right:2px !important;
  }

  .blog-post-theme-icon,
  .blog-post-theme-separator{
    display:none !important;
  }

  .blog-post-theme-strip a{
    display:inline-flex !important;
    align-items:center !important;
    min-height:26px !important;
    padding:5px 9px !important;
    border:1px solid rgba(44,38,32,.10) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.38) !important;
    color:rgba(44,38,32,.58) !important;
    font-weight:400 !important;
    line-height:1 !important;
    text-decoration:none !important;
  }

  .blog-post-row-body{
    background:#f6efe3 !important;
  }

  .blog-post-body-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:36px !important;
    padding-top:24px !important;
    padding-bottom:72px !important;
  }

  .blog-post-body-main,
  .blog-post-body-sidebar{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  .blog-detail-prose{
    font-size:1rem !important;
    line-height:1.78 !important;
  }

  .blog-detail-prose .lead{
    font-size:1.06rem !important;
    line-height:1.72 !important;
  }

  .blog-detail-prose p + p,
  .blog-detail-prose p + ul,
  .blog-detail-prose p + ol,
  .blog-detail-prose ul + p,
  .blog-detail-prose ol + p{
    margin-top:18px !important;
  }

  .blog-detail-prose :is(p, ul, ol, blockquote) + h2{
    margin-top:34px !important;
  }

  .blog-detail-prose h2 + p,
  .blog-detail-prose h3 + p{
    margin-top:14px !important;
  }

  .blog-detail-prose h2{
    font-size:clamp(1.58rem, 7.2vw, 2.02rem) !important;
  }

  .blog-detail-prose h3{
    font-size:clamp(1.34rem, 5.7vw, 1.62rem) !important;
  }

  .blog-detail-author{
    grid-template-columns:1fr !important;
    gap:22px !important;
    margin-top:44px !important;
    padding:28px 22px !important;
    border-radius:26px !important;
  }

  .blog-detail-author .author-avatar-img{
    width:88px !important;
    height:88px !important;
  }

  .blog-detail-author h2{
    font-size:clamp(1.75rem, 8vw, 2.25rem) !important;
  }

  .blog-detail-comments{
    margin-top:46px !important;
    padding-top:34px !important;
  }

  .comment-card{
    grid-template-columns:44px minmax(0, 1fr) !important;
    gap:14px !important;
    padding:20px !important;
    border-radius:22px !important;
  }

  .comment-avatar{
    width:44px !important;
    height:44px !important;
  }

  .comment-card h3{
    font-size:1.08rem !important;
  }

  .comment-card p{
    line-height:1.65 !important;
  }

  .blog-comment-form-panel{
    margin-top:24px !important;
    padding:24px 20px !important;
    border-radius:24px !important;
  }

  .blog-comment-form-grid{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }

  .blog-post-sidebar-sticky{
    position:static !important;
    top:auto !important;
    display:grid !important;
    gap:18px !important;
  }

  .detail-side-card{
    border-radius:24px !important;
    padding:26px 22px !important;
  }

  .detail-side-card--story h2,
  .detail-side-card--newsletter h2{
    max-width:12ch;
  }

  .blog-detail-related{
    padding-top:64px !important;
  }

  .blog-detail-related .related-grid{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }

  .blog-detail-related-back-row{
    margin-top:28px !important;
  }
}

@media(max-width:680px){
  .blog-post-detail-template .wrap,
  .blog-post-row-related .wrap,
  .blog-post-body-grid{
    width:calc(100% - 32px) !important;
  }

  .blog-post-row-hero{
    padding-top:84px !important;
  }

  .blog-post-hero-grid{
    gap:22px !important;
  }

  .blog-post-meta-grid{
    gap:16px !important;
    padding-top:16px !important;
    padding-bottom:18px !important;
  }

  .blog-post-body-grid{
    gap:34px !important;
    padding-top:22px !important;
  }
}

/* v0203 Mobile row 3 stack fix
   Fix: old desktop grid-column values kept creating an implicit second column on mobile.
   Mobile row 3 must be:
   1. main article/content full-width
   2. sidebar blocks full-width below it
*/
@media(max-width:980px){
  .blog-post-body-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    grid-auto-flow:row !important;
    align-items:start !important;
  }

  .blog-post-body-main,
  .blog-post-body-sidebar{
    grid-column:1 / -1 !important;
    grid-row:auto !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
  }

  .blog-post-body-main{
    order:1 !important;
  }

  .blog-post-body-sidebar{
    order:2 !important;
    margin-top:2px !important;
  }

  .blog-post-sidebar-sticky{
    position:static !important;
    top:auto !important;
    width:100% !important;
  }
}



/* v0254 Blogdetail eyebrow
   Adds the same small editorial label pattern as eventdetail.
*/
.blog-detail-hero-eyebrow{
  margin:0 0 18px;
}

@media(max-width:980px){
  .blog-detail-hero-eyebrow{
    margin-bottom:14px;
  }
}

/* v0278 Blogdetail author + full-width surface consistency
   - First article restores Monique Vink as guest author with an initials avatar.
   - Meta row and body row use the same full-width background as the hero.
*/
.blog-post-author-block .blog-author-avatar-initials,
.blog-detail-author .author-avatar-initials{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:50% !important;
  background:var(--sand, #efe7d3) !important;
  color:var(--brown, #623e2a) !important;
  font-family:var(--sans) !important;
  font-weight:700 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  box-shadow:0 10px 22px rgba(44,38,32,.10) !important;
}

.blog-post-author-block .blog-author-avatar-initials{
  width:54px !important;
  height:54px !important;
  font-size:.82rem !important;
}

.blog-detail-author .author-avatar-initials{
  width:118px !important;
  height:118px !important;
  font-size:1.15rem !important;
  border:3px solid rgba(255,255,255,.72) !important;
}

@media(min-width:981px){
  .blog-post-row-hero,
  .blog-post-row-meta,
  .blog-post-row-body{
    background:var(--cream) !important;
  }
}


/* v0280 Blogdetail author image restore
   - Use real temporary Monique author photo from media/reviews.
   - Keep byline avatar left of author name.
   - Hero, meta and body rows keep one full-width surface.
*/
.blog-post-row-hero,
.blog-post-row-meta,
.blog-post-row-body{
  background:var(--cream) !important;
}

.blog-detail-byline-main{
  display:grid !important;
  grid-template-columns:54px minmax(0,1fr) !important;
  gap:14px !important;
  align-items:center !important;
  min-width:0 !important;
}

.blog-detail-byline-main .blog-author-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:4px !important;
  min-width:0 !important;
}

.blog-author-avatar-img{
  width:54px !important;
  height:54px !important;
  display:block !important;
  border-radius:999px !important;
  object-fit:cover !important;
  box-shadow:0 10px 22px rgba(44,38,32,.10) !important;
}

.blog-detail-author{
  display:grid !important;
  grid-template-columns:118px minmax(0,1fr) !important;
  gap:clamp(22px,3vw,34px) !important;
  align-items:start !important;
}

.blog-detail-author .author-avatar-img{
  width:118px !important;
  height:118px !important;
  display:block !important;
  border-radius:999px !important;
  object-fit:cover !important;
  border:3px solid rgba(255,255,255,.72) !important;
  box-shadow:0 16px 32px rgba(44,38,32,.14) !important;
}

@media(max-width:720px){
  .blog-detail-byline-main{
    grid-template-columns:52px minmax(0,1fr) !important;
    gap:13px !important;
  }

  .blog-author-avatar-img{
    width:52px !important;
    height:52px !important;
  }

  .blog-detail-author{
    grid-template-columns:88px minmax(0,1fr) !important;
    gap:18px !important;
  }

  .blog-detail-author .author-avatar-img{
    width:88px !important;
    height:88px !important;
  }
}


/* v0287 Blogdetail meta row alignment
   Goal:
   - Row 2 meta/author bar aligns with the calmer hero/content width instead of reading too wide.
   - Author byline uses one real horizontal component so the full author name stays on one line.
*/
@media(min-width:981px){
  .blog-post-row-meta .wrap,
  .blog-post-meta-grid{
    width:min(1180px, calc(100% - 48px)) !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  .blog-post-author-block.blog-detail-author-meta{
    display:block !important;
    min-width:0 !important;
  }

  .blog-post-author-block.blog-detail-author-meta .blog-detail-byline-main{
    display:grid !important;
    grid-template-columns:54px minmax(160px, 1fr) !important;
    gap:14px !important;
    align-items:center !important;
    width:max-content !important;
    max-width:100% !important;
  }

  .blog-post-author-block.blog-detail-author-meta .blog-author-copy{
    min-width:160px !important;
    max-width:none !important;
  }

  .blog-post-author-block.blog-detail-author-meta .blog-author-copy strong{
    display:block !important;
    white-space:nowrap !important;
    line-height:1.25 !important;
  }

  .blog-post-author-block.blog-detail-author-meta .blog-author-copy span{
    display:block !important;
    white-space:nowrap !important;
  }
}

@media(max-width:980px){
  .blog-post-author-block.blog-detail-author-meta{
    display:block !important;
    min-width:0 !important;
  }

  .blog-post-author-block.blog-detail-author-meta .blog-author-copy strong,
  .blog-post-author-block.blog-detail-author-meta .blog-author-copy span{
    white-space:nowrap !important;
  }
}
/* Blog author website link */
.blog-author-website-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .9rem;
  font-weight: 800;
  color: var(--color-terracotta, #B5623E);
  text-decoration: none;
}

.blog-author-website-link:hover,
.blog-author-website-link:focus {
  text-decoration: underline;
}

/* Blog body import normalization v1 */
.blog-detail-prose > p {
  margin: 0 0 1.18rem;
}

.blog-detail-prose > p + p {
  margin-top: .25rem;
}

.blog-detail-prose > h2 {
  margin: clamp(2.35rem, 5vw, 4rem) 0 1rem;
}

.blog-detail-prose > h2:first-child {
  margin-top: 0;
}

.blog-detail-prose > h3 {
  margin: clamp(1.85rem, 4vw, 3rem) 0 .85rem;
}

.blog-detail-prose > h2 + p,
.blog-detail-prose > h3 + p {
  margin-top: 0;
}

.blog-detail-prose > ul,
.blog-detail-prose > ol {
  margin: 1rem 0 1.55rem;
  padding-left: 1.25rem;
}

.blog-detail-prose > li,
.blog-detail-prose > ul li,
.blog-detail-prose > ol li {
  margin-bottom: .65rem;
}