/* =============================================================================
   GALLERY PAGE STYLES (Updated)
   Purpose:
   - Clean, responsive gallery layout with accessible pagination controls
   - Brand-locked colors (Grenier): #2e0c5e (Deep Royal Purple), #facc15 (Amber)
   - Smooth, reduced-motion-friendly transitions
   - Consistent “page show/hide” behavior (single source of truth)
   - Lightbox modal styling matched to brand
   ========================================================================== */

/* ============================================================================
   THEME TOKENS (Brand Lock v50.0)
   ========================================================================== */
:root {
  --brand-purple: #2e0c5e;   /* Deep Royal Purple */
  --brand-amber:  #facc15;   /* Vibrant Amber Yellow-Gold */
  --ink-900:      #1a1a1a;   /* Very dark neutral */
  --ink-700:      #2c3e50;   /* Deep slate for headings */
  --ink-600:      #333333;   /* Dark neutral text */
  --ink-500:      #6c757d;   /* Muted body text */
  --bg-100:       #f8f9fa;   /* Light neutral background */
  --bg-200:       #f0f0f0;   /* Light skeleton shimmer */
  --bg-300:       #e0e0e0;   /* Neutral fallback/skeleton */
  --shadow-sm:    0 4px 15px rgba(0, 0, 0, 0.10);
  --shadow-md:    0 8px 25px rgba(0, 0, 0, 0.15);
  --radius-md:    12px;
  --radius-lg:    15px;
  --space-xl:     80px;
  --space-lg:     60px;
  --space-md:     50px;
  --space-sm:     40px;
  --trans-fast:   0.2s ease-out;
  --trans-med:    0.3s ease;
  --trans-slow:   0.5s ease-in-out;
}

/* Prefer reduced motion: tone down transitions/animations for accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================================
   SECTION: GALLERY SECTION WRAPPER
   ========================================================================== */

.gallery__section,
#gallery-section { /* Keep both selectors to support existing markup */
  padding: var(--space-xl) 0;
  background-color: var(--bg-100); /* #f8f9fa */
  min-height: 100vh;
}

.gallery__section.overhid {
  overflow: hidden;
}

/* On smaller screens, tighten vertical rhythm */
@media (max-width: 991px) {
  .gallery__section,
  #gallery-section {
    padding: var(--space-lg) 0;
  }
}
@media (max-width: 767px) {
  .gallery__section,
  #gallery-section {
    padding: var(--space-md) 0;
  }
}
@media (max-width: 575px) {
  .gallery__section,
  #gallery-section {
    padding: var(--space-sm) 0;
  }
}

/* Tight top spacing — banner sits directly above the gallery on gallery.html */
html[data-page="gallery"] #gallery-section,
.banner__section + #gallery-section {
  padding-top: 36px !important;
  padding-bottom: 80px !important;
}

@media (max-width: 991px) {
  html[data-page="gallery"] #gallery-section,
  .banner__section + #gallery-section {
    padding-top: 28px !important;
    padding-bottom: 64px !important;
  }
}

@media (max-width: 767px) {
  html[data-page="gallery"] #gallery-section,
  .banner__section + #gallery-section {
    padding-top: 22px !important;
    padding-bottom: 56px !important;
  }
}

@media (max-width: 575px) {
  html[data-page="gallery"] #gallery-section,
  .banner__section + #gallery-section {
    padding-top: 18px !important;
    padding-bottom: 48px !important;
  }
}

/* Lock gallery card image size (beats any sitewide CSS bleed) */
#gallery-section .service__thumb {
  height: 164.025px;
  aspect-ratio: 16 / 9;
  display: block;
}

#gallery-section .service__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 1199px) {
  #gallery-section .service__thumb { height: 144.342px; }
}
@media (max-width: 991px) {
  #gallery-section .service__thumb { height: 131.22px; }
}
@media (max-width: 767px) {
  #gallery-section .service__thumb { height: 144.342px; }
}
@media (max-width: 575px) {
  #gallery-section .service__thumb { height: 131.22px; }
}

/* ============================================================================
   SECTION: TITLE BLOCK
   ========================================================================== */

.gallery__title-container {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  padding-bottom: 0; /* unify spacing here; headline uses underline accent */
  text-align: center;
}

.gallery__title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--ink-900); /* #1a1a1a */
  letter-spacing: 2px;
  position: relative;
  display: inline-block;
  padding-bottom: 15px;
  text-transform: uppercase;
}

/* Brand underline: purple → amber gradient */
.gallery__title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-purple) 0%, var(--brand-amber) 100%);
  border-radius: 2px;
}

/* Title responsiveness */
@media (max-width: 1199px) {
  .gallery__title { font-size: 2.5rem; }
}
@media (max-width: 991px) {
  .gallery__title { font-size: 2.2rem; }
}
@media (max-width: 767px) {
  .gallery__title { font-size: 2rem; letter-spacing: 1px; }
}
@media (max-width: 575px) {
  .gallery__title { font-size: 1.8rem; }
}

/* ============================================================================
   SECTION: PAGE VISIBILITY + 3D FLIP BATCH TRANSITIONS
   ========================================================================== */

#gallery-pages-container {
  display: grid;
  grid-template-columns: 1fr;
  position: relative;
  perspective: 1400px;
  transform-style: preserve-3d;
}

#gallery-pages-container.is-flipping {
  overflow: hidden;
}

.gallery-page {
  grid-area: 1 / 1;
  display: none;
  opacity: 0;
  flex-wrap: wrap;
  width: 100%;
  position: relative;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.gallery-page.active {
  display: flex;
  opacity: 1;
  transform: rotateX(0deg) rotateY(0deg);
}

/* Outgoing / incoming pages stack in the same grid cell (no absolute — keeps FAQ from jumping) */
.gallery-page.gallery-page--exit,
.gallery-page.gallery-page--enter {
  display: flex;
  z-index: 2;
  pointer-events: none;
}

.gallery-page.gallery-page--enter {
  z-index: 3;
}

/* Forward batch: horizontal flip */
.gallery-page.gallery-page--exit.flip-horizontal {
  animation: gallery-flip-out-horizontal 0.65s ease-in forwards;
}

.gallery-page.gallery-page--enter.flip-horizontal {
  animation: gallery-flip-in-horizontal 0.65s ease-out forwards;
}

@keyframes gallery-flip-out-horizontal {
  0%   { transform: rotateY(0deg);   opacity: 1; }
  100% { transform: rotateY(-90deg); opacity: 0; }
}

@keyframes gallery-flip-in-horizontal {
  0%   { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0deg);   opacity: 1; }
}

/* Backward batch: vertical flip */
.gallery-page.gallery-page--exit.flip-vertical {
  animation: gallery-flip-out-vertical 0.65s ease-in forwards;
}

.gallery-page.gallery-page--enter.flip-vertical {
  animation: gallery-flip-in-vertical 0.65s ease-out forwards;
}

@keyframes gallery-flip-out-vertical {
  0%   { transform: rotateX(0deg);   opacity: 1; }
  100% { transform: rotateX(-90deg); opacity: 0; }
}

@keyframes gallery-flip-in-vertical {
  0%   { transform: rotateX(90deg); opacity: 0; }
  100% { transform: rotateX(0deg);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-page.gallery-page--exit,
  .gallery-page.gallery-page--enter {
    animation: none !important;
  }
}

/* Keep FAQ block from shifting when gallery batches change height */
html[data-page="gallery"] #gallery-faq-discount {
  position: relative;
  z-index: 1;
}

/* ============================================================================
   SECTION: GALLERY CARDS (Service Items)
   ========================================================================== */

.service__items {
  background: #ffffff;                /* White card */
  border-radius: 7.8732px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--trans-med), box-shadow var(--trans-med);
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: flex-start;
  width: 100%;
}

.service__items:hover {
  transform: translateY(-5.2488px);
  box-shadow: var(--shadow-md);
}

/* Thumbnail area (16:9 by default; fixed height fallback kept for legacy) */
.service__thumb {
  position: relative;
  width: 100%;
  height: 164.025px;
  overflow: hidden;
  background-color: #000000;          /* Black fallback when image not ready */
  aspect-ratio: 16 / 9;               /* Modern ratio control; height acts as fallback */
  cursor: pointer;
  flex: 0 0 auto;
}

/* Responsive thumb heights when legacy height is preferred */
@media (max-width: 1199px) {
  .service__thumb { height: 144.342px; }
}
@media (max-width: 991px) {
  .service__thumb { height: 131.22px; }
}
@media (max-width: 767px) {
  .service__thumb { height: 144.342px; }
}
@media (max-width: 575px) {
  .service__thumb { height: 131.22px; }
}

/* Image fill */
.service__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease, opacity 0.3s ease;
}

.service__items:hover .service__thumb img {
  transform: scale(1.1);
  opacity: 1;
}

/* Card content — no flex-grow (prevents empty space below copy in text box) */
.service__content {
  padding: 9.72px 11.34px;
  flex: 0 0 auto;
  flex-grow: 0;
  height: auto;
  min-height: 0;
  display: block;
}

@media (max-width: 991px) {
  .service__content { padding: 8.1px 9.72px; }
}

.service__content h4 {
  font-size: 0.91854rem;
  font-weight: 600;
  color: var(--ink-700); /* #2c3e50 */
  margin: 0 0 4.86px;
  line-height: 1.25;
}

@media (max-width: 767px) {
  .service__content h4 { font-size: 0.78732rem; }
}

.service__content h4 a {
  color: inherit;
  text-decoration: none;
  transition: color var(--trans-med);
  outline: none;
}

.service__content h4 a:hover,
.service__content h4 a:focus-visible {
  color: var(--brand-amber); /* #facc15 */
}

.service__content p {
  font-size: 0.623295rem;
  color: var(--ink-500); /* #6c757d */
  line-height: 1.45;
  margin: 0;
  flex: none;
  flex-grow: 0;
}

@media (max-width: 767px) {
  .service__content p { font-size: 0.59049rem; }
}

#gallery-section .gallery-page > [class*="col-"] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#gallery-section .gallery-page > [class*="col-"] > .service__items {
  flex: 0 0 auto;
  height: auto;
}

/* Optional hover overlay with icon (kept from your later block) */
.service__thumb-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.40); /* Semi-transparent black */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity var(--trans-med);
}
.service__thumb:hover .service__thumb-overlay { opacity: 1; }

.service__thumb-overlay i {
  font-size: 31.4928px;
  color: #ffffff; /* White */
}

/* ============================================================================
   SECTION: REWIND + PAGINATION CONTROLS (Buttons + Legacy Links)
   ========================================================================== */

/* Compact jump-to-first / jump-to-last row between image grid and pagination bar */
.gallery-rewind {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  box-sizing: border-box;
}

.gallery-rewind button {
  padding: 4px 10px;
  background-color: #ffffff;
  border: 1.5px solid var(--bg-300);
  border-radius: 6px;
  color: var(--ink-600);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  cursor: pointer;
  flex: 0 0 auto;
  box-sizing: border-box;
  transition: transform var(--trans-med), background-color var(--trans-med), border-color var(--trans-med), color var(--trans-med), box-shadow var(--trans-med);
  outline: none;
  white-space: nowrap;
}

.gallery-rewind button:hover,
.gallery-rewind button:focus-visible {
  background-color: var(--brand-amber);
  border-color: var(--brand-amber);
  color: #1a1a1a;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(250, 204, 21, 0.3);
}

.gallery-rewind button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.gallery-pagination {
  display: flex;
  flex-wrap: nowrap;
  justify-content: stretch;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 0 0;
  box-sizing: border-box;
  overflow: hidden;
}

.gallery-pagination--single-row {
  flex-wrap: nowrap;
}

/* Middle strip: all count buttons stay on ONE row, scroll sideways */
.gallery-pagination__counts {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--brand-purple) var(--bg-300);
  padding: 4px 2px;
}

.gallery-pagination__counts::-webkit-scrollbar {
  height: 6px;
}

.gallery-pagination__counts::-webkit-scrollbar-thumb {
  background-color: var(--brand-purple);
  border-radius: 999px;
}

.gallery-pagination button {
  padding: 6px 12px;
  background-color: #ffffff;             /* White */
  border: 2px solid var(--bg-300);       /* #e0e0e0 */
  border-radius: 8px;                    /* slightly larger radius for touch */
  color: var(--ink-600);                 /* #333333 */
  font-weight: 600;
  font-size: 0.85rem;
  line-height: 1.2;
  cursor: pointer;
  flex: 0 0 auto;
  box-sizing: border-box;
  transition: transform var(--trans-med), background-color var(--trans-med), border-color var(--trans-med), color var(--trans-med), box-shadow var(--trans-med);
  outline: none;
  white-space: nowrap;
}

.gallery-pagination .gallery-prev,
.gallery-pagination .gallery-next {
  flex: 0 0 auto;
}

.gallery-pagination .gallery-page-btn {
  min-width: 4.75rem;
}

.gallery-pagination button:hover,
.gallery-pagination button:focus-visible {
  background-color: var(--brand-amber);  /* #facc15 */
  border-color: var(--brand-amber);
  color: #1a1a1a;                        /* dark text on amber for contrast */
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(250, 204, 21, 0.35); /* amber glow */
}

.gallery-pagination button.active {
  background-color: var(--brand-purple); /* #2e0c5e */
  border-color: var(--brand-purple);
  color: #ffffff;
}

.gallery-pagination button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Tighten layout on very small screens */
@media (max-width: 575px) {
  .gallery-rewind { gap: 8px; margin-top: 10px; }
  .gallery-rewind button { padding: 4px 8px; font-size: 0.68rem; }
  .gallery-pagination { gap: 6px; margin-top: 8px; }
  .gallery-pagination button { padding: 6px 10px; font-size: 0.8rem; }
  .gallery-pagination .gallery-page-btn { min-width: 4.25rem; }
}

/* Legacy numeric pagination link (kept for compatibility) */
.default__pagination li a.active {
  background-color: var(--brand-purple); /* #2e0c5e */
  color: #ffffff;
  border-color: var(--brand-purple);
  font-weight: 700;
}

/* ============================================================================
   SECTION: LOADING & ERROR STATES (Skeleton shimmer; safe, loop-free)
   ========================================================================== */

/* Loading shimmer on the thumbnail container while image decodes */
.service__thumb.loading {
  background: linear-gradient(90deg, var(--bg-300) 25%, var(--bg-200) 50%, var(--bg-300) 75%);
  background-size: 200% 100%;
  animation: gallery-loading 1.5s infinite;
}

@keyframes gallery-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Hide broken/empty images; JS sets neutral bg on parent to avoid loops */
.service__thumb img[src=""],
.service__thumb img:not([src]) {
  display: none;
}

/* (Note: ::after on <img> has no effect. If you want an alt-text overlay,
   render a sibling element in HTML or via JS when an error occurs.) */

/* ============================================================================
   SECTION: LIGHTBOX MODAL (Brand-styled)
   ========================================================================== */

#image-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65); /* dark scrim */
  z-index: 10000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

#modal-window {
  width: 100%;
  height: 100%;
  max-width: 1100px;
  max-height: 90vh;
  background-color: #ffffff;      /* White */
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border: 3px solid var(--brand-purple); /* Brand frame */
}

#modal-top-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
}

#modal-top-controls button {
  background: rgba(40, 40, 40, 0.70); /* semi-dark */
  color: #ffffff;
  border: none;
  width: 36px;
  height: 36px;
  font-size: 16px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--trans-fast), background-color var(--trans-fast), box-shadow var(--trans-fast);
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
}

#modal-top-controls button:hover,
#modal-top-controls button:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* Button-specific brand accent hovers */
#modal-close-btn:hover,
#modal-close-btn:focus-visible {
  background-color: var(--brand-purple); /* Purple close */
}
#fullscreen-btn:hover,
#fullscreen-btn:focus-visible {
  background-color: var(--brand-amber);  /* Amber fullscreen */
  color: #1a1a1a;
}
#minimize-btn:hover,
#minimize-btn:focus-visible {
  background-color: var(--brand-amber);  /* Amber minimize */
  color: #1a1a1a;
}

#modal-prev-btn,
#modal-next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 11;
  background: rgba(40, 40, 40, 0.70);
  color: #ffffff;
  border: none;
  width: 44px;
  height: 44px;
  font-size: 18px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform var(--trans-fast), background-color var(--trans-fast), box-shadow var(--trans-fast);
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
}

#modal-prev-btn { left: 12px; }
#modal-next-btn { right: 12px; }

#modal-prev-btn:hover,
#modal-prev-btn:focus-visible,
#modal-next-btn:hover,
#modal-next-btn:focus-visible {
  background-color: var(--brand-amber);
  color: #1a1a1a;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

#modal-image-container {
  width: 100%;
  height: 100%;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #222222; /* deep neutral to frame media */
}

#modal-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform var(--trans-fast);
  cursor: grab;
}

#modal-image.is-dragging { cursor: grabbing; }

/* Zoom slider dock */
#modal-zoom-controls {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: rgba(20, 20, 20, 0.65);
  padding: 8px 15px;
  border-radius: 20px;
  border: 2px solid var(--brand-amber); /* subtle brand ring */
}

#zoom-slider {
  cursor: pointer;
  width: 180px;
}

/* Disable body scroll when modal open */
body.modal-open { overflow: hidden; }