/* Home — Hero ("Stručna kirurška skrb, posvećena vama").
   Premium dark-pine pozornica — same visual language as the service
   detail heroes and the /usluge/ carousel slides, so the front-page
   first impression matches the brand's premium aesthetic.

   - Dark pine gradient + decorative sage corner glows + concentric ring
   - 2-col grid: text on the left, framed photo + chip + floating
     clinical card on the right
   - Trust-facts row under the CTAs (mirrors .svc-detail-hero-facts)
   - On-dark header: while the user is at scroll=0 over the dark hero,
     the fixed header switches to light text (matches the detail-page
     header treatment). The :not(.scrolled) selector ensures the
     default cream header restores the moment the user scrolls.

   This file only loads on the front page (via pr_home_enqueue_section_styles
   in functions.php), so all overrides are naturally scoped. */

.hero--home{
  position:relative;
  overflow:hidden;
  background:linear-gradient(168deg, var(--pine) 0%, var(--pine-deep) 78%);
  padding:100px 0 48px;
  color:#fff;
  /* On desktop the hero fills the viewport minus the 62px marquee
     band so the marquee sits exactly at the bottom of the fold. */
  min-height:calc(100vh - 62px);
  display:flex;
  align-items:center;
}
/* WP admin bar (32px) eats vertical space when logged-in — account
   for it so the marquee still lands at the viewport bottom. */
body.admin-bar .hero--home{
  min-height:calc(100vh - 62px - 32px);
}

/* Two soft sage glows in opposite corners. */
.hero--home::before{
  content:"";
  position:absolute;
  top:-220px;right:-160px;
  width:640px;height:640px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(94,155,148,.32), transparent 68%);
  pointer-events:none;
}
.hero--home::after{
  content:"";
  position:absolute;
  bottom:-260px;left:-200px;
  width:560px;height:560px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(42,111,101,.4), transparent 70%);
  pointer-events:none;
}

/* Hide the legacy .hero-bg blob layer — premium atmosphere comes from
   the gradient + glows now, not from cream-tinted blobs. */
.hero--home .hero-bg{display:none}

/* Concentric ring decoration on the right (same as the service hero). */
.hero--home .hero-ring{
  position:absolute;
  top:50%;right:-130px;
  transform:translateY(-58%);
  width:760px;height:760px;
  border-radius:50%;
  border:1px solid rgba(156,196,189,.14);
  pointer-events:none;
  z-index:0;
}
.hero--home .hero-ring::before{
  content:"";
  position:absolute;
  inset:70px;
  border-radius:50%;
  border:1px dashed rgba(156,196,189,.12);
}

/* Ensure the .wrap inside the flex parent gets full available width
   (capped by its own max-width:1240px) and centers via margin:auto. */
.hero--home > .wrap{
  width:100%;
  position:relative;
  z-index:2;
}

/* 2-col layout. */
.hero--home .hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:64px;
  align-items:center;
}

/* --- Text column --- */
.hero--home .hero-text .eyebrow{color:var(--sage-300)}
.hero--home .hero-text .eyebrow::before{background:var(--sage-300)}

.hero--home .hero-text h1{
  color:#fff;
  font-family:"Fraunces",serif;
  font-size:clamp(1.9rem, 3.5vw, 2.75rem);
  font-weight:300;
  line-height:1.16;
  letter-spacing:-.02em;
  margin:14px 0 18px;
}
.hero--home .hero-text h1 em{color:var(--sage-300);font-weight:400;font-style:italic}

.hero--home .hero-text .lead{
  color:#bcd7d1;
  font-size:1.08rem;
  line-height:1.65;
  max-width:36em;
  margin:0 0 30px;
}

.hero--home .hero-text .hero-cta{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;
}

/* --- Trust facts row (replaces the old .hero-quick-info chips) --- */
.hero--home .hero-facts{
  display:flex;
  flex-wrap:wrap;
  margin:36px 0 0;
  padding:26px 0 0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,.13);
}
.hero--home .hero-facts li{
  display:flex;align-items:center;gap:9px;
  padding:0 18px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.88rem;font-weight:600;
  color:#dcebe7;
  white-space:nowrap;
}
.hero--home .hero-facts li:first-child{padding-left:0}
.hero--home .hero-facts li + li{border-left:1px solid rgba(255,255,255,.13)}
.hero--home .hero-facts li svg{width:18px;height:18px;color:var(--sage-300);flex:none}

/* --- Visual column --- */
.hero--home .hero-visual{position:relative}

/* Offset secondary ring frame behind the photo for depth. */
.hero--home .hero-visual::before{
  content:"";
  position:absolute;inset:0;
  transform:translate(22px,22px);
  border-radius:24px;
  border:1.5px solid rgba(156,196,189,.28);
  pointer-events:none;
}

.hero--home .hero-frame{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  aspect-ratio:4/3.1;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.55);
  outline:1px solid rgba(255,255,255,.16);
  outline-offset:-1px;
  background:transparent;  /* clear any cream bg from the global */
}
.hero--home .hero-frame img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
.hero--home .hero-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,42,39,.08) 0%,
    transparent 30%,
    transparent 62%,
    rgba(10,42,39,.34) 100%);
}
/* Kill any leftover reflection overlay from the previous design. */
.hero--home .hero-frame::before{display:none}

/* Chip — inside the frame top-right (can't be clipped by header). */
.hero--home .hero-chip{
  position:absolute;
  top:16px;right:16px;
  /* Override global top:-22px / centred from the cream version. */
  bottom:auto;left:auto;
  z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(252,250,244,.93);
  backdrop-filter:blur(8px);
  border-radius:100px;
  padding:9px 17px;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.8rem;font-weight:700;
  color:var(--pine);
  box-shadow:0 4px 16px -9px rgba(10,42,39,.34);
  letter-spacing:.02em;
}
.hero--home .hero-chip .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--sage);
  box-shadow:0 0 0 4px rgba(94,155,148,.28);
}

/* Floating clinical card — bottom-left overhang. */
.hero--home .hero-card{
  position:absolute;
  bottom:-24px;left:-28px;z-index:3;
  display:flex;align-items:center;gap:14px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 20px 14px 14px;
  box-shadow:0 24px 50px -28px rgba(10,42,39,.42);
}
.hero--home .hero-card-ic{
  width:44px;height:44px;
  border-radius:12px;
  flex:none;
  background:var(--mint-50);
  color:var(--teal);
  display:flex;align-items:center;justify-content:center;
}
.hero--home .hero-card-ic svg{width:22px;height:22px}
.hero--home .hero-card b{
  display:block;
  font-family:"Hanken Grotesk",sans-serif;
  font-size:.92rem;font-weight:700;
  color:var(--pine);
  letter-spacing:-.005em;
}
.hero--home .hero-card span{
  display:block;
  font-size:.8rem;
  color:var(--muted);
  line-height:1.4;
}

/* --- Hide the legacy .hero-inset (small overlapping image) --- */
.hero--home .hero-inset{display:none}

/* Status pill (Otvoreno / Zatvoreno) — top-right of hero image,
   taking the place of the previous decorative chip. */
.hero--home .hero-status{
  position:absolute;
  top:18px;right:18px;
  z-index:2;
}

/* --- Button color overrides for dark bg --- */
.hero--home .btn-primary{
  background:#fff;
  color:var(--pine);
}
.hero--home .btn-primary:hover{
  background:var(--cream);
  color:var(--pine);
}
.hero--home .btn-ghost{
  background:transparent;
  color:#cfe2dd;
  border:1.5px solid rgba(255,255,255,.28);
}
.hero--home .btn-ghost:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.5);
  color:#fff;
}

/* ==========================================================================
   ON-DARK HEADER — front-page only, before scroll.
   This CSS file is only enqueued via pr_home_enqueue_section_styles() so
   these #hdr overrides are naturally scoped to the front page.
   ========================================================================== */

#hdr:not(.scrolled){background:transparent}
#hdr:not(.scrolled) .brand .bt{color:#fff}
#hdr:not(.scrolled) .brand .bs{color:var(--sage-300)}
#hdr:not(.scrolled) .nav-links li > a:not(.btn){color:#e6f0ed}
#hdr:not(.scrolled) .nav-links li > a:not(.btn):hover{color:#fff}
#hdr:not(.scrolled) .nav-links a:not(.btn)::after{background:var(--sage-300)}
#hdr:not(.scrolled) .nav-links a[aria-current="page"]:not(.btn){color:#fff}
#hdr:not(.scrolled) .nav-links .btn-primary{background:#fff;color:var(--pine)}
#hdr:not(.scrolled) .nav-links .btn-primary:hover{background:var(--cream);color:var(--pine)}
/* Suppress the scrolled-state gradient ::before so it doesn't conflict
   with the white-on-pine override above. */
#hdr:not(.scrolled) .nav-links .btn-primary::before{display:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:980px){
  /* On tablet/mobile drop the viewport-fit min-height — content can
     flow naturally without the marquee needing to sit at the fold. */
  .hero--home{
    padding:100px 0 60px;
    min-height:0;
    display:block;
  }
  body.admin-bar .hero--home{min-height:0}
  .hero--home .hero-grid{grid-template-columns:1fr;gap:56px}
  .hero--home .hero-frame{aspect-ratio:16/10;max-width:640px;margin:0 auto}
  .hero--home .hero-visual::before{display:none}
  .hero--home .hero-card{left:8px;bottom:-20px}
  .hero--home .hero-ring{
    width:520px;height:520px;
    top:auto;bottom:-260px;right:-140px;
    transform:none;
  }
}
@media(max-width:560px){
  .hero--home{padding:92px 0 56px}
  .hero--home .hero-text h1{font-size:1.75rem}
  .hero--home .hero-text .lead{font-size:1rem}
  .hero--home .hero-facts{
    flex-direction:column;
    gap:14px;
    margin-top:28px;
    padding-top:22px;
  }
  .hero--home .hero-facts li{padding:0;border-left:none!important}
  .hero--home .hero-facts li + li{border-left:none}
  .hero--home .hero-card{
    position:static;
    margin:18px 0 0;
    width:fit-content;
    max-width:100%;
  }
  .hero--home .hero-frame{border-radius:18px}
}