:root{
  --brand:#0a4c6a; /* sea blue */
  --accent:#b77e2a; /* amber / beer */
  --dark:#0b1b23;
}
html,body{scroll-behavior:smooth;}
.navbar-brand img{height:40px}
.hero{
  position:relative; min-height:80vh; display:flex; align-items:center; 
  color:#fff; background:#000; overflow:hidden;
}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35) 40%, rgba(0,0,0,.7))}
.hero .content{position:relative; z-index:2}
.section-title{color:var(--brand)}
.badge-accent{background:var(--accent); color:#111}
.btn-brand{background:var(--brand); color:#fff}
.btn-brand:hover{opacity:.9; color:#fff}
footer{background:#0b1b23; color:#bcd; }
.card { border-radius: 1rem; overflow:hidden; }
.img-round{border-radius:1rem}
#artifact .card{border:1px solid rgba(0,0,0,0.08)}


/* HERO */
:root{
  --hero-min-h-desktop: 80vh;
  --hero-min-h-mobile: 70vh;
  --hero-overlay: rgba(0,0,0,.28);
}

.hero{
  min-height: var(--hero-min-h-desktop);
  display: grid;
  align-items: center;
  position: relative;
  overflow: clip;
  isolation: isolate; /* overlay iznad slike */
}

.hero picture,
.hero .hero-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero .hero-bg{
  object-fit: cover;
  object-position: center;
  z-index: -2;
  transform: translateZ(0); /* perf hint */
}

.hero .overlay{
  position: absolute;
  inset: 0;
  background: var(--hero-overlay);
  z-index: -1;
  backdrop-filter: saturate(110%) contrast(105%);
}

/* Mobile podešenja */
@media (max-width: 768px){
  .hero{ min-height: var(--hero-min-h-mobile); }
  .hero .overlay{
    background: linear-gradient(
      to top,
      rgba(0,0,0,.38) 0%,
      rgba(0,0,0,.28) 40%,
      rgba(0,0,0,.18) 100%
    );
  }
}

/* polutransparentni panel ispod teksta */
.hb-hero-panel{
  color:#fff;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 20px 22px;
  max-width: 720px;
  backdrop-filter: blur(6px) saturate(110%);
  -webkit-backdrop-filter: blur(6px) saturate(110%);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

/* osiguraj kontrast teksta i badge-a */
.hb-hero-panel .badge{ color:#111; background:#f6d060; }
.hb-hero-panel h1, .hb-hero-panel p{ color:#fff; }

/* Instagram gumb s bijelim obrubom/tekstom */
.btn-outline-light{
  --bs-btn-color:#fff;
  --bs-btn-border-color:rgba(255,255,255,.9);
  --bs-btn-hover-color:#111;
  --bs-btn-hover-bg:#fff;
  --bs-btn-hover-border-color:#fff;
}

/* mobitel: malo kompaktnije */
@media (max-width: 768px){
  .hb-hero-panel{
    padding: 16px 16px;
    background: rgba(0,0,0,.40); /* mrvicu jače na malom ekranu */
    max-width: 100%;
  }
}

.brand-logo { height: 40px; width: auto; }
@media (min-width: 992px) { .brand-logo { height: 48px; } }

/* Video bez crnih rubova, lijepo izrezan u 16:9 okviru */
#video-prica {
  object-fit: cover;        /* sigurnosno, ako nema Bootstrap utilityja */
}

/* Manji kozmetički razmaci na mobitelu */
@media (max-width: 767.98px) {
  #prica .section-title { margin-bottom: .75rem; }
}



/* Portret video – maksimalno 478 px širine, centriran */
.video-portrait { 
  max-width: 478px; 
  margin-left: auto; 
  margin-right: auto; 
}

/* Na manjim ekranima pusti da ide do 100% širine kontejnera */
@media (max-width: 991.98px) {
  .video-portrait { max-width: 100%; }
}

/* Ako nema Bootstrap utilitija za object-fit */
#video-prica { object-fit: contain; }

/* ========== FIX: poništi Bootstrap .ratio unutar video-portrait ========== */
:root{
  --video-portrait-h-lg: 500px;  /* spusti visinu videa na desktopu */
}

/* desktop ponašanje */
@media (min-width: 992px){
  /* Ukloni ratio hack (padding) i postavi točnu visinu kontejnera */
  .video-portrait .ratio{
    position: static !important;
    height: var(--video-portrait-h-lg) !important;
    width: auto !important;
    max-width: 478px;
    margin: 0 auto;
  }
  .video-portrait .ratio::before{ display: none !important; }

  /* Sam video: zadrži omjer 478×850, stane u zadanu visinu */
  .video-portrait .ratio > *{
    position: static !important;
    height: 100% !important;
    width: auto !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
  }
}


/* Jednaka visina i uredan crop za sve tileove */
.gallery-thumb {
  display: block;
  width: 100%;
  height: 220px;        /* prilagodi po želji npr. 240/260 */
  object-fit: cover;
  border-radius: 0.75rem; /* ako koristiš .img-round */
}
@media (min-width: 992px) {
  .gallery-thumb { height: 260px; }
}