/* Podcast page — v0086 cleanup
   Scoped page layout only.
   Do not style global header/footer/buttons/cards here.
*/

.podcast-page{
  background:var(--cream);
}

.podcast-page svg{
  flex:0 0 auto;
}

.podcast-hero{
  position:relative;
  padding:var(--df-section-y) 0 var(--df-section-y-tight);
  overflow:hidden;
  background:var(--cream);
}

.podcast-hero::after{
  content:"";
  position:absolute;
  right:-220px;
  top:-160px;
  width:560px;
  height:560px;
  background:radial-gradient(circle at center, rgba(143,151,121,.22), transparent 68%);
  border-radius:50%;
  z-index:0;
}

.podcast-hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:var(--df-media-content-gap-desktop, 56px);
  align-items:center;
}

.podcast-hero-copy{
  max-width:560px;
}

.podcast-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--terracotta);
  margin-bottom:22px;
}

.podcast-eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:var(--terracotta);
  opacity:.65;
}

.podcast-title{
  font-family:var(--serif);
  font-size:clamp(2.7rem, 5.4vw, 4.4rem);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-.02em;
  margin:0 0 24px;
  color:var(--ink);
}

.podcast-title em{
  font-style:italic;
  color:var(--terracotta);
}

.podcast-lead{
  max-width:32em;
  font-size:1.14rem;
  color:var(--ink-soft);
  line-height:1.7;
  margin:0 0 34px;
}

.podcast-platforms{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--df-button-group-gap, 18px);
}

.podcast-platform{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:48px;
  padding:13px 22px;
  border-radius:var(--df-button-radius, 999px);
  text-decoration:none;
  font-weight:600;
  font-size:.95rem;
  line-height:1;
  transition:transform var(--df-transition-base, .25s ease), box-shadow var(--df-transition-base, .25s ease), background var(--df-transition-base, .25s ease), border-color var(--df-transition-base, .25s ease);
}

.podcast-platform:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(46,38,32,.16);
}

.podcast-platform svg{
  width:19px;
  height:19px;
}

.podcast-platform--spotify{
  background:var(--ink);
  color:var(--cream);
}

.podcast-platform--youtube{
  background:transparent;
  color:var(--ink);
  border:1.6px solid rgba(46,38,32,.25);
}

.podcast-stack{
  position:relative;
  justify-self:center;
  width:330px;
  height:430px;
}

.podcast-stack-card{
  position:absolute;
  overflow:hidden;
  border-radius:16px;
  background:var(--sand);
  box-shadow:0 22px 48px rgba(46,38,32,.26);
}

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

.podcast-stack-card--back-left{
  width:260px;
  aspect-ratio:4/5;
  left:-6px;
  top:34px;
  transform:rotate(-8deg);
  filter:brightness(.96);
}

.podcast-stack-card--back-right{
  width:260px;
  aspect-ratio:4/5;
  right:-6px;
  top:20px;
  transform:rotate(7deg);
  filter:brightness(.96);
}

.podcast-stack-card--front{
  width:262px;
  aspect-ratio:4/5;
  left:50%;
  top:0;
  z-index:3;
  transform:translateX(-50%);
  border:5px solid var(--cream);
}

.podcast-live-badge{
  position:absolute;
  z-index:4;
  bottom:4px;
  left:50%;
  display:flex;
  align-items:center;
  gap:12px;
  width:max-content;
  min-width:390px;
  padding:16px 28px;
  border-radius:999px;
  background:var(--cream);
  border:1px solid rgba(233,221,198,.95);
  box-shadow:0 30px 36px rgba(46,38,32,.14);
  transform:translateX(-50%);
}

.podcast-badge-dot{
  width:12px;
  height:12px;
  flex:0 0 12px;
  border-radius:50%;
  background:#c1774f;
  box-shadow:0 0 0 6px rgba(193,119,79,.16);
  animation:podcastPulse 1.8s ease-in-out infinite;
}

.podcast-live-badge b{
  font-family:var(--serif);
  font-size:clamp(1rem,1.3vw,1.08rem);
  font-weight:600;
  color:var(--ink);
  line-height:1.15;
  white-space:nowrap;
}

@keyframes podcastPulse{
  0%,100%{opacity:.95;box-shadow:0 0 0 5px rgba(193,119,79,.16)}
  50%{opacity:.45;box-shadow:0 0 0 7px rgba(193,119,79,.09)}
}

.podcast-strip{
  background:var(--olive-deep);
  color:var(--cream);
}

.podcast-strip-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:50px;
  padding:32px var(--df-page-x);
}

.podcast-strip-quote{
  max-width:660px;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.2rem,2.3vw,1.65rem);
  font-weight:400;
  line-height:1.35;
}

.podcast-stats{
  display:flex;
  flex-wrap:wrap;
  gap:34px 46px;
}

.podcast-stats div{
  min-width:74px;
}

.podcast-stats dt{
  display:block;
  font-family:var(--serif);
  font-size:1.9rem;
  line-height:1;
}

.podcast-stats dd{
  margin-top:5px;
  font-size:.76rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.84;
}

.podcast-episodes{
  padding-top:var(--df-section-y);
  padding-bottom:var(--df-section-y-tight);
}

.podcast-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:46px;
}

.podcast-section-head h2{
  font-size:clamp(2rem,4vw,2.9rem);
}

.podcast-section-head p{
  max-width:380px;
  color:var(--ink-soft);
}

.podcast-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:54px 48px;
}

.podcast-card{
  display:flex;
  flex-direction:column;
}

.podcast-cover-link{
  position:relative;
  display:block;
  overflow:hidden;
  aspect-ratio:4/5;
  border-radius:16px;
  background:var(--sand);
  box-shadow:0 16px 38px rgba(46,38,32,.16);
  text-decoration:none;
}

.podcast-cover-link img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}

.podcast-cover-link:hover img{
  transform:scale(1.04);
}

.podcast-ribbon{
  position:absolute;
  top:16px;
  left:16px;
  z-index:2;
  padding:6px 13px;
  border-radius:30px;
  background:var(--terracotta);
  color:var(--cream);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.podcast-ribbon--olive{
  background:var(--olive-deep);
}

.podcast-play{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(46,38,32,.18);
  opacity:0;
  transition:opacity .3s;
}

.podcast-cover-link:hover .podcast-play{
  opacity:1;
}

.podcast-play span{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--cream);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 22px rgba(0,0,0,.25);
}

.podcast-play svg{
  width:24px;
  height:24px;
  margin-left:3px;
  color:var(--terracotta);
}

.podcast-card-body{
  padding-top:18px;
}

.podcast-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.podcast-episode-number{
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:600;
  color:var(--terracotta);
}

.podcast-meta-separator{
  width:4px;
  height:4px;
  border-radius:50%;
  background:var(--ink-soft);
  opacity:.5;
}

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

.podcast-card-title{
  font-size:1.38rem;
  margin-bottom:10px;
  color:var(--ink);
}

.podcast-guests{
  margin-bottom:14px;
  font-size:.92rem;
  font-weight:600;
  color:var(--olive-deep);
}

.podcast-description{
  color:var(--ink-soft);
  font-size:.97rem;
  line-height:1.68;
  margin-bottom:16px;
}

.podcast-note{
  font-size:.84rem;
  color:var(--ink-soft);
  background:var(--sand);
  border-left:3px solid var(--olive);
  padding:11px 15px;
  border-radius:8px;
  margin-bottom:16px;
  font-style:italic;
}

.podcast-card-links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px;
}

.podcast-episode-link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 15px;
  border-radius:30px;
  text-decoration:none;
  font-size:.85rem;
  font-weight:600;
  line-height:1;
  transition:all var(--df-transition-fast, .18s ease);
}

.podcast-episode-link svg{
  width:15px;
  height:15px;
}

.podcast-episode-link--spotify{
  background:var(--ink);
  color:var(--cream);
}

.podcast-episode-link--spotify:hover{
  background:#000;
}

.podcast-episode-link--youtube{
  background:transparent;
  color:var(--ink-soft);
  border:1.4px solid rgba(46,38,32,.22);
}

.podcast-episode-link--youtube:hover{
  color:var(--ink);
  border-color:rgba(46,38,32,.4);
}

.podcast-cta-section{
  padding-top:var(--df-section-y-tight);
  padding-bottom:var(--df-section-y);
}

.podcast-cta{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:60px 56px;
  border-radius:26px;
  background:linear-gradient(135deg, var(--terracotta), var(--terracotta-deep));
  color:var(--cream);
  text-align:center;
}

.podcast-cta::before{
  content:"";
  position:absolute;
  right:-80px;
  bottom:-120px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:rgba(250,246,236,.10);
}

.podcast-cta-inner{
  position:relative;
  z-index:2;
  max-width:660px;
  margin:0 auto;
}

.podcast-cta h2{
  font-size:clamp(1.8rem,3.5vw,2.5rem);
  margin-bottom:16px;
}

.podcast-cta p{
  font-size:1.06rem;
  opacity:.92;
  margin-bottom:28px;
}

.podcast-cta .podcast-platforms{
  justify-content:center;
}

@media(max-width:900px){
  .podcast-hero-grid{
    grid-template-columns:1fr;
    gap:var(--df-media-content-gap-mobile, 44px);
  }

  .podcast-stack{
    margin-top:6px;
  }

  .podcast-strip-inner{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
  }

  .podcast-grid{
    grid-template-columns:1fr;
    gap:46px;
  }

  .podcast-cover-link{
    max-width:430px;
  }
}

@media(max-width:680px){
  .podcast-hero{
    padding-top:var(--df-section-y-mobile-tight);
    padding-bottom:var(--df-section-y-mobile);
  }

  .podcast-episodes{
    padding-top:var(--df-section-y-mobile);
    padding-bottom:var(--df-section-y-mobile-tight);
  }

  .podcast-cta-section{
    padding-top:var(--df-section-y-mobile-tight) !important;
    padding-bottom:var(--df-section-y-mobile) !important;
  }

  .podcast-platforms{
    gap:var(--df-button-group-gap-mobile, 12px);
  }

  .podcast-platform{
    width:100%;
    padding:var(--df-button-padding-y-mobile, 13px) var(--df-button-padding-x-mobile, 22px);
  }

  .podcast-strip-inner{
    padding-left:var(--df-page-x-mobile);
    padding-right:var(--df-page-x-mobile);
  }

  .podcast-section-head{
    margin-bottom:32px;
  }

  .podcast-cta{
    padding:42px 26px;
    text-align:left;
  }

  .podcast-cta .podcast-platforms{
    justify-content:flex-start;
  }
}

@media(max-width:560px){
  .podcast-stack{
    width:290px;
    height:380px;
  }

  .podcast-stack-card--front{
    width:236px;
  }

  .podcast-stack-card--back-left,
  .podcast-stack-card--back-right{
    width:180px;
  }

  .podcast-live-badge{
    bottom:0;
    min-width:0;
    max-width:280px;
    padding:14px 18px;
  }

  .podcast-live-badge b{
    white-space:normal;
    font-size:.96rem;
  }
}


/* v0089 Podcast platform brand buttons
   Scoped to podcast page only.
   Icons and text stay white on all platform buttons.
*/
.podcast-platform svg,
.podcast-platform img,
.podcast-episode-link svg,
.podcast-episode-link img{
  flex:0 0 auto;
  display:block;
  object-fit:contain;
}

.podcast-platform img{
  width:19px;
  height:19px;
}

.podcast-episode-link img{
  width:15px;
  height:15px;
}

.podcast-platform--spotify,
.podcast-episode-link--spotify{
  background:#1ED760;
  color:#fff;
  border-color:transparent;
}

.podcast-platform--spotify:hover,
.podcast-episode-link--spotify:hover{
  background:#1DB954;
  color:#fff;
  border-color:transparent;
}

.podcast-platform--youtube,
.podcast-episode-link--youtube{
  background:#FF0000;
  color:#fff;
  border-color:transparent;
}

.podcast-platform--youtube:hover,
.podcast-episode-link--youtube:hover{
  background:#cc0000;
  color:#fff;
  border-color:transparent;
}

.podcast-platform--apple,
.podcast-platform--apple-light,
.podcast-episode-link--apple{
  background:#000;
  color:#fff;
  border-color:transparent;
}

.podcast-platform--apple:hover,
.podcast-platform--apple-light:hover,
.podcast-episode-link--apple:hover{
  background:#222;
  color:#fff;
  border-color:transparent;
}

@media(max-width:680px){
  .podcast-platforms--hero{
    flex-direction:row;
    align-items:center;
    gap:8px;
  }

  .podcast-platforms--hero .podcast-platform{
    width:auto;
    flex:1 1 0;
    min-width:0;
    padding:12px 10px;
    font-size:.82rem;
    white-space:nowrap;
  }
}

/* v0090 Podcast platform buttons — toned LifeSkool variants
   Keep platform recognition, but soften the visual weight for the LifeSkool palette.
   Final CTA uses transparent buttons because it sits on a colored CTA background.
*/
.podcast-platform--spotify,
.podcast-episode-link--spotify{
  background:#5f9f78;
  color:#fff;
  border-color:rgba(255,255,255,.08);
}

.podcast-platform--spotify:hover,
.podcast-episode-link--spotify:hover{
  background:#4f8b69;
  color:#fff;
  border-color:rgba(255,255,255,.12);
}

.podcast-platform--youtube,
.podcast-episode-link--youtube{
  background:#c86b5e;
  color:#fff;
  border-color:rgba(255,255,255,.08);
}

.podcast-platform--youtube:hover,
.podcast-episode-link--youtube:hover{
  background:#b75d51;
  color:#fff;
  border-color:rgba(255,255,255,.12);
}

.podcast-platform--apple,
.podcast-platform--apple-light,
.podcast-episode-link--apple{
  background:#2c2620;
  color:#fff;
  border-color:rgba(255,255,255,.08);
}

.podcast-platform--apple:hover,
.podcast-platform--apple-light:hover,
.podcast-episode-link--apple:hover{
  background:#3a332c;
  color:#fff;
  border-color:rgba(255,255,255,.12);
}

.podcast-cta .podcast-platform{
  background:transparent;
  color:#fff;
  border:1.5px solid rgba(255,255,255,.62);
  box-shadow:none;
}

.podcast-cta .podcast-platform:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1.5px solid rgba(255,255,255,.82);
  transform:translateY(-1px);
}

/* v0092 Podcast hero badge spacing
   Keep the live badge calm and readable under the hero artwork.
*/
.podcast-live-badge{
  bottom:-28px;
}

@media(max-width:680px){
  .podcast-live-badge{
    bottom:-18px;
    width:100%;
    max-width:340px;
    justify-content:flex-start;
  }

  .podcast-live-badge b{
    white-space:nowrap;
  }
}

@media(max-width:380px){
  .podcast-live-badge{
    max-width:100%;
    padding-left:16px;
    padding-right:16px;
  }

  .podcast-live-badge b{
    font-size:.92rem;
  }
}

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