/* CFG homepage, nieuwe stijl (proefversie 14-11-2026).
   Idee: vaste zwart-wit foto achter de pagina, blokken met kleurenfoto's schuiven eroverheen,
   weinig tekst per blok, één accentkleur (oranje), geen iconen. Alles onder .hn zodat andere pagina's niet veranderen. */
.hn{position:relative;color:#f2f2f0;--hn-shadow:0 22px 50px rgba(0,0,0,.55)}
.hn-bg{position:fixed;inset:0;z-index:-1;background:#111 url(cfg-box-overzicht-900w.jpg) center 40%/cover no-repeat;filter:grayscale(1) contrast(1.08)}
@media (min-width:900px){.hn-bg{background-image:url(cfg-box-overzicht.jpg)}}
.hn-bg::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.62)}

.hn section,.hn section.alt{background:transparent;padding:72px 0}
.hn .container{width:min(1180px,92%)}
.hn h1,.hn h2,.hn h3{font-family:var(--font-head);font-weight:600;letter-spacing:.01em}
.hn .section-title{text-align:left;margin:0 0 32px;max-width:760px}
.hn .section-title h2{color:#fff;font-size:clamp(34px,5vw,60px);line-height:1;margin:6px 0 14px}
.hn .section-title h2 span{color:var(--orange)}
.hn .section-title p{color:#d4d4d0;font-size:18px;max-width:60ch}
.hn .section-title .eyebrow,.hn .eyebrow{color:var(--orange);font-size:13px;letter-spacing:.2em}
.hn .btn{border-radius:0;letter-spacing:.12em}

/* hero */
.hn .photo-hero{min-height:clamp(560px,88vh,820px);border-bottom:0;box-shadow:var(--hn-shadow)}
.hn .photo-hero-overlay{background:linear-gradient(180deg,rgba(9,9,9,.35) 0%,rgba(9,9,9,.45) 45%,rgba(9,9,9,.9) 100%)}
.hn .photo-hero-content{max-width:880px;padding:96px 0 72px}
.hn .photo-hero-content h1{font-size:clamp(46px,8.4vw,110px);line-height:.92;font-weight:600;letter-spacing:-.005em}
.hn .photo-hero-copy{font-size:20px}
.hn .hero-claim{color:#fff}

/* strook met voordelen */
.hn .usp-strip{background:rgba(10,10,10,.82);border-bottom:0;border-top:0;box-shadow:var(--hn-shadow)}
.hn .usp-grid div{color:#f2f2f0;font-family:var(--font-head);font-size:20px;letter-spacing:.08em;text-transform:uppercase}

/* jubileum: donker paneel */
.hn .anniversary{background:rgba(10,10,10,.85);box-shadow:var(--hn-shadow);padding:56px 0}

/* wat is CrossFit: drie kolommen op donker paneel */
.hn .definition-grid{background:rgba(10,10,10,.82);box-shadow:var(--hn-shadow);border:0}
.hn .definition-item{background:transparent;color:#e8e8e4;border-color:rgba(255,255,255,.18)}
.hn .definition-item h3{color:#fff}
.hn .definition-item .number{color:var(--orange)}

/* brede fotobanden in kleur */
.hn .photo-band{min-height:clamp(380px,60vh,560px);box-shadow:var(--hn-shadow);margin-block:0}
.hn .photo-band-overlay{background:linear-gradient(180deg,rgba(9,9,9,.45),rgba(9,9,9,.7))}
.hn .photo-band-content{text-align:left;max-width:1180px;width:min(1180px,92%)}
.hn .photo-band-content .box-band-text{max-width:600px}
.hn .photo-band-content h2{font-size:clamp(34px,5vw,64px);line-height:1}
.hn .box-band.right .photo-band-content .box-band-text{margin-left:auto}

/* coach naast foto */
.hn .photo-split{background:rgba(10,10,10,.85);box-shadow:var(--hn-shadow)}
.hn .photo-split>div:last-child{padding:clamp(24px,4vw,56px);color:#e8e8e4}
.hn .photo-split h2{color:#fff;font-size:clamp(32px,4.4vw,54px);line-height:1}
.hn .photo-split h2 span{color:var(--orange)}

/* aanbod: fotokaarten */
.hn .cards.three{gap:22px}
.hn .card{padding:0;background:#fff;color:#161616;border:0;border-radius:0;box-shadow:var(--hn-shadow);display:flex;flex-direction:column;overflow:hidden}
.hn .card-ph{aspect-ratio:4/3;overflow:hidden;background:#222}
.hn .card-ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.hn .card:hover .card-ph img{transform:scale(1.05)}
.hn .card-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.hn .card-body h3{font-size:30px;line-height:1;margin:0;text-transform:uppercase}
.hn .card-body p{margin:0;color:#555}
.hn .card-body .text-link{margin-top:auto;font-weight:600;color:#a84f00}
.hn .card .card-tag{color:#a84f00;font-size:12px;letter-spacing:.16em}

/* kennisbank-kaarten zonder foto: donkerder paneel */
.hn section.alt .card:not(:has(.card-ph)){background:rgba(10,10,10,.85);color:#e8e8e4;padding:26px}
.hn section.alt .card:not(:has(.card-ph)) h3,.hn section.alt .card:not(:has(.card-ph)) p{color:#e8e8e4}
.hn section.alt .card:not(:has(.card-ph)) .text-link{color:var(--orange)}
.hn section.alt .card:not(:has(.card-ph)) .card-tag{color:var(--orange)}

/* community-foto's */
.hn .gallery-two img{box-shadow:var(--hn-shadow)}

/* proefweek en prijs: wit blok blijft, met diepte */
.hn .price-box{box-shadow:var(--hn-shadow);border-radius:0;color:#161616}

/* reviews */
.hn .review{background:#fff;color:#161616;border-radius:0;box-shadow:var(--hn-shadow)}
.hn .text-link{color:var(--orange)}

@media (max-width:760px){
  .hn section,.hn section.alt{padding:48px 0}
  .hn .photo-hero-content{padding:72px 0 48px}
  .hn-bg{background-attachment:scroll}
}
@media (prefers-reduced-motion:reduce){.hn .card-ph img{transition:none}}

/* ===== Binnenpagina's (alles behalve de homepage): witte panelen die over de vaste foto schuiven ===== */
.hn:not(.hn-home) :is(.hn > section, .hn > main > section):not(.hero):not(.photo-hero):not(.section-dark):not(.anniversary):not(.photo-band){background:transparent;padding:28px 0}
.hn:not(.hn-home) :is(.hn > section, .hn > main > section):not(.hero):not(.photo-hero):not(.section-dark):not(.anniversary):not(.photo-band) > .container{
  background:#fff;color:#161616;padding:clamp(24px,4vw,56px);box-shadow:var(--hn-shadow)}
.hn:not(.hn-home) :is(.hn > section, .hn > main > section):not(.hero):not(.photo-hero):not(.section-dark):not(.anniversary) .section-title h2{color:#0a0a0a}
.hn:not(.hn-home) :is(.hn > section, .hn > main > section):not(.hero):not(.photo-hero):not(.section-dark):not(.anniversary) .section-title p{color:#444}
.hn:not(.hn-home) :is(.hn > section, .hn > main > section) .section-title{text-align:left}
.hn:not(.hn-home) :is(.hn > section, .hn > main > section) .card{box-shadow:0 8px 24px rgba(0,0,0,.12);border:1px solid #e6e6e2}
.hn:not(.hn-home) :is(.hn > section, .hn > main > section) .text-link{color:#a84f00}
/* sectie binnen een artikel is al onderdeel van het witte paneel */
.hn .article-section{background:transparent!important}
/* v47: leesbaarheid op donkere panelen */
.hn .definition-item p,.hn .definition-item .number+h3+p{color:#d6d6d2}
.hn .photo-split p,.hn .anniversary p{color:#e4e4e0}

/* v49 (14-11-2026): review-knop, stille hero-loop, rustiger menu */
.review-actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:28px}
.hero-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
.hero-loop.on{opacity:1}
.hn .photo-hero-overlay{z-index:1}
@media (prefers-reduced-motion:reduce){.hero-loop{display:none}}

/* menu: rustiger, alleen desktop */
@media (min-width:1081px){
  .buildbar{background:#0d0d0d;color:#bdbdb8;border-bottom:1px solid #1d1d1d;padding:6px 16px;font-size:12px}
  .buildbar strong{color:#fff;letter-spacing:.14em;font-weight:600}
  nav{background:rgba(10,10,10,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
  .nav-wrap{min-height:64px}
  .nav-logo img{width:46px;height:46px}
  .nav-links{font-size:15px;font-weight:500;letter-spacing:.1em;gap:28px;color:#e8e8e4}
  .nav-dd-btn{font-weight:500}
  .nav-links a,.nav-dd-btn{opacity:.9;transition:opacity .2s,color .2s}
  .nav-links a:hover,.nav-dd-btn:hover{opacity:1}
  .phone-top{font-size:14px!important;font-weight:500!important;letter-spacing:.06em!important;opacity:.8}
  .nav-trial{font-size:14px!important;padding:11px 18px!important;border-radius:0!important}
  .nav-dd-menu{border:0;border-top:2px solid var(--orange);box-shadow:0 18px 40px rgba(0,0,0,.5)}
}

/* v50 (14-11-2026): foto achter de kop van binnenpagina's, donkere strook op mobiel, kleiner logo */
.hn .hero{position:relative;background:linear-gradient(180deg,rgba(9,9,9,.62) 0%,rgba(9,9,9,.82) 70%,rgba(9,9,9,.94) 100%),var(--hero-img,none) center 35%/cover no-repeat,#0a0a0a;box-shadow:var(--hn-shadow);border-bottom:0}
@media (min-width:900px){.hn .hero{background-image:linear-gradient(180deg,rgba(9,9,9,.55) 0%,rgba(9,9,9,.8) 70%,rgba(9,9,9,.93) 100%),var(--hero-img-lg,var(--hero-img,none))}}
.hn .hero h1{font-family:var(--font-head);font-weight:600;letter-spacing:-.005em;line-height:.95}
.hn .hero .hero-logo img{box-shadow:0 14px 34px rgba(0,0,0,.55)}
@media (max-width:560px){
  .hn .hero{background:linear-gradient(180deg,rgba(9,9,9,.6) 0%,rgba(9,9,9,.82) 65%,rgba(9,9,9,.94) 100%),var(--hero-img,none) center 30%/cover no-repeat,#090909!important;border-bottom-width:0!important;padding:34px 0 36px!important}
  .buildbar{background:#0d0d0d!important;color:#bdbdb8!important;border-bottom-color:#1d1d1d!important;padding:7px 14px!important}
  .buildbar strong{color:#fff!important;letter-spacing:.12em!important}
  .hn .hero .hero-logo img{width:92px!important;max-width:92px!important}
}

/* v51 (14-11-2026): blogkaarten en zijkaart met foto i.p.v. icoon */
.hn .blog-card{box-shadow:var(--hn-shadow);border:0;border-radius:0}
.hn .blog-card>img{aspect-ratio:4/3;object-fit:cover}
.hn .side-card img.side-photo{aspect-ratio:4/3;max-width:none;width:100%}

/* v52 (14-11-2026): video vervangt de foto i.p.v. er half doorheen te lopen (spookbeeld) */
.hn .photo-hero:has(.hero-loop.on) .photo-hero-overlay{background:linear-gradient(180deg,rgba(9,9,9,.55) 0%,rgba(9,9,9,.62) 45%,rgba(9,9,9,.92) 100%)}

/* v53 (14-11-2026): rustiger op mobiel. Hero homepage korter, cirkel-icoon weg uit koppen, zwart-wit boxfoto zichtbaar rond tekstpanelen */
/* v54 (14-11-2026): cirkel-logo terug op binnenpagina's (logo, geen foto), compact op tablet/mobiel */
@media(max-width:899px){
  .hn .hero .hero-logo img{width:96px!important;max-width:96px!important;box-shadow:0 8px 22px rgba(0,0,0,.5)}
  .hn .hero .hero-logo{margin-bottom:6px}
}
@media(max-width:560px){
  .hn .photo-hero{min-height:0!important}
  .hn .photo-hero-content{background:transparent!important;padding:34px 0 20px!important;margin:0 auto!important}
  .hn .photo-hero-tagline{display:none!important}
  .hn .photo-hero-content h1{font-size:clamp(34px,10.5vw,44px)!important;margin-bottom:12px!important}
  .hn .hero-claim{font-size:12.5px!important;padding:7px 11px!important;margin-bottom:12px!important}
  .hn .photo-hero-copy{font-size:15px!important;line-height:1.45!important;margin-bottom:16px!important}
  .hn .photo-hero .hero-buttons .btn{padding:14px 16px!important}
  .hn .photo-hero-overlay{background:linear-gradient(180deg,rgba(9,9,9,.5) 0%,rgba(9,9,9,.72) 55%,rgba(9,9,9,.92) 100%)!important}
  .hn:not(.hn-home) :is(.hn > section,.hn > main > section):not(.hero):not(.photo-hero):not(.section-dark):not(.anniversary):not(.photo-band){background:transparent!important;padding:20px 0!important}
}

/* v55 (14-11-2026): homepage mobiel nog rustiger bovenaan. Alleen de homepage. Eén kop, de claim en één knop;
   proefweek-strook, dubbele knop in de kop, eyebrow, lopende tekst en 2e heroknop weg (knop zit ook in de vaste balk onderaan). */
@media(max-width:560px){
  body:has(.hn-home) .buildbar{display:none!important}
  body:has(.hn-home) .nav-trial{display:none!important}
  .hn-home .photo-hero-content .eyebrow{display:none!important}
  .hn-home .photo-hero-copy{display:none!important}
  .hn-home .photo-hero .hero-buttons .btn-outline-white{display:none!important}
  .hn-home .photo-hero-content{padding:44px 0 26px!important}
  .hn-home .photo-hero-content h1{margin-bottom:16px!important}
  .hn-home .photo-hero-content .hero-claim{margin-bottom:18px!important}
  .hn-home .photo-hero .hero-bootcamp{margin-top:14px!important}
  .hn-home .photo-hero .hero-bootcamp span{color:#e6e6e2!important}
}

/* v57 (14-11-2026): homepage telefoon. Eerst vooral het filmpje; kop, claim en knop gaan vloeiend mee met het scrollen (--hp 0..1, gezet door een klein script in index.php).
   html.hi = intro actief. Zonder JS of bij 'minder beweging' blijft alles zichtbaar zoals in v55. */
@media(max-width:560px){
  html.hi .hn-home .photo-hero{min-height:calc(100vh - 150px)!important;min-height:calc(100svh - 150px)!important}
  html.hi .hn-home .photo-hero-overlay{opacity:calc(.28 + .72*var(--hp,0))}
  html.hi .hn-home .photo-hero-content{opacity:var(--hp,0);transform:translateY(calc((1 - var(--hp,0))*42px));will-change:opacity,transform}
  html.hi .hn-home .photo-hero::after{content:"";position:absolute;left:50%;bottom:22px;width:14px;height:14px;margin-left:-9px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg);z-index:3;opacity:calc(.85*(1 - var(--hp,0)*2.5));animation:hiBob 1.8s ease-in-out infinite;pointer-events:none}
}
@keyframes hiBob{0%,100%{transform:translateY(0) rotate(45deg)}50%{transform:translateY(9px) rotate(45deg)}}