/* =====================================================================
   Fondacija EKIPA — enhancement sloj (T2 vizuelna unapređenja)
   Učitava se POSLIJE public.css. NE dira originalni klon — sve su
   nadogradnje/override-i, pa je rollback trivijalan (ukloni <link>).
   ===================================================================== */

/* Glatko skrolanje na anchor linkove (zamjena za jQuery smooth-scroll) */
html {
  scroll-behavior: smooth;
}

/* Inline SVG social ikone (zamjena za FontAwesome). Veličinu vodi font-size
   iz .icons (public.css), boju currentColor (uklj. hover color:#000). */
svg.icons {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.15em;
  box-sizing: content-box;
}

/* Kontakt forma — honeypot (skriveno od ljudi, boti ga popune) + status */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.contact-status {
  margin-top: 12px;
  font-weight: 600;
  min-height: 1.2em;
}
.contact-status.is-ok {
  color: #2e7d32;
}
.contact-status.is-err {
  color: #c0392b;
}

/* ---------------------------------------------------------------------
   1. HERO — pun ekran (100svh) + centriranje, strelica prikačena za dno
   --------------------------------------------------------------------- */
#Top .Home {
  min-height: 100svh; /* stvarna visina viewporta (rješava skok adresne trake na mobitelu) */
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
/* scroll-poziv uvijek na dnu heroja */
#Top .Home > .align-self-end {
  margin-top: auto;
}

/* Animirana ikonica miša (zamjena za tekst "SCROLL DOWN") — u stilu sajta:
   crn obris + cyan točkić koji klizi + cyan sjena kao na karticama. */
#Top .hero__scroll {
  padding-bottom: 12px;
}
.scroll__mouse {
  display: inline-flex;
  justify-content: center;
  align-items: flex-start;
  width: 28px;
  height: 46px;
  padding-top: 8px;
  border: 2px solid #111111;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 2px 4px 0px 0px #2bace2;
  cursor: pointer;
  animation: ekipaMouseBob 2s ease-in-out infinite;
}
.scroll__mouse:hover {
  box-shadow: 3px 5px 0px 0px #2bace2;
}
.scroll__wheel {
  width: 5px;
  height: 9px;
  border-radius: 3px;
  background: #3bc6f3;
  animation: ekipaMouseWheel 1.6s ease-in-out infinite;
}
@keyframes ekipaMouseWheel {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  70% {
    transform: translateY(12px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}
@keyframes ekipaMouseBob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* Mobilni/tablet breakpoint RANIJE: pojednostavljena ilustracija do 991px,
   detaljna desktop ilustracija tek od 992px (prije je prelaz bio na 768px). */
@media (max-width: 991px) {
  #Top .canvas_div {
    display: none !important;
  }
  #Top .canvas_div_dva {
    display: block !important;
  }
}
@media (min-width: 992px) {
  #Top .canvas_div_dva {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------
   2. BURGER — naglašen: brend cyan krug + puls kad se pojavi
   --------------------------------------------------------------------- */
.navigationbtn-container .navigtionbtn .Burger,
.navigationbtn-container .navigtionbtn .closeBurger {
  background-color: #3bc6f3; /* brend cyan (isti akcenat kao sjene dugmadi) */
  box-shadow:
    0 6px 20px rgba(59, 198, 243, 0.5),
    0 2px 6px rgba(0, 0, 0, 0.18);
}
.navigationbtn-container .navigtionbtn .Burger:hover,
.navigationbtn-container .navigtionbtn .closeBurger:hover {
  background-color: #2bace2;
  box-shadow:
    0 8px 26px rgba(59, 198, 243, 0.6),
    0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Puls-prsten dok je meni zatvoren (burger je sad uvijek vidljiv).
   Ograničen na 3 ponavljanja pa se smiri — privuče oko, ne dosađuje. */
body:not(:has(.new_menu__wrapper.visible)) .navigationbtn-container .navigtionbtn .Burger::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 0 rgba(59, 198, 243, 0.55);
  animation: ekipaBurgerPulse 1.8s ease-out 3;
}
@keyframes ekipaBurgerPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(59, 198, 243, 0.55);
  }
  70% {
    box-shadow: 0 0 0 20px rgba(59, 198, 243, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(59, 198, 243, 0);
  }
}

/* ---------------------------------------------------------------------
   3. NEWS KARTICE — grid na desktopu, swipe (scroll-snap) na mobitelu
   Bez Swipera (manje JS-a); zadržan izgled kartice (ivica + cyan sjena).
   --------------------------------------------------------------------- */
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin: 0 65px;
}
.news__grid .single__new {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 2px solid #333333;
  box-shadow: 3px 6px 0px 0px #2bace2;
  cursor: pointer;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.news__grid .single__new:hover {
  transform: translateY(-4px);
  box-shadow: 6px 10px 0px 0px #2bace2;
}
.news__grid .single__new .img_wrapper {
  position: relative;
  width: 100%;
  height: 280px;
  overflow: hidden;
}
.news__grid .single__new .img_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news__grid .single__new .text__wrapper {
  padding: 32px 16px;
}
.news__grid .single__new .text__wrapper h4,
.news__grid .single__new .text__wrapper p {
  margin: 0;
}
.news__grid .single__new .text__wrapper p {
  margin-top: 16px;
}

/* Tablet: 2 kolone */
@media (max-width: 1200px) {
  .news__grid {
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
  }
}

/* Mobitel: horizontalni swipe preko native scroll-snap (bez JS) */
@media (max-width: 800px) {
  .news__grid {
    display: flex;
    gap: 16px;
    margin: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
    scrollbar-width: none; /* Firefox */
  }
  .news__grid::-webkit-scrollbar {
    display: none; /* WebKit */
  }
  .news__grid .single__new {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  /* na dodir bez hover-lift efekta */
  .news__grid .single__new:hover {
    transform: none;
    box-shadow: 3px 6px 0px 0px #2bace2;
  }
}

/* "VIŠE NOVOSTI" jasno odvojeno ISPOD kartica (naslovna + single vijest) */
.news__wrapper .load__more {
  margin-top: 48px;
  height: auto;
}
@media (max-width: 800px) {
  .news__wrapper .load__more {
    margin-top: 32px;
  }
}

/* /news LISTA — slike u karticama isto kao na naslovnoj: fiksni okvir + cover
   (original je na mobitelu imao object-fit:unset i height:auto → izobličenje). */
.all__news__wrapper .all__news__inner .single__new .img_wrapper {
  height: 280px !important;
  overflow: hidden;
}
.all__news__wrapper .all__news__inner .single__new .img_wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* ---------------------------------------------------------------------
   5. KARTICE PROJEKATA — iste visine + logo bez deformacije/rezanja
   Vrijedi za naslovnu (#ProjectBlockAnchor) i /projects listu.
   --------------------------------------------------------------------- */
#ProjectBlockAnchor .cards,
.projects__wrapper .inner__projects__wrapper .cards {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#ProjectBlockAnchor .cards > .row,
.projects__wrapper .inner__projects__wrapper .cards > .row {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  align-content: flex-start;
}
/* Logo: fiksna visina prostora + contain → svi logoi isti okvir, bez rastezanja */
#ProjectBlockAnchor .cards img,
.projects__wrapper .inner__projects__wrapper .cards img {
  display: block;
  width: auto;
  max-width: 85%;
  height: 150px;
  object-fit: contain;
  margin: 2rem auto 0;
}
@media (max-width: 800px) {
  #ProjectBlockAnchor .cards img,
  .projects__wrapper .inner__projects__wrapper .cards img {
    height: 130px;
  }
}

/* ---------------------------------------------------------------------
   6. MENI — jedna navigacija: plutajući burger dole-desno, svuda, uvijek.
   Otvaranje (burger) i zatvaranje (X) su na ISTOM mjestu (dole-desno).
   Vidljivost vodi stanje menija (:has), ne krhka scroll logika iz public.js.
   --------------------------------------------------------------------- */
/* Zaključaj scroll body-ja dok je meni otvoren (nema skrolanja iza overlay-a) */
body:has(.new_menu__wrapper.visible) {
  overflow: hidden;
}
/* Ako je sadržaj menija viši od ekrana, neka se skrola unutar overlay-a */
.new_menu__wrapper.visible {
  overflow-y: auto;
}

/* Meni ZATVOREN → X skriven svuda */
body:not(:has(.new_menu__wrapper.visible)) .navigationbtn-container .navigtionbtn .closeBurger {
  visibility: hidden !important;
}
/* Burger UVIJEK vidljiv na PODSTRANICAMA (imaju .new__menu / TopBar) — scroll je
   tamo nejasan. Na naslovnoj (nema .new__menu) ostaje originalno: pojavi se na
   scroll (ionako se skrola). */
body:has(.new__menu):not(:has(.new_menu__wrapper.visible)) .navigationbtn-container .navigtionbtn .Burger {
  visibility: visible !important;
}

/* Meni OTVOREN → burger skriven, X vidljiv (na istom mjestu, dole-desno) */
body:has(.new_menu__wrapper.visible) .navigationbtn-container .navigtionbtn .Burger {
  visibility: hidden !important;
}
body:has(.new_menu__wrapper.visible) .navigationbtn-container .navigtionbtn .closeBurger {
  visibility: visible !important;
}

/* Gornji X u overlay-u (.close__menu) nam ne treba — nav je dole-desno */
.new_menu__wrapper .close__menu {
  display: none !important;
}

/* ---------------------------------------------------------------------
   7. NEWS SINGLE (detalj) — slika bez izobličenja
   Original je imao width:100% bez height:auto → fiksni height atribut iz
   <Image> razvuče sliku. Plus zaostali debug background:red.
   --------------------------------------------------------------------- */
.all__news__wrapper .all__news__inner_preview .main__image {
  background: transparent;
}
.all__news__wrapper .all__news__inner_preview .main__image img {
  height: auto;
  display: block;
}

/* ---------------------------------------------------------------------
   8. Poštuj prefers-reduced-motion — bez parallaxa, pulsa, float-a
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  #Top .Home img {
    animation: none !important;
  }
  .navigationbtn-container .navigtionbtn .Burger.active1::after {
    animation: none !important;
  }
  .news__grid .single__new {
    transition: none !important;
  }
  .scroll__mouse,
  .scroll__wheel {
    animation: none !important;
  }
}