/* =====================================================================
   All Star Entertainment — gallery.css
   Page-specific styles for gallery.html only.
   All tokens, reset, typography, buttons, nav, footer, and the
   lightbox itself come from main.css.
   ===================================================================== */

/* ---------------------------------------------------------------------
   PAGE HEADER
   --------------------------------------------------------------------- */
.gallery-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 65% 40%, rgba(252,204,71,.09) 0%, transparent 58%),
    var(--bg);
  padding-block: clamp(48px, 8vw, 96px);
  text-align: center;
}

/* Decorative background layer — crossing spotlight beams + bokeh + floor grid
   (same treatment as events.html, mirrored for a centered hero) */
.gallery-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 30%, transparent 35%, rgba(34,36,42,.5) 100%);
}

.gallery-hero__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(140px 140px at 14% 26%, rgba(252,204,71,.10), transparent 70%),
    radial-gradient(180px 180px at 84% 16%, rgba(218,68,68,.09), transparent 72%),
    radial-gradient(150px 150px at 70% 74%, rgba(252,204,71,.08), transparent 70%),
    radial-gradient(110px 110px at 30% 84%, rgba(246,243,233,.05), transparent 70%),
    radial-gradient(100px 100px at 94% 60%, rgba(252,204,71,.07), transparent 70%);
  animation: galBokeh 10s ease-in-out infinite;
}

.gallery-hero__bg::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background-image: repeating-linear-gradient(
    to top,
    rgba(246,243,233,.05) 0px,
    rgba(246,243,233,.05) 1px,
    transparent 1px,
    transparent 34px
  );
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent);
          mask-image: linear-gradient(to top, rgba(0,0,0,.85), transparent);
}

.gallery-hero__beams {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.gallery-hero__beams .beam--a { animation: galBeamGlow 7s ease-in-out infinite; }
.gallery-hero__beams .beam--b { animation: galBeamGlow 8.5s ease-in-out infinite 1.2s; }
.gallery-hero__beams .beam--c { animation: galBeamGlow 6.8s ease-in-out infinite .6s; }

@keyframes galBokeh {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; }
}
@keyframes galBeamGlow {
  0%, 100% { opacity: .7; }
  50%      { opacity: 1; }
}

/* Text sits above every layer of .gallery-hero__bg */
.gallery-hero__content {
  position: relative;
  z-index: 1;
}

.gallery-hero .eyebrow {
  justify-content: center;
  margin-bottom: .9rem;
}
.gallery-hero__title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  color: var(--paper);
  max-width: 18ch;
  margin-inline: auto;
  line-height: 1.05;
}
.gallery-hero__sub {
  color: var(--paper);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  max-width: 56ch;
  margin: 1rem auto 0;
  line-height: 1.6;
}

/* Gold rule below header */
.gallery-rule {
  height: 4px;
  background: var(--gold);
  border: none;
  margin: 0;
}

/* ---------------------------------------------------------------------
   GALLERY GRID
   Desktop: 3 columns · Tablet: 2 columns · Mobile: 1 column
   --------------------------------------------------------------------- */
.gallery-section { padding-block: var(--section-y); }

.gallery-grid {
  --gal-gap: clamp(.85rem, 2vw, 1.4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gal-gap);
}

/* Desktop: 3 columns — flex-basis (not grid) so a partial last row centers */
.gallery-item {
  flex: 0 0 calc((100% - 2 * var(--gal-gap)) / 3);
}

/* Tablet */
@media (max-width: 900px) {
  .gallery-item {
    flex-basis: calc((100% - var(--gal-gap)) / 2);
  }
}

/* Mobile */
@media (max-width: 560px) {
  .gallery-item {
    flex-basis: 100%;
  }
}

/* ---------------------------------------------------------------------
   GALLERY ITEM — clickable photo tile
   --------------------------------------------------------------------- */
.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface-2);
  padding: 0;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.gallery-item:hover,
.gallery-item:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold);
  box-shadow: var(--shadow-card);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.05);
}
.gallery-item img:not([src]),
.gallery-item img[src=""] { display: none; }

/* Placeholder shown while a real image hasn't been added yet */
.gallery-item::before {
  content: "";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-label);
  font-size: .74rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--line);
  pointer-events: none;
}

/* Zoom-in cue icon on hover, top-right corner */
.gallery-item::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: var(--pill);
  background: rgba(20,21,26,.6);
  border: 1px solid var(--line);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .2s ease, transform .2s ease;
  background-image:
    linear-gradient(var(--paper), var(--paper)),
    linear-gradient(var(--paper), var(--paper));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 2px, 2px 14px;
}
.gallery-item:hover::after,
.gallery-item:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}