/* ============================================================================
AKH WINTER v2 — seizoensthema voor de keuzehulp (startblok + zijpaneel)
NIEUW IN v2: compactere startblok-tegel op mobiel (<=640px).
Hoort bij akh-engine-v14.css / akh-engine-v31.js. Laad dit bestand NA
akh-engine-v14.css (in het CMS Block "keuzehulp-engine").
AANZETTEN per categorie: zet in het CMS-blok van die categorie op het
startblok het kenmerk data-akh-season="winter", bv.
Het zijpaneel volgt vanzelf: het kijkt of er op de pagina een startblok
met dit kenmerk staat (via :has()).
UITZETTEN: kenmerk weghalen (per categorie), of na het seizoen de
naar dit bestand uit het CMS Block "keuzehulp-engine" halen.
Zonder kenmerk doet dit bestand niets: andere keuzehulpen blijven oranje.
============================================================================ */
/* ---------------- Startblok ---------------- */
.artie-keuzehulp[data-akh-season="winter"]{
--orange:#1a7ba3; --orange-2:#2399c7; --orange-dark:#135d7c;
--ink:#12263A; --muted:#4f5f6e; --border:#d6e7f1;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90 L60 62 L120 76 L200 26 L260 58 L320 38 L420 70 L420 90 Z' fill='%23e1eef6'/%3E%3Cpath d='M200 26 L222 42 L208 40 L200 46 L192 40 L178 42 Z M320 38 L338 50 L326 49 L320 54 L314 49 L302 50 Z' fill='%23ffffff'/%3E%3C/svg%3E") right bottom / 420px 90px no-repeat,
#f1f8fc;
box-shadow:0 10px 26px -16px rgba(18,38,58,.22);
}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__halo{background:radial-gradient(circle,rgba(35,153,199,.22),rgba(35,153,199,0) 65%);}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__track{border-color:rgba(35,153,199,.22);}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__orbit-dot{background:#ffffff;box-shadow:0 0 0 2px #2399c7, 0 0 10px rgba(35,153,199,.6);}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__orbit-dot--2{background:#bfe0f0;box-shadow:0 0 8px rgba(35,153,199,.5);}
/* Label "Nu ook voor wintersport" achter de bovenregel ("Keuzehulp") */
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__eyebrow::after{
content:"Nu ook voor wintersport";
display:inline-flex; align-items:center; margin-left:8px; vertical-align:1px;
padding:3px 9px 3px 25px; border-radius:999px;
background:#ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7ba3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 2v20M4.9 6.5l14.2 11M19.1 6.5L4.9 17.5'/%3E%3C/svg%3E") 9px center / 12px 12px no-repeat;
border:1px solid #cfe3ee;
font-size:11.5px; font-weight:600; letter-spacing:0; text-transform:none; color:#1a7ba3;
}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__button{box-shadow:0 10px 22px -12px rgba(26,123,163,.6);}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__button:hover{box-shadow:0 12px 26px -12px rgba(26,123,163,.7);}
/* Mobiel: compacte tegel (v2) */
@media (max-width:640px){
.artie-keuzehulp[data-akh-season="winter"]{
gap:10px; padding:12px 14px 14px; margin:8px 0 12px;
background-size:240px 50px, auto;
}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__left{gap:12px;}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__figure{width:46px;height:46px;}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__halo{width:54px;height:54px;}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__track,
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__orbit{width:50px;height:50px;}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__orbit-dot{width:8px;height:8px;top:-4px;}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__orbit-dot--2{width:6px;height:6px;bottom:-4px;}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__img{height:42px;}
/* Alleen het label tonen; de losse bovenregel "Keuzehulp" valt weg (de knop zegt het al) */
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__eyebrow{display:block;font-size:0;letter-spacing:0;margin-bottom:5px;line-height:1;}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__eyebrow::after{margin:0;font-size:11px;padding:2px 8px 2px 22px;background-position:8px center;background-size:11px 11px;}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__title{font-size:16px;margin:0 0 2px;}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__text{font-size:13.5px;line-height:1.35;}
.artie-keuzehulp[data-akh-season="winter"] .artie-keuzehulp__button{min-height:44px;padding:10px 18px;font-size:15px;}
/* Gereserveerde hoogte vóór het opbouwen afstemmen op de compacte tegel (tegen verspringen) */
.artie-keuzehulp[data-akh-season="winter"][data-akh-cta]:not([data-akh-ready]){min-height:162px;}
}
/* ---------------- Zijpaneel ---------------- */
body:has([data-akh-season="winter"]) .akh{
--orange:#1a7ba3; --orange-2:#2399c7; --orange-dark:#135d7c;
--muted:#4f5f6e; --faint:#6f8091; --border:#dce9f1; --bg:#f4f9fc;
--soft:#eaf5fb; --bubble:#eef5f9;
}
body:has([data-akh-season="winter"]) .akh__panel{background:#f4f9fc;}
/* Kop: donkerblauw met besneeuwde bergrand */
body:has([data-akh-season="winter"]) .akh__header{
position:relative; z-index:2; border-bottom:0; padding:20px 20px 26px;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30 L0 22 L70 8 L130 20 L210 2 L280 18 L350 6 L460 20 L460 30 Z' fill='%232399c7'/%3E%3Cpath d='M210 2 L222 10 L214 9 L210 12 L206 9 L198 10 Z M350 6 L360 12 L354 12 L350 14 L346 12 L340 12 Z' fill='%23ffffff'/%3E%3C/svg%3E") left bottom / 100% 26px no-repeat,
#1a6f94;
}
body:has([data-akh-season="winter"]) .akh__header-title{color:#ffffff; font-size:17px;}
body:has([data-akh-season="winter"]) .akh__header-title svg{display:none;}
body:has([data-akh-season="winter"]) .akh__header-title::before{
content:""; width:18px; height:18px; flex-shrink:0;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 2v20M4.9 6.5l14.2 11M19.1 6.5L4.9 17.5M9 3.5l3 2.5 3-2.5M9 20.5l3-2.5 3 2.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
body:has([data-akh-season="winter"]) .akh__close{background:rgba(255,255,255,.16); color:#ffffff;}
body:has([data-akh-season="winter"]) .akh__close:hover{background:rgba(255,255,255,.28); color:#ffffff;}
/* Inhoud boven het landschap en de sneeuw */
body:has([data-akh-season="winter"]) .akh__body{position:relative; z-index:1; background:transparent;}
/* Landschap onderin: bergen met sneeuwtoppen en een sneeuwvlakte */
body:has([data-akh-season="winter"]) .akh__panel::after{
content:""; position:absolute; left:0; right:0; bottom:0; height:150px; z-index:0; pointer-events:none;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 460 150' preserveAspectRatio='none'%3E%3Cpath d='M0 150 L0 96 L80 50 L140 80 L230 14 L310 70 L370 44 L460 84 L460 150 Z' fill='%23e3eff6'/%3E%3Cpath d='M230 14 L256 32 L240 30 L230 38 L220 30 L204 32 Z M80 50 L98 62 L86 61 L80 66 L74 61 L62 62 Z M370 44 L386 55 L375 54 L370 59 L365 54 L354 55 Z' fill='%23ffffff'/%3E%3Cpath d='M0 150 L0 124 C80 110 160 118 240 112 C320 106 400 114 460 108 L460 150 Z' fill='%23ffffff'/%3E%3C/svg%3E") center bottom / 100% 150px no-repeat;
}
/* Lichte sneeuwval achter de inhoud (staat stil bij "minder beweging") */
body:has([data-akh-season="winter"]) .akh__panel::before{
content:""; position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; pointer-events:none;
background-image:
radial-gradient(circle at 20px 30px, rgba(35,153,199,.22) 0 2.5px, transparent 3px),
radial-gradient(circle at 120px 90px, rgba(35,153,199,.16) 0 2px, transparent 2.5px),
radial-gradient(circle at 60px 160px, rgba(35,153,199,.12) 0 1.5px, transparent 2px);
background-size:170px 170px, 230px 230px, 310px 310px;
animation:akh-snow 22s linear infinite;
}
@keyframes akh-snow{
from{background-position:0 0, 0 0, 0 0;}
to{background-position:20px 170px, -30px 230px, 40px 310px;}
}
@media (prefers-reduced-motion:reduce){
body:has([data-akh-season="winter"]) .akh__panel::before{animation:none;}
}
/* Vaste oranje/beige tinten uit v14 die niet via de variabelen lopen */
body:has([data-akh-season="winter"]) .akh-bar{background:#dbe9f2;}
body:has([data-akh-season="winter"]) .akh-opt:not(.akh-opt--disabled):hover,
body:has([data-akh-season="winter"]) .akh-chip:not(.is-picked):hover,
body:has([data-akh-season="winter"]) .akh-opt.akh-opt--multi.is-selected{background:#eef7fc;}
body:has([data-akh-season="winter"]) .akh-opt.akh-skip:hover{background:#f4f9fc;}
body:has([data-akh-season="winter"]) .akh-opt-thumb{background-color:#eef4f8;}
body:has([data-akh-season="winter"]) .akh-opt-icon{background:#eaf5fb;}
body:has([data-akh-season="winter"]) .akh-opt-thumb.akh-skeleton,
body:has([data-akh-season="winter"]) .akh-opt-price.akh-opt-price--loading,
body:has([data-akh-season="winter"]) .akh-card__img.akh-skeleton{
background-color:#e3eef5;
background-image:linear-gradient(90deg,#e3eef5 25%,#f3f8fb 37%,#e3eef5 63%);
}
body:has([data-akh-season="winter"]) .akh-spin{border-color:#d6e7f1; border-top-color:var(--orange);}
body:has([data-akh-season="winter"]) .akh-next{box-shadow:0 10px 22px -12px rgba(26,123,163,.6);}
body:has([data-akh-season="winter"]) .akh-card{background:#ffffff;}
body:has([data-akh-season="winter"]) .akh-card:hover{border-color:#bcd6e5; background:#f8fbfd;}