/* CaniCo home, nieuwe vormgeving (2026-10-14).
   Enkel geladen op de home. Uitschakelen: regel 'canico-home' in canico-design.php in commentaar zetten
   en de backup p7-elementor-2026-10-14-voor-nieuwe-home.json terugzetten. */

body.home { --zwart: #000; }
.h-wrap { max-width: 1180px; margin: 0 auto; }
.h-nr { font-family: 'Playfair Display', serif; font-weight: 900; font-size: .95rem; letter-spacing: .2em; color: var(--oranje); margin-bottom: 1.2rem; }
.h-nr::after { content: ""; display: inline-block; width: 48px; height: 1px; background: currentColor; margin-left: .8rem; vertical-align: middle; opacity: .7; }
.h-titel { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2.3rem, 4.6vw, 3.8rem); line-height: 1.06; letter-spacing: -.01em; color: var(--groen-donker); margin: .2rem 0 1.4rem; }
.h-intro { font-size: 1.12rem; line-height: 1.8; color: var(--tekst-grijs); max-width: 620px; }

/* 01 Herkenning */
.h-herken { background: var(--creme); padding: 8rem 2rem; }
.h-herken-grid { display: block; }
.h-herken-kop { max-width: 820px; }
.h-lijsten { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; margin-top: 3.5rem; }
.h-lijsten h3 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.6rem; color: var(--groen-donker); margin: 0 0 .6rem; }
.h-lijsten ul { list-style: none; margin: 0; padding: 0; }
.h-lijsten li { padding: .85rem 0; border-bottom: 1px solid rgba(0,73,59,.14); font-size: 1.05rem; color: var(--tekst-grijs); }
.h-lijsten li::before { content: "×"; color: var(--oranje); font-weight: 800; margin-right: .8rem; }

/* Statement: zwart, grote letters */
.h-statement { background: var(--zwart); color: var(--creme); padding: 9rem 2rem; text-align: center; }
.h-statement p.h-groot { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.08; margin: 0 auto 2rem; max-width: 1000px; color: var(--creme); }
.h-groot span { display: block; color: #ffc49e; font-style: italic; font-weight: 700; }
.h-statement p { color: rgba(248,247,239,.8); font-size: 1.12rem; line-height: 1.8; max-width: 660px; margin: 0 auto; }
.h-kernvraag { margin: 4.5rem auto 0; max-width: 760px; padding-top: 3rem; border-top: 1px solid rgba(248,247,239,.18); }
.h-statement .h-vraag { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(1.8rem, 3.6vw, 2.8rem); color: var(--creme); margin-top: 1rem; }

/* 02 Zo kan het ook voelen: filmpje naast tekst */
.h-split { display: grid; grid-template-columns: .9fr 1.1fr; min-height: 92vh; background: var(--groen-licht); }
.h-split-media { position: relative; overflow: hidden; background: var(--zwart); }
.h-split-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.h-split-tekst { padding: 7rem 5rem; display: flex; flex-direction: column; justify-content: center; }
.h-scenes { display: grid; gap: 1.6rem; margin: 1rem 0 2rem; }
.h-scenes p { font-family: 'Lora', serif; font-size: 1.12rem; line-height: 1.7; color: var(--groen-donker); padding-left: 1.3rem; border-left: 2px solid var(--oranje); margin: 0; }
.h-split-tekst .h-slot { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--groen-donker); margin-top: 1.5rem; }

/* 03 Driehoek: nummer erbij */
body.home .driehoek .h-nr { color: #ffc49e; }

/* 04 Methode: hoofdstukken met studiofoto's */
.h-methode { background: var(--creme); padding: 8rem 2rem 4rem; }
.h-methode-kop { margin-bottom: 4rem; }
.h-hoofdstuk { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 1180px; margin: 0 auto 5rem; align-items: center; }
.h-hoofdstuk img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; display: block; }
.h-hoofdstuk.omgekeerd img { order: 2; }
.h-hs-tekst { padding: 3rem 4.5rem; }
.h-hs-nr { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(4rem, 9vw, 7rem); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--oranje); display: block; margin-bottom: 1rem; }
.h-hs-label { text-transform: uppercase; letter-spacing: .14em; font-size: .75rem; font-weight: 700; color: var(--bosgroen); }
.h-hs-tekst h3 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--groen-donker); margin: .4rem 0 1rem; }
.h-hs-tekst p { font-size: 1.1rem; line-height: 1.8; color: var(--tekst-grijs); }
.h-hs-tekst .h-hs-slot { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.5rem; color: var(--groen-donker); }

/* 05 Aanbod: kaarten met beeld */
.h-aanbod { background: #fff; padding: 8rem 2rem; }
.h-kaarten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3rem; }
.h-kaart { display: flex; flex-direction: column; background: var(--creme); border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s, box-shadow .25s; }
.h-kaart:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,73,59,.12); }
.h-kaart img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 35%; display: block; }
.h-kaart-tekst { padding: 1.8rem 1.8rem 2rem; display: flex; flex-direction: column; flex: 1; }
.h-kaart-label { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 700; color: var(--bosgroen); }
.h-kaart h3 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.7rem; color: var(--groen-donker); margin: .4rem 0 .8rem; }
.h-kaart p, .h-kaart li { font-size: .98rem; line-height: 1.7; color: var(--tekst-grijs); }
.h-kaart ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.h-kaart li { padding: .25rem 0; }
.h-kaart li::before { content: "✓"; color: var(--bosgroen); margin-right: .6rem; font-weight: 700; }
.h-kaart-knop { margin-top: auto; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; color: var(--groen-donker); }
.h-kaart-knop::after { content: " →"; color: var(--oranje); }
.h-kaart.uitgelicht { background: var(--zwart); }
.h-kaart.uitgelicht h3, .h-kaart.uitgelicht .h-kaart-knop { color: var(--creme); }
.h-kaart.uitgelicht p { color: rgba(248,247,239,.8); }
.h-kaart.uitgelicht .h-kaart-label { color: #ffc49e; }
.h-aanbod-noot { margin-top: 2.5rem; text-align: center; color: var(--tekst-grijs); }
.h-aanbod-noot a { color: var(--groen-donker); font-weight: 600; }

/* 07 Missie: zwart met studiofoto */
.h-missie { background: var(--zwart); display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; }
.h-missie img { width: 100%; height: 100%; min-height: 680px; object-fit: cover; display: block; }
.h-missie-tekst { padding: 7rem 5rem; color: var(--creme); }
.h-missie .h-titel { color: var(--creme); }
.h-missie-zonder { color: #ffc49e; font-weight: 700; letter-spacing: .06em; margin-bottom: 1.2rem; }
.h-missie-tekst p { color: rgba(248,247,239,.82); font-size: 1.08rem; line-height: 1.8; }
.h-missie-tekst ul { list-style: none; padding: 0; margin: 1.5rem 0 2.2rem; }
.h-missie-tekst li { padding: .5rem 0; border-bottom: 1px solid rgba(248,247,239,.12); color: rgba(248,247,239,.9); }
.h-missie-tekst li::before { content: "✓"; color: #ffc49e; margin-right: .7rem; }
.h-missie-code { border-left: 2px solid var(--oranje); padding: .4rem 0 .4rem 1.4rem; margin: 2rem 0; }
.h-missie-code .h-code-titel { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.5rem; color: var(--creme); margin: .3rem 0 .6rem; }

/* Hero: lichtgroen (basis), band met Co-woorden in bosgroen (basis). Gekozen op 15/10. */

/* Mobiel */
@media (max-width: 960px) {
	.h-herken, .h-methode, .h-aanbod { padding: 5rem 1.25rem; }
	.h-herken-grid, .h-hoofdstuk, .h-split, .h-missie, .h-lijsten { grid-template-columns: 1fr; gap: 2rem; }
	.h-herken-kop { position: static; }
	.h-hoofdstuk.omgekeerd img { order: 0; }
	.h-hs-tekst { padding: 1rem 0 0; }
	.h-split { min-height: 0; }
	.h-split-media { aspect-ratio: 4 / 5; }
	.h-split-tekst, .h-missie-tekst { padding: 4rem 1.25rem; }
	.h-kaarten { grid-template-columns: 1fr; }
	.h-statement { padding: 6rem 1.25rem; }
	.h-missie img { min-height: 0; aspect-ratio: 4 / 5; }
}

/* Resultaat van de V's: verbinding, vrijheid en vreugde */
.h-resultaat { max-width: 1180px; margin: 2rem auto 4rem; background: var(--zwart); display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; }
.h-resultaat-fotos { display: grid; grid-template-columns: 1fr 1fr; }
.h-resultaat-fotos img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.h-resultaat-tekst { padding: 3rem 3.5rem; color: var(--creme); }
.h-resultaat-tekst .h-hs-label { color: #ffc49e; }
.h-resultaat-tekst h3 { font-family: 'Playfair Display', serif; font-weight: 900; font-size: clamp(2rem, 3.4vw, 2.8rem); color: var(--creme); margin: .4rem 0 1rem; }
.h-resultaat-tekst p { color: rgba(248,247,239,.85); font-size: 1.08rem; line-height: 1.8; }
.h-resultaat-tekst .h-hs-slot { color: var(--creme); font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.5rem; }
@media (max-width: 960px) { .h-resultaat { grid-template-columns: 1fr; } .h-resultaat-tekst { padding: 2.5rem 1.5rem; } }

/* Prijs op de CaniCode-kaart */
.h-kaart p.h-kaart-prijs { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.9rem; color: var(--creme); margin: .4rem 0 1.4rem; padding-top: 1rem; border-top: 1px solid rgba(248,247,239,.15); }
.h-kaart p.h-kaart-prijs span { display: block; font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: .85rem; letter-spacing: .04em; color: rgba(248,247,239,.7); margin-top: .2rem; }
.h-kaart:not(.uitgelicht) p.h-kaart-prijs { color: var(--groen-donker); border-top-color: rgba(0,73,59,.12); font-size: 1.5rem; }
.h-kaart:not(.uitgelicht) p.h-kaart-prijs span { color: var(--tekst-grijs); }
.h-kaart p.h-kaart-prijs { margin-top: auto; }
.h-kaart-knop { margin-top: 0; }
/* De CaniCode-kaart in bosgroen (15/10), knop onderaan */
.h-kaart.uitgelicht { background: var(--bosgroen); }
.h-kaart.uitgelicht .h-kaart-knop { margin-top: auto; }

/* Kleinere beelden buiten de hero (16/10): geen foto's of filmpjes meer van rand tot rand */
@media (min-width: 961px) {
  .h-split:not(.p-split-smal) { grid-template-columns: .75fr 1.25fr !important; min-height: 0 !important; align-items: center; padding: 6rem 0 6rem 5vw; gap: 0; }
  .h-split:not(.p-split-smal) .h-split-media { position: relative; aspect-ratio: 4 / 5; max-height: 600px; overflow: hidden; }
  .h-split:not(.p-split-smal) .h-split-media img, .h-split:not(.p-split-smal) .h-split-media video { position: absolute; inset: 0; width: 100%; height: 100% !important; object-fit: cover; }
  .h-split:not(.p-split-smal) .h-split-tekst { padding: 2rem 5rem; }
  .h-split.omgekeerd:not(.p-split-smal) { grid-template-columns: 1.25fr .75fr !important; padding: 6rem 5vw 6rem 0; }
  .h-missie { grid-template-columns: .75fr 1.25fr; padding: 6rem 0 6rem 5vw; }
  .h-missie > img { min-height: 0 !important; height: auto !important; aspect-ratio: 4 / 5; max-height: 620px; }
  .h-missie .h-missie-tekst { padding: 3rem 5rem; }
}

/* Hero home met filmpje als achtergrond onder een zachte zwarte filter (19/10/2026).
   Op de gsm en bij "beperkte beweging" blijft het stilstaande beeld (poster). */
body.home .hero.hero-film { display: block; position: relative; }
body.home .hero-film .hero-right { position: absolute; inset: 0; padding: 0; margin: 0; }
body.home .hero-film video.hero-right-foto { filter: saturate(.9) brightness(1.18); object-fit: cover; }
/* zelfde filter als de hero van De CaniCode (19/10): zwart, naar links toe dichter achter de tekst */
body.home .hero-film .hero-right-overlay { background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.05) 80%), linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 40%) !important; /* = De CaniCode */ }
body.home .hero-film .hero-left { position: relative; z-index: 2; background: transparent !important; max-width: 780px; min-height: 100vh; padding-left: 6vw; }
body.home .hero-film .hero-left .btn-primary { text-shadow: none; }
body.home .hero-film .hero-h1 { color: #f8f7ef !important; }
body.home .hero-film .hero-sub { color: rgba(248, 247, 239, .9) !important; }
body.home .hero-film .hero-eyebrow { color: #ffc49e !important; }
body.home .hero-film .hero-left .btn-ghost { color: #f8f7ef !important; border-color: rgba(248, 247, 239, .6) !important; }
body.home .hero-film .hero-left .reviews-link { color: #f8f7ef !important; border-bottom-color: rgba(248, 247, 239, .35) !important; }
body.home .hero-film .hero-right-brand { position: absolute; right: 5vw; bottom: 3rem; }
@media (max-width: 960px) {
  body.home .hero-film .hero-left { min-height: 0; max-width: none; padding: 8rem 1.25rem 10rem; }
  body.home .hero-film .hero-right { min-height: 0; }
  body.home .hero-film .hero-right-overlay { background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .85)) !important; }
  body.home .hero-film .hero-right-brand { left: 0; right: 0; bottom: 2rem; }
}
@media (max-width: 760px) {
  body.home .hero-film video.hero-right-foto { display: none; }
  body.home .hero-film .hero-right { background: #2b2a24 url(/wp-content/uploads/canico/video/hero-home-bos-staand.jpg) center 40% / cover no-repeat; }
}


/* Rust · Relatie · Resultaat in de hero: onderschriften beter leesbaar (19/10) */
body.home .hero-film .hero-right-brand { padding: 1rem 1.25rem; border-radius: 6px; background: radial-gradient(ellipse at center, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 60%, rgba(0,0,0,0) 100%); }
body.home .hero-film .hero-rrr-sub { font-size: .74rem !important; color: #f6c7ab !important; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
body.home .hero-film .hero-rrr-woord { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
body.home .hero-film .reviews-link span { color: #f6c7ab !important; }
/* de kleine filmpjes (home "Zo kan het ook voelen", De CaniCode) krijgen hetzelfde stippelkader en staan licht schuin */
.h-split-media:has(> video) { outline: 2px dashed rgba(204,90,58,.6); outline-offset: 10px; border-radius: 6px; transform: rotate(-2deg); overflow: hidden; }
.h-split.omgekeerd .h-split-media:has(> video) { transform: rotate(2deg); }
.h-split-media:has(> video) video { border-radius: 6px; }
.p-iets-groters { margin-top: 1.4rem; font-size: .95rem; font-style: italic; } .pagina-hero .p-iets-groters a { color: #b04a2e; font-weight: 700; font-style: normal; }