/* ============================================================
   FGSC-MM — homepage hero slider (top of the home page)
   Photos come from images/hero/ via content-api.php.
   ============================================================ */
.hero-slider{
  --hero-h: min(80vh, 760px);
  position:relative; height:var(--hero-h); min-height:440px; overflow:hidden;
  background:#142a1c; color:#fff; isolation:isolate;
}
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.hero-slide.is-active{ opacity:1; z-index:1; }
.hero-slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02); transform-origin:center 40%;
}
.hero-slide.is-active img{ animation:hero-drift 9s ease-out forwards; }
@keyframes hero-drift{ from{ transform:scale(1.02); } to{ transform:scale(1.1); } }

/* legibility: dark green wash from the lower left, where the text sits */
.hero-slider::after{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top, rgba(12,26,17,0.88) 0%, rgba(12,26,17,0.35) 45%, rgba(12,26,17,0.05) 70%),
    linear-gradient(to right, rgba(12,26,17,0.55) 0%, rgba(12,26,17,0) 60%);
}

.hero-copy{
  position:absolute; z-index:3; left:0; right:0; bottom:0;
  width:min(1180px, 100% - 48px); margin-inline:auto; padding-bottom:84px;
}
.hero-brand{ display:flex; align-items:center; gap:12px; margin:0 0 18px; }
.hero-brand img{ width:46px; height:46px; border-radius:50%; background:#fff; border:2px solid #d9a441; object-fit:cover; }
.hero-brand span{ font:600 0.95rem 'DM Sans', sans-serif; letter-spacing:0.02em; color:rgba(255,255,255,0.88); }
.hero-title{
  font-family:'Cormorant Garamond', Georgia, serif; font-weight:700; line-height:0.98;
  font-size:clamp(2.4rem, 5vw, 4.4rem); margin:0; max-width:21ch; letter-spacing:-0.01em; text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,0.35);
}
.hero-sub{ font:400 clamp(1rem, 1.6vw, 1.25rem)/1.5 'DM Sans', sans-serif; color:rgba(255,255,255,0.86); margin:14px 0 0; max-width:46ch; }
.hero-btn{
  display:inline-flex; align-items:center; gap:10px; margin-top:26px;
  background:#d9a441; color:#1d1606; text-decoration:none; font:600 0.95rem 'DM Sans', sans-serif;
  padding:13px 24px; border-radius:999px; transition:background 0.2s ease;
}
.hero-btn:hover{ background:#e8b75a; }
.hero-btn[hidden]{ display:none; }
.hero-btn:focus-visible, .hero-nav button:focus-visible, .hero-bars button:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.hero-copy-inner{ transition:opacity 0.5s ease, transform 0.5s ease; }
.hero-copy-inner.is-changing{ opacity:0; transform:translateY(8px); }

/* progress bars double as slide picker */
.hero-bars{
  position:absolute; z-index:3; left:0; right:0; bottom:32px;
  width:min(1180px, 100% - 48px); margin-inline:auto; display:flex; gap:8px; max-width:1180px;
}
.hero-bars button{
  appearance:none; border:0; padding:10px 0; background:none; cursor:pointer; flex:0 1 72px;
}
.hero-bars button span{ display:block; height:3px; border-radius:3px; background:rgba(255,255,255,0.3); overflow:hidden; }
.hero-bars button span::after{ content:''; display:block; height:100%; width:0; background:#d9a441; }
.hero-bars button.is-done span::after{ width:100%; }
.hero-bars button.is-active span::after{ animation:hero-fill var(--hero-delay, 6s) linear forwards; }
.hero-slider.is-paused .hero-bars button.is-active span::after{ animation-play-state:paused; }
@keyframes hero-fill{ from{ width:0; } to{ width:100%; } }

.hero-nav{ position:absolute; z-index:3; right:max(24px, calc((100% - 1180px) / 2)); bottom:22px; display:flex; gap:8px; }
.hero-nav button{
  appearance:none; cursor:pointer; width:46px; height:46px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.4); background:rgba(12,26,17,0.35); color:#fff; font-size:1rem;
  display:flex; align-items:center; justify-content:center; transition:background 0.2s ease, border-color 0.2s ease;
}
.hero-nav button:hover{ background:rgba(217,164,65,0.9); border-color:#d9a441; color:#1d1606; }

@media (max-width:768px){
  .hero-slider{ --hero-h: 68vh; min-height:400px; }
  .hero-copy{ width:calc(100% - 32px); padding-bottom:74px; }
  .hero-brand img{ width:38px; height:38px; }
  .hero-brand span{ font-size:0.8rem; }
  .hero-bars{ width:calc(100% - 32px); bottom:24px; }
  .hero-bars button{ flex-basis:40px; }
  .hero-nav{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .hero-slide{ transition:none; }
  .hero-slide.is-active img{ animation:none; }
  .hero-copy-inner{ transition:none; }
}