/* ============================================================
   BILLIARD PAGE — PREMIUM HERO IMAGE
   Cinematic photo background for the reservation hero
   ============================================================ */


/* ============================================================
   HERO — Cinematic photo background
   Layers: photo → dark gradient overlay → content
   ============================================================ */

.billiard-hero {
  position: relative;
  overflow: hidden;
}

/* Photo background layer */
.billiard-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.billiard-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}

/* Dark cinematic overlay — readable text, visible background */
.billiard-hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(14, 14, 14, 0.65) 0%,
      rgba(14, 14, 14, 0.55) 50%,
      rgba(14, 14, 14, 0.75) 100%
    );
  z-index: 1;
}

/* Override the existing gradient background — photo takes over */
.billiard-hero--has-photo {
  background: #0e0e0e !important;
}

/* Lift orb + content above the photo */
.billiard-hero--has-photo .billiard-hero__bg-orb {
  z-index: 2;
  opacity: 0.5;
}

.billiard-hero--has-photo .billiard-hero__inner {
  z-index: 3;
}

/* Text shadow for extra contrast */
.billiard-hero--has-photo .billiard-hero__title,
.billiard-hero--has-photo .billiard-hero__sub,
.billiard-hero--has-photo .billiard-chips {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet + Mobile — same overlay, no extra darkening */