/* Page Hero System — v0270
   Mobile top-level hero normalization + shared hero intro typography.
   Loaded after page CSS so old page-specific hero rules cannot drift per page.

   Scope:
   - top-level page heroes: Home, Ruimte huren, Aanbod, Podcast, Team, Blog, Contact, Gastblog, Privacy
   - content detail heroes: Blog detail and Event detail

   Rule:
   - mobile eyebrow starts at the same vertical offset as homepage;
   - eyebrow has one line on the left only;
   - H1 starts from the same rhythm below eyebrow;
   - mobile H1s use one shared size and are left-aligned;
   - title-to-intro spacing follows the homepage rhythm;
   - blog/event detail hero excerpts use one quoted italic presentation pattern.
*/

:root{
  --ls-desktop-hero-eyebrow-top:150px;
  --ls-desktop-hero-bottom:92px;
  --ls-desktop-detail-hero-bottom:0px;
  --ls-desktop-hero-eyebrow-title-gap:26px;
  --ls-desktop-detail-media-title-offset:42px;
  --ls-mobile-hero-eyebrow-top:var(--df-section-y-mobile-tight, 48px);
  --ls-mobile-hero-title-gap:26px;
  --ls-mobile-hero-h1-size:var(--ls-mobile-page-h1-size, clamp(2.55rem, 11vw, 4.35rem));
  --ls-page-hero-title-to-intro-gap:28px;
  --ls-page-hero-intro-font:var(--sans);
  --ls-page-hero-intro-size:1.16rem;
  --ls-page-hero-intro-size-mobile:1.06rem;
  --ls-page-hero-intro-line-height:1.72;
  --ls-page-hero-intro-color:var(--ink-soft);
  --ls-page-hero-intro-weight:400;
}

/* Team used to draw a second line after the eyebrow. The LifeSkool page-hero rule is: left line only. */
.team-eyebrow::after{
  display:none !important;
  content:none !important;
}


/* v0257 Page title → intro rhythm
   The first intro/lead below a hero H1 follows the homepage rhythm everywhere.
   Page CSS may style context, width or bottom spacing, but not this gap.
*/
:is(
  .home-page .hero h1,
  #home-hero-title,
  .aanbod-hero h1,
  .blog-hero h1,
  .contact-hero h1,
  .guestblog-hero h1,
  .legal-hero h1,
  .podcast-hero .podcast-title,
  .rh-hero .rh-title,
  .team-hero .team-title,
  .blog-post-hero-copy > h1,
  .event-detail-hero-copy > h1
){
  margin-bottom:0 !important;
}

.blog-hero .blog-hero-grid{
  margin-top:var(--ls-page-hero-title-to-intro-gap) !important;
}

.blog-hero .blog-lead{
  margin-top:0 !important;
}

:is(
  .home-page .hero .lead,
  .aanbod-hero .lead,
  .contact-hero p,
  .guestblog-hero .guestblog-lead,
  .legal-hero p,
  .podcast-hero .podcast-lead,
  .rh-hero .rh-lead,
  .team-hero .team-lead,
  .blog-post-hero-copy .blog-detail-excerpt,
  .event-detail-hero-copy .event-detail-excerpt
){
  margin-top:var(--ls-page-hero-title-to-intro-gap) !important;
}

/* v0260 Page hero intro typography system
   Team lead is the visual source for all page hero intro text.
   Normal pages: same typography, no quotes, no italic.
   Content detail pages: same typography, italic + template quotes.
   Page CSS may not override this typography per page.
*/
:is(
  .home-page .hero .lead,
  .aanbod-hero .lead,
  .blog-hero .blog-lead,
  .contact-hero p,
  .guestblog-hero .guestblog-lead,
  .legal-hero p,
  .podcast-hero .podcast-lead,
  .rh-hero .rh-lead,
  .team-hero .team-lead,
  .blog-post-hero-copy .blog-detail-excerpt,
  .event-detail-hero-copy .event-detail-excerpt
){
  font-family:var(--ls-page-hero-intro-font) !important;
  font-size:var(--ls-page-hero-intro-size) !important;
  line-height:var(--ls-page-hero-intro-line-height) !important;
  color:var(--ls-page-hero-intro-color) !important;
  font-weight:var(--ls-page-hero-intro-weight) !important;
  letter-spacing:normal !important;
}

:is(
  .home-page .hero .lead,
  .aanbod-hero .lead,
  .blog-hero .blog-lead,
  .contact-hero p,
  .guestblog-hero .guestblog-lead,
  .legal-hero p,
  .podcast-hero .podcast-lead,
  .rh-hero .rh-lead,
  .team-hero .team-lead
){
  font-style:normal !important;
}

:is(
  .blog-post-hero-copy .blog-detail-excerpt,
  .event-detail-hero-copy .event-detail-excerpt
){
  font-style:italic !important;
}

/* v0257 Detail hero intro presentation
   Blog and event detail excerpts use the same italic quoted style.
   The CMS stores the raw excerpt text; quotes are template presentation.
*/
.detail-hero-excerpt{
  font-style:italic !important;
}

.detail-hero-excerpt--quoted::before{
  content:"“";
}

.detail-hero-excerpt--quoted::after{
  content:"”";
}



/* v0270 Desktop page hero rhythm system
   Desktop now follows the same source-of-truth principle as mobile:
   - every page hero eyebrow starts at the same vertical offset;
   - every hero eyebrow uses the same one-left-line style;
   - H1 starts from one shared gap below the eyebrow;
   - intro starts from one shared gap below the H1;
   - when a top-level page has right-side hero media/card, that media aligns with the eyebrow/H1 block;
   - content item detail templates are the exception: the eyebrow stays on the shared top row, while the right image aligns with the H1.
*/
@media(min-width:681px){
  :is(
    .home-page .hero,
    .aanbod-hero,
    .blog-hero,
    .contact-hero,
    .guestblog-hero,
    .legal-hero,
    .podcast-hero,
    .rh-hero,
    .team-hero
  ){
    padding-top:var(--ls-desktop-hero-eyebrow-top) !important;
    padding-bottom:var(--ls-desktop-hero-bottom) !important;
  }

  :is(
    .blog-post-row-hero,
    .event-detail-row-hero
  ){
    padding-top:var(--ls-desktop-hero-eyebrow-top) !important;
    padding-bottom:var(--ls-desktop-detail-hero-bottom) !important;
  }

  .home-page .hero{
    min-height:auto !important;
    align-items:flex-start !important;
  }

  :is(
    .home-page .hero-grid,
    .aanbod-hero-grid,
    .podcast-hero-grid,
    .rh-grid,
    .guestblog-hero-grid
  ){
    align-items:start !important;
  }

  :is(
    .blog-post-hero-grid,
    .event-detail-hero-grid
  ){
    align-items:start !important;
  }

  :is(
    .home-page .hero .eyebrow,
    .aanbod-hero .eyebrow,
    .blog-hero > .wrap > .eyebrow,
    .contact-hero .eyebrow,
    .guestblog-hero .eyebrow,
    .legal-hero .eyebrow,
    .podcast-hero .podcast-eyebrow,
    .rh-hero .rh-eyebrow,
    .team-hero .team-eyebrow,
    .blog-post-hero-copy > .eyebrow,
    .event-detail-hero-copy > .eyebrow
  ){
    display:inline-flex !important;
    align-items:center !important;
    gap:.7em !important;
    margin:0 !important;
    font-family:var(--sans) !important;
    font-size:.72rem !important;
    font-weight:600 !important;
    letter-spacing:.22em !important;
    line-height:1.2 !important;
    text-transform:uppercase !important;
    color:var(--terracotta) !important;
  }

  :is(
    .home-page .hero .eyebrow,
    .aanbod-hero .eyebrow,
    .blog-hero > .wrap > .eyebrow,
    .contact-hero .eyebrow,
    .guestblog-hero .eyebrow,
    .legal-hero .eyebrow,
    .podcast-hero .podcast-eyebrow,
    .rh-hero .rh-eyebrow,
    .team-hero .team-eyebrow,
    .blog-post-hero-copy > .eyebrow,
    .event-detail-hero-copy > .eyebrow
  )::before{
    content:"" !important;
    display:inline-block !important;
    width:28px !important;
    height:1px !important;
    flex:0 0 28px !important;
    background:var(--terracotta) !important;
    opacity:.65 !important;
  }

  :is(
    .home-page .hero .eyebrow,
    .aanbod-hero .eyebrow,
    .blog-hero > .wrap > .eyebrow,
    .contact-hero .eyebrow,
    .guestblog-hero .eyebrow,
    .legal-hero .eyebrow,
    .podcast-hero .podcast-eyebrow,
    .rh-hero .rh-eyebrow,
    .team-hero .team-eyebrow,
    .blog-post-hero-copy > .eyebrow,
    .event-detail-hero-copy > .eyebrow
  )::after{
    display:none !important;
    content:none !important;
  }

  :is(
    .home-page .hero h1,
    #home-hero-title,
    .aanbod-hero h1,
    .blog-hero h1,
    .contact-hero h1,
    .guestblog-hero h1,
    .legal-hero h1,
    .podcast-hero .podcast-title,
    .rh-hero .rh-title,
    .team-hero .team-title,
    .blog-post-hero-copy > h1,
    .event-detail-hero-copy > h1
  ){
    margin-top:var(--ls-desktop-hero-eyebrow-title-gap) !important;
    margin-bottom:0 !important;
  }

  .blog-hero .blog-hero-grid{
    margin-top:var(--ls-page-hero-title-to-intro-gap) !important;
  }

  :is(
    .blog-post-hero-image,
    .event-detail-cover
  ){
    margin-top:var(--ls-desktop-detail-media-title-offset) !important;
  }
}

@media(max-width:680px){
  :is(
    .home-page .hero,
    .aanbod-hero,
    .blog-hero,
    .contact-hero,
    .guestblog-hero,
    .legal-hero,
    .podcast-hero,
    .rh-hero,
    .team-hero,
    .blog-post-row-hero,
    .event-detail-row-hero
  ){
    padding-top:var(--ls-mobile-hero-eyebrow-top) !important;
  }

  :is(
    .home-page .hero-copy,
    .aanbod-hero-copy,
    .blog-hero > .wrap,
    .contact-hero > .wrap,
    .guestblog-hero-copy,
    .legal-hero-inner,
    .podcast-hero-copy,
    .rh-hero .rh-grid > :first-child,
    .team-hero-inner,
    .blog-post-hero-copy,
    .event-detail-hero-copy
  ){
    text-align:left !important;
    align-items:flex-start !important;
    justify-items:start !important;
  }

  :is(
    .home-page .hero .eyebrow,
    .aanbod-hero .eyebrow,
    .blog-hero > .wrap > .eyebrow,
    .contact-hero .eyebrow,
    .guestblog-hero .eyebrow,
    .legal-hero .eyebrow,
    .podcast-hero .podcast-eyebrow,
    .rh-hero .rh-eyebrow,
    .team-hero .team-eyebrow,
    .blog-post-hero-copy > .eyebrow,
    .event-detail-hero-copy > .eyebrow
  ){
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.7em !important;
    margin:0 !important;
    text-align:left !important;
    font-family:var(--sans) !important;
    font-size:.72rem !important;
    font-weight:600 !important;
    letter-spacing:.22em !important;
    line-height:1.2 !important;
    text-transform:uppercase !important;
    color:var(--terracotta) !important;
  }

  :is(
    .home-page .hero .eyebrow,
    .aanbod-hero .eyebrow,
    .blog-hero > .wrap > .eyebrow,
    .contact-hero .eyebrow,
    .guestblog-hero .eyebrow,
    .legal-hero .eyebrow,
    .podcast-hero .podcast-eyebrow,
    .rh-hero .rh-eyebrow,
    .team-hero .team-eyebrow,
    .blog-post-hero-copy > .eyebrow,
    .event-detail-hero-copy > .eyebrow
  )::before{
    content:"" !important;
    display:inline-block !important;
    width:28px !important;
    height:1px !important;
    flex:0 0 28px !important;
    background:var(--terracotta) !important;
    opacity:.65 !important;
  }

  :is(
    .home-page .hero .eyebrow,
    .aanbod-hero .eyebrow,
    .blog-hero > .wrap > .eyebrow,
    .contact-hero .eyebrow,
    .guestblog-hero .eyebrow,
    .legal-hero .eyebrow,
    .podcast-hero .podcast-eyebrow,
    .rh-hero .rh-eyebrow,
    .team-hero .team-eyebrow,
    .blog-post-hero-copy > .eyebrow,
    .event-detail-hero-copy > .eyebrow
  )::after{
    display:none !important;
    content:none !important;
  }

  :is(
    .home-page .hero h1,
    #home-hero-title,
    .aanbod-hero h1,
    .blog-hero h1,
    .contact-hero h1,
    .guestblog-hero h1,
    .legal-hero h1,
    .podcast-hero .podcast-title,
    .rh-hero .rh-title,
    .team-hero .team-title,
    .blog-post-hero-copy > h1,
    .event-detail-hero-copy > h1
  ){
    display:block !important;
    max-width:100% !important;
    margin:var(--ls-mobile-hero-title-gap) 0 0 !important;
    text-align:left !important;
    font-size:var(--ls-mobile-hero-h1-size) !important;
    line-height:1.04 !important;
    letter-spacing:-.035em !important;
  }

  :is(
    .home-page .hero .lead,
    .aanbod-hero .lead,
    .blog-hero .blog-lead,
    .contact-hero p,
    .guestblog-hero .guestblog-lead,
    .legal-hero p,
    .podcast-hero .podcast-lead,
    .rh-hero .rh-lead,
    .team-hero .team-lead,
    .blog-post-hero-copy .blog-detail-excerpt,
    .event-detail-hero-copy .event-detail-excerpt
  ){
    font-size:var(--ls-page-hero-intro-size-mobile) !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }
}

@media(max-width:420px){
  :root{
    --ls-mobile-hero-eyebrow-top:42px;
  }
}


/* v0260 Mobile page gutter system
   One source of truth for mobile horizontal content margins.
   The global mobile gutter is --df-page-x-mobile: 22px, with 20px on very small screens via lifeskool-global.css.
   Detail templates had older width: calc(100% - 32px/28px) rules, which created 14–16px gutters and drifted from the normal pages.
   This layer is loaded after page CSS and forces top-level and content-item wrappers back to the same gutter rhythm.
*/
:root{
  --ls-mobile-page-gutter:var(--df-page-x-mobile, 22px);
}

@media(max-width:680px){
  :is(
    .wrap,
    .blog-post-detail-template .wrap,
    .blog-post-row-related .wrap,
    .event-detail-template .wrap,
    .event-detail-row-related .wrap
  ){
    width:100% !important;
    max-width:1260px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--ls-mobile-page-gutter) !important;
    padding-right:var(--ls-mobile-page-gutter) !important;
    box-sizing:border-box !important;
  }

  /* These grids are also .wrap elements in the HTML, but older detail CSS targeted them directly.
     Keep them on the same outer gutter and prevent extra nested padding on their direct content columns. */
  :is(
    .blog-post-hero-grid,
    .blog-post-meta-grid,
    .blog-post-body-grid,
    .event-detail-hero-grid,
    .event-detail-meta-grid,
    .event-detail-body-grid
  ){
    width:100% !important;
    max-width:1260px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:var(--ls-mobile-page-gutter) !important;
    padding-right:var(--ls-mobile-page-gutter) !important;
    box-sizing:border-box !important;
  }

  :is(
    .blog-post-hero-copy,
    .blog-post-hero-image,
    .blog-post-body-main,
    .blog-post-body-sidebar,
    .event-detail-hero-copy,
    .event-detail-cover,
    .event-detail-body-main,
    .event-detail-sidebar
  ){
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* v0266 Page hero background system
   Hero areas use one calm background: var(--cream). Decorative glows are not allowed in page heroes.
   Full-width content rows may still use intentional sand/olive/terracotta backgrounds when documented.
*/
:where(
  .home-page .hero,
  .aanbod-hero,
  .blog-hero,
  .contact-page .contact-hero,
  .guestblog-hero,
  .legal-page .legal-hero,
  .podcast-hero,
  .rh-hero,
  .team-hero,
  .blog-post-row-hero,
  .event-detail-row-hero
){
  background:var(--cream) !important;
}

:where(
  .podcast-hero::after,
  .team-hero::after
){
  display:none !important;
  content:none !important;
}

/* v0266 high-specificity guard for legacy page CSS loaded before this file. */
.home-page .hero,
.aanbod-hero,
.blog-hero,
.contact-page .contact-hero,
.guestblog-hero,
.legal-page .legal-hero,
.podcast-hero,
.rh-hero,
.team-hero,
.blog-post-row-hero,
.event-detail-row-hero{
  background:var(--cream) !important;
}

.blog-detail-hero::before,
.podcast-hero::after,
.team-hero::after{
  display:none !important;
  content:none !important;
  background:none !important;
}

/* v0288 Event detail hero spacing override
   Event detail pages need breathing room between the hero CTA row and the compact meta row.
   This is intentionally kept in the central hero system because this file loads after page CSS.
*/
@media(min-width:681px){
  .event-detail-row-hero{
    padding-bottom:46px !important;
  }
}

@media(max-width:680px){
  .event-detail-row-hero{
    padding-bottom:24px !important;
  }
}