/* Blog detail page — v0145
   Scoped page layout only.
   Global header/footer/buttons stay protected in lifeskool-global.css.
*/

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

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

.blog-detail-hero::before{
  display:none;
  content:none;
}

.blog-detail-hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 650px) minmax(320px, 480px);
  gap:clamp(36px,6vw,76px);
  align-items:center;
}

.blog-detail-hero-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
}

.blog-detail-back{
  display:inline-flex;
  width:max-content;
  align-items:center;
  gap:9px;
  margin-bottom:26px;
  color:var(--terracotta);
  font-size:.95rem;
  font-weight:800;
  text-decoration:none;
}

.blog-detail-back span{
  transition:transform .22s ease;
}

.blog-detail-back:hover span{
  transform:translateX(-3px);
}

.blog-detail-hero h1{
  max-width:13.5ch;
  margin:0 0 24px;
  font-size:clamp(2.5rem,4.45vw,4.15rem);
  letter-spacing:-.045em;
  line-height:1.02;
}

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

.blog-detail-excerpt{
  position:relative;
  max-width:620px;
  margin:0;
  color:var(--ink-soft);
  font-family:var(--serif);
  font-size:clamp(1.22rem,1.8vw,1.55rem);
  font-style:italic;
  line-height:1.56;
}

.blog-detail-byline{
  display:grid;
  grid-template-columns:54px minmax(0, 1fr);
  gap:12px 16px;
  align-items:center;
  max-width:680px;
  margin-top:30px;
  padding-top:24px;
  border-top:1px solid rgba(44,38,32,.12);
}

.blog-detail-byline img{
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
  background:var(--sand);
  box-shadow:0 8px 18px rgba(44,38,32,.10);
}

.blog-detail-byline-main{
  display:grid;
  gap:2px;
}

.blog-detail-byline-main strong{
  font-size:1rem;
  color:var(--ink);
}

.blog-detail-byline-main span{
  color:var(--ink-soft);
  font-size:.92rem;
}

.blog-detail-meta-list{
  grid-column:1 / -1;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:8px 0 0;
}

.blog-detail-meta-list 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-detail-meta-list dt{
  color:var(--ink-soft);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.blog-detail-meta-list dd{
  color:var(--ink);
  font-size:.9rem;
  font-weight:700;
}

.blog-detail-cover{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:30px;
  background:rgba(252,250,243,.68);
  box-shadow:0 32px 70px -50px rgba(44,38,32,.58);
}

.blog-detail-cover img{
  display:block;
  width:100%;
  aspect-ratio:4/3.55;
  object-fit:cover;
}

.blog-detail-tags-under-image{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:0;
  padding:12px 2px 0;
  background:transparent;
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.55;
}

.blog-detail-themes-label{
  margin-right:6px;
  color:var(--ink);
  font-weight:800;
}

.blog-detail-theme-text{
  color:var(--ink-soft);
}

.blog-detail-layout{
  display:grid;
  grid-template-columns:minmax(0,760px) 320px;
  gap:56px;
  align-items:start;
  padding-top:34px;
  padding-bottom:var(--df-section-y-tight,78px);
}

.blog-detail-content{min-width:0}

/* WYSIWYG/content area.
   Keep it clean and editorial: paragraphs, headings, lists, links.
   No unusual card styling inside article body.
*/
.blog-detail-prose{
  color:var(--ink);
  font-size:1.08rem;
  line-height:1.82;
}

.blog-detail-prose .lead{
  color:var(--ink-soft);
  font-size:1.18rem;
  line-height:1.78;
}

.blog-detail-prose > * + *{margin-top:1.15em}

.blog-detail-prose h2,
.blog-detail-prose h3,
.blog-detail-prose h4,
.blog-detail-prose h5,
.blog-detail-prose h6{
  color:var(--ink);
  letter-spacing:-.025em;
  line-height:1.16;
}

.blog-detail-prose h2{
  margin-top:2.2em;
  font-size:clamp(1.9rem,3vw,2.55rem);
}

.blog-detail-prose h3{
  margin-top:1.9em;
  font-size:clamp(1.55rem,2.3vw,2rem);
}

.blog-detail-prose h4{
  margin-top:1.7em;
  font-size:clamp(1.28rem,1.9vw,1.58rem);
}

.blog-detail-prose h5{
  margin-top:1.55em;
  font-family:var(--sans);
  font-size:1rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.blog-detail-prose h6{
  margin-top:1.45em;
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--terracotta);
}

.blog-detail-prose blockquote{
  margin:1.4em 0;
  padding:0;
  border:0;
  background:none;
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.08rem;
  font-style:normal;
  line-height:1.82;
}

.blog-detail-prose a{
  color:var(--terracotta);
  font-weight:700;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.blog-detail-prose ul,
.blog-detail-prose ol{
  display:grid;
  gap:.58em;
  margin-top:1.15em;
  padding-left:0;
}

.blog-detail-prose ul{
  list-style:none;
}

.blog-detail-prose ul li{
  position:relative;
  padding-left:1.35em;
}

.blog-detail-prose ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:.76em;
  width:7px;
  height:7px;
  border-radius:999px;
  background:var(--terracotta);
}

.blog-detail-prose ol{
  padding-left:1.35em;
}

.blog-detail-prose ol li::marker{
  color:var(--terracotta);
  font-weight:800;
}

.blog-detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:44px;
  padding-top:28px;
  border-top:1px solid rgba(44,38,32,.12);
}

.blog-detail-tags a{
  display:inline-flex;
  padding:9px 13px;
  border-radius:999px;
  background:var(--sand);
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:.9rem;
}

.blog-detail-author{
  display:grid;
  grid-template-columns:86px minmax(0,1fr);
  gap:22px;
  margin-top:50px;
  padding:30px;
  border:1px solid rgba(44,38,32,.12);
  border-radius:28px;
  background:#fcfaf3;
}

.author-avatar-img{
  width:86px;
  height:86px;
  border-radius:50%;
  object-fit:cover;
  background:var(--sand);
  box-shadow:0 10px 22px rgba(44,38,32,.10);
}

.blog-detail-author h2{
  margin:8px 0 10px;
  font-size:1.8rem;
}

.blog-detail-author p{
  color:var(--ink-soft);
  line-height:1.65;
}

.author-meta{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.author-meta div{display:grid;gap:2px}

.author-meta dt{
  color:var(--ink-soft);
  font-size:.76rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.author-meta dd{
  color:var(--ink);
  font-size:.95rem;
}

.author-meta a{
  color:var(--terracotta);
  font-weight:700;
  text-decoration:none;
}

.author-website-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:18px;
  color:var(--terracotta);
  font-weight:700;
  text-decoration:none;
  line-height:1.2;
}

.author-website-link:hover,
.author-website-link:focus-visible{
  text-decoration:none;
  opacity:.9;
}

.author-website-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
}

.blog-detail-comments{
  margin-top:56px;
  padding-top:42px;
  border-top:1px solid rgba(44,38,32,.12);
}

.section-heading{
  max-width:720px;
  margin-bottom:28px;
}

.section-heading h2{
  margin-top:10px;
  font-size:clamp(2rem,3.2vw,3rem);
}

.section-heading p{
  margin-top:8px;
  color:var(--ink-soft);
}

.comments-list{display:grid;gap:14px}

.comment-card{
  padding:22px 24px;
  border:1px solid rgba(44,38,32,.10);
  border-radius:20px;
  background:rgba(255,255,255,.54);
}

.comment-card h3{
  margin-bottom:2px;
  font-size:1.25rem;
}

.comment-card time{
  display:block;
  margin-bottom:12px;
  color:var(--ink-soft);
  font-size:.86rem;
}

.comment-card p{
  color:var(--ink-soft);
  line-height:1.65;
}

.blog-detail-sidebar{
  position:sticky;
  top:112px;
  display:grid;
  gap:18px;
}

.detail-side-card{
  padding:26px;
  border:1px solid rgba(44,38,32,.12);
  border-radius:24px;
  background:#fcfaf3;
}

.detail-side-card h2{
  margin-bottom:12px;
  font-size:1.45rem;
}

.detail-side-card p{
  color:var(--ink-soft);
  line-height:1.65;
}

.detail-side-card ul{
  display:grid;
  gap:10px;
  margin:0;
  padding:0;
  list-style:none;
}

.detail-side-card a{
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
}

.detail-side-card a:hover{color:var(--terracotta)}

.detail-side-card--accent{
  background:var(--olive-deep);
  color:var(--cream);
}

.detail-side-card--accent p{color:rgba(250,246,236,.78)}
.detail-side-card--accent .btn{margin-top:18px}

.blog-detail-related{
  padding:var(--df-section-y-tight,78px) 0 var(--df-section-y,110px);
  background:var(--sand);
}

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

.related-card{
  min-height:230px;
  padding:28px;
  border:1px solid rgba(44,38,32,.10);
  border-radius:26px;
  background:#fcfaf3;
  color:var(--ink);
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease;
}

.related-card:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px -40px rgba(44,38,32,.48);
}

.related-card span{
  color:var(--terracotta);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.related-card h3{
  margin-top:18px;
  font-size:1.55rem;
  line-height:1.15;
}

.related-card p{
  margin-top:12px;
  color:var(--ink-soft);
  line-height:1.6;
}

.related-card--cta{
  background:var(--terracotta);
  color:#fff;
}

.related-card--cta span,
.related-card--cta p{color:rgba(255,255,255,.82)}

@media(max-width:1080px){
  .blog-detail-hero-grid{
    grid-template-columns:minmax(0,1fr) 380px;
    gap:38px;
  }
}

@media(max-width:900px){
  .blog-detail-hero-grid,
  .blog-detail-layout{
    grid-template-columns:1fr;
  }

  .blog-detail-sidebar{position:static}
  .related-grid{grid-template-columns:1fr}
  .blog-detail-cover{max-width:560px}
}

@media(max-width:680px){
  .blog-detail-hero{
    padding:48px 0 34px;
  }

  .blog-detail-hero-grid{
    gap:18px;
  }

  .blog-detail-back{
    margin-bottom:14px;
  }

  .blog-detail-cover{
    order:5;
    max-width:none;
    border-radius:22px;
    margin-top:4px;
    margin-bottom:4px;
  }

  .blog-detail-hero-copy{
    display:contents;
  }

  .blog-detail-hero-copy .blog-detail-back{
    order:1;
  }

  .blog-detail-hero-copy h1{
    order:2;
  }

  .blog-detail-hero-copy .blog-detail-excerpt{
    order:3;
  }

  .blog-detail-hero-copy .blog-detail-byline{
    order:4;
  }

  .blog-detail-hero h1{
    max-width:100%;
    margin-top:10px;
    font-size:clamp(2.18rem,10.2vw,2.95rem);
    line-height:1.03;
  }

  .blog-detail-excerpt{
    font-size:1.16rem;
    line-height:1.5;
  }

  .blog-detail-byline{
    grid-template-columns:48px minmax(0,1fr);
    margin-top:22px;
    padding-top:20px;
  }

  .blog-detail-byline img{
    width:48px;
    height:48px;
  }

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

  .blog-detail-meta-list div{
    display:grid;
    justify-items:start;
    align-items:center;
    gap:2px;
    min-height:auto;
    padding:8px 9px;
    border-radius:14px;
  }

  .blog-detail-meta-list dt{
    font-size:.62rem;
  }

  .blog-detail-meta-list dd{
    font-size:.86rem;
  }

  .blog-detail-cover img{
    aspect-ratio:4/3.05;
  }

  .blog-detail-tags-under-image{
    padding-top:10px;
    font-size:.84rem;
  }

  .blog-detail-layout{
    gap:36px;
    padding-top:var(--df-section-y-mobile-tight,56px);
    padding-bottom:var(--df-section-y-mobile-tight,56px);
  }

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

  .blog-detail-prose .lead{
    font-size:1.08rem;
  }

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

  .blog-detail-prose h3{
    font-size:clamp(1.42rem,6vw,1.78rem);
  }

  .blog-detail-author{
    grid-template-columns:1fr;
    padding:24px;
  }

  .author-avatar-img{
    width:76px;
    height:76px;
  }

  .related-card{min-height:auto}
}

/* v0148 Blog detail mobile/content polish
   Refines spacing, image/theme separation and WYSIWYG text rhythm.
*/

/* Image and themes are separate elements, not one card. */
.blog-detail-cover{
  overflow:visible;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

.blog-detail-cover img{
  border-radius:26px;
  box-shadow:0 26px 58px -46px rgba(44,38,32,.46);
}

.blog-detail-tags-under-image{
  display:block;
  padding:12px 0 0;
  background:transparent;
  color:var(--ink-soft);
  font-size:.9rem;
  line-height:1.5;
}

.blog-detail-themes-label{
  display:inline;
  margin-right:5px;
  color:var(--ink);
  font-weight:800;
}

.blog-detail-theme-text{
  display:inline;
  color:var(--ink-soft);
}

/* Article content stays plain and readable. */
.blog-detail-prose .lead{
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.08rem;
  font-style:normal;
  line-height:1.82;
}

.blog-detail-prose h2{
  margin-top:1.55em;
  font-size:clamp(1.72rem,2.45vw,2.22rem);
}

.blog-detail-prose h3{
  margin-top:1.35em;
  font-size:clamp(1.42rem,2vw,1.76rem);
}

.blog-detail-prose h4{
  margin-top:1.25em;
}

.blog-detail-prose h5,
.blog-detail-prose h6{
  margin-top:1.15em;
}

@media(max-width:680px){
  .blog-detail-hero{
    padding:22px 0 30px;
  }

  .blog-detail-hero-grid{
    gap:14px;
  }

  .blog-detail-back{
    margin-bottom:8px;
  }

  .blog-detail-hero h1{
    margin-top:4px;
  }

  .blog-detail-cover{
    margin-top:0;
    margin-bottom:0;
  }

  .blog-detail-cover img{
    border-radius:20px;
    box-shadow:0 18px 42px -34px rgba(44,38,32,.46);
  }

  .blog-detail-tags-under-image{
    padding-top:8px;
    font-size:.82rem;
    line-height:1.45;
  }

  .blog-detail-layout{
    padding-top:34px;
  }

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

  .blog-detail-prose h2{
    margin-top:1.35em;
    font-size:clamp(1.58rem,7.2vw,2.02rem);
  }

  .blog-detail-prose h3{
    margin-top:1.2em;
    font-size:clamp(1.34rem,5.7vw,1.62rem);
  }
}

/* v0149 Blogdetail final polish
   Subtler meta cards, editorial theme separator and tighter mobile content rhythm.
*/
.blog-detail-tags-under-image{
  padding-top:10px;
  font-size:.88rem;
}

.blog-detail-theme-separator{
  display:inline-flex;
  margin:0 7px;
  color:rgba(44,38,32,.42);
}

.blog-detail-layout{
  padding-top:64px;
}

.blog-detail-meta-list div{
  min-height:30px;
  padding:5px 10px;
  border-color:rgba(44,38,32,.08);
  background:rgba(252,250,243,.38);
  box-shadow:none;
}

.blog-detail-meta-list dt{
  font-size:.68rem;
}

.blog-detail-meta-list dd{
  font-size:.88rem;
}

.blog-detail-comments-jump{
  color:inherit;
  text-decoration:none;
}

.blog-detail-comments-jump:hover,
.blog-detail-comments-jump:focus-visible{
  color:var(--terracotta);
  text-decoration:none;
}

@media(max-width:680px){
  .blog-detail-tags-under-image{
    padding-top:7px;
    font-size:.82rem;
    line-height:1.42;
  }

  .blog-detail-theme-separator{
    margin:0 6px;
  }

  .blog-detail-layout{
    padding-top:22px;
  }

  .blog-detail-meta-list div{
    padding:7px 8px;
    border-color:rgba(44,38,32,.08);
    background:rgba(255,255,255,.26);
  }
}

/* v0150 Blogdetail lower-section polish
   Better guestblog CTA, newsletter CTA and overview-style related blog cards.
*/
.blog-detail-story-cta{
  margin-top:54px;
  padding:0;
}

.blog-detail-story-cta__inner{
  position:relative;
  overflow:hidden;
  padding:34px 32px;
  border-radius:28px;
  background:
    radial-gradient(260px 180px at 86% 8%, rgba(255,255,255,.20), transparent 72%),
    linear-gradient(135deg, var(--olive-deep), #7c8569);
  color:var(--cream);
  box-shadow:0 28px 60px -46px rgba(44,38,32,.55);
}

.blog-detail-story-cta__inner::after{
  content:"";
  position:absolute;
  right:-56px;
  bottom:-78px;
  width:180px;
  height:180px;
  border:1px solid rgba(250,246,236,.18);
  border-radius:999px;
}

.blog-detail-story-cta .eyebrow{
  color:#e0a458;
}

.blog-detail-story-cta h2{
  margin-top:10px;
  font-size:clamp(2rem,3vw,2.75rem);
  color:var(--cream);
}

.blog-detail-story-cta p{
  max-width:34rem;
  margin-top:12px;
  color:rgba(250,246,236,.80);
  line-height:1.65;
}

.blog-detail-story-cta .btn{
  margin-top:22px;
}

.blog-newsletter-cta{
  display:grid;
  grid-template-columns:1fr minmax(280px, 360px);
  gap:28px;
  align-items:center;
  margin-top:22px;
  padding:30px 32px;
  border:1px solid rgba(44,38,32,.10);
  border-radius:28px;
  background:#fcfaf3;
}

.blog-newsletter-cta h2{
  margin-top:10px;
  font-size:clamp(1.72rem,2.4vw,2.3rem);
}

.blog-newsletter-cta p{
  max-width:34rem;
  margin-top:10px;
  color:var(--ink-soft);
  line-height:1.65;
}

.blog-newsletter-form{
  display:grid;
  gap:10px;
}

.blog-newsletter-form__row{
  display:flex;
  gap:10px;
}

.blog-newsletter-form .form-control{
  min-width:0;
}

.blog-newsletter-form .btn{
  flex:0 0 auto;
}

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

/* Related posts use the same visual card language as blog overview. */
.blog-detail-related .blog-card{
  min-height:100%;
}

.blog-detail-related .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-detail-related .blog-card-comments{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  color:var(--ink-soft);
  font-size:.82rem;
  white-space:nowrap;
}

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

@media(max-width:980px){
  .blog-newsletter-cta{
    grid-template-columns:1fr;
  }

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

@media(max-width:680px){
  .blog-detail-story-cta{
    margin-top:42px;
  }

  .blog-detail-story-cta__inner,
  .blog-newsletter-cta{
    padding:26px 22px;
    border-radius:24px;
  }

  .blog-newsletter-form__row{
    flex-direction:column;
  }

  .blog-newsletter-form .btn{
    width:100%;
  }
}

/* v0151 Blogdetail sticky side actions + compact email form
   Guestblog CTA and newsletter live in the right sticky column on desktop.
*/
.blog-detail-layout{
  grid-template-columns:minmax(0, 760px) 340px;
  justify-content:center;
  align-items:start;
}

.blog-detail-sidebar{
  position:relative;
  display:block;
}

.blog-detail-sidebar-sticky{
  position:sticky;
  top:92px;
  display:grid;
  gap:18px;
}

.detail-side-card--story{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(260px 180px at 90% 0%, rgba(224,164,88,.22), transparent 72%),
    linear-gradient(135deg, var(--olive-deep), #7c8569);
  color:var(--cream);
  box-shadow:0 26px 58px -44px rgba(44,38,32,.55);
}

.detail-side-card--story::after{
  content:"";
  position:absolute;
  right:-58px;
  bottom:-78px;
  width:180px;
  height:180px;
  border:1px solid rgba(250,246,236,.18);
  border-radius:50%;
}

.detail-side-card--story > *{
  position:relative;
  z-index:1;
}

.detail-side-card--story .eyebrow{
  color:#e0a458;
}

.detail-side-card--story h2{
  color:var(--cream);
  font-size:1.8rem;
  line-height:1.08;
}

.detail-side-card--story p{
  color:rgba(250,246,236,.78);
}

.detail-side-card--story .btn{
  margin-top:18px;
}

.detail-side-card--newsletter{
  background:var(--terracotta);
  color:#fff;
  border-color:transparent;
  box-shadow:0 24px 54px -42px rgba(181,98,62,.65);
}

.detail-side-card--newsletter .eyebrow{
  color:rgba(255,255,255,.72);
}

.detail-side-card--newsletter h2{
  color:#fff;
  font-size:1.65rem;
  line-height:1.08;
}

.detail-side-card--newsletter p{
  color:rgba(255,255,255,.78);
}

.compact-email-form{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.compact-email-field{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:58px;
  padding:7px;
  border-radius:999px;
  background:var(--cream);
  box-shadow:inset 0 0 0 1px rgba(44,38,32,.04);
}

.compact-email-field input{
  min-width:0;
  flex:1 1 auto;
  width:100%;
  height:44px;
  padding:0 14px 0 18px;
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
}

.compact-email-field input::placeholder{
  color:rgba(74,63,54,.62);
}




.detail-side-card--newsletter .form-error{
  color:#fff;
}

.detail-side-card--newsletter .form-message--success{
  color:#fff;
  background:transparent;
  border-color:transparent;
}

/* Remove older full-width lower CTA/newsletter layouts when present. */
.blog-detail-story-cta,
.blog-newsletter-cta,
.blog-detail-submit-cta,
.blog-detail-newsletter{
  display:none;
}

@media(max-width:980px){
  .blog-detail-layout{
    grid-template-columns:1fr;
  }

  .blog-detail-sidebar-sticky{
    position:static;
  }

  .blog-detail-sidebar{
    order:2;
  }
}

@media(max-width:680px){
  .blog-detail-sidebar{
    margin-top:8px;
  }

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

  .compact-email-field{
    min-height:56px;
  }

  
}

/* v0152: compact-email-field button behavior is protected globally.
   Page CSS may style placement/colors only; no hover transform here.
*/
.detail-side-card--newsletter .compact-email-field{
  background:var(--cream);
}

/* v0153: compact e-mail submit icon is controlled globally.
   Page CSS only keeps sidebar placement.
*/
.detail-side-card--newsletter .compact-email-field{
  width:100%;
}

/* v0154: e-mail icon button alignment is controlled globally. */
.detail-side-card--newsletter .compact-email-field{
  justify-content:space-between;
}



/* v0159 Blog detail compact email cleanup */
.detail-side-card--newsletter .compact-email-form{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.detail-side-card--newsletter .compact-email-field{
  width:100%;
  background:var(--cream);
  justify-content:initial;
}

.detail-side-card--newsletter .compact-email-field + .form-error,
.detail-side-card--newsletter .compact-email-field + .form-message,
.detail-side-card--newsletter .compact-email-field ~ .compact-email-error,
.detail-side-card--newsletter .compact-email-field ~ .compact-email-success{
  display:block;
}


/* v0162 Blog detail spacing + sticky sidebar alignment
   - reduce the visual gap between hero/meta and article body
   - normalize first/next element margins in WYSIWYG prose
   - keep right sidebar actions visually aligned with article start on desktop
*/
.blog-detail-prose p,
.blog-detail-prose h2,
.blog-detail-prose h3,
.blog-detail-prose h4,
.blog-detail-prose h5,
.blog-detail-prose h6,
.blog-detail-prose blockquote,
.blog-detail-prose ul,
.blog-detail-prose ol{
  margin-bottom:0;
}

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

.blog-detail-prose h2{
  margin-top:1.7em;
}

.blog-detail-prose h3{
  margin-top:1.45em;
}

.blog-detail-sidebar{
  align-self:start;
}

.blog-detail-sidebar-sticky{
  top:92px;
}

@media(max-width:980px){
  .blog-detail-layout{
    padding-top:24px;
  }
}

@media(max-width:680px){
  .blog-detail-layout{
    padding-top:18px;
  }
}

/* v0163 Remove top back link and move return navigation to related section */
.blog-detail-back{
  display:none !important;
}

.blog-detail-related-back{
  display:inline-flex;
  align-items:center;
  margin-top:16px;
  color:var(--terracotta);
  font-weight:800;
  text-decoration:none;
}

.blog-detail-related-back:hover,
.blog-detail-related-back:focus-visible{
  color:var(--terracotta-deep);
  text-decoration:none;
}

@media(max-width:680px){
  .blog-detail-hero{
    padding-top:16px;
  }

  .blog-detail-hero-grid{
    gap:12px;
  }

  .blog-detail-hero-copy .blog-detail-back{
    display:none !important;
  }

  .blog-detail-hero-copy h1{
    order:1;
  }

  .blog-detail-hero-copy .blog-detail-excerpt{
    order:2;
  }

  .blog-detail-hero-copy .blog-detail-byline{
    order:3;
  }

  .blog-detail-cover{
    order:4;
  }
}



/* v0164 Blog detail sidebar alignment */
.blog-detail-sidebar{
  align-self:start;
  margin-top:0 !important;
  padding-top:0;
}

.blog-detail-sidebar-sticky{
  top:72px;
}

/* v0165: newsletter messages live under the pill without a box */
.detail-side-card--newsletter .compact-email-error,
.detail-side-card--newsletter .compact-email-success{
  margin:8px 8px 0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff !important;
}



/* v0166 Blog detail sidebar: desktop sticky + tighter top alignment */
@media(min-width:981px){
  .blog-detail-layout{
    align-items:start;
  }

  .blog-detail-content{
    min-width:0;
  }

  .blog-detail-sidebar{
    align-self:start;
    margin-top:-56px !important;
    padding-top:0 !important;
  }

  .blog-detail-sidebar-sticky{
    position:sticky !important;
    top:88px !important;
  }
}


/* v0168 Blog detail hero/body spacing refinement
   Reduce the gap between hero meta information and the start of article copy.
*/
.blog-detail-hero{
  padding-bottom:18px;
}

.blog-detail-layout{
  padding-top:8px;
}

@media(max-width:980px){
  .blog-detail-hero{
    padding-bottom:12px;
  }

  .blog-detail-layout{
    padding-top:12px;
  }
}

@media(max-width:680px){
  .blog-detail-hero{
    padding-bottom:8px;
  }

  .blog-detail-layout{
    padding-top:8px;
  }
}

/* v0170 Blog detail unified flow
   Structural fix: hero/media and article body were visually split into rows with too much vertical gap.
   This override collapses that gap and keeps the sidebar sticky next to the article text.
*/
.blog-detail-article--unified .blog-detail-hero{
  padding-bottom:0 !important;
}

.blog-detail-article--unified .blog-detail-hero-grid{
  align-items:end !important;
}

.blog-detail-article--unified .blog-detail-layout{
  margin-top:0 !important;
  padding-top:0 !important;
  grid-template-columns:minmax(0, 760px) 340px !important;
  align-items:start !important;
}

.blog-detail-article--unified .blog-detail-content{
  padding-top:0 !important;
}

.blog-detail-article--unified .blog-detail-prose{
  margin-top:0 !important;
  padding-top:0 !important;
}

.blog-detail-article--unified .blog-detail-prose > :first-child{
  margin-top:0 !important;
}

.blog-detail-article--unified .blog-detail-sidebar{
  align-self:start !important;
  margin-top:0 !important;
  padding-top:0 !important;
  position:relative !important;
}

.blog-detail-article--unified .blog-detail-sidebar-sticky{
  position:sticky !important;
  top:84px !important;
}

@media(max-width:980px){
  .blog-detail-article--unified .blog-detail-layout{
    grid-template-columns:1fr !important;
    padding-top:18px !important;
  }

  .blog-detail-article--unified .blog-detail-sidebar-sticky{
    position:static !important;
  }
}

@media(max-width:680px){
  .blog-detail-article--unified .blog-detail-hero{
    padding-bottom:0 !important;
  }

  .blog-detail-article--unified .blog-detail-layout{
    padding-top:14px !important;
  }
}

/* v0171 Sticky sidebar repair
   Sticky failed because v0170 used transform-based layout shifting.
   Sticky elements must not live inside transformed layout containers.
*/
@media(min-width:981px){
  .blog-detail-article--unified .blog-detail-layout{
    transform:none !important;
    margin-top:-18px !important;
    padding-top:0 !important;
    overflow:visible !important;
    align-items:start !important;
  }

  .blog-detail-article--unified .blog-detail-sidebar{
    position:relative !important;
    align-self:start !important;
    margin-top:0 !important;
    padding-top:0 !important;
    overflow:visible !important;
  }

  .blog-detail-article--unified .blog-detail-sidebar-sticky{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:88px !important;
    align-self:start !important;
    z-index:2;
  }
}

@media(max-width:980px){
  .blog-detail-article--unified .blog-detail-layout{
    margin-top:0 !important;
    padding-top:18px !important;
    transform:none !important;
  }

  .blog-detail-article--unified .blog-detail-sidebar-sticky{
    position:static !important;
    top:auto !important;
  }
}

/* v0172 Blog detail column alignment + robust sticky sidebar
   Use the same desktop grid widths for hero and body, so:
   - article text aligns with title/intro
   - sidebar aligns with hero image
   - sticky works without transforms or offset hacks
*/
@media(min-width:981px){
  .blog-detail-hero-grid,
  .blog-detail-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 650px) minmax(320px, 480px) !important;
    gap:clamp(36px,6vw,76px) !important;
    align-items:start !important;
  }

  .blog-detail-hero-copy,
  .blog-detail-content{
    grid-column:1 !important;
    max-width:none !important;
    width:100% !important;
    margin-left:0 !important;
    padding-left:0 !important;
  }

  .blog-detail-cover,
  .blog-detail-sidebar{
    grid-column:2 !important;
    width:100% !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .blog-detail-article--unified .blog-detail-layout,
  .blog-detail-layout{
    margin-top:0 !important;
    padding-top:24px !important;
    transform:none !important;
    overflow:visible !important;
  }

  .blog-detail-sidebar{
    position:relative !important;
    align-self:start !important;
    margin-top:0 !important;
    overflow:visible !important;
  }

  .blog-detail-sidebar-sticky{
    position:-webkit-sticky !important;
    position:sticky !important;
    top:96px !important;
    display:grid !important;
    gap:18px !important;
    width:100% !important;
    z-index:2;
  }

  .detail-side-card{
    width:100% !important;
    box-sizing:border-box !important;
  }
}

@media(max-width:980px){
  .blog-detail-sidebar-sticky{
    position:static !important;
    top:auto !important;
  }
}

/* v0173 Blogdetail desktop image position + ratio refinement
   Move hero image higher on desktop, make it less square and give themes more breathing room.
*/
@media(min-width:981px){
  .blog-detail-cover{
    margin-top:-46px !important;
  }

  .blog-detail-cover img{
    aspect-ratio:16 / 10.2 !important;
    object-fit:cover !important;
  }

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

@media(max-width:980px){
  .blog-detail-cover{
    margin-top:0 !important;
  }
}

/* v0174 Blogdetail hero image alignment + full-width author/meta row
   Image moves up into the H1/intro zone.
   Author/meta becomes a full-width row with borders across both columns.
*/
@media(min-width:981px){
  .blog-detail-hero-grid{
    align-items:start !important;
  }

  .blog-detail-cover{
    margin-top:8px !important;
  }

  .blog-detail-cover img{
    aspect-ratio:16 / 9.6 !important;
  }

  .blog-detail-byline{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:54px minmax(0, 1fr) auto !important;
    align-items:center !important;
    gap:12px 16px !important;
    width:100% !important;
    max-width:none !important;
    margin-top:28px !important;
    padding:22px 0 !important;
    border-top:1px solid rgba(44,38,32,.12) !important;
    border-bottom:1px solid rgba(44,38,32,.12) !important;
  }

  .blog-detail-byline-main{
    min-width:0;
  }

  .blog-detail-meta-list{
    grid-column:auto !important;
    justify-content:flex-end !important;
    margin:0 !important;
  }

  .blog-detail-article--unified .blog-detail-layout,
  .blog-detail-layout{
    padding-top:18px !important;
  }
}

@media(max-width:980px){
  .blog-detail-byline{
    border-bottom:1px solid rgba(44,38,32,.12);
  }
}

@media(max-width:680px){
  .blog-detail-byline{
    grid-template-columns:48px minmax(0,1fr);
    padding-bottom:18px;
  }

  .blog-detail-meta-list{
    grid-column:1 / -1 !important;
  }
}

/* v0175 Blog detail spacing rhythm
   Final spacing system for the blog detail template.
   Avoid one-off margin fights by defining the hero/meta/body/sidebar rhythm in one block.
*/
:root{
  --blog-detail-hero-title-to-intro:22px;
  --blog-detail-hero-row-gap:28px;
  --blog-detail-meta-padding-y:20px;
  --blog-detail-meta-to-body:28px;
  --blog-detail-paragraph-gap:22px;
  --blog-detail-heading-gap:46px;
  --blog-detail-heading-to-copy:18px;
  --blog-detail-image-to-themes:14px;
  --blog-detail-sidebar-gap:18px;
  --blog-detail-sticky-top:96px;
}

@media(min-width:981px){
  .blog-detail-hero{
    padding-bottom:0 !important;
  }

  .blog-detail-hero-grid{
    column-gap:clamp(36px,6vw,76px) !important;
    row-gap:var(--blog-detail-hero-row-gap) !important;
    align-items:start !important;
  }

  .blog-detail-hero h1{
    margin-bottom:var(--blog-detail-hero-title-to-intro) !important;
  }

  .blog-detail-excerpt{
    margin:0 !important;
  }

  .blog-detail-cover{
    margin-top:0 !important;
  }

  .blog-detail-tags-under-image{
    padding-top:var(--blog-detail-image-to-themes) !important;
  }

  .blog-detail-byline{
    margin-top:0 !important;
    padding-top:var(--blog-detail-meta-padding-y) !important;
    padding-bottom:var(--blog-detail-meta-padding-y) !important;
  }

  .blog-detail-layout{
    padding-top:var(--blog-detail-meta-to-body) !important;
    padding-bottom:var(--df-section-y-tight,78px) !important;
  }

  .blog-detail-sidebar-sticky{
    top:var(--blog-detail-sticky-top) !important;
    gap:var(--blog-detail-sidebar-gap) !important;
  }
}

.blog-detail-prose > *{
  margin-bottom:0 !important;
}

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

.blog-detail-prose p + p{
  margin-top:var(--blog-detail-paragraph-gap) !important;
}

.blog-detail-prose p + ul,
.blog-detail-prose p + ol,
.blog-detail-prose ul + p,
.blog-detail-prose ol + p{
  margin-top:var(--blog-detail-paragraph-gap) !important;
}

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

.blog-detail-prose :is(p, ul, ol, blockquote) + h3{
  margin-top:calc(var(--blog-detail-heading-gap) - 10px) !important;
}

.blog-detail-prose h2 + p,
.blog-detail-prose h3 + p,
.blog-detail-prose h4 + p,
.blog-detail-prose h5 + p,
.blog-detail-prose h6 + p{
  margin-top:var(--blog-detail-heading-to-copy) !important;
}

.blog-detail-prose h2{
  font-size:clamp(1.82rem,2.55vw,2.35rem) !important;
}

.blog-detail-prose h3{
  font-size:clamp(1.5rem,2.1vw,1.9rem) !important;
}

@media(max-width:980px){
  :root{
    --blog-detail-hero-title-to-intro:18px;
    --blog-detail-meta-to-body:24px;
    --blog-detail-paragraph-gap:18px;
    --blog-detail-heading-gap:34px;
    --blog-detail-heading-to-copy:14px;
    --blog-detail-image-to-themes:10px;
  }

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

  .blog-detail-layout{
    padding-top:var(--blog-detail-meta-to-body) !important;
  }

  .blog-detail-sidebar-sticky{
    position:static !important;
  }
}

@media(max-width:680px){
  .blog-detail-hero-grid{
    row-gap:18px !important;
  }

  .blog-detail-byline{
    padding-top:18px !important;
    padding-bottom:18px !important;
  }

  .blog-detail-layout{
    padding-top:22px !important;
  }
}


/* v0176 Blogdetail desktop cover ratio refinement
   Keep the desktop cover equally wide, but make it slightly taller again.
*/
@media(min-width:981px){
  .blog-detail-cover img{
    aspect-ratio:16 / 10.2 !important;
    object-fit:cover !important;
  }
}

/* v0177 Blogdetail sidebar higher on desktop
   Pull the right CTA/newsletter column upward so the first green block
   aligns much closer to the top of the first body paragraph.
*/
@media(min-width:981px){

  .blog-detail-sidebar-sticky{
    top:88px !important;
  }
}

/* v0178 True sidebar rebuild
   Replaces margin-hack sidebar attempts with a real two-column shell.
   Structure:
   .blog-detail-body-shell
     .blog-detail-body-main
     .blog-detail-body-sidebar > .blog-detail-sticky-stack
*/
@media(min-width:981px){
  .blog-detail-body-shell{
    display:grid !important;
    grid-template-columns:minmax(0, 650px) minmax(320px, 480px) !important;
    gap:clamp(36px,6vw,76px) !important;
    align-items:start !important;
    width:min(1180px, calc(100% - 48px)) !important;
    margin:0 auto !important;
    padding-top:28px !important;
    padding-bottom:var(--df-section-y-tight, 78px) !important;
    overflow:visible !important;
    transform:none !important;
  }

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

  .blog-detail-body-sidebar{
    grid-column:2 !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    align-self:start !important;
    position:relative !important;
    overflow:visible !important;
    transform:none !important;
  }

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

  .blog-detail-body-sidebar .detail-side-card{
    width:100% !important;
    box-sizing:border-box !important;
  }

  /* Neutralize older sidebar/layout overrides from previous iterations. */
  .blog-detail-layout,
  .blog-detail-article--unified .blog-detail-layout{
    transform:none !important;
  }

  .blog-detail-sidebar{
    margin-top:0 !important;
  }
}

@media(max-width:980px){
  .blog-detail-body-shell{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:36px !important;
    width:min(1180px, calc(100% - 32px)) !important;
    margin:0 auto !important;
    padding-top:24px !important;
    padding-bottom:var(--df-section-y-mobile, 72px) !important;
  }

  .blog-detail-body-sidebar .blog-detail-sticky-stack,
  .blog-detail-body-sidebar .blog-detail-sidebar-sticky{
    position:static !important;
    top:auto !important;
  }
}

/* v0179 Canonical 4-row blog detail layout
   Clean source-of-truth layout:
   Row 1: left H1/intro, right image
   Row 2: left author data, right date/reading/comments meta
   Row 3: left 70% article/comments/author box, right 30% true sticky sidebar
   Row 4: related blogs
*/
.blog-detail-main[data-layout-version="0179-canonical-4-row"]{
  overflow:visible !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-article,
.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-hero,
.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-content-shell{
  overflow:visible !important;
  transform:none !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-hero{
  padding:118px 0 0 !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-hero-shell,
.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-meta-row{
  position:relative;
  z-index:1;
  display:grid !important;
  grid-template-columns:minmax(0, 650px) minmax(320px, 480px) !important;
  column-gap:clamp(36px,6vw,76px) !important;
  align-items:start !important;
  width:min(1180px, calc(100% - 48px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-hero-copy{
  grid-column:1;
  width:100%;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-cover{
  grid-column:2;
  width:100%;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  align-self:start !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-cover img{
  width:100%;
  aspect-ratio:16 / 10.2 !important;
  object-fit:cover;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-tags-under-image{
  padding-top:14px !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-meta-row{
  margin-top:30px !important;
  padding-top:20px !important;
  padding-bottom:20px !important;
  border-top:1px solid rgba(44,38,32,.12) !important;
  border-bottom:1px solid rgba(44,38,32,.12) !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-author-meta{
  grid-column:1;
  display:grid;
  grid-template-columns:54px minmax(0, 1fr);
  gap:12px 16px;
  align-items:center;
  min-width:0;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-author-meta img{
  width:54px;
  height:54px;
  border-radius:50%;
  object-fit:cover;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-byline-main{
  display:grid;
  gap:3px;
  min-width:0;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-reading-meta{
  grid-column:2;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:center;
  gap:10px;
  margin:0 !important;
  padding:0 !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-reading-meta > 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-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-content-shell{
  display:grid !important;
  grid-template-columns:minmax(0, 7fr) minmax(300px, 3fr) !important;
  gap:clamp(36px,5vw,64px) !important;
  align-items:start !important;
  width:min(1180px, calc(100% - 48px)) !important;
  margin:0 auto !important;
  padding-top:30px !important;
  padding-bottom:var(--df-section-y-tight, 78px) !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-content-primary{
  grid-column:1;
  width:100%;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-content-sidebar{
  grid-column:2;
  width:100%;
  min-width:0;
  margin:0 !important;
  padding:0 !important;
  align-self:start;
  position:relative;
  overflow:visible !important;
  transform:none !important;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-sidebar-inner{
  position:-webkit-sticky !important;
  position:sticky !important;
  top:96px !important;
  display:grid !important;
  gap:18px !important;
  width:100%;
  z-index:3;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-sidebar-inner .detail-side-card{
  width:100%;
  box-sizing:border-box;
}

.blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-related-row{
  clear:both;
}

@media(max-width:980px){
  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-hero{
    padding-top:92px !important;
  }

  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-hero-shell,
  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-meta-row,
  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-content-shell{
    grid-template-columns:1fr !important;
    width:min(1180px, calc(100% - 32px)) !important;
  }

  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-cover,
  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-reading-meta,
  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-content-sidebar{
    grid-column:1 !important;
  }

  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-hero-shell{
    row-gap:22px !important;
  }

  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-meta-row{
    margin-top:24px !important;
    row-gap:16px !important;
  }

  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-reading-meta{
    justify-content:flex-start !important;
    flex-wrap:wrap;
  }

  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-content-shell{
    gap:36px !important;
    padding-top:24px !important;
  }

  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-sidebar-inner{
    position:static !important;
    top:auto !important;
  }
}

@media(max-width:680px){
  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-reading-meta{
    display:grid !important;
    grid-template-columns:1fr;
  }

  .blog-detail-main[data-layout-version="0179-canonical-4-row"] .blog-detail-reading-meta > div{
    width:max-content;
    max-width:100%;
  }
}

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

/* v0195 Author box — Aanbod hero card inspired
   Style inspiration: the soft layered card from the Aanbod hero intro block.
   Real component CSS only, no generated image.
*/
.blog-detail-author{
  position:relative !important;
  isolation:isolate;
  overflow:hidden;
  display:grid !important;
  grid-template-columns:118px minmax(0,1fr) !important;
  gap:34px !important;
  align-items:center !important;
  margin-top:58px !important;
  padding:42px 46px !important;
  border:1px solid rgba(44,38,32,.10) !important;
  border-radius:32px !important;
  background:
    radial-gradient(260px 220px at 94% 0%, rgba(181,98,62,.10), transparent 64%),
    linear-gradient(180deg, rgba(255,252,246,.88), rgba(250,246,236,.96)) !important;
  box-shadow:
    0 30px 70px -58px rgba(44,38,32,.42),
    inset 0 0 0 1px rgba(255,255,255,.62) !important;
}

.blog-detail-author::before{
  content:"";
  position:absolute;
  inset:-22px;
  z-index:-2;
  border-radius:42px;
  background:rgba(241,233,212,.58);
}

.blog-detail-author::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-72px;
  top:-96px;
  width:260px;
  height:260px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(181,98,62,.10) 0 58%, rgba(181,98,62,.045) 59% 100%);
  opacity:.78;
}

.blog-detail-author .author-avatar-img{
  width:118px !important;
  height:118px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  background:var(--sand) !important;
  border:3px solid rgba(255,255,255,.72) !important;
  box-shadow:
    0 18px 36px -26px rgba(44,38,32,.52),
    0 0 0 1px rgba(44,38,32,.08) !important;
}

.blog-detail-author .eyebrow{
  color:var(--terracotta) !important;
}

.blog-detail-author h2{
  margin:8px 0 12px !important;
  color:var(--ink) !important;
  font-size:clamp(2rem,2.8vw,2.65rem) !important;
  line-height:1.04 !important;
  letter-spacing:-.035em !important;
}

.blog-detail-author p{
  max-width:640px;
  color:rgba(44,38,32,.72) !important;
  font-size:1.02rem !important;
  line-height:1.72 !important;
}

.blog-detail-author .author-meta{
  margin-top:22px !important;
  gap:12px !important;
}

.blog-detail-author .author-meta dt{
  color:rgba(44,38,32,.62) !important;
  font-size:.75rem !important;
  font-weight:800 !important;
  letter-spacing:.16em !important;
}

.blog-detail-author .author-meta dd{
  color:var(--ink) !important;
  font-size:1rem !important;
}

.blog-detail-author .author-website-link{
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  margin-top:20px !important;
  color:var(--terracotta) !important;
  font-size:.96rem !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
}

.blog-detail-author .author-website-link:hover,
.blog-detail-author .author-website-link:focus-visible{
  color:var(--ink) !important;
}

.blog-detail-author .author-website-icon{
  width:18px !important;
  height:18px !important;
  flex:0 0 18px !important;
}

@media(max-width:680px){
  .blog-detail-author{
    grid-template-columns:1fr !important;
    gap:22px !important;
    padding:30px 24px !important;
    border-radius:28px !important;
  }

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

/* v0196 Comments component — soft organic cards + static form
   Inspired by the author/Aanbod card language, but lighter cream-to-white.
*/
.blog-detail-comments{
  margin-top:62px !important;
  padding-top:48px !important;
  border-top:1px solid rgba(44,38,32,.10) !important;
}

.blog-detail-comments .section-heading{
  max-width:760px;
}

.comments-list{
  display:grid !important;
  gap:18px !important;
}

.comment-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid !important;
  grid-template-columns:52px minmax(0,1fr);
  gap:16px;
  align-items:start;
  padding:24px 26px !important;
  border:1px solid rgba(44,38,32,.09) !important;
  border-radius:24px !important;
  background:
    radial-gradient(170px 120px at 92% 6%, rgba(181,98,62,.055), transparent 70%),
    linear-gradient(180deg, rgba(255,252,246,.92), rgba(255,255,255,.74)) !important;
  box-shadow:0 18px 42px -38px rgba(44,38,32,.34) !important;
}

.comment-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:190px;
  height:150px;
  border-radius:48% 52% 44% 56%;
  background:rgba(241,233,212,.38);
  pointer-events:none;
}

.comment-card--one::after{
  right:-76px;
  top:-62px;
  transform:rotate(-12deg);
}

.comment-card--two::after{
  right:8%;
  bottom:-92px;
  width:210px;
  height:135px;
  transform:rotate(14deg);
  background:rgba(181,98,62,.045);
}

.comment-card:nth-child(3n)::after{
  right:-42px;
  bottom:-72px;
  top:auto;
  transform:rotate(22deg);
  background:rgba(143,151,121,.08);
}

.comment-avatar{
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:
    linear-gradient(135deg, rgba(181,98,62,.14), rgba(241,233,212,.72));
  color:var(--terracotta);
  font-weight:800;
  letter-spacing:.02em;
  border:2px solid rgba(255,255,255,.76);
  box-shadow:0 12px 26px -22px rgba(44,38,32,.52);
}

.comment-avatar img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}

.comment-card-head{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 12px;
  margin-bottom:10px;
}

.comment-card h3{
  margin:0 !important;
  color:var(--ink);
  font-family:var(--serif);
  font-size:1.22rem !important;
  line-height:1.1;
}

.comment-card time{
  color:rgba(44,38,32,.56);
  font-size:.88rem;
}

.comment-card p{
  margin:0 !important;
  color:rgba(44,38,32,.78);
  line-height:1.7;
}

.blog-comment-form-panel{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:28px;
  padding:30px;
  border:1px solid rgba(44,38,32,.09);
  border-radius:28px;
  background:
    radial-gradient(220px 160px at 98% 0%, rgba(181,98,62,.06), transparent 68%),
    linear-gradient(180deg, rgba(255,252,246,.9), rgba(255,255,255,.72));
  box-shadow:0 18px 46px -42px rgba(44,38,32,.34);
}

.blog-comment-form-panel::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-90px;
  top:-92px;
  width:260px;
  height:220px;
  border-radius:48% 52% 44% 56%;
  background:rgba(241,233,212,.42);
  transform:rotate(-10deg);
}

.blog-comment-form-panel h3{
  margin:8px 0 8px;
  font-family:var(--serif);
  color:var(--ink);
  font-size:clamp(1.7rem,2.3vw,2.15rem);
  line-height:1.1;
}

.blog-comment-form-panel > p{
  margin:0 0 22px;
  color:rgba(44,38,32,.68);
}

.blog-comment-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}

.blog-comment-form-grid .form-field--full{
  grid-column:1 / -1;
}

.blog-comment-form .form-control{
  width:100%;
  min-height:48px;
  border:1px solid rgba(44,38,32,.14);
  border-radius:16px;
  background:rgba(255,255,255,.72);
  color:var(--ink);
  font:inherit;
  padding:13px 15px;
  outline:none;
}

.blog-comment-form textarea.form-control{
  min-height:132px;
  resize:vertical;
}

.blog-comment-form .form-control:focus{
  border-color:rgba(181,98,62,.42);
  box-shadow:0 0 0 4px rgba(181,98,62,.10);
}

.comment-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:16px 0 10px;
  color:rgba(44,38,32,.70);
  font-size:.94rem;
  line-height:1.5;
}

.comment-consent input{
  margin-top:4px;
  accent-color:var(--terracotta);
}

.comment-form-success{
  margin-top:14px;
}

.comment-card--pending{
  border-color:rgba(181,98,62,.18) !important;
}

.comment-card--pending .comment-card-head::after{
  content:"In afwachting";
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  background:rgba(181,98,62,.09);
  color:var(--terracotta);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media(max-width:680px){
  .comment-card{
    grid-template-columns:44px minmax(0,1fr);
    gap:14px;
    padding:20px !important;
  }

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

  .blog-comment-form-panel{
    padding:24px 20px;
  }

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

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