/* ============================================================
   SVES — Homepage hero: managed slides
   Extends the .hero rules in main.css.
   ============================================================ */

/* Photo + headline slides: <picture> replaces the old background-image */
.hero .hero-bg { display: block; }
.hero .hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  display: block;
}
.hero-text .hero-h {
  font-size: clamp(26px, 3.2vw, 48px); font-weight: 600;
  color: var(--white, #fff); line-height: 1.2; margin-bottom: 20px;
}

/* Ready-made banners: whole artwork visible over a blurred copy */
.hero-slide--banner { background: #140c16; }
.hero-banner-blur { position: absolute; inset: 0; overflow: hidden; }
.hero .hero-banner-blur img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(28px) saturate(1.15) brightness(.55);
  transform: scale(1.15);
}
.hero-banner-art {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 0 72px; /* keep artwork clear of the controls */
  z-index: 1;
}
.hero .hero-banner-art img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.hero-banner-link { position: absolute; inset: 0; z-index: 2; }
.hero-banner-link:focus-visible { outline: 3px solid var(--green, #a7ce39); outline-offset: -6px; }

.hero-banner-cap {
  position: absolute; left: 48px; bottom: 30px; z-index: 3;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100% - 420px);
  pointer-events: none;
  color: #fff;
}
.hero-banner-inst {
  flex: none;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  background: var(--purple, #6d1660); padding: 6px 12px; border-radius: 20px;
}
.hero-banner-title {
  font-size: 14px; font-weight: 400; color: rgba(255,255,255,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Slide counter (used instead of dots when there are many slides) */
.hero-count {
  min-width: 64px; text-align: center;
  font-size: 13px; letter-spacing: .06em; color: rgba(255,255,255,.85);
  font-variant-numeric: tabular-nums;
}
.hero.has-dots .hero-count { display: none; }

/* Not-yet-loaded slides: avoid broken-image icons */
.hero-slide:not(.is-loaded) img { visibility: hidden; }
.hero-slide.is-broken { display: none; }

@media (max-width: 900px) {
  .hero-banner-cap { left: 20px; right: 20px; bottom: 76px; max-width: none; }
}

@media (max-width: 767px) {
  .hero, .hero-content { min-height: 600px; }
  .hero-banner-art { padding: 24px 0 128px; }
  .hero .hero-banner-art img { box-shadow: 0 10px 30px rgba(0,0,0,.4); }
  .hero-banner-cap { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hero-banner-title { white-space: normal; font-size: 15px; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}