/* === Panek – produkcijski CSS (brez CDN) =============================== */
/* Paleta */
:root{
  --brown:#1d0d0c;        /* temna rjava (header/footer/overlay) */
  --drap:#faf4e2;         /* svetlo drap (ozadja) */
  --gray:#333232;         /* primarni tekst */
  --gold:#ddc890;         /* zlata (CTA/akcent) */

  /* izpeljanke */
  --gold-dark:#cbb46f;
  --gray-100:#f1ede0;
  --border:#e6dcc2;
}

/* Osnove */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--drap);
  color:var(--gray);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* Barvni utilitiji (ohranjena imena iz HTML-ja) */
.bg-gray-900{background:var(--brown)}
.bg-gray-100{background:var(--drap)}
.text-white{color:#fff}
.text-gray-800{color:var(--gray)}
.text-gray-400{color:#9c9a96}
.text-yellow-700{color:var(--gold-dark)}
.hover-text-yellow-400:hover{color:var(--gold)}

/* Layout utilitiji */
.max-w-6xl{max-width:72rem}
.max-w-5xl{max-width:64rem}
.max-w-4xl{max-width:56rem}
.max-w-xl{max-width:36rem}
.mx-auto{margin-left:auto;margin-right:auto}
.p-4{padding:1rem} .p-6{padding:1.5rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.mt-10{margin-top:2.5rem} .my-10{margin-top:2.5rem;margin-bottom:2.5rem}
.mb-2{margin-bottom:.5rem} .mb-4{margin-bottom:1rem} .mb-6{margin-bottom:1.5rem}
.text-center{text-align:center}
.flex{display:flex} .items-center{align-items:center}
.justify-between{justify-content:space-between} .justify-center{justify-content:center}
.space-x-2>*+*{margin-left:.5rem} .space-x-4>*+*{margin-left:1rem}
.h-10{height:2.5rem}
.grid{display:grid} .gap-6{gap:1.5rem}
.md-grid-3{grid-template-columns:1fr}
.md-grid-2{grid-template-columns:1fr}
@media(min-width:768px){
  .md-grid-3{grid-template-columns:repeat(3,1fr)}
  .md-grid-2{grid-template-columns:repeat(2,1fr)}
  .md-text-5xl{font-size:3rem}
}

/* Tipografija */
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}

/* Hero in header pas */
.relative{position:relative} .z-10{z-index:10}
.hero-50{
  height:50vh;
  background-size:cover;
  background-position:center;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.hero-inner{max-width:48rem;margin:0 auto;padding:0 1rem}
.hero-inner--wide{max-width:64rem}
.overlay-60{position:absolute;inset:0;background:rgba(29,13,12,.65)}
.header-band{
  height:16rem; color:#fff;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.overlay-50{position:absolute;inset:0;background:rgba(29,13,12,.55)}
.band-title{position:relative;z-index:10;font-size:1.875rem;font-weight:700}

/* Kartice, obrazci, gumbi */
.card{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:1.5rem;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.06);
}
.btn-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{
  display:inline-block; padding:.75rem 1.5rem; border-radius:.75rem;
  font-weight:600; transition:filter .15s, background .15s, color .15s, border-color .15s;
  border:1px solid transparent;
}
.btn-primary{background:var(--gold); color:var(--brown); border-color:var(--gold-dark)}
.btn-primary:hover{filter:brightness(.95)}
.btn-light{background:#fff; color:var(--gray); border-color:var(--border)}
.btn-light:hover{filter:brightness(1.03)}
.input,.textarea{
  width:100%; padding:.75rem; border:1px solid var(--border);
  border-radius:.5rem; font:inherit; background:#fff; color:var(--gray);
}

/* Footer */
footer, .site-footer{
  background:var(--brown);
  color:#ece9e1;
}

/* Dodatni helperji za enovrstično besedilo */
.nowrap{white-space:nowrap}
.nowrap-ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-sub{
  white-space:nowrap;
  font-size:clamp(14px,1.6vw,18px);
}

/* Sence/robovi */
.shadow{box-shadow:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.06)}
.rounded-lg{border-radius:.75rem}

/* Majhne prilagoditve za telefone */
@media(max-width:480px){
  h1.nowrap{font-size:1.5rem}
}