/* Prostor — Hero section.
   Side-by-side, anchored to the top — same premium pattern as kontakt.
   Exterior photo at its true landscape ratio (no cropping).
   Shared .hero-visual / .hero-quick-info / .qi-item live in style.css. */

/* --- Tight top padding clears the fixed nav --- */
.page-hero--prostor{
  padding:140px 0 52px;
}

/* --- Two columns; photo column slightly wider so the building reads large --- */
.page-hero--prostor .page-hero-grid{
  grid-template-columns:.85fr 1.15fr;
  align-items:center;gap:50px;
}

/* Slightly tamer h1 — "opremljena" / "poliklinika" are long words and the
   text column is narrow (0.85fr), so a smaller clamp keeps the headline on
   two clean lines without orphans. */
.page-hero--prostor h1{
  font-size:clamp(2rem,4.2vw,3.4rem);
  margin:14px 0 16px;
}

/* --- Frame at its true ratio (all hero photos are landscape) --- */
.page-hero--prostor .page-hero-frame{
  position:relative;
  aspect-ratio:1600/1067;
  border-radius:24px;
  background:var(--mint-50);
}

/* Open/closed status pill — top-right of hero frame, above slides. */
.page-hero--prostor .hero-status{
  position:absolute;
  top:18px;right:18px;
  z-index:3;
}

/* --- Slideshow: 4 stacked slides crossfading on a 20s loop ---
   1.5 s crossfade between slides gives the brain time to accept tonal
   shifts between very different photos (e.g. exterior → sink detail).
   A subtle ken-burns scale animation adds cinematic motion. */
.hero-slides{
  position:absolute;inset:0;
  list-style:none;margin:0;padding:0;
  border-radius:inherit;overflow:hidden;
}
.hero-slide{
  position:absolute;inset:0;
  opacity:0;
  animation:heroSlide 20s cubic-bezier(.4,0,.2,1) infinite;
}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:5s}
.hero-slide:nth-child(3){animation-delay:10s}
.hero-slide:nth-child(4){animation-delay:15s}

.hero-slide img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  /* Each image inherits the slide's delay via its parent — the slide's
     opacity animation gates visibility, but the zoom runs on its own
     timer matching the slide's. */
  animation:heroZoom 20s ease-out infinite;
  animation-delay:inherit;
  will-change:transform;
}
.hero-slide:nth-child(1) img{animation-delay:0s}
.hero-slide:nth-child(2) img{animation-delay:5s}
.hero-slide:nth-child(3) img{animation-delay:10s}
.hero-slide:nth-child(4) img{animation-delay:15s}

/* Pause both fade + zoom while the user hovers the photo. */
.page-hero--prostor .page-hero-frame:hover .hero-slide,
.page-hero--prostor .page-hero-frame:hover .hero-slide img{
  animation-play-state:paused;
}

@keyframes heroSlide{
  0%      {opacity:0}
  7.5%    {opacity:1}   /* 1.5 s fade-in */
  25%     {opacity:1}   /* fully visible until 5 s mark */
  32.5%   {opacity:0}   /* 1.5 s fade-out (crossfades with next slide) */
  100%    {opacity:0}
}

/* Subtle ken-burns — image starts at 1× and slowly scales to 1.06×
   during the slide's visible window, then resets when the slide cycles. */
@keyframes heroZoom{
  0%, 7.5%      {transform:scale(1)}
  32.5%, 100%   {transform:scale(1.06)}
}

/* Accessibility: users who prefer reduced motion get a single static slide. */
@media (prefers-reduced-motion: reduce){
  .hero-slide,
  .hero-slide img{animation:none}
  .hero-slide{opacity:0}
  .hero-slide:nth-child(1){opacity:1}
}

/* --- Image caption pill (bottom-left of photo) — rotates with the slide --- */
.image-tag{
  position:absolute;left:18px;bottom:18px;
  background:rgba(252,250,244,.96);
  backdrop-filter:blur(10px) saturate(1.1);
  border:1px solid var(--line);border-radius:100px;
  padding:10px 18px;
  display:inline-flex;align-items:center;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.85rem;font-weight:600;color:var(--pine);
  box-shadow:var(--sh-sm);z-index:2;
}

/* --- Responsive --- */
@media(max-width:980px){
  .page-hero--prostor{padding:118px 0 64px}
  .page-hero--prostor .page-hero-grid{grid-template-columns:1fr;gap:40px}
  .page-hero--prostor .page-hero-frame{aspect-ratio:16/10}
}
@media(max-width:680px){
  .page-hero--prostor{padding:104px 0 56px}
  .page-hero--prostor .page-hero-frame{aspect-ratio:4/3}
  .image-tag{left:14px;bottom:14px;font-size:.78rem;padding:8px 14px 8px 12px}
}