/* ============================= */
/* GALLERY PAGE STYLING */
/* ============================= */

.gallery {
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 40px;
}

.gallery-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 50px;
  margin-bottom: 90px;
}

.gallery-row.reverse {
  grid-template-columns: 0.9fr 1.1fr;
}

.gallery-image img {
  width: 100%;
  display: block;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.55);
  background: #0b0b0b;
}

.gallery-text .page-title {
  font-size: 32px;
  line-height: 1.25;
  margin-bottom: 18px;
  font-weight: 600;
}

.gallery-text .page-title span {
  color: var(--gold);
  position: relative;
}

 

.gallery-text p {
  margin: 0 0 14px 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}

.gallery-text p span.underline {
  color: var(--gold);
  font-weight: 500;
}

.gallery-hint {
  margin-top: 16px;
  font-size: 13px;
  color: #7ad957;
  opacity: 0.85;
}
.gallery-title {
  font-size: 32px;
  line-height: 1.25;
  margin-bottom: 18px;
  font-weight: 600;
}

.gallery-title span {
  color: var(--gold);
  position: relative;
}

 

.highlight {
  color: var(--gold);
  font-weight: 500;
}
.gallery-row {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 50px;
}

/* 🔁 REVERSE ROW */
.gallery-row.reverse .gallery-image {
  order: 2;
}

.gallery-row.reverse .gallery-text {
  order: 1;
}
/* --------------------------------------------------------------------------------------------------------------*/
/* ------------------------------Fix gallery container width & spacing-------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------*/
.gallery {
  max-width: 1400px;        /* wider canvas */
  margin: 0 auto;
  padding: 0 40px;          /* breathing space only */
}
/* --------------------------------------------------------------------------------------------------------------*/
/* ------------------------------Reduce vertical gaps BETWEEN rows (major fix)-------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------*/
.gallery-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;  /* IMAGE BIGGER */
  align-items: center;
  gap: 60px;
  margin-bottom: 70px;      /* was too big earlier */
}
/* --------------------------------------------------------------------------------------------------------------*/
/* ------------------------------Make images BIG & premium-------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------*/
.gallery-image img {
  width: 100%;
  max-width: none;          /* IMPORTANT */
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 10px 70px rgba(0,0,0,0.6);
}
/* --------------------------------------------------------------------------------------------------------------*/
/* ------------------------------Override hero padding ONLY for gallery page:-------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------*/
.gallery-page.hero {
  padding-top: 60px;
  padding-bottom: 40px;
}
/* --------------------------------------------------------------------------------------------------------------*/
/* ------------------------------Tighten text block width (visual balance):-------------------------------------------*/
/* --------------------------------------------------------------------------------------------------------------*/

.gallery-text {
  max-width: 520px;
}
 /* ======================================================
   GALLERY PAGE – FOOTER SPACE FIX (OVERRIDES ONLY)
   ====================================================== */

/* 1. Kill old bottom margin coming from pages.css */
.gallery-page .gallery {
  margin-bottom: 0 !important;
  margin-top: 60px !important; /* keep top spacing only */
}

/* 2. Prevent hero from forcing extra height */
.gallery-page.hero {
  min-height: auto !important;
  height: auto !important;
  padding-bottom: 0 !important;
}

/* 3. Ensure background rays do NOT add height */
.gallery-page .rays {
  position: absolute;
  bottom: 0;
  height: auto;
}

/* 4. Ensure footer sits immediately after gallery */
.gallery-page footer {
  margin-top: 0 !important;
}

/* ======================================================
   GALLERY PAGE – SINGLE SCROLL FIX
   ====================================================== */

 

 

 

/* 4. Rays must NEVER create scroll */
body.gallery-page .rays {
  pointer-events: none;
  overflow: hidden;
}
/* ======================================================
   GALLERY PAGE – FINAL SCROLL FIX (AUTHORITATIVE)
   ====================================================== */

 

/* 2. REMOVE hero scrolling completely */
body.gallery-page .hero {
  height: auto !important;
  min-height: unset !important;
  overflow: unset !important;
}

 

 
 
/* ======================================================
   GALLERY PAGE – DOUBLE SCROLLBAR FINAL FIX
   ====================================================== */

/* 1. Let ONLY html scroll */
html {
  overflow-y: auto;
}

 

/* 3. Ensure no inner container scrolls */
body.gallery-page * {
  overscroll-behavior: none;
}
/* ======================================================
   GALLERY PAGE – MATCH SOCIAL ICON AXIS WITH OTHER PAGES
   ====================================================== */

/* 1. Ensure hero is the positioning context (same as other pages) */
body.gallery-page .hero {
  position: relative !important;
}

/* 2. Force socials to behave exactly like other pages */
body.gallery-page .socials {
  position: absolute !important;
  right: 8.5% !important;
  bottom: 94% !important;
  z-index: var(--layer-icons);
}
/*====================================================== */
/* FORCE COLOR CHANGE FOR "CLICK TO ZOOM" TEXT */
body.gallery-page .gallery-hint {
  color: #008BFF !important;
}
 
/* ======================================================
   FINAL FIX: PUSH GALLERY DOWN FROM TOP
   ====================================================== */

.hero.gallery-page {
  padding-top: 670px !important;
}
/* ======================================================
   FIX: BRING GALLERY HEADER TO TOP LAYER
   ====================================================== */

.hero.gallery-page .about-panel {
  position: relative;
  z-index: 100;
  pointer-events: auto;
}
/* ======================================================
   FINAL: SINGLE SCROLL + HEIGHT LOCK (GALLERY PAGE)
   ====================================================== */

/* Only HTML scrolls */
html {
  overflow-y: auto;
}

 

/* Hero & gallery participate in normal flow */
.hero.gallery-page,
.hero.gallery-page * {
  overflow: visible;
}

/* Rays never add height */
.gallery-page .rays {
  pointer-events: none;
  height: 100%;
}
/* ======================================================
   FINAL: ENABLE SINGLE, NORMAL SCROLL (GALLERY PAGE)
   ====================================================== */

html,
body {
  overflow-y: auto;
}

body.gallery-page {
  overflow-x: hidden;
}