/* ==========================================================================
   VITALYS — IMAGE GALLERY SLIDER (OWL CAROUSEL + FANCYBOX)
   Sections: Variables, Gallery Section, Owl Carousel, Gallery Items,
   Image Hover, Overlay, Fancybox, Animations, Responsive Breakpoints.
   Shares brand tokens (--font-nav, --color-accent, --ease-out-quart, etc.)
   already defined in navbar.css; only gallery-specific tokens live here.
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  --gallery-height-desktop: 380px;
  --gallery-height-tablet: 320px;
  --gallery-height-mobile: 260px;
  --gallery-overlay: rgba(0, 0, 0, 0.25);
  --gallery-icon-size: 42px;
}

/* ==========================================================================
   2. GALLERY SECTION
   ========================================================================== */
.gallery-section {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  /* Sits directly above the footer with zero gap; the section itself
     carries no top/bottom spacing so it visually fuses with whatever
     comes immediately before and after it in the document. */
}

.gallery-fluid {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   3. OWL CAROUSEL
   ========================================================================== */
.gallery-track.owl-carousel {
  width: 100%;
  overflow: hidden;
}

.gallery-track.owl-carousel .owl-stage-outer,
.gallery-track.owl-carousel .owl-stage,
.gallery-track.owl-carousel .owl-item {
  line-height: 0;
}

/* Navigation/dots are already disabled via the Owl config (nav:false,
   dots:false); these rules are a defensive backstop against the default
   Owl theme ever being loaded on this page. */
.gallery-track.owl-carousel .owl-nav,
.gallery-track.owl-carousel .owl-dots {
  display: none !important;
}

/* Before Owl Carousel has initialized (JS not yet run, or failed to
   load), items would otherwise stack as full-width blocks. Laying them
   out with flex-wrap keeps the strip looking correct even without JS. */
.gallery-track:not(.owl-loaded) {
  display: flex;
  flex-wrap: wrap;
}

/* ==========================================================================
   4. GALLERY ITEMS
   ========================================================================== */
.gallery-item {
  position: relative;
  display: block;
  width: 100%;
  height: var(--gallery-height-desktop);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Fallback (pre-Owl-init) widths so the strip is never a single column
   while scripts are loading. Owl Carousel overrides these via its own
   inline widths once initialized. */
.gallery-track:not(.owl-loaded) .gallery-item {
  width: 25%;
}

.gallery-item-link {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   5. IMAGES
   ========================================================================== */
.gallery-item-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* ==========================================================================
   6. IMAGE HOVER
   ========================================================================== */
.gallery-item-link:hover .gallery-item-image,
.gallery-item-link:focus-visible .gallery-item-image {
  transform: scale(1.08);
}

/* ==========================================================================
   7. OVERLAY
   ========================================================================== */
.gallery-item-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gallery-overlay);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.gallery-item-link:hover .gallery-item-overlay,
.gallery-item-link:focus-visible .gallery-item-overlay {
  opacity: 1;
}

.gallery-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gallery-icon-size);
  height: var(--gallery-icon-size);
  color: #ffffff;
  font-size: var(--gallery-icon-size);
  line-height: 1;
  transform: scale(0.85);
  transition: transform 0.5s ease;
}

.gallery-item-link:hover .gallery-item-icon,
.gallery-item-link:focus-visible .gallery-item-icon {
  transform: scale(1);
}

.gallery-item-link:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: -4px;
}

/* ==========================================================================
   8. FANCYBOX
   ========================================================================== */
/* Fancybox v5 ships its own polished lightbox chrome (dark backdrop,
   nav arrows, zoom, keyboard + outside-click close) configured entirely
   in gallery-slider.js. Only brand-alignment tweaks live here so the
   lightbox toolbar/caption typography matches the site's global font. */
:root {
  --f-font-family: var(--font-nav);
}

.fancybox__caption {
  font-family: var(--font-nav);
}

/* ==========================================================================
   9. ANIMATIONS
   ========================================================================== */
@keyframes galleryFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* The track is fully visible by default. gallery-slider.js opts it into
   the hidden pre-animation state (.will-animate) only after confirming
   IntersectionObserver support and no reduced-motion preference — so a
   JS failure or a headless/no-scroll render never ships a blank strip. */
.gallery-track.will-animate {
  opacity: 0;
}

.gallery-track.will-animate.is-visible {
  animation: galleryFadeIn 0.9s var(--ease-out-quart) both;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-track.will-animate,
  .gallery-track.will-animate.is-visible {
    animation: none;
    opacity: 1;
  }

  .gallery-item-link:hover .gallery-item-image,
  .gallery-item-link:focus-visible .gallery-item-image {
    transform: none;
  }
}

/* ==========================================================================
   10. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet: 768px–991px — 3 images visible (see Owl responsive config) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .gallery-item {
    height: var(--gallery-height-tablet);
  }

  .gallery-track:not(.owl-loaded) .gallery-item {
    width: 33.3333%;
  }
}

/* Mobile: below 768px — 2 images visible (see Owl responsive config) */
@media (max-width: 767.98px) {
  .gallery-item {
    height: var(--gallery-height-mobile);
  }

  .gallery-track:not(.owl-loaded) .gallery-item {
    width: 50%;
  }
}