/* =========================================================
   naroci-cerado.si — styles.css (v9, mobile-first)
   ========================================================= */

/* ------ Theme tokens ------ */
:root{
  --bg: #0b0b0c;
  --card: #111114;
  --line: #1c1c21;
  --muted: #15161a;
  --text: #f2f2f2;
  --sub: #bdbdbd;
  --accent: #e6ff6a;
  --accent-ink: #0a0a0a;

  --radius: 16px;
  --shadow: 0 12px 28px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
}

/* ------ Resets & base ------ */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Arial,sans-serif;-webkit-tap-highlight-color:transparent}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
.container{width:min(1120px,92%);margin:0 auto}
.small{font-size:14px;color:var(--sub)}
.medium{font-size:16px;color:var(--sub)}
.section{padding:24px 0}

/* ------ Header / nav ------ */
header{
  position:sticky;top:0;z-index:20;
  background:#0b0b0cb3;border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px)
}
.nav{
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:12px 0;flex-wrap:wrap
}
.brand{display:flex;gap:8px;align-items:center;color:#fff}

/* ------ Buttons ------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-height:44px;padding:10px 14px;
  border-radius:12px;border:1px solid #2a2a33;background:#17171b;
  color:#fff;cursor:pointer;user-select:none;touch-action:manipulation
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(1px)}
.btn.accent{
  background:linear-gradient(180deg,#dfff63,#b9ff48);
  color:var(--accent-ink);border-color:#c6ff5a
}
.btn.ghost{background:#121216;border-style:dashed}

/* ------ Cards ------ */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)
}

/* ------ Grid helpers ------ */
.grid2{display:grid;gap:16px}
@media (min-width:900px){ .grid2{grid-template-columns:1.1fr .9fr} }

/* ------ Gallery (bigger thumbnails) ------ */
.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); /* size here */
  gap:18px;align-items:stretch
}
.gallery a.thumb{
  display:block;position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:18px;aspect-ratio:16/10;
  background:var(--muted);box-shadow:var(--shadow);transition:transform .2s ease
}
.gallery a.thumb:hover{ transform:translateY(-2px) }
.gallery a.thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease
}
.gallery a.thumb:hover img{ transform:scale(1.03) }

/* ------ Lightbox (JS ga vgradi v galerija.html) ------ */
.lightbox{
  position:fixed;inset:0;display:none;padding:10px;
  background:rgba(0,0,0,.92);z-index:50;
  align-items:center;justify-content:center
}
.lightbox.show{display:flex}
.lightbox img{
  max-width:96vw;max-height:92vh;border-radius:14px;border:1px solid var(--line)
}
.lightbox .nav-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  background:rgba(0,0,0,.5);color:var(--accent);border:none;
  font-size:42px;cursor:pointer;padding:8px 16px;border-radius:10px;z-index:60
}
.lightbox .prev{left:20px} .lightbox .next{right:20px}

/* ------ Before / After slider ------ */
.ba{
  position:relative;border-radius:18px;overflow:hidden;
  border:1px solid var(--line);aspect-ratio:16/10;background:var(--muted)
}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba .after{clip-path:inset(0 0 0 50%)}
.ba .bar{position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--accent)}
.ba .dot{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#0a0a0b;border:3px solid var(--accent);box-shadow:0 6px 18px rgba(0,0,0,.45)
}

/* ------ Forms ------ */
input,select,textarea{
  width:100%;min-height:44px;padding:10px 12px;
  color:#fff;background:#0f0f12;border:1px solid #2a2a33;border-radius:12px
}
textarea{min-height:96px}
label{display:block;margin:0 0 6px;color:#e5e5e8}
.form .grid2{grid-template-columns:1fr 1fr}

/* ------ Footer ------ */
footer{padding:24px 0;border-top:1px solid var(--line);color:var(--sub)}

/* ------ Cookie banner (bottom-sheet, mandatory) ------ */
.cookie{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  background:#101013;border-top:1px solid var(--line);
  padding:14px
}
.cookie:not(.show){display:none}
.cookie .row{display:grid;gap:12px}
@media (min-width:560px){ .cookie .row{grid-template-columns:1fr auto} }
.no-scroll{overflow:hidden}

/* ------ Responsive tweaks ------ */
@media (max-width:520px){
  .btn{width:100%}
  .nav a.btn{flex:1 1 auto}
  .gallery{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
  .gallery a.thumb{aspect-ratio:4/3}
}
/* ---- Modal za piškotke ---- */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 200;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.modal.show {
  display: flex;
  animation: fadeIn .3s ease;
}
.modal-content {
  background: #111114;
  color: #f2f2f2;
  border-radius: 16px;
  max-width: 600px;
  width: 100%;
  padding: 24px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}