/* Sale: recolourable sky in the real hall photo, capacity planner, night clips, konoba, rail. */

/* ---------- Nebo: the hall's blue LED sky tinted with --led through a pixel mask ---------- */
.nebo { position: relative; min-height: max(100svh, 640px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr); align-items: end; gap: 2rem; padding: calc(var(--nav-h) + 40px) var(--pad) clamp(2rem, 5vw, 3.5rem); overflow: hidden; isolation: isolate; }
.nebo__room { position: absolute; inset: 0; z-index: -1; }
.nebo__room img, .nebo__tint, .nebo__glow { position: absolute; inset: 0; width: 100%; height: 100%; }
.nebo__room img { object-fit: cover; object-position: 50% 0; }
.nebo__tint, .nebo__glow {
  -webkit-mask: url('../img/sala-dan-nebo.png?v=2') 50% 0 / cover no-repeat;
  mask: url('../img/sala-dan-nebo.png?v=2') 50% 0 / cover no-repeat;
  background: var(--led);
  transition: background-color var(--t-led);
}
.nebo__tint { mix-blend-mode: color; }
.nebo__glow { mix-blend-mode: screen; opacity: 0.42; }
.nebo::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(11, 15, 12, 0.94) 0%, rgba(11, 15, 12, 0.55) 34%, rgba(11, 15, 12, 0) 62%), linear-gradient(to bottom, rgba(11, 15, 12, 0.5), transparent 22%); pointer-events: none; }
.nebo__head { display: grid; gap: 1rem; }
.nebo__title { font-size: clamp(3rem, 8vw, 8.4rem); font-stretch: 75%; letter-spacing: -0.045em; line-height: 0.86; text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35); }
.nebo__panel { display: grid; gap: 1rem; justify-self: end; max-width: 420px; padding: 1.2rem; border-radius: 20px; background: rgba(11, 15, 12, 0.55); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.nebo__hint { font-size: 0.95rem; color: var(--ink-2); }
@media (max-width: 860px) {
  .nebo { grid-template-columns: 1fr; min-height: 92svh; }
  .nebo__room img { object-position: 70% 0; }
  .nebo__tint, .nebo__glow { -webkit-mask-position: 70% 0; mask-position: 70% 0; }
  .nebo__panel { justify-self: stretch; max-width: none; }
}

/* ---------- Velika sala ---------- */
.velika { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); padding: clamp(5rem, 10vw, 9rem) var(--pad); }
.velika__head { display: grid; gap: 1rem; align-content: start; }
.velika__title { font-size: clamp(2.6rem, 6vw, 6rem); }
.velika__big { display: flex; align-items: flex-end; gap: 0.6rem; margin-top: 1rem; }
.velika__big b { font-size: clamp(7rem, 22vw, 20rem); font-weight: 200; font-stretch: 75%; letter-spacing: -0.06em; line-height: 0.78; color: var(--led); text-shadow: var(--led-glow); transition: color var(--t-led), text-shadow var(--t-led); }
.velika__big span { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-bottom: 1rem; }
.velika__text { display: grid; gap: 1.2rem; align-content: end; font-size: 1.12rem; color: var(--ink-2); max-width: 52ch; }
.ukljuceno { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ukljuceno__item { display: grid; gap: 0.5rem; padding: 1.6rem 1.4rem 1.8rem 0; border-bottom: 1px solid var(--line); position: relative; }
.ukljuceno__item::before { content: ''; width: 26px; height: 2px; background: var(--led); box-shadow: 0 0 10px var(--led); margin-bottom: 0.6rem; transition: background-color var(--t-led); }
.ukljuceno__k { font-size: 1.35rem; font-weight: 650; font-stretch: 85%; letter-spacing: -0.02em; }
.ukljuceno__v { color: var(--muted); max-width: 34ch; }
@media (max-width: 860px) {
  .velika { grid-template-columns: 1fr; }
  .ukljuceno { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) { .ukljuceno { grid-template-columns: 1fr; } }

/* ---------- Planer ---------- */
.planer { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; padding: clamp(4rem, 8vw, 7rem) var(--pad); background: var(--noc-2); border-block: 1px solid var(--line); }
.planer__copy { display: grid; gap: 1.1rem; justify-items: start; }
.planer__title { font-size: clamp(2.8rem, 6vw, 6rem); }
.planer__title output { color: var(--led); font-variant-numeric: tabular-nums; transition: color var(--t-led); }
.planer__label { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.planer__range { width: 100%; max-width: 440px; accent-color: var(--led); height: 32px; }
.planer__result { font-size: 1.2rem; font-weight: 500; }
.planer__note { font-size: 0.85rem; color: var(--muted); max-width: 40ch; }
.planer__plan { position: relative; padding: clamp(1rem, 2vw, 1.6rem); border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, rgba(168, 198, 74, 0.08), transparent 60%), var(--noc); }
.planer__svg { width: 100%; height: auto; }
.planer__room { position: absolute; top: 1rem; left: 1.2rem; }
.planer__svg .zid { fill: none; stroke: var(--led); stroke-width: 2; filter: drop-shadow(0 0 4px var(--led)); transition: stroke var(--t-led); }
.planer__svg .sto { fill: rgba(237, 241, 230, 0.06); stroke: rgba(237, 241, 230, 0.32); stroke-width: 1; transition: fill 0.4s, stroke 0.4s; }
.planer__svg .sto.is-used { fill: rgba(237, 241, 230, 0.14); stroke: rgba(237, 241, 230, 0.6); }
.planer__svg .mj { fill: rgba(237, 241, 230, 0.16); transition: fill 0.35s, filter 0.35s; }
.planer__svg .mj.is-on { fill: var(--led); filter: drop-shadow(0 0 3px var(--led)); }
.planer__svg .oznaka { fill: var(--muted); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; }
@media (max-width: 860px) { .planer { grid-template-columns: 1fr; } }

/* ---------- Mrak: night clips ---------- */
.mrak { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 0.7fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: clamp(5rem, 10vw, 9rem) var(--pad); }
.mrak__copy { display: grid; gap: 1.3rem; max-width: 520px; }
.mrak__title { font-size: clamp(2.6rem, 6vw, 6rem); }
.mrak__text { color: var(--ink-2); }
.mrak__media { border-radius: 22px; overflow: hidden; aspect-ratio: 3 / 4; box-shadow: 0 0 0 1px var(--line); }
.mrak__media--b { aspect-ratio: 1; margin-top: 30%; }
.mrak__video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .mrak { grid-template-columns: 1fr 1fr; }
  .mrak__copy { grid-column: 1 / -1; }
  .mrak__media--b { margin-top: 20%; }
}

/* ---------- Konoba (day) ---------- */
.konoba { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; padding: clamp(5rem, 10vw, 9rem) var(--pad); }
.konoba__img { border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 5; }
.konoba__img img { width: 100%; height: 100%; object-fit: cover; }
.konoba__copy { display: grid; gap: 1.3rem; justify-items: start; max-width: 600px; }
.konoba__title { font-size: clamp(3rem, 8vw, 8rem); font-stretch: 75%; }
.konoba__big { font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dan-muted); }
.konoba__big b { font-family: var(--f); font-size: 2.4rem; font-weight: 300; letter-spacing: -0.03em; color: var(--dan-ink); margin-right: 0.2em; }
.konoba__lead { font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 500; font-stretch: 88%; letter-spacing: -0.02em; line-height: 1.2; }
.konoba__text { color: var(--dan-muted); max-width: 46ch; }
@media (max-width: 860px) { .konoba { grid-template-columns: 1fr; } .konoba__img { max-width: 520px; } }

/* ---------- Traka: horizontal rail ---------- */
.traka { padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 7rem); }
.traka__head { padding: 0 var(--pad); display: grid; gap: 0.8rem; margin-bottom: 2rem; }
.traka__title { font-size: clamp(2.2rem, 5vw, 4.8rem); }
.traka__rail { display: flex; gap: clamp(0.8rem, 1.6vw, 1.4rem); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 0 var(--pad) 1rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.traka__item { flex: none; width: clamp(230px, 24vw, 360px); scroll-snap-align: start; }
.traka__item img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; transition: transform 0.6s var(--ease), box-shadow 0.4s; }
.traka__item:hover img { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--led), var(--led-glow); }
.traka__cap { margin-top: 0.7rem; font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }