/* ==========================================================================
   MJL Public Website — Unified Page Hero System
   Contained hero images per page (desktop / tablet / mobile)
   ========================================================================== */

@import url('responsive-image.css');

.page-hero {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  isolation: isolate;
  background-color: #050b08;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 20, 10, 0.45)),
    var(--page-hero-image, var(--hero-desktop-image, url('/img/lounge-hero.png')));
  background-size: cover;
  background-position: var(--page-hero-x, var(--hero-desktop-x, 50%)) var(--page-hero-y, var(--hero-desktop-y, 50%));
  background-repeat: no-repeat;
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, #050b08);
  pointer-events: none;
  z-index: 2;
}

.page-hero .responsive-hero-overlay,
.page-hero .membership-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: var(--hero-overlay-opacity, 0.72);
  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 .page-hero-content,
.page-hero .membership-hero-grid,
.page-hero .games-hero-content,
.page-hero .v2-hero-content,
.page-hero .container:not(.feature-strip) {
  position: relative;
  z-index: 3;
}

.page-content {
  position: relative;
  z-index: 2;
  background: #050b08;
}

.page-hero.home-shot-hero {
  min-height: clamp(520px, 82vh, 860px);
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 20, 10, 0.45)),
    var(--page-hero-image, var(--hero-desktop-image, url('/img/lounge-hero.png')));
}

.page-hero.home-shot-hero::after {
  height: 140px;
}

.page-hero.games-hero::before {
  display: none;
}

.page-hero.membership-hero-section {
  min-height: clamp(420px, 58vh, 760px);
}

@media (max-width: 1023px) {
  .page-hero:not(.has-responsive-cover) {
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 20, 10, 0.45)),
      var(
        --page-hero-tablet-image,
        var(--hero-tablet-image, var(--page-hero-image, var(--hero-desktop-image, url('/img/lounge-hero.png'))))
      );
    background-position:
      var(--page-hero-tablet-x, var(--hero-tablet-x, var(--page-hero-x, 50%)))
      var(--page-hero-tablet-y, var(--hero-tablet-y, var(--page-hero-y, 45%)));
  }
}

@media (max-width: 768px) {
  .page-hero:not(.games-hero):not(.has-responsive-cover) {
    min-height: 520px;
    padding-top: 110px;
    background-image:
      linear-gradient(90deg, rgba(0, 0, 0, 0.82), rgba(0, 20, 10, 0.45)),
      var(
        --page-hero-mobile-image,
        var(
          --hero-mobile-image,
          var(--page-hero-tablet-image, var(--hero-tablet-image, var(--page-hero-image, var(--hero-desktop-image, url('/img/lounge-hero.png')))))
        )
      );
    background-position:
      var(--page-hero-mobile-x, var(--hero-mobile-x, 50%))
      var(--page-hero-mobile-y, var(--hero-mobile-y, 35%));
  }

  .page-hero:not(.games-hero).has-responsive-cover {
    min-height: 520px;
    padding-top: 110px;
  }

  .page-hero::after {
    height: 160px;
  }

  .page-hero .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));
  }
}