/* Zašto Rio — Hero section.
   Side-by-side, anchored to the top — same premium pattern as kontakt /
   prostor heroes. Ordinacija photo at its true landscape ratio.
   Shared .hero-visual / .hero-quick-info / .qi-item live in style.css. */

.page-hero--zasto{
  padding:140px 0 52px;
}

.page-hero--zasto .page-hero-grid{
  grid-template-columns:.85fr 1.15fr;
  align-items:center;gap:50px;
}

/* Photo at true ratio (07.webp is landscape ≈ 3:2). */
.page-hero--zasto .page-hero-frame{
  position:relative;
  aspect-ratio:1600/1067;
  border-radius:24px;
}
.page-hero--zasto .page-hero-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  transition:transform .9s cubic-bezier(.2,.7,.2,1);
}
.page-hero--zasto .hero-visual:hover .page-hero-frame img{transform:scale(1.035)}

/* Open/closed status pill — top-right of hero image. */
.page-hero--zasto .hero-status{
  position:absolute;
  top:18px;right:18px;
  z-index:2;
}

/* Image caption pill (bottom-left of photo) — static label. */
.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 10px 14px;
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.85rem;font-weight:600;color:var(--pine);
  box-shadow:var(--sh-sm);z-index:2;
}
.image-tag svg{color:var(--teal);flex:none}

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