/* ==========================================================================
   MJL Public Website — Responsive Hero Image System
   Desktop / Tablet / Mobile images with editable crop positions
   ========================================================================== */

.responsive-hero-bg,
.membership-hero-bg.responsive-hero-bg {
  background-image: var(--hero-desktop-image, var(--games-hero-image, url('/img/lounge-hero.png')));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--hero-desktop-x, 50%) var(--hero-desktop-y, 50%);
}

.responsive-hero-overlay,
.membership-hero-overlay {
  opacity: var(--hero-overlay-opacity, 0.72);
}

.page-hero-section,
.membership-hero-section,
.hero.home-shot-hero {
  position: relative;
}

.responsive-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.responsive-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 11, 8, 0.88) 0%, rgba(5, 11, 8, 0.62) 45%, rgba(5, 11, 8, 0.42) 100%),
    linear-gradient(180deg, rgba(5, 11, 8, 0.25), rgba(5, 11, 8, 0.82));
}

.page-hero-content,
.membership-hero-grid,
.games-hero-content,
.hero.home-shot-hero .container,
.hero.home-shot-hero .v2-hero-content,
.hero.home-shot-hero .feature-strip {
  position: relative;
  z-index: 2;
}

.page-hero-section {
  min-height: clamp(280px, 42vh, 420px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.page-hero-content {
  padding: clamp(72px, 10vw, 110px) 0 clamp(48px, 7vw, 72px);
}

.page-hero-content h1 {
  margin: 0 0 12px;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.page-hero-content p {
  max-width: 640px;
  margin: 0;
  color: #b7c8bf;
  line-height: 1.65;
}

.hero.home-shot-hero {
  background-image: none !important;
}

.hero.home-shot-hero::after {
  display: none;
}

.hero.home-shot-hero .hero-bg:not(.responsive-hero-bg) {
  display: none;
}

.membership-hero-bg {
  background-image: var(--hero-desktop-image, var(--membership-hero-image, url('/img/membership-hero.png')));
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--hero-desktop-x, 50%) var(--hero-desktop-y, 50%);
  transform: none;
}

@media (max-width: 1023px) {
  .responsive-hero-bg,
  .membership-hero-bg {
    background-image: var(--hero-tablet-image, var(--hero-desktop-image, var(--games-hero-image, url('/img/lounge-hero.png'))));
    background-position: var(--hero-tablet-x, 50%) var(--hero-tablet-y, 45%);
  }
}

@media (max-width: 768px) {
  .responsive-hero-bg,
  .membership-hero-bg {
    background-image: var(--hero-mobile-image, var(--hero-tablet-image, var(--hero-desktop-image, var(--games-hero-image, url('/img/lounge-hero.png')))));
    background-position: var(--hero-mobile-x, 50%) var(--hero-mobile-y, 35%);
  }

  .responsive-hero-overlay {
    background:
      linear-gradient(180deg, rgba(5, 11, 8, 0.55), rgba(5, 11, 8, 0.9)),
      linear-gradient(180deg, rgba(5, 11, 8, 0.25), rgba(5, 11, 8, 0.82));
  }

  .page-hero-content,
  .membership-hero-grid,
  .games-hero-content,
  .hero.home-shot-hero .container,
  .hero.home-shot-hero .v2-hero-content,
  .hero.home-shot-hero .feature-strip {
    z-index: 1;
  }
}