/* KRI lomamajat 3D explorer. Scoped under .kx and .kx-dialog; site tokens only. */
.kx { width:min(1320px,calc(100% - 64px)); margin:0 auto; padding:var(--s-8) 0 var(--s-12); color:var(--slate-900); }
.kx [hidden], .kx-dialog [hidden] { display:none !important; }
.kx button,.kx select,.kx-dialog button { font:inherit; color:inherit; }
.kx button,.kx-dialog button { cursor:pointer; border:0; border-radius:0; background:transparent; min-height:44px; padding:var(--s-2) var(--s-3); }
.kx :is(button,a,input,select):focus-visible,.kx-dialog :is(button,a,input,select,[tabindex]):focus-visible { outline:2px solid var(--highlight-600); outline-offset:2px; }
.kx-layout { display:grid; grid-template-columns:minmax(0,.33fr) minmax(0,.67fr); grid-template-rows:auto 1fr auto; column-gap:var(--s-6); }
.kx-intro { grid-column:1; grid-row:1; padding-top:var(--s-6); position:relative; z-index:1; }
.kx-overline { font-size:var(--t-xs); font-weight:500; text-transform:uppercase; letter-spacing:.19em; margin-bottom:var(--s-5); color:var(--slate-500); }
.kx .kx-title { font-size:clamp(2.5rem,3.9vw,4rem); font-weight:300; line-height:1.05; letter-spacing:-.04em; margin:0; }
.kx .kx-title em { color:var(--highlight-600); font-weight:300; }
.kx-lede { font-family:var(--font-serif); font-size:var(--t-lg); font-weight:300; color:var(--slate-500); margin:var(--s-5) 0 var(--s-7); max-width:31ch; text-wrap:pretty; }

/* Stage: no box, the model stands on the page's paper. */
.kx-stage-wrap { grid-column:2; grid-row:1 / 3; position:relative; min-width:0; }
.kx-stage { position:relative; height:clamp(520px,calc(100vh - 236px),860px); width:100%; }
.kx-stage canvas { display:block; width:100%; height:100%; touch-action:pan-y pinch-zoom; cursor:grab; -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 92%,transparent); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 92%,transparent); mask-composite:intersect; }
.kx-stage canvas.is-dragging { cursor:grabbing; }
.kx-status { position:absolute; inset:auto 0 var(--s-3) 0; text-align:center; font-size:var(--t-sm); color:var(--slate-500); pointer-events:none; }
.kx-retry { position:absolute; bottom:var(--s-12); left:50%; transform:translateX(-50%); text-decoration:underline; text-underline-offset:4px; }

/* Destination index: three typographic buttons between hairlines. */
.kx-destinations { grid-column:1; grid-row:2; align-self:start; max-width:400px; position:relative; z-index:1; }
.kx-destination { border-top:1px solid var(--line); }
.kx-destination:last-child { border-bottom:1px solid var(--line); }
.kx-index-button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); text-align:left; padding:var(--s-3) 0 var(--s-4) !important; }
.kx-index-name { display:block; font-family:var(--font-serif); font-weight:300; font-size:clamp(1.9rem,2.7vw,2.6rem); letter-spacing:-.03em; line-height:1.15; transition:color .2s ease; }
.kx-region { display:inline; color:var(--slate-500); font-size:var(--t-sm); }
.kx-index-fact { display:inline; font-size:var(--t-sm); color:var(--slate-500); }
.kx-index-fact::before { content:"\00B7"; margin:0 var(--s-2); }
.kx-index-arrow { font-size:var(--t-xl); font-weight:300; color:var(--slate-500); transition:transform .25s var(--ease), color .2s ease; }
.kx-index-button:hover .kx-index-name,.kx-index-button:hover .kx-index-arrow { color:var(--highlight-600); }
.kx-index-button:hover .kx-index-arrow { transform:translateX(4px); }
.kx-index-button:active .kx-index-arrow { transform:translateX(8px); }

/* Destination note (replaces the index while a destination is selected). */
.kx-note { padding:var(--s-4) 0 var(--s-6); }
.kx-back { padding-left:0 !important; font-size:var(--t-sm) !important; color:var(--slate-500) !important; margin-bottom:var(--s-3); transition:color .2s ease; }
.kx-back:hover { color:var(--highlight-600) !important; }
.kx-note h2 { font-size:clamp(2.4rem,3.6vw,3.6rem); font-weight:300; letter-spacing:-.04em; line-height:1.05; }
.kx-note h2:focus { outline:none; }
.kx-address { font-family:var(--font-serif); font-size:var(--t-lg); font-weight:300; margin:var(--s-2) 0 var(--s-5); }
.kx-facts { list-style:none; border-top:1px solid var(--line); padding:var(--s-3) 0; margin:0; }
.kx-facts li { margin:var(--s-2) 0; font-size:var(--t-base); }
.kx-travel-note { border-top:1px solid var(--line); padding:var(--s-3) 0 var(--s-4); font-size:var(--t-sm); }
.kx-travel-note label { color:var(--slate-500); display:flex; align-items:center; gap:var(--s-3); }
.kx-city-select { flex:1; min-height:44px; border:0; border-bottom:1px solid var(--slate-300); border-radius:0; background:transparent; color:var(--slate-900); font-size:var(--t-base); cursor:pointer; transition:border-color .2s ease; }
.kx-city-select:hover { border-color:var(--slate-900); }
.kx-distance { min-height:1.6em; margin-top:var(--s-2); font-size:var(--t-base); }
.kx-events { border-top:1px solid var(--line); padding:var(--s-4) 0; }
.kx-events h3 { font-family:var(--font-serif); font-weight:400; font-size:var(--t-lg); margin-bottom:var(--s-2); }
.kx-event { display:grid; grid-template-columns:132px 1fr; gap:var(--s-3); margin:var(--s-2) 0; font-size:var(--t-sm); align-items:baseline; }
.kx-event>span { font-size:var(--t-xs); letter-spacing:.06em; text-transform:uppercase; color:var(--slate-500); }
.kx-event a { color:var(--slate-900); }
.kx-calendar,.kx-checked { font-size:var(--t-xs); color:var(--slate-500); margin-top:var(--s-2); }
.kx-calendar a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.kx a:hover { text-decoration:underline; }
.kx-actions { border-top:1px solid var(--line); }
.kx-actions button { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; font-family:var(--font-serif); font-size:var(--t-lg); font-weight:300; padding:var(--s-2) 0; border-bottom:1px solid var(--line); transition:color .2s ease; }
.kx-actions button span { transition:transform .25s var(--ease); }
.kx-actions button:hover { color:var(--highlight-600); }
.kx-actions button:hover span { transform:translateX(4px); }
.kx-book { display:flex; align-items:center; justify-content:space-between; min-height:52px; margin-top:var(--s-5); padding:var(--s-3) var(--s-5); color:var(--paper); background:var(--slate-700); border-radius:var(--r-sm); font-size:var(--t-base); font-weight:500; transition:background .2s ease; }
.kx-book:hover { background:var(--slate-900); color:var(--paper); text-decoration:none !important; }
.kx-book:active { background:var(--slate-800); }
.kx-action-error { font-size:var(--t-sm); margin-top:var(--s-2); }
.kx-action-error:empty { display:none; }

/* Control rail: one hairline, text controls. */
.kx-controls { grid-column:1 / -1; grid-row:3; margin-top:var(--s-4); }
.kx-rail { display:flex; align-items:center; gap:var(--s-2); flex-wrap:wrap; border-top:1px solid var(--line); padding-top:var(--s-2); font-size:var(--t-sm); }
.kx-rail fieldset { display:flex; gap:var(--s-1); border:0; margin:0 var(--s-4) 0 0; padding:0; }
.kx-rail label { position:relative; cursor:pointer; min-height:44px; display:flex; align-items:center; padding:0 var(--s-3); color:var(--slate-500); transition:color .2s ease; }
.kx-rail label:hover { color:var(--slate-900); }
.kx-rail input { position:absolute; opacity:0; width:100%; height:100%; inset:0; cursor:pointer; margin:0; }
.kx-rail label span { position:relative; padding:var(--s-2) 0; }
.kx-rail label span::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--highlight-600); transform:scaleX(0); transition:transform .25s var(--ease); }
.kx-rail label:has(input:checked) { color:var(--highlight-600); }
.kx-rail input:checked+span::after { transform:scaleX(1); }
.kx-rail label:has(input:focus-visible) { outline:2px solid var(--highlight-600); outline-offset:2px; }
.kx-rail button { display:inline-flex; align-items:center; gap:var(--s-2); color:var(--slate-700); transition:color .2s ease; }
.kx-rail button:hover { color:var(--highlight-600); }
.kx-rail button:active { color:var(--highlight-700); }
.kx-rail button[aria-pressed="true"],.kx-rail button[aria-expanded="true"] { color:var(--highlight-600); }
.kx-rail svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.kx-rail [data-control="pause"] { border-left:1px solid var(--line); padding-left:var(--s-5); }
.kx-rail [data-control="pause"] .kx-icon-play,.kx-rail [data-control="pause"][aria-pressed="true"] .kx-icon-pause { display:none; }
.kx-rail [data-control="pause"][aria-pressed="true"] .kx-icon-play { display:block; }
.kx-rail [data-control="cities"] { margin-left:auto; }
.kx-zoom { display:flex; }
.kx-zoom button { min-width:44px; justify-content:center; }
.kx-cities { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:0 var(--s-1); padding-top:var(--s-1); }
.kx-cities button { font-size:var(--t-sm); color:var(--slate-700); transition:color .2s ease; }
.kx-cities button:hover { color:var(--highlight-600); }
.kx-cities button[aria-pressed="true"] { color:var(--highlight-600); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; }
.kx-legend,.kx-attribution { font-size:var(--t-xs); line-height:1.7; color:var(--slate-500); margin-top:var(--s-4); max-width:92ch; text-wrap:pretty; }
.kx-attribution { margin-top:var(--s-1); }
.kx-attribution a { color:inherit; text-decoration:underline; text-underline-offset:2px; }

/* Labels on the model. */
.kx-labels { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.kx-leaders { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.kx-leaders path { fill:none; stroke:var(--slate-700); stroke-width:1; }
.kx-leaders circle { fill:var(--slate-900); stroke:var(--paper); stroke-width:1; }
.kx-leaders .is-selected { stroke:var(--highlight-600); }
.kx-leaders circle.is-selected { fill:var(--highlight-600); stroke:var(--paper); }
.kx-label { position:absolute; top:0; left:0; display:block; white-space:nowrap; pointer-events:auto; cursor:pointer; color:var(--slate-900); line-height:1.2; visibility:hidden; text-shadow:0 0 2px var(--paper),0 0 4px var(--paper),0 0 6px var(--paper),0 0 10px var(--paper),0 0 14px var(--paper); transition:color .2s ease; }
.kx-label-destination { padding:2px 0; }
.kx-label-destination .kx-label-name { display:block; font-family:var(--font-serif); font-weight:400; font-size:clamp(19px,1.55vw,23px); letter-spacing:-.01em; }
.kx-label-destination .kx-label-sub { display:block; font-size:12.5px; font-weight:500; color:var(--slate-700); margin-top:2px; }
.kx-label-city { font-size:12.5px; font-weight:500; padding:3px 2px; letter-spacing:.01em; }
.kx-label.is-hover,.kx-label:hover,.kx-label.is-selected { color:var(--highlight-600); }
.kx-label-city.is-selected { font-weight:600; color:var(--slate-900); background:color-mix(in srgb,var(--paper) 86%,transparent); padding:3px 7px; border-radius:2px; text-shadow:none; }

.kx.is-lost .kx-stage canvas,.kx.is-lost .kx-labels { visibility:hidden; }
.kx.is-lost .kx-status { bottom:50%; }
/* No-WebGL alternative. */
.kx-fallback { height:calc(100% - 48px); width:100%; overflow:visible; }
.kx-fallback path { fill:var(--paper-2); stroke:var(--slate-300); stroke-width:1.2; }
.kx-fallback circle { fill:var(--highlight-600); cursor:pointer; }
.kx-fallback text { font-family:var(--font-serif); font-size:26px; fill:var(--slate-900); }
.kx-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.kx.is-selected .kx-intro { display:none; }
.kx.is-selected .kx-destinations { grid-row:1 / 3; }
.kx.is-selected .kx-destination { border-top:0; border-bottom:0; }
.kx-dialog { position:fixed; inset:0; z-index:10000; overflow:auto; overscroll-behavior:contain; background:var(--paper); color:var(--slate-900); padding:var(--s-6) var(--s-8); font-family:var(--font-sans); }
.kx-dialog-toolbar { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); padding-bottom:var(--s-3); }
.kx-dialog-toolbar button:last-child { margin-left:auto; }
.kx-dialog-body { min-height:calc(100dvh - 120px); }
.kx-dialog-view { padding-top:var(--s-8); }
.kx-dialog h2 { font-family:var(--font-serif); font-size:var(--t-3xl); font-weight:300; margin-bottom:var(--s-6); }
@media (min-width:760px) and (max-width:1023px) {
  .kx-layout { grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; column-gap:var(--s-8); }
  .kx-stage-wrap { grid-column:1 / -1; grid-row:1; }
  .kx-stage { height:min(64vh,720px); }
  .kx-rail fieldset { margin-right:0; }
  .kx-rail label { padding:0 var(--s-2); }
  .kx-rail [data-control="pause"] { padding-left:var(--s-3); }
  .kx-rail button { padding:var(--s-2); }
  .kx-controls { grid-row:2; margin-top:0; margin-bottom:var(--s-8); }
  .kx-intro { grid-column:1; grid-row:3; padding-top:0; }
  .kx-destinations { grid-column:2; grid-row:3; max-width:none; }
  .kx.is-selected .kx-destinations { grid-column:1 / -1; grid-row:3; }
  .kx.is-selected .kx-note { max-width:560px; }
}
@media (max-width:759px) {
  .kx { width:calc(100% - 32px); padding-top:var(--s-6); }
  .kx-layout { display:flex; flex-direction:column; gap:0; }
  .kx-intro { order:0; padding:0; }
  .kx .kx-title { font-size:clamp(2.3rem,10vw,3.4rem); }
  .kx-overline { margin-bottom:var(--s-3); }
  .kx-lede { margin:var(--s-3) 0 0; }
  .kx.is-selected .kx-intro { display:block; }
  .kx-stage-wrap { order:1; margin:0 calc(var(--s-3) * -1); }
  .kx-stage { height:min(72vh,134vw,560px); }
  .kx-controls { order:2; margin-top:0; margin-bottom:var(--s-6); }
  .kx-rail { gap:0; justify-content:space-between; }
  .kx-rail fieldset { width:100%; margin:0; border-bottom:1px solid var(--line); }
  .kx-rail label { padding:0 var(--s-3) 0 0; margin-right:var(--s-3); }
  .kx-rail button { padding:var(--s-2) var(--s-1); }
  .kx-rail [data-control="pause"] { border-left:0; padding-left:0; }
  .kx-rail [data-control="cities"] { display:none; }
  .kx .kx-cities[hidden] { display:flex !important; }
  .kx-cities { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; border-top:1px solid var(--line); margin:0 calc(var(--s-4) * -1); padding:0 var(--s-3); scrollbar-width:none; }
  .kx-cities button { flex:0 0 auto; font-size:var(--t-base); }
  .kx-destinations { order:3; width:100%; max-width:none; }
  .kx-index-name { font-size:2rem; }
  .kx-region,.kx-index-fact,.kx-facts li,.kx-city-select,.kx-distance,.kx-event,.kx-book { font-size:1rem; }
  .kx-note h2 { font-size:2.4rem; }
  .kx-label-destination .kx-label-name { font-size:18px; }
  .kx-dialog { padding:var(--s-4); }
}
@media (prefers-reduced-motion:reduce) { .kx *, .kx *::after, .kx-dialog * { scroll-behavior:auto; transition:none !important; } }

/* Radio pills never narrower than a touch target; static fallback has no map controls. */
.kx .kx-rail fieldset label{min-width:44px;justify-content:center}
.kx.is-static .kx-controls{display:none}

/* Embedded in content pages: breathe between neighbouring sections. */
.kx.kx--embedded{padding-block:var(--s-16)}
@media (max-width:760px){.kx.kx--embedded{padding-block:var(--s-10)}}