/* ============================================================
   GraniteShares — Upgraded Hero Banner
   Relies on tokens already defined in /css/variables.css:
     --neutral-*, --brand-azure, --brand-citrine, --brand-amethyst-light,
     --border-radius
   and on fonts already loaded in MasterTemplate.cshtml:
     'Inter', 'JetBrains Mono', 'PP Formula'
   Everything is namespaced .gs-hero so it can't collide with existing CSS.
   ============================================================ */
.gs-hero{
  --radius: var(--border-radius, 4px);
  position: relative;
  width: 100%;
  min-height: 600px;
  overflow: hidden;
  border-bottom: 1.5px solid rgb(var(--neutral-80));
  font-family: 'Inter', system-ui, sans-serif;
  color: rgb(var(--neutral-0));
}

/* ---- Slides ---- */
.gs-hero__stage{ position:absolute; inset:0; }
.gs-hero__slide{
  position:absolute; inset:0;
  display:flex; align-items:center;
  padding: 104px 0 56px;
  background: rgb(var(--slide-bg));
  opacity:0; transform: translateY(12px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events:none;
}
.gs-hero__slide.is-active{ opacity:1; transform:none; pointer-events:auto; }

.gs-hero__inner{
  max-width:1184px; margin:0 auto; padding:0 24px; width:100%;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:44px;
}
.gs-hero__text{
  display:flex; flex-direction:column; align-items:flex-start;
  flex:1 1 340px; min-width:280px;
}
.gs-hero__eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  color: rgb(var(--slide-eye)); margin-bottom:20px;
}
.gs-hero__headline{
  font-family:'PP Formula', 'Inter', sans-serif; font-weight:500;
  font-size:clamp(2.3rem, 5vw, 3.75rem); line-height:1.02;
  color: rgb(var(--slide-fg)); margin:0 0 20px; max-width:560px; text-wrap:balance;
}
.gs-hero__sub{
  font-family:'Inter', sans-serif; font-weight:300; font-size:19px; line-height:1.5;
  color: rgb(var(--slide-fg)); opacity:.92; margin:0; max-width:470px;
}
.gs-hero__media{
  flex:1 1 340px; min-width:280px; width:100%;
  height:clamp(240px, 32vw, 380px);
  border-radius: var(--radius); overflow:hidden; position:relative;
  box-shadow: 0 16px 44px rgb(16 35 36 / .22);
  background: rgb(var(--slide-fg) / .12);
}
.gs-hero__media img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---- CTA button ---- */
.gs-btn{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:30px; padding:13px 22px;
  border-radius:999px; border:1.5px solid transparent;
  font-family:'Inter', sans-serif; font-size:16px; font-weight:500;
  cursor:pointer; text-decoration:none; line-height:1;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.gs-btn svg{ width:18px; height:18px; }
.gs-btn:hover{ transform: translateX(2px); }
.gs-btn--primary{ background: rgb(var(--brand-citrine)); color: rgb(var(--neutral-0)); }
.gs-btn--primary:hover{ background: rgb(var(--brand-citrine-dark)); color: rgb(var(--neutral-0)); }
.gs-btn--secondary{ background: rgb(var(--neutral-0)); color: rgb(var(--neutral-100)); }
.gs-btn--secondary:hover{ background: rgb(var(--neutral-10)); color: rgb(var(--neutral-100)); }

/* ---- Countdown (OPTIONAL, per slide) ---- */
.gs-hero__countdown{ display:flex; gap:10px; margin-top:26px; flex-wrap:wrap; }
.gs-hero__cd-unit{
  display:flex; flex-direction:column; align-items:center; min-width:60px;
  padding:10px 8px; border-radius: var(--radius);
  border:1.5px solid rgb(var(--slide-fg) / .28);
  background: rgb(var(--slide-fg) / .06);
}
.gs-hero__cd-num{
  font-family:'JetBrains Mono', monospace; font-size:26px; font-weight:500; line-height:1;
  color: rgb(var(--slide-fg)); font-variant-numeric: tabular-nums;
}
.gs-hero__cd-label{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; margin-top:7px; color: rgb(var(--slide-fg) / .7);
}
.gs-hero__cd-live{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:11px 18px; border-radius:999px;
  background: rgb(var(--slide-fg) / .14); color: rgb(var(--slide-fg));
}
.gs-hero__cd-live::before{
  content:""; width:8px; height:8px; border-radius:99px; background:currentColor;
  animation: gs-cd-pulse 1.6s ease-in-out infinite;
}
@keyframes gs-cd-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---- Overlaid, tone-adaptive header (OPTIONAL — delete if you keep the site header) ---- */
.gs-hero__header{ position:absolute; top:0; left:0; right:0; z-index:20; }
.gs-hero__header-inner{
  max-width:1184px; margin:0 auto; padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.gs-hero__logo{ height:28px; display:block; transition: filter .5s ease; }
.gs-hero__nav{ display:flex; align-items:center; gap:32px; }
.gs-hero__nav a{
  font-family:'Inter', sans-serif; font-size:16px; font-weight:300;
  text-decoration:none; color: var(--hd-fg); transition: color .5s ease;
}
.gs-hero__nav a.is-active{ color: var(--hd-active); }
.gs-hero__actions{ display:flex; align-items:center; gap:16px; color: var(--hd-fg); transition: color .5s ease; }
.gs-hero__icon-btn{
  border:none; background:transparent; cursor:pointer; color: var(--hd-fg);
  display:inline-flex; padding:0; transition: color .5s ease;
}
.gs-hero__menu-btn{ display:none; }

.gs-hero.is-onDark  { --hd-fg: rgb(var(--neutral-100)); --hd-active: rgb(var(--brand-citrine)); }
.gs-hero.is-onDark  .gs-hero__logo{ filter: brightness(0) invert(1); }
.gs-hero.is-onLight { --hd-fg: rgb(var(--neutral-0)); --hd-active: rgb(var(--brand-azure)); }
.gs-hero.is-onLight .gs-hero__logo{ filter:none; }

/* ---- Prev / next arrows ---- */
.gs-hero__arrow{
  position:absolute; top:52%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1.5px solid var(--slide-fg-c, rgb(var(--neutral-100)));
  background:transparent; color: var(--slide-fg-c, rgb(var(--neutral-100)));
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  z-index:6; opacity:.85; transition: border-color .5s ease, color .5s ease, opacity .2s ease;
}
.gs-hero__arrow:hover{ opacity:1; }
.gs-hero__arrow--prev{ left:20px; }
.gs-hero__arrow--prev svg{ transform: scaleX(-1); }
.gs-hero__arrow--next{ right:20px; }

/* ---- Dots ---- */
.gs-hero__dots{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; align-items:center; z-index:6;
}
.gs-hero__dot{
  width:9px; height:9px; border-radius:99px; border:none; padding:0; cursor:pointer;
  background: var(--slide-fg-c, rgb(var(--neutral-100)));
  opacity:.4; transition: width .3s ease, opacity .3s ease;
}
.gs-hero__dot.is-active{ width:30px; opacity:1; }

/* ---- Statement layout (no image, centered) — add class gs-hero--statement ---- */
.gs-hero--statement{ min-height:520px; }
.gs-hero--statement .gs-hero__inner{ flex-direction:column; justify-content:center; text-align:center; }
.gs-hero--statement .gs-hero__text{ align-items:center; max-width:900px; flex:0 1 auto; }
.gs-hero--statement .gs-hero__headline{ font-size:clamp(2.6rem, 6.5vw, 4.5rem); max-width:900px; }
.gs-hero--statement .gs-hero__sub{ max-width:620px; }
.gs-hero--statement .gs-hero__media{ display:none; }

/* ---- Responsive ---- */
@media (max-width: 760px){
  .gs-hero{ min-height:auto; }
  .gs-hero__stage{ position:relative; }
  .gs-hero__slide{ position:relative; inset:auto; padding:96px 0 72px; }
  .gs-hero__slide:not(.is-active){ display:none; }
  .gs-hero__inner{ flex-direction:column; align-items:flex-start; gap:28px; }
  .gs-hero__media{ order:2; height:clamp(200px,60vw,280px); }
  .gs-hero__nav{ display:none; }
  .gs-hero__globe{ display:none; }
  .gs-hero__menu-btn{ display:inline-flex; }
  .gs-hero__arrow{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .gs-hero__slide{ transition:none; }
}