/* Home page — v0073 cleanup
   Scoped homepage layout only.
   Do not style global header/footer/buttons here.
*/

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

/* Use global Design Factory spacing tokens from lifeskool-global.css */
.home-page .hero{
  padding-top:var(--df-section-y);
  padding-bottom:var(--df-section-y-tight);
}

.home-page .values,
.home-page .space,
.home-page .events,
.home-page .testi{
  padding-top:var(--df-section-y);
  padding-bottom:var(--df-section-y);
}

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

.home-page .hero-grid,
.home-page .values .wrap,
.home-page .space .wrap{
  gap:var(--df-grid-gap);
}

.home-page .events-head,
.home-page .testi-head{
  margin-bottom:var(--df-grid-gap);
}

.home-page .scroll-hint{
  margin-top:var(--df-block-gap);
}

.home-page .cta-eyebrow{
  color:var(--sand);
  justify-content:center;
}

@media(max-width:980px){
  .home-page .hero{
    padding-top:var(--df-section-y-tablet, 88px);
    padding-bottom:var(--df-section-y-tablet, 88px);
  }
}

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

  .home-page .values,
  .home-page .space,
  .home-page .events,
  .home-page .testi{
    padding-top:var(--df-section-y-mobile);
    padding-bottom:var(--df-section-y-mobile);
  }

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

  .home-page .hero-grid,
  .home-page .values .wrap,
  .home-page .space .wrap{
    gap:var(--df-grid-gap-mobile);
  }

  .home-page .events-head,
  .home-page .testi-head{
    margin-bottom:32px;
  }

  .home-page .scroll-hint{
    display:none;
  }
}

@media(max-width:420px){
  .home-page .hero{
    padding-top:42px;
  }
}

/* v0075 SEO/CMS-ready cleanup */
.home-page .cta-eyebrow{
  color:var(--sand);
  justify-content:center;
}

/* v0077 homepage mobile media-to-content spacing
   Large visual blocks need more breathing room than card grids on mobile. */
@media(max-width:680px){
  .home-page .space .wrap{
    gap:44px !important;
  }

  .home-page .space-img{
    margin-bottom:0;
  }
}

@media(max-width:420px){
  .home-page .space .wrap{
    gap:40px !important;
  }
}

/* v0085 homepage hero mobile media gap
   Hero buttons and hero visual are different content groups.
   They need media/content spacing, not normal card grid spacing. */
@media(max-width:680px){
  .home-page .hero-grid{
    gap:var(--df-media-content-gap-mobile, 44px) !important;
  }

  .home-page .hero-art{
    margin-top:6px;
  }
}

@media(max-width:420px){
  .home-page .hero-grid{
    gap:48px !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;
  }
}

/* v0186 Hard homepage desktop H1 override
   home.css is loaded after global.css, so this wins the cascade.
   Desktop homepage H1 must be exactly 90px.
*/
@media(min-width:981px){
  main.home-page #home-hero-title,
  .home-page #home-hero-title,
  #home-hero-title{
    font-size:90px !important;
  }
}

/* v0201 Restore homepage mobile H1 scale
   Desktop remains 90px. Mobile homepage H1 returns to the earlier calmer scale.
*/
@media(max-width:680px){
  main.home-page #home-hero-title,
  .home-page #home-hero-title,
  #home-hero-title{
    font-size:clamp(2.45rem, 10vw, 3.85rem) !important;
    line-height:1.03 !important;
    letter-spacing:-.05em !important;
  }
}

/* v0202 Homepage mobile H1 equals Aanbod mobile H1
   Desktop homepage remains 90px.
*/
@media(max-width:680px){
  main.home-page #home-hero-title,
  .home-page #home-hero-title,
  #home-hero-title{
    font-size:clamp(2.55rem, 11vw, 4.35rem) !important;
    line-height:1.03 !important;
    letter-spacing:-.05em !important;
  }
}