/* ==========================================================================
   Joz Social Co — Gallery (event showcase)
   ========================================================================== */

/* ======================================================================
   HUB HERO
   ====================================================================== */

.gal-hero {
  background: var(--bg-dark);
  padding: var(--space-32) var(--container-gutter) var(--space-20);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.gal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 700px 400px at 20% 10%,
      rgba(198, 169, 107, 0.18) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 600px 500px at 80% 90%,
      rgba(198, 169, 107, 0.12) 0%,
      transparent 65%
    );
  pointer-events: none;
}

.gal-hero > * {
  position: relative;
  z-index: 1;
}

.gal-hero .eyebrow {
  display: block;
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}

.gal-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--type-5xl), 7vw, var(--type-7xl));
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--text-on-dark);
  margin-bottom: var(--space-6);
}

.gal-hero h1 em {
  font-style: italic;
  color: var(--color-gold-light);
}

.gal-hero p {
  font-family: var(--font-body);
  font-size: var(--type-lg);
  color: var(--text-on-dark-muted);
  max-width: 580px;
  margin: 0 auto;
  line-height: var(--lh-body);
}

/* ======================================================================
   EVENT ROWS (hub)
   ====================================================================== */

.gal-events {
  background: var(--bg-primary);
  padding: var(--space-20) 0 var(--space-24);
}

.gal-events__inner {
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.gal-event-row {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-12);
  align-items: center;
}

.gal-event-row--reverse .gal-event-row__text {
  order: 2;
}

.gal-event-row--reverse .gal-event-row__mosaic {
  order: 1;
}

.gal-event-row__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.gal-event-row__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold);
}

.gal-event-row__meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-gold);
  opacity: 0.5;
}

.gal-event-row__title {
  font-family: var(--font-display);
  font-size: clamp(var(--type-4xl), 5vw, var(--type-6xl));
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  margin: 0;
}

.gal-event-row__title em {
  font-style: italic;
}

.gal-event-row__desc {
  font-family: var(--font-body);
  font-size: var(--type-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 48ch;
}

.gal-event-row__text .btn-outline {
  margin-top: var(--space-3);
  align-self: flex-start;
}

/* Mosaic: 2x2 grid where hero tile spans 2 rows */
.gal-event-row__mosaic {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--space-3);
  aspect-ratio: 4 / 3;
}

.gal-event-row__mosaic a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.gal-event-row__mosaic a:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.gal-event-row__mosaic a:first-child {
  grid-row: span 2;
}

.gal-event-row__mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gal-event-row__mosaic a:hover img {
  transform: scale(1.04);
}

.gal-event-row__mosaic-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--type-3xl);
  color: var(--color-ivory);
  background: rgba(17, 17, 17, 0.55);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gal-event-row__mosaic a:hover .gal-event-row__mosaic-count {
  opacity: 1;
}

/* ======================================================================
   HUB EMPTY / MORE COMING
   ====================================================================== */

.gal-more {
  background: var(--bg-sand-glow);
  padding: var(--space-20) var(--container-gutter);
  text-align: center;
}

.gal-more .eyebrow {
  display: block;
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.gal-more h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(var(--type-3xl), 4vw, var(--type-5xl));
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
}

.gal-more p {
  font-family: var(--font-body);
  font-size: var(--type-lg);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 auto var(--space-8);
  line-height: var(--lh-body);
}

/* ==========================================================================
   EVENT PAGE — Individual real-event gallery
   ========================================================================== */

/* Hero */

.gal-evt-hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--color-black);
}

.gal-evt-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  filter: brightness(0.7);
}

.gal-evt-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(17, 17, 17, 0.4) 0%,
    rgba(17, 17, 17, 0.25) 45%,
    rgba(17, 17, 17, 0.85) 100%
  );
}

.gal-evt-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 var(--container-gutter);
  max-width: 920px;
}

.gal-evt-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  background: var(--color-black);
  padding: var(--space-2) var(--space-5);
  border: 1px solid var(--color-gold);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.gal-evt-hero__eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-gold);
}

.gal-evt-hero__title {
  font-family: var(--font-display);
  font-size: clamp(var(--type-5xl), 8vw, 5.5rem);
  font-weight: var(--fw-regular);
  line-height: 1.05;
  color: var(--color-ivory);
  margin-bottom: var(--space-5);
}

.gal-evt-hero__title em {
  font-style: italic;
  color: var(--color-gold-light);
}

.gal-evt-hero__subtitle {
  font-family: var(--font-body);
  font-size: var(--type-xl);
  color: rgba(245, 243, 239, 0.85);
  max-width: 640px;
  margin: 0 auto var(--space-8);
  line-height: var(--lh-body);
}

.gal-evt-hero__facts {
  display: inline-flex;
  align-items: stretch;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  background: rgba(17, 17, 17, 0.5);
  border: 1px solid rgba(245, 243, 239, 0.1);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
}

.gal-evt-hero__fact {
  text-align: left;
  min-width: 0;
}

.gal-evt-hero__fact-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-1);
}

.gal-evt-hero__fact-value {
  font-family: var(--font-body);
  font-size: var(--type-base);
  font-weight: var(--fw-medium);
  color: var(--color-ivory);
  white-space: nowrap;
}

.gal-evt-hero__fact-divider {
  width: 1px;
  background: rgba(245, 243, 239, 0.15);
}

/* Intro / story */

.gal-evt-intro {
  background: var(--bg-primary);
  padding: var(--space-24) var(--container-gutter);
}

.gal-evt-intro__inner {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
}

.gal-evt-intro__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(var(--type-3xl), 4vw, var(--type-5xl));
  font-weight: var(--fw-regular);
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: var(--space-10);
}

.gal-evt-intro__quote::before {
  content: "\201C";
  display: block;
  font-size: var(--type-7xl);
  color: var(--color-gold);
  line-height: 0.4;
  margin-bottom: var(--space-6);
  opacity: 0.55;
}

.gal-evt-intro__body {
  font-family: var(--font-body);
  font-size: var(--type-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-align: left;
}

.gal-evt-intro__body p + p {
  margin-top: var(--space-4);
}

/* Section header (reused) */

.gal-evt-section {
  padding: var(--space-20) var(--container-gutter);
}

.gal-evt-section--dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.gal-evt-section--light {
  background: var(--bg-sand-glow);
}

.gal-evt-section__header {
  max-width: var(--container-xl);
  margin: 0 auto var(--space-12);
  text-align: center;
}

.gal-evt-section__header .eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}

.gal-evt-section__header h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(var(--type-3xl), 4.5vw, var(--type-5xl));
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  color: inherit;
}

.gal-evt-section--dark .gal-evt-section__header h2 {
  color: var(--color-ivory);
}

.gal-evt-section__header p {
  font-family: var(--font-body);
  font-size: var(--type-lg);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 620px;
  margin: var(--space-4) auto 0;
}

.gal-evt-section--dark .gal-evt-section__header p {
  color: var(--text-on-dark-muted);
}

/* Photo strip showcase */

.gal-evt-strips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
  max-width: var(--container-xl);
  margin: 0 auto;
  justify-items: center;
}

.gal-evt-strip {
  position: relative;
  width: 100%;
  max-width: 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.25);
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.gal-evt-strips > .gal-evt-strip:nth-child(5n + 1) {
  --tilt: -2.5deg;
}
.gal-evt-strips > .gal-evt-strip:nth-child(5n + 2) {
  --tilt: 1.5deg;
}
.gal-evt-strips > .gal-evt-strip:nth-child(5n + 3) {
  --tilt: -1deg;
}
.gal-evt-strips > .gal-evt-strip:nth-child(5n + 4) {
  --tilt: 2deg;
}
.gal-evt-strips > .gal-evt-strip:nth-child(5n + 5) {
  --tilt: -3deg;
}

.gal-evt-strip:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.02);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.5),
    0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.gal-evt-strip img {
  width: 100%;
  height: auto;
  display: block;
}

/* Stack-mode controls (hidden on desktop) */

.gal-evt-strips-nav {
  display: none;
  justify-content: center;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.gal-evt-strips-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(245, 243, 239, 0.08);
  border: 1px solid rgba(245, 243, 239, 0.18);
  color: var(--color-ivory);
  font-size: var(--type-base);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.gal-evt-strips-arrow:hover,
.gal-evt-strips-arrow:focus-visible {
  background: rgba(245, 243, 239, 0.15);
  border-color: var(--color-gold);
  outline: none;
}

.gal-evt-strips-arrow:active {
  transform: scale(0.95);
}

.gal-evt-strips-count {
  font-family: var(--font-body);
  font-size: var(--type-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  color: var(--color-gold);
  min-width: 56px;
  text-align: center;
}

/* Masonry photo grid */

.gal-evt-grid {
  columns: 3;
  column-gap: var(--space-4);
  max-width: var(--container-xl);
  margin: 0 auto;
}

.gal-evt-grid__item {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
  cursor: zoom-in;
}

.gal-evt-grid__item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.gal-evt-grid__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease;
}

.gal-evt-grid__item:hover img {
  transform: scale(1.03);
}

/* BTS strip row (horizontal two-up) */

.gal-evt-bts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6);
  max-width: var(--container-lg);
  margin: 0 auto;
}

.gal-evt-bts__item {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.gal-evt-bts__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.gal-evt-bts__item:hover img {
  transform: scale(1.04);
}

/* Footer nav (back to gallery) */

.gal-evt-footer-nav {
  padding: var(--space-16) var(--container-gutter);
  background: var(--bg-primary);
  text-align: center;
}

/* Lightbox */

.gal-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 10, 10, 0.95);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  cursor: zoom-out;
}

.gal-lightbox.active {
  display: flex;
}

.gal-lightbox__img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.gal-lightbox__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  background: transparent;
  border: none;
  color: var(--color-ivory);
  font-size: var(--type-2xl);
  cursor: pointer;
  padding: var(--space-2);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.gal-lightbox__close:hover {
  opacity: 1;
}

.gal-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(245, 243, 239, 0.08);
  border: 1px solid rgba(245, 243, 239, 0.15);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: var(--color-ivory);
  font-size: var(--type-lg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition:
    opacity 0.2s ease,
    background 0.2s ease;
}

.gal-lightbox__nav:hover {
  opacity: 1;
  background: rgba(245, 243, 239, 0.15);
}

.gal-lightbox__nav--prev {
  left: var(--space-6);
}

.gal-lightbox__nav--next {
  right: var(--space-6);
}

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

@media (max-width: 900px) {
  .gal-event-row {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .gal-event-row--reverse .gal-event-row__text,
  .gal-event-row--reverse .gal-event-row__mosaic {
    order: initial;
  }

  .gal-evt-grid {
    columns: 2;
  }

  .gal-evt-bts {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .gal-hero {
    padding: var(--space-24) var(--container-gutter) var(--space-16);
  }

  .gal-events {
    padding: var(--space-16) 0;
  }

  .gal-events__inner {
    gap: var(--space-16);
  }

  .gal-event-row__mosaic {
    aspect-ratio: 5 / 4;
  }

  .gal-evt-hero {
    min-height: 70vh;
  }

  .gal-evt-hero__facts {
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    text-align: center;
  }

  .gal-evt-hero__fact {
    text-align: center;
  }

  .gal-evt-hero__fact-divider {
    width: 100%;
    height: 1px;
  }

  .gal-evt-intro,
  .gal-evt-section {
    padding: var(--space-16) var(--container-gutter);
  }

  /* Strips: swipeable card stack */
  .gal-evt-strips {
    position: relative;
    display: block;
    width: 220px;
    max-width: 100%;
    aspect-ratio: 1 / 3;
    margin: 0 auto;
    touch-action: pan-y;
  }

  .gal-evt-strips-nav {
    margin-top: var(--space-6);
    position: relative;
    z-index: 10;
  }

  .gal-evt-strip {
    position: absolute;
    top: 0;
    left: 50%;
    width: 220px;
    max-width: 220px;
    margin: 0;
    transform: translateX(-50%) rotate(0deg);
    transition:
      transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
      opacity 0.4s ease;
    will-change: transform;
  }

  /* nth-child decorative tilts don't apply in stack mode */
  .gal-evt-strips > .gal-evt-strip:nth-child(n) {
    --tilt: 0deg;
  }

  .gal-evt-strip.is-active {
    z-index: 5;
    opacity: 1;
    transform: translateX(-50%) rotate(-1deg);
  }

  .gal-evt-strip.is-next {
    z-index: 3;
    opacity: 0.7;
    transform: translateX(calc(-50% + 24px)) rotate(4deg) scale(0.94);
  }

  .gal-evt-strip.is-prev {
    z-index: 3;
    opacity: 0.7;
    transform: translateX(calc(-50% - 24px)) rotate(-4deg) scale(0.94);
  }

  .gal-evt-strip.is-hidden {
    z-index: 1;
    opacity: 0;
    transform: translateX(-50%) scale(0.88);
    pointer-events: none;
  }

  .gal-evt-strips-nav {
    display: flex;
  }
}

@media (max-width: 480px) {
  .gal-evt-grid {
    columns: 1;
  }

  .gal-lightbox__nav {
    width: 40px;
    height: 40px;
  }

  .gal-lightbox__nav--prev {
    left: var(--space-3);
  }

  .gal-lightbox__nav--next {
    right: var(--space-3);
  }
}