/* ==========================================================================
   IVA PROCESNA OPREMA — homepage hero
   Four content zones anchored to the corners over a full-bleed photo slider.
   ========================================================================== */

.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;flex-direction:column;
  color:var(--text-on-dark);
  isolation:isolate;
  overflow:hidden;
}
.hero:focus{outline:none}

/* ---------- Background slider ------------------------------------------- */
.hero__bg{position:absolute;inset:0;z-index:-3;background:var(--ink)}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1400ms var(--ease);
  will-change:opacity;
}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1);transform-origin:52% 50%}
.hero__slide.is-active img{animation:hero-kenburns 7400ms linear forwards}
/* Slajd koji se gasi zadržava uvećanje da ne bi „odskočio" tokom prelaza. */
.hero__slide.is-leaving img{animation:none;transform:scale(1.08)}
@keyframes hero-kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}

/* The three source photos are bright (mean luminance 141-168), so the scrim
   is layered: a vertical wash for the top/bottom bands plus a diagonal wash
   that keeps the headline zone dark enough for AA-contrast white text. */
.hero__scrim{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(8,9,11,.60) 0%,rgba(8,9,11,.18) 36%,rgba(8,9,11,.24) 56%,rgba(8,9,11,.74) 100%),
    linear-gradient(102deg,rgba(8,9,11,.80) 0%,rgba(8,9,11,.46) 40%,rgba(8,9,11,.08) 74%);
}

/* ---------- Shell -------------------------------------------------------- */
.hero__inner{
  position:relative;z-index:1;
  flex:1 1 auto;display:flex;flex-direction:column;
  padding-top:calc(var(--nav-h) + clamp(18px,2.4vw,40px));
  padding-bottom:clamp(56px,5vw,74px);
}
.hero__grid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-template-rows:auto minmax(28px,1fr) auto;
  column-gap:clamp(16px,1.6vw,28px);
  row-gap:clamp(26px,3vw,44px);
}

/* ---------- Zone A — top-left headline ---------------------------------- */
/* 7 kolona: „DO PALETE" + pilula moraju da stanu u isti red, kao u predlošku.
   Na 6 kolona pilula prelama u novi red na svim širinama. */
.hero__head{grid-column:1/8;grid-row:1;align-self:start}
.hero__eyebrow{
  display:inline-flex;margin-bottom:clamp(16px,1.8vw,26px);
  letter-spacing:.14em;font-size:11.5px;
  opacity:0;transform:translateY(10px);
}
body.is-ready .hero__eyebrow{
  opacity:1;transform:none;
  transition:opacity 600ms var(--ease),transform 600ms var(--ease);
}
.hero__title{
  font-size:clamp(44px,6.2vw,96px);
  font-weight:300;text-transform:uppercase;
  line-height:.98;letter-spacing:-.01em;
  display:grid;gap:0;
  /* Široka, meka senka: ne čita se kao senka, ali drži kontrast iznad
     najsvetlijih delova fotografije (nebo između silosa na slajdu 1). */
  text-shadow:0 2px 34px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.28);
}
.hero__line{display:block}
.hero__line--row{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(14px,1.8vw,30px);
}
.mask{display:block;overflow:hidden;padding-bottom:.06em}
.mask__i{display:block;transform:translateY(105%)}
body.is-ready .hero__title .mask__i{
  transform:none;
  transition:transform 900ms var(--ease);
  transition-delay:calc(120ms * var(--i,0) + 120ms);
}
.hero__cta{opacity:0;transform:translateY(12px)}
body.is-ready .hero__cta{
  opacity:1;transform:none;
  transition:opacity 600ms var(--ease),transform 600ms var(--ease),
             background var(--t) var(--ease),box-shadow var(--t) var(--ease);
  transition-delay:620ms,620ms,0ms,0ms;
}
body.is-ready .hero__cta:hover{transform:translateY(-2px)}

/* ---------- Zone B — top-right panel ------------------------------------ */
.hero__panel{
  grid-column:8/13;grid-row:1;align-self:start;
  padding:clamp(15px,1.3vw,20px);
  display:grid;gap:clamp(13px,1.3vw,18px);
  opacity:0;transform:translateY(16px);
  /* Tamnija varijanta stakla umesto podrazumevane bele: panel stoji u gornjem
     delu gde je zastor najslabiji, a sve tri fotografije su svetle. Sa belim
     staklom (10%) kontrast teksta pada na ~3,2:1 — ispod AA praga. */
  background:rgba(17,18,20,.46);
}
.hero__panel .tag{padding:7px 12px;font-size:11px;letter-spacing:.05em}
body.is-ready .hero__panel{
  opacity:1;transform:none;
  transition:opacity 700ms var(--ease) 420ms,transform 700ms var(--ease) 420ms;
}
.hero__tags{display:flex;flex-wrap:wrap;gap:8px}
.hero__feature{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(14px,1.6vw,22px);align-items:stretch}
.hero__feature-body{display:grid;gap:9px;align-content:start;padding:4px 0 4px 6px}
.hero__feature-title{font-size:clamp(16px,1.15vw,19px);font-weight:600;letter-spacing:-.005em;line-height:1.25}
.hero__feature-text{
  font-size:14px;line-height:1.55;color:rgba(255,255,255,.92);
  max-width:42ch;
}
.hero__portrait{
  margin:0;flex:0 0 auto;
  width:190px;height:260px;
  border-radius:var(--r-img);overflow:hidden;
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 18px 40px rgba(0,0,0,.34);
  animation:hero-float 6s var(--ease) infinite;
}
.hero__portrait img{width:100%;height:100%;object-fit:cover;object-position:64% 38%}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- Zone C / D / E — bottom row --------------------------------- */
.hero__cards{
  grid-column:1/13;grid-row:3;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(16px,1.6vw,28px);row-gap:18px;align-items:end;
}
.hero__cards > *{opacity:0;transform:translateY(18px)}
body.is-ready .hero__cards > *{
  opacity:1;transform:none;
  transition:opacity 700ms var(--ease),transform 700ms var(--ease);
  transition-delay:calc(110ms * var(--i,0) + 700ms);
}

.hero-card{padding:clamp(15px,1.3vw,19px);display:flex;gap:15px}
.hero-card--tint{grid-column:1/5}
.hero-card__thumb{
  width:120px;height:120px;flex:0 0 auto;border-radius:18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.26);
}
.hero-card__thumb img{width:100%;height:100%;object-fit:cover;object-position:30% 60%}
.hero-card__body{display:grid;gap:8px;align-content:start;min-width:0}
.hero-card__title{font-size:15px;font-weight:600;letter-spacing:-.004em;line-height:1.28}
.hero-card__text{font-size:13.2px;line-height:1.5;color:rgba(255,255,255,.88)}
.hero-card--right{
  grid-column:9/13;justify-self:end;max-width:360px;
  flex-direction:column;gap:14px;padding:clamp(18px,1.6vw,24px);
}
.hero-card--right .hero-card__text{font-size:14px;color:var(--text-on-dark)}

/* Zone D — stat.
   Stoji direktno na fotografiji (bez kartice, kao u predlošku), pa senka teksta
   nosi kontrast preko svetlih delova slike. */
.hero-stat{
  grid-column:5/9;justify-self:center;text-align:center;
  display:grid;gap:10px;justify-items:center;max-width:300px;
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 24px rgba(0,0,0,.66);
}
.hero-stat__avatars{display:flex;align-items:center}
.hero-stat__avatars span{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  border:2px solid rgba(255,255,255,.92);
  background:rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-size:11px;font-weight:600;letter-spacing:.02em;color:#fff;
}
.hero-stat__avatars span + span{margin-left:-13px}
.hero-stat__num{
  font-size:clamp(36px,3.2vw,44px);font-weight:300;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.hero-stat__cap{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.90);max-width:24ch}

/* ---------- HUD (tehnički detalji preko fotografije) --------------------- */
.hero__coords{
  display:block;margin-bottom:clamp(12px,1.4vw,18px);
  font-family:var(--font-mono);font-size:11.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,255,255,.92);
  text-shadow:0 0 3px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.9),0 2px 18px rgba(0,0,0,.7);
  opacity:0;transform:translateY(8px);
}
body.is-ready .hero__coords{
  opacity:1;transform:none;
  transition:opacity 600ms var(--ease) 120ms,transform 600ms var(--ease) 120ms;
}

/* Četiri ugaona ugla po unutrašnjim ivicama hero-a */
.hero__frame{position:absolute;inset:24px;z-index:1;pointer-events:none}
.hero__frame i{position:absolute;width:18px;height:18px;border:0 solid rgba(255,255,255,.28)}
.hero__frame i:nth-child(1){top:0;left:0;border-left-width:1px;border-top-width:1px}
.hero__frame i:nth-child(2){top:0;right:0;border-right-width:1px;border-top-width:1px}
.hero__frame i:nth-child(3){bottom:0;left:0;border-left-width:1px;border-bottom-width:1px}
.hero__frame i:nth-child(4){bottom:0;right:0;border-right-width:1px;border-bottom-width:1px}

/* Uspravna oznaka uz desnu ivicu */
.hero__vlabel{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);z-index:1;
  writing-mode:vertical-rl;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  text-transform:uppercase;letter-spacing:.22em;
  color:rgba(255,255,255,.42);pointer-events:none;white-space:nowrap;
}

/* ---------- Slider indicators ------------------------------------------- */
.hero__sliderbar{
  position:relative;z-index:2;
  display:flex;justify-content:center;align-items:center;
  margin-top:clamp(18px,2vw,26px);min-height:22px;
}
.hero__counter{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:12px;font-weight:500;
  letter-spacing:.12em;color:rgba(255,255,255,.92);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 3px rgba(0,0,0,.95),0 1px 2px rgba(0,0,0,.9),0 2px 18px rgba(0,0,0,.7);
}
.hero__dots{
  position:relative;z-index:2;
  display:flex;justify-content:center;align-items:center;gap:8px;
}
.hero__dot{
  width:9px;height:9px;padding:0;border-radius:var(--r-pill);cursor:pointer;
  background:rgba(255,255,255,.42);border:1px solid rgba(255,255,255,.34);
  transition:width var(--t) var(--ease),background var(--t) var(--ease);
}
.hero__dot:hover{background:rgba(255,255,255,.72)}
.hero__dot[aria-selected="true"]{width:34px;background:#fff;border-color:#fff}

/* ---------- Responsive --------------------------------------------------- */
@media (max-width:1279px) and (min-width:1024px){
  .hero__head{grid-column:1/8}
  .hero__panel{grid-column:8/13}
  /* nešto uži naslov da pilula ostane u istom redu i na 1024px */
  .hero__title{font-size:clamp(40px,5.7vw,80px)}
  .hero__line--row{gap:14px}
  .hero__portrait{width:160px;height:220px}
  .hero-card--tint{grid-column:1/5}
  .hero-card__thumb{width:96px;height:96px}
  .hero-stat{grid-column:5/9}
  .hero-card--right{grid-column:9/13}
}

/* HUD se povlači na užim ekranima: okvir i uspravna oznaka nemaju prostora,
   a koordinate bi potisnule indikatore ispod prvog ekrana na telefonu. */
@media (max-width:1279px){ .hero__vlabel{display:none} }
@media (max-width:1023px){ .hero__frame,.hero__coords{display:none} }
@media (max-width:639px){ .hero__counter{display:none} }

@media (max-width:1023px){
  /* Zbijenije da bi indikatori slajdera stali u prvi ekran na telefonu. */
  .hero__inner{
    padding-top:calc(var(--nav-h) + 10px);
    padding-bottom:clamp(20px,3.4vw,44px);
  }
  .hero__eyebrow{margin-bottom:12px}
  .hero__dots{margin-top:clamp(12px,1.6vw,26px)}
  .hero__panel{padding:14px;gap:12px}
  .hero__grid{
    display:flex;flex-direction:column;
    grid-template-columns:none;grid-template-rows:none;
    gap:clamp(16px,2.8vw,28px);
  }
  .hero__head,.hero__panel,.hero__cards{grid-column:auto;grid-row:auto;max-width:none}
  .hero__head{margin-top:auto}
  .hero__panel{max-width:640px}
  .hero__feature{grid-template-columns:minmax(0,1fr)}
  .hero__portrait{display:none}

  /* cards become a horizontal scroll-snap row */
  .hero__cards{
    display:flex;grid-template-columns:none;
    gap:12px;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:calc(var(--gutter) * -1);
    padding:4px var(--gutter);
    align-items:stretch;
  }
  .hero__cards::-webkit-scrollbar{display:none}
  .hero__cards > *{
    flex:0 0 min(302px,84%);scroll-snap-align:start;
    grid-column:auto!important;justify-self:auto!important;max-width:none!important;
  }
  .hero-stat{
    justify-items:start;text-align:left;align-content:center;text-shadow:none;
    padding:clamp(15px,1.3vw,19px);
    background:var(--glass-dark);
    -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
    border:1px solid var(--glass-border);border-radius:var(--r-card);
  }
  .hero-card--right{flex-direction:column}
}

@media (max-width:479px){
  .hero__title{font-size:clamp(38px,11.4vw,54px)}
  .hero-card__thumb{width:88px;height:88px}
  .hero__cards > *{flex:0 0 min(280px,86%)}
}

/* ---------- Reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .hero__slide.is-active img{animation:none}
  .hero__portrait{animation:none}
  .mask__i{transform:none!important}
  .hero__eyebrow,.hero__cta,.hero__panel,.hero__cards > *,.hero__coords{
    opacity:1!important;transform:none!important;
  }
  .hero__counter{transform:translateY(-50%)!important}
}