/* ===== LUX page – koristi varijable iz styles.css ===== */

/* Container helper (ako već imaš u styles.css, ukloni) */
.container { max-width: 1200px; margin-inline: auto; padding-inline: 16px }

/* HERO */
.hero--lux {
  position: relative; min-height: 38vh; display: grid; place-items: center; overflow: hidden; background: #000;
}
.hero--lux .hero__bg { position: absolute; inset: 0; background: var(--blue-900) center/cover no-repeat; filter: brightness(.55) }
.hero--lux .hero__content { position: relative; z-index: 1; color: #fff; text-align: center }
.hero--lux h1 { font-family: Sora, Inter; font-size: clamp(32px, 4vw, 54px); margin: 0 0 8px }
.hero--lux p { margin: 0 0 16px; opacity: .95 }
.hero__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.btn--ghost { border: 2px solid rgba(255,255,255,.7); color: #fff }
.btn--ghost:hover { background: rgba(255,255,255,.12) }

/* Intro */
.intro { margin: 18px 0 8px; color: var(--muted) }

/* GRID */
.luxgrid {
  display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr);
  padding: 10px 0 34px;
}
.lux-card {
  position: relative; min-height: 280px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: #000; isolation: isolate; display: grid; align-content: end;
}
.lux-card::before{
  content:""; position:absolute; inset:0; background: var(--bg, none) center/cover no-repeat;
  transform: scale(1.0); filter: brightness(.82) saturate(1.05); transition: transform .45s ease, filter .3s ease;
}
.lux-card::after{
  content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(0,0,0,.55) 100%);
  z-index:0;
}
.lux-card:hover::before { transform: scale(1.06); filter: brightness(.92) }
.lux-card__body { position:relative; z-index:2; color:#fff; padding:18px; display:grid; gap:6px }
.lux-card__body h3 { margin:0; font-family:Sora, Inter; font-size:22px }
.lux-card__body p { margin:0; opacity:.95 }

/* Bela dugmad na fotkama */
.btn--white{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:12px; font-weight:700; text-decoration:none;
  background:#fff; color:#111; border:2px solid transparent; transition:.2s ease; box-shadow: var(--shadow);
}
.btn--white:hover{ filter:brightness(0.98) }

/* LIGHTBOX (isti stil kao na buses.css) */
.lightbox[hidden] { display:none !important }
.lightbox {
  position: fixed; inset:0; background: rgba(0,0,0,.6); display:grid; place-items:center; padding: 16px; z-index: 1000;
}
.lightbox__dialog {
  position: relative; background: #0f1220; border-radius: 16px; width: min(100%, 980px); padding: 16px; box-shadow: var(--shadow);
  display:grid; gap: 12px; justify-items:center;
}
.lightbox__img { max-width: 100%; max-height: 62vh; object-fit: contain; border-radius: 12px }
.lightbox__close {
  position:absolute; top:8px; right:10px; font-size:28px; line-height:1; background:transparent; border:none; color:#fff; cursor:pointer;
}
.lightbox__nav {
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(255,255,255,.9); border:none; border-radius: 999px; width:40px; height:40px; cursor:pointer; font-size:20px;
  display:grid; place-items:center;
}
.lightbox__prev { left:8px }
.lightbox__next { right:8px }

.thumbs {
  display:flex; gap:8px; overflow:auto; padding: 6px 2px 2px;
  width:100%; justify-content:center; flex-wrap: wrap;
}
.thumbs .thumb {
  width:76px; height:56px; object-fit:cover; border-radius:10px; opacity:.85; cursor:pointer; border:2px solid transparent;
}
.thumbs .thumb:hover { opacity:1 }
.thumbs .thumb.is-active { border-color:#fff; opacity:1 }

/* Responsive */
@media (max-width: 1024px){
  .luxgrid { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 720px){
  .hero--lux { min-height: 34vh }
  .luxgrid { grid-template-columns: 1fr }
  .lightbox__img { max-height: 56vh }
}