/* Usluge landing — Hero carousel.
   Replaces the static page-hero on /usluge/ with a rotating carousel
   of 4 service hero "slides" (one per detail page: Centar za rane,
   Vaskularna kirurgija, Mali kirurški zahvati, Hitne intervencije).

   All slides reuse the .svc-detail-hero / .svc-detail-hero-grid layout
   from usluge-detail/hero.css (loaded alongside this file). The
   carousel additions: a grid-area stage that lets slides share one
   cell, opacity + transform transitions for the cross-fade, and a
   labeled nav-dot row below.

   JS in usluge-landing-hero.js auto-rotates every 6s and pauses on
   hover. */

.svc-usluge-hero-carousel{
  /* Inherits .svc-detail-hero base (dark pine gradient + glows + ring).
     Adds extra bottom padding for the nav dots. */
  padding-bottom:64px;
}

/* The stage uses a single grid cell ("stack") so all slides occupy
   the same space — the cell sizes to the largest slide's natural
   height, no JS measuring needed, no layout shift between slides. */
.svc-usluge-hero-stage{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-areas:"stack";
}

.svc-usluge-hero-slide{
  grid-area:stack;
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  /* visibility delay matches the opacity fade-out so the leaving
     slide stays interactive until it's fully invisible. */
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),
             transform .7s cubic-bezier(.2,.7,.2,1),
             visibility 0s linear .7s;
  pointer-events:none;
}

.svc-usluge-hero-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),
             transform .7s cubic-bezier(.2,.7,.2,1),
             visibility 0s linear 0s;
  pointer-events:auto;
}

/* --- Nav dots row --- */
.svc-usluge-hero-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-top:48px;
  position:relative;
  z-index:3;
  flex-wrap:wrap;
}

.svc-usluge-hero-dot{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 18px 9px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:100px;
  color:#cfe2dd;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .25s ease,
             color .25s ease,
             border-color .25s ease,
             transform .15s ease;
}
.svc-usluge-hero-dot:hover{
  background:rgba(255,255,255,.11);
  color:#fff;
  border-color:rgba(255,255,255,.24);
  transform:translateY(-1px);
}
.svc-usluge-hero-dot.is-active{
  background:var(--sage-300);
  color:var(--pine-deep);
  border-color:var(--sage-300);
}
.svc-usluge-hero-dot.is-active:hover{
  background:var(--sage-300);
  color:var(--pine-deep);
  transform:translateY(0);
}

.svc-usluge-hero-dot-num{
  font-family:"Fraunces",serif;
  font-size:.92rem;
  font-weight:500;
  color:var(--sage-300);
  letter-spacing:.02em;
  transition:color .25s ease;
}
.svc-usluge-hero-dot.is-active .svc-usluge-hero-dot-num{
  color:var(--pine);
}

/* Respect prefers-reduced-motion — disable the cross-fade transform
   shimmer for users who don't want motion. The JS still rotates
   between slides (opacity only). */
@media (prefers-reduced-motion: reduce){
  .svc-usluge-hero-slide,
  .svc-usluge-hero-slide.is-active{
    transform:none;
    transition:opacity .3s ease, visibility 0s linear .3s;
  }
  .svc-usluge-hero-slide.is-active{
    transition:opacity .3s ease, visibility 0s linear 0s;
  }
}

/* --- Responsive --- */
@media(max-width:980px){
  .svc-usluge-hero-carousel{padding-bottom:52px}
  .svc-usluge-hero-nav{margin-top:38px;gap:8px}
  .svc-usluge-hero-dot{padding:8px 14px 8px 12px;font-size:.78rem;gap:8px}
  .svc-usluge-hero-dot-num{font-size:.84rem}
}
@media(max-width:560px){
  .svc-usluge-hero-carousel{padding-bottom:44px}
  .svc-usluge-hero-nav{gap:6px;margin-top:32px}
  .svc-usluge-hero-dot{padding:7px 12px;font-size:.74rem;gap:6px}
  /* On the smallest screens the labels would overflow — show only
     the number pills. Service name still available via aria-label. */
  .svc-usluge-hero-dot-label{display:none}
}