/*
 * gallery-arrows.css
 * Global shared style to position previous/next navigation arrows outside the image container.
 * Applied across Education, Healthcare, and Community pages.
 */

@media (min-width: 768px) {
  /* Increase gap between image and text cards to create space for the next arrow */
  .gallery-layout {
    gap: 72px !important;
  }

  /* Make image container overflow visible so arrows can render outside it */
  .gallery-column.left {
    overflow: visible !important;
    position: relative;
  }

  /* Force the inner carousel wrapper to clip image corners to preserve border-radius */
  .gallery-column.left .carousel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    border-radius: 12px;
  }

  /* Reposition prev/next buttons 14-16px outside the image container */
  .gallery-nav.prev {
    left: -55px !important;
    transform: translateY(-50%) !important;
  }

  .gallery-nav.next {
    right: -55px !important;
    transform: translateY(-50%) !important;
  }

  /* Preserve hover/active scaling animations */
  .gallery-nav:hover {
    transform: translateY(-50%) scale(1.12) !important;
  }

  .gallery-nav:active {
    transform: translateY(-50%) scale(0.95) !important;
  }

  /* Add safety margins to container padding on narrower desktop/tablet screens to prevent horizontal overflow */
  .container {
    padding-left: 48px !important;
    padding-right: 48px !important;
  }
}

@media (max-width: 767px) {
  /* Maintain existing mobile layout spacing */
  .gallery-layout {
    gap: 20px !important;
  }

  /* Hide arrows on mobile viewports */
  .gallery-nav {
    display: none !important;
  }
}