/* KNX device slider (home automation page). Works as a swipeable row without
   JavaScript; knx-slider.js adds .is-ready and turns it into a coverflow. */
.kcf{--cw:clamp(14rem,20.5vw,24rem);position:relative;margin-top:clamp(2.25rem,4vw,3.5rem);overflow-x:clip;padding-block:1.5rem 0}
.kcf-track{list-style:none;margin:0;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) 1.5rem;scrollbar-width:none}
.kcf-track::-webkit-scrollbar{display:none}
.kcf-slide{flex:0 0 var(--cw);scroll-snap-align:center;position:relative}
.kcf-card{position:relative;aspect-ratio:3/5;border-radius:14px;overflow:hidden;background:var(--char);box-shadow:0 2px 6px rgba(60,46,18,.06),0 34px 60px -30px rgba(60,46,18,.55)}
.kcf-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.kcf-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,19,15,.94) 0%,rgba(20,19,15,.7) 24%,rgba(20,19,15,0) 50%);pointer-events:none}
.kcf-cap{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:clamp(1.1rem,1.6vw,1.75rem)}
.kcf-cat{display:block;font-size:.68rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass-soft)}
.kcf-title{margin:.55rem 0 0;font-family:var(--serif);font-weight:560;font-size:clamp(1.45rem,1.1rem + 1vw,2.05rem);line-height:1.08;color:#FBF8F2;text-wrap:balance}
.kcf-desc{margin:.6rem 0 0;font-size:.92rem;line-height:1.55;color:rgba(251,248,242,.8)}
.kcf-nav,.kcf-dots{display:none}
.kcf-note{max-width:40rem}

.kcf.is-ready .kcf-track{display:block;position:relative;overflow:visible;padding:0;height:calc(var(--cw) * 5 / 3 + 1rem);touch-action:pan-y}
.kcf.is-ready .kcf-slide{position:absolute;top:0;left:50%;width:var(--cw);margin-left:calc(var(--cw) / -2);cursor:pointer;transition:transform .85s var(--ease),opacity .6s var(--ease);will-change:transform}
.kcf.is-ready .kcf-slide.is-active{cursor:default}
.kcf.is-ready .kcf-slide::before{content:"";position:absolute;inset:0;z-index:2;border-radius:14px;background:var(--ivory);opacity:var(--veil,0);pointer-events:none;transition:opacity .6s var(--ease)}
.kcf.is-ready .kcf-desc{opacity:0;max-height:0;overflow:hidden;transition:opacity .5s var(--ease),max-height .5s var(--ease)}
.kcf.is-ready .kcf-slide.is-active .kcf-desc{opacity:1;max-height:7em;transition-delay:.25s}
.kcf.is-ready .kcf-jump{transition:none!important}
.kcf.is-ready .kcf-jump::before{transition:none!important}

.kcf.is-ready .kcf-nav{display:grid;place-items:center;position:absolute;z-index:20;top:calc(1.5rem + var(--nav-y,calc(var(--cw) * 5 / 6)));translate:0 -50%;width:3.5rem;height:3.5rem;border-radius:50%;border:1px solid var(--line-2);background:var(--ivory);color:var(--ink);cursor:pointer;box-shadow:0 14px 30px -16px rgba(60,46,18,.55);transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.kcf-nav svg{width:1.1rem;height:1.1rem}
.kcf.is-ready .kcf-prev{left:max(var(--gutter),env(safe-area-inset-left))}
.kcf.is-ready .kcf-next{right:max(var(--gutter),env(safe-area-inset-right));background:var(--brass);border-color:var(--brass);color:#FBF8F2}
.kcf.is-ready .kcf-prev:hover{background:var(--linen)}
.kcf.is-ready .kcf-next:hover{background:var(--brass-deep);border-color:var(--brass-deep)}
.kcf-nav:active{transform:scale(.94)}
.kcf-nav:focus-visible,.kcf-dot:focus-visible{outline:2px solid var(--brass-deep);outline-offset:3px}

.kcf.is-ready .kcf-dots{display:flex;justify-content:center;gap:.35rem;margin-top:clamp(1.75rem,3vw,2.5rem)}
.kcf-dot{position:relative;width:1.6rem;height:1.5rem;padding:0;border:0;background:none;cursor:pointer}
.kcf-dot::before{content:"";position:absolute;left:50%;top:50%;width:.85rem;height:4px;translate:-50% -50%;border-radius:2px;background:var(--line-2);transition:width .5s var(--ease),background-color .5s var(--ease)}
.kcf-dot[aria-current="true"]{width:3rem}
.kcf-dot[aria-current="true"]::before{width:2.6rem;background:var(--brass)}

/* Wide variant: landscape images with the caption below the picture. */
.kcf--wide{--cw:clamp(18rem,50vw,46rem);--nav-y:calc(var(--cw) / 4)}
.kcf--wide .kcf-card{aspect-ratio:auto;display:flex;flex-direction:column;background:var(--char)}
.kcf--wide .kcf-card img{position:static;aspect-ratio:2/1;height:auto}
.kcf--wide .kcf-card::after{display:none}
.kcf--wide .kcf-cap{position:static;padding:clamp(1.1rem,1.6vw,1.6rem) clamp(1.2rem,2vw,1.9rem) clamp(1.3rem,2vw,1.9rem)}
.kcf--wide .kcf-title{font-size:clamp(1.35rem,1rem + .9vw,1.85rem)}
.kcf.is-ready.kcf--wide .kcf-desc{opacity:1;max-height:none}
.kcf.is-ready.kcf--wide .kcf-track{height:auto}
.kcf-credit a{color:inherit;text-decoration-color:var(--brass)}

@media (max-width:700px){
  .kcf{--cw:min(64vw,20rem)}
  .kcf--wide{--cw:84vw}
  .kcf.is-ready.kcf--wide .kcf-nav{top:auto;bottom:-.3rem;translate:none;width:2.5rem;height:2.5rem}
  .kcf.is-ready.kcf--wide .kcf-dots{margin-top:1.5rem;min-height:1.9rem;align-items:center}
  .kcf.is-ready .kcf-nav{width:2.75rem;height:2.75rem}
  .kcf-title{font-size:1.4rem}
}
@media (prefers-reduced-motion:reduce){
  .kcf.is-ready .kcf-slide,.kcf.is-ready .kcf-slide::before,.kcf.is-ready .kcf-desc,.kcf-dot::before{transition:none}
}