/* ================= GLOBAL ================= */

body{
  margin:0;
  font-family:'Rubik', sans-serif;
  background:#fff;
  color:#222;
}


/* ================= HEADER ================= */

.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px;
  border-bottom:1px solid #ddd;
  background:#fff;
  box-sizing:border-box;
}

.header-left{
  display:flex;
  align-items:center;
  gap:15px;
  min-width:0;
}

.section-header img.icon{
  width:60px;
  height:60px;
  flex:0 0 auto;
}

.section-header h1{
  font-size:1.8rem;
  margin:0;
  font-weight:600;
  letter-spacing:.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* ===== desktop icon menu ===== */

.icon-nav-desktop{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-nav-desktop .icon-link{
  width:60px;
  height:60px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.icon-nav-desktop img{
  width:54px;
  height:54px;
  display:block;
  filter:grayscale(100%);
  opacity:.5;
  transition:.18s ease;
}

@media (hover:hover){
  .icon-nav-desktop a.icon-link:hover img{
    filter:none;
    opacity:1;
    transform:scale(1.02);
  }
}

.icon-nav-desktop .is-active img{
  filter:none;
  opacity:1;
}

@media (max-width:768px){
  .icon-nav-desktop{ display:none; }
}


/* ===== MOBILE HEADER ===== */

@media (max-width:768px){
  .section-header{
    padding:14px 16px;
    gap:12px;
  }

  .section-header img.icon{
    width:44px;
    height:44px;
  }

  .section-header h1{
    font-size:1.32rem;
    line-height:1.15;
    white-space:normal;
    overflow:visible;
  }
}

@media (max-width:380px){
  .section-header h1{ font-size:1.22rem; }
}


/* ================= GALLERY ================= */

.grid-gallery{
  --cols:3;
  --gap:22px;

  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:var(--gap);
  padding:16px 16px 24px;
  max-width:1300px;
  margin:0 auto;
  box-sizing:border-box;
}

@media (max-width:900px){
  .grid-gallery{
    --cols:2;
    --gap:12px;
    padding:14px 20px 20px;
    max-width:600px;
  }
}

@media (max-width:420px){
  .grid-gallery{
    --gap:10px;
    padding:12px 18px 18px;
    max-width:480px;
  }
}

.project-card{
  aspect-ratio:1/1;
  position:relative;
  padding:4%;
  overflow:hidden;
}

@media (max-width:900px){
  .project-card{ padding:0; }
}

.project-inner{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.project-inner img{
  width:100%;
  height:100%;
  object-fit:contain;
}


/* ===== WIDE PROJECT – PORAVNAN Z GALERIJO, ČIM MANJ REZANJA ===== */

/* “oblika pasice” (večja številka = nižja pasica)
   21/7 ali 21/8 sta pogosto lepša kot 21/9 (21/9 je že kar nizko) */
.grid-gallery{
  --wide-ar-w: 21;
  --wide-ar-h: 8;
}

/* wide čez celo vrstico, brez paddinga in brez “štrlenja” */
.project-card.is-wide{
  grid-column: 1 / -1;
  padding: 0;
  aspect-ratio: calc(var(--wide-ar-w) / var(--wide-ar-h));
  overflow: hidden;
}

/* notranjost 100% */
.project-card.is-wide .project-inner{
  width: 100%;
  height: 100%;
  display: block; /* prepiše flex centriranje samo za wide, da je predvidljivo */
}

/* PRIVZETO: čim manj rezanja -> contain
   Opomba: to lahko pokaže minimalno “rob” (letterbox), zato damo ozadje enako strani */
.project-card.is-wide img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
  background: #fff;
}

/* Če RES želiš “brez beline” in ti malo rezanja ne moti,
   odkomentiraj spodaj (cover):
*/
/*
.project-card.is-wide img{
  object-fit: cover;
  background: transparent;
}
*/


/* ================= DOOR ================= */

.door-hotspot{
  position:fixed;
  bottom:28px;
  right:32px;
  width:76px;
  height:76px;
  background:url("../images/icon-door.png") center/contain no-repeat;
  z-index:200;
}

.door-hotspot::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.12);
  opacity:0;
  transition:.2s ease;
}

@media (hover:hover){
  .door-hotspot:hover::after{ opacity:1; }
}

@media (max-width:768px){
  .door-hotspot{
    width:60px;
    height:60px;
    bottom:20px;
    right:20px;
  }
}


/* ================= MOBILE FOOTER ICON NAV ================= */

.icon-nav-mobile-footer{
  display:none;
}

@media (max-width:768px){

  .icon-nav-mobile-footer{
    display:grid;
    grid-template-columns: repeat(5, max-content); /* 5 zgoraj */
    justify-content:center; /* cel grid na sredini */
    justify-items:center;
    gap:14px 18px;

    margin:28px auto 18px;
    padding:18px 12px 4px;
    border-top:1px solid #ddd;

    max-width:360px;   /* pri 520 ni kritično; grid se sam skrči */
  }

  /* ključ: spodnja vrstica (6–8) naj bo centrirana */
  .icon-nav-mobile-footer > a:nth-child(6){ grid-column: 2; }
  .icon-nav-mobile-footer > a:nth-child(7){ grid-column: 3; }
  .icon-nav-mobile-footer > a:nth-child(8){ grid-column: 4; }

  .icon-nav-mobile-footer img{
    width:40px;
    height:40px;
    display:block;
    filter:grayscale(100%);
    opacity:.55;
    transition:.18s ease;
  }

  .icon-nav-mobile-footer .is-active img{
    filter:none;
    opacity:1;
  }
}

@media (max-width:420px){

  .icon-nav-mobile-footer{
    gap:12px 16px;
  }

  .icon-nav-mobile-footer img{
    width:34px;
    height:34px;
  }
}

.project-role {
  white-space: pre-line;
  margin-top: 10px;
}