/*
 * MAT_custom.css
 */

body { 
    margin: 0; 
    overflow-y: auto;
    overflow-x: hidden;
}

/* ----------------------------------------------------------------------------
 * This section uses z-index to make sure that the content like text and images
 * is layered on top of the Three.js canvas. */

canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Ensure proper touch handling on mobile devices */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

a.text_link {
  text-decoration: none;
  margin-bottom: 1px;
  color: #7147a4;
  border-bottom: solid 1px #4c4c4c;
}

a.text_link:hover {
  margin-bottom: 0;
  border-bottom: solid 2px #4c4c4c;
}

/* Remove Bootstrap's style for focused elements */
a:focus,
a:active {
  outline: none !important;
  box-shadow: none !important;
}

h5 {
  font-size: 1rem;
  font-weight: 500;
}

/* Content wrapper with pointer-events handling */
.content-wrapper {
  position: relative;
  z-index: 1;
  color: white;
  /* Removed pointer-events: none to fix footer visibility issue */
}

/* Enable pointer events for interactive elements */
.content-wrapper a,
.content-wrapper button,
.content-wrapper input,
.content-wrapper .nav-menu,
.content-wrapper [role="button"],
.header,
.footer,
.nav-button {
  pointer-events: auto; /* Re-enable pointer events for interactive elements */
}

/* Ensure footer is visible and properly styled */
#footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
}

.footer {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Disable pointer events for specific sections that need to pass through to canvas */
.mat-section {
  pointer-events: none;
}

.mat-section a,
.mat-section button,
.mat-section input {
  pointer-events: auto; /* Re-enable for interactive elements within sections */
}

/* Optional: Add a semi-transparent overlay to improve text readability */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Adjust opacity as needed */
  z-index: 1;
  pointer-events: none; /* Allows clicking through to elements below */
}

/* Main page --------------------------------------------------------- */

.mat-section {
  background: transparent !important;
}

.mat-section h3 {
  color: rgba(255, 255, 255, 0.85);
}

.front_page_animation {
  position: fixed;
  bottom: 60px;
  left: 58%;
  /* border-bottom: solid 1px rgba(255, 255, 255, 0.85); */
  z-index: 1002;
  pointer-events: none;
}

.front_page_animation h3 {
  color: rgba(255,255,255,0.85) !important;
}

.front_page_animation p {
  font-size: 18px;
  color: rgba(255,255,255,0.85) !important;
}

/* Toggle on scroll elements (navigation buttons, etc.) */
.toggle-on-scroll {
    transition: opacity 0.3s ease-in-out !important;
    position: fixed !important;
    z-index: 1000 !important;
    opacity: 1 !important;
}

.toggle-on-scroll.scrolled-down {
    opacity: 0 !important;
}



/* Nav Buttons ------------------------------------------------------ */

button.nav-button {
    position: fixed;
    top: 75%;
    transform: translateY(-50%);
    z-index: 1000;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.75);
    font-size: 24px;
    border-radius: 50%;
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s ease-in-out !important;
}

button.nav-button:hover {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
}

/* Ensure SVG elements are isolated from button transforms */
button.nav-button svg {
    transform: none !important;
    transform-origin: center !important;
    transform-style: preserve-3d !important;
    will-change: transform !important;
}

.nav-prev { left: 20px; }
.nav-next { right: 20px; }
/* Position the down button at the bottom center */


/* Even more specific ID-based rule to override any conflicts */
#down-arrow-btn {
    position: fixed !important;
    top: auto !important;
    bottom: 55px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 1000 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 24px !important;
    border-radius: 50% !important;
    width: 65px !important;
    height: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.1s ease-in-out !important;
}

/* Hover effect for down arrow button */
#down-arrow-btn:hover {
    background: rgba(0, 0, 0, 0.6) !important;
    color: #fff !important;
    transform: translateX(-50%) scale(1.1) !important;
}

/* Ensure SVG elements are isolated from button transforms for down arrow */
#down-arrow-btn svg {
    transform: none !important;
    transform-origin: center !important;
    transform-style: preserve-3d !important;
    will-change: transform !important;
}

/* Fix for touch devices - reset hover state */
@media (hover: none) and (pointer: coarse) {
    button.nav-button:hover,
    #down-arrow-btn:hover {
        background: transparent !important;
        transform: translateY(-50%) scale(1) !important;
    }
    
    #down-arrow-btn:hover {
        transform: translateX(-50%) scale(1) !important;
    }
}



/* CSS-based down arrow */
.css-down-arrow {
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 20px solid rgba(255, 255, 255, 0.75);
    margin: 0 auto;
}







/* Play/Pause button styling */
.toggle-play-button {
    width: 50px !important;
    height: 50px !important;
    border: none !important;
    border-radius: 50% !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: rgba(255, 255, 255, 0.75) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    transition: background-color 0.05s, transform 0.08s ease !important;
    transform: scale(1) !important;
}

.toggle-play-button:hover {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #fff;
    transform: scale(1.2) !important;
}

.toggle-play-button i {
    font-size: 1.5rem !important;
}

/* Toggle button container and tooltip */
.toggle-button-container {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    transition: opacity 0.3s ease-in-out !important;
}

.toggle-button-tooltip {
    color: rgba(255, 255, 255, 0.9) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    font-family: Arial, sans-serif !important;
    transition: opacity 0.3s ease !important;
    opacity: 0;
    white-space: nowrap !important;
    margin-right: 10px !important;
}

/* Enable Audio button styling */
.enable-audio-button {
    position: fixed !important;
    bottom: 20px !important;
    right: 80px !important;
    z-index: 1000 !important;
    padding: 10px 20px !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: Arial, sans-serif !important;
    transition: opacity 0.3s ease-in-out, background-color 0.05s, transform 0.08s ease !important;
    transform: scale(1) !important;
    opacity: 1 !important; /* Ensure initial opacity is set */
}

.enable-audio-button:hover {
    background-color: rgba(0, 0, 0, 0.6) !important;
    transform: scale(1.1) !important;
}

/* Image caption styling */
.image-caption {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 1000 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px !important;
    font-family: Arial, sans-serif !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease-in-out !important;
}

/* Audio visualization styling */
.audio-visualization {
    display: inline-block !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
}

/* Audio bars are now animated via JavaScript, so we only need basic styling */
.audio-bar {
    display: inline-block !important;
    background-color: #87CEEB !important; /* Light sky blue */
    /* Let JavaScript control the height completely */
    width: 3px !important;
    margin-right: 2px !important;
    border-radius: 2px !important;
}

/* Individual bar delays for staggered animation - now handled by JavaScript */
/* .audio-bar-0 { animation-delay: 0s !important; } */
/* .audio-bar-1 { animation-delay: 0.1s !important; } */
/* .audio-bar-2 { animation-delay: 0.2s !important; } */
/* .audio-bar-3 { animation-delay: 0.3s !important; } */
/* .audio-bar-4 { animation-delay: 0.4s !important; } */

/* Make sure the animation works by being more specific - now handled by JavaScript */
/* .enable-audio-button .audio-bar {
    animation: audioBar 0.6s ease-in-out infinite !important;
} */

/* CSS animation removed - now handled by JavaScript */
/* @keyframes audioBar {
    0%, 100% { height: 4px; }
    50% { height: 12px; }
} */

/* Override Bootstrap's prefers-reduced-motion setting for our audio bars - no longer needed */
/* @media (prefers-reduced-motion: reduce) {
    .audio-bar,
    .enable-audio-button .audio-bar {
        animation: audioBar 0.6s ease-in-out infinite !important;
    }
} */

/* Custom cursor ---------------------------------------------------- */

@media (min-width: 1200px) {
  * {
    cursor: none !important;
  }
  
  /* Exception: Show cursor in Fancybox */
  .fancybox__container *,
  .fancybox__container,
  .fancybox__content *,
  .fancybox__content {
    cursor: auto !important;
  }
  
  /* Ensure clickable elements show pointer cursor */
  .fancybox__container button,
  .fancybox__container [role="button"],
  .fancybox__container .f-button,
  .fancybox__container .fancybox__nav__button {
    cursor: pointer !important;
  }

  .custom-cursor {
    width: 10px;
    height: 10px;
    background-color: #feab13;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.05s ease, background-color 0.2s ease;
  }

  .custom-cursor.hover-link {
    background-color: #e31f67;
  }

  .cursor-ring {
    width: 11px;
    height: 11px;
    /* border: 0.5px solid #feab13; */
    border: 1px solid #feab13;
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, border-color 0.2s ease;
  }

  .cursor-ring.hover-link {
    border-color: #e31f67;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.8);
  }

  .cursor-ring.pressed {
    opacity: 1;
    transform: translate(-50%, -50%) scale(3.2);
  }

  .cursor-ring.released {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.2);
    transition: opacity 0.5s ease;
  }
}

/* End Custom cursor ---------------------------------------------- */

@media (min-width: 1200px) {
  .mat-section h3 {
    font-size: 2rem;
  }
}

/* CSS for the vertical menu on the MAT front page ---------------- */

.vertical-menu {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  pointer-events: auto;
}

.vertical-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.vertical-menu li {
  /* margin: 8px 0; */
  margin: 0;
  position: relative;
}

.vertical-menu a {
  padding: 5px 10px 5px 21px;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: block;
  position: relative;
}

.vertical-menu a:hover {
  color: #e31f67;
}

/* Create the red dot indicator */
.vertical-menu a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.3s ease;
}

/* Style for active link (the red dot appears) */
.vertical-menu a.active::before {
  background-color: #e31f67;
}

.vertical-menu a:hover::before {
  background-color: #e31f67;
}

/* --- CSS for the dot menu on the MAT front page  */
/* --- for smaller screens ----------------------- */

.dots-menu {
  display: none; /* Hidden by default */
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 12px;
  z-index: 2000; /* Ensure on top of sections */
}

.dots-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.dots-menu li {
  margin: 15px 0;
}

.dots-menu a {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.3s ease;
  border: 2px solid #ccc; /* Add dark gray border */
}

.dots-menu a.active, .dots-menu a:hover {
  background-color: #e31f67; /* Same color as your red dot */
  width: 20px;
  height: 20px;
  border: none;
}

body.mobile-nav-active .dots-menu {
  display: none !important;
}

/* Media query to handle menu switching --------------------- */
@media (max-width: 991.98px) {

  .vertical-menu {
    display: none; /* Hide the text menu on small screens */
  }
  
  .dots-menu {
    display: block; /* Show the dots menu on small screens */
  }

  /* The little arrow down in the lower right corner
   * Shift it to the right a bit so it lines up with the dots-menu */
  .scroll-top {
    right: 20px !important;
  }
}

@media (min-width: 992px) {
  .dots-menu {
    display: block;
    opacity: 0;
    /* transition: opacity 1.5s ease; */
    transition: opacity 0.7s ease;
    pointer-events: none;
  }
  
  .vertical-menu {
    /* Add transition for smooth fade */
    /* transition: opacity 1.2s ease; */
    transition: opacity 0.7s ease;
  }
}

.vertical-menu a {
  transition: color 0.3s ease, transform 0.3s ease;
}

.dots-menu a {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Main content sections ------------------------------------- */

section {
  min-height: 20vh;
  /* margin: 60px; */
  margin-right: 0;
  margin: 60px 0 60px 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#about, #courses, #mad-minor, #news-events {
  /* background-color: rgba(255, 255, 255, 0.8); */
  background-color: white;
  /* border-radius: 15px; */
}

#about h2, 
#courses h2,
#mad-minor h2,
#news-events h2 {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  color: #e31f67;
  margin-bottom: 1.3rem;
  font-weight: 500;
}

#about h2::after, 
#courses h2::after,
#mad-minor h2::after, 
#news-events h2::after {
  content: "";
  flex-grow: 1;
  height: 2px;
  background-color: #c8c7c7;
  margin-left: 20px;
}

#about h3, 
#courses h3,
#mad-minor h3,
#news-events h3 {
  color: #e31f67;
  font-size: 1.4rem;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

/* This fades the animation back in when the page is scrolled back to the top. */
.front_page_animation {
  transition: opacity 0.8s ease-in-out;
}

/* ---- Adjust the width of the sections so as not to interfere with the vertical menu -------- */

@media (min-width: 992px) { /* Bootstrap's large breakpoint */
  section {
    background-color: white;
  }
  
  section .container,
  section .container-fluid {
    max-width: 100%;
    padding-right: 0;
  }
}

/* ----- For smaller screens, use full width ------------------------------- */

@media (max-width: 991.98px) {
  section {
    /*
    width: 100%;
    margin-right: 0;
    */
    margin: 30px 0 60px 0;
    margin-top: 0;
    background-color: white;
    padding-right: 3rem;
  }
  
  /* For mobile, we can adjust the vertical menu to potentially overlay or use a different layout */
  .vertical-menu {
    /* Mobile menu positioning, if needed */
    padding: 5px;
    right: 145px; /* Position closer to the edge on mobile */
  }

  .front_page_animation {
    bottom: 40%;
    left: 10%;
    border-bottom: none;
  }

  .mat-section h3 {
    color: #fff;
  }

  /* CSS to fade-out the front page animation on smaller devices - REMOVED to prevent automatic fade-out */
  /* .fade-out {
      opacity: 0 !important;
      transition: opacity 1.5s ease-in-out;
  } */
}

/* ------ SwiperJS ----------------------------------------------------- */

/* Original swiper styles for larger screens */

.swiper-first, .swiper-third {
  /* Let .img-fluid determine size
  width: 600px;
  width: 100%;
  height: 429px;
  */
  overflow: hidden;
  position: relative; /* Ensure the positioning context is established */
}

.swiper-first .swiper-slide, .swiper-third .swiper-slide{
  position: relative;
}

.swiper-first .swiper-caption, .swiper-third .swiper-caption {
  position: absolute;
  bottom: 32px;
  left: 0;
  right: 0;
  color: rgba(255, 255, 255, 0.85);
  padding: 0;
  font-size: 16px;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 1s ease;
}

.swiper-first .swiper-slide-active .swiper-caption, .swiper-third .swiper-slide-active .swiper-caption {
  opacity: 1;
  transform: translateY(0);
}

.swiper-second {
  width: 350px;
  height: 438px;
  overflow: hidden;
  position: relative; /* Ensure the positioning context is established */
}

.swiper-button-next, .swiper-button-prev {
  color: rgba(255, 255, 255, 0.7);
}

/* Media query for mobile devices */
@media (max-width: 767px) {  /* Mobile breakpoint */
  .swiper {
    width: 100%; /* Make swiper take full width of its container */
    height: auto; /* Allow height to adjust proportionally */
    max-width: 350px; /* Limit max width to original dimensions */
  }
  
  .swiper-slide img {
    max-width: 100%; /* Ensure image is never wider than its container */
    height: auto; /* Maintain aspect ratio */
    width: auto; /* Allow natural sizing */
  }
  
  /* Fix for navigation arrows on mobile */
  .swiper-button-next, 
  .swiper-button-prev {
    /* transform: scale(0.8); Make arrows slightly smaller */
    background-color: rgba(0, 0, 0, 0.2); /* Add slight background for visibility */
    border-radius: 50%; /* Make circular */
    width: 30px;
    height: 30px;
  }
  
  .swiper-button-next:after, 
  .swiper-button-prev:after {
    font-size: 18px; /* Smaller arrow icon */
  }
  
  .swiper-button-prev {
    left: 5px; /* Position closer to edge */
  }
  
  .swiper-button-next {
    right: 5px; /* Position closer to edge */
  }
}

/* ------ Fancybox ----------------------------------------------------- */

.fancybox__container {
  --fancybox-bg: rgba(0, 0, 0, 0.6);
}

.fancybox__content {
  /* background: rgba(255, 255, 255, 0.93); */
  background: #fff;
  border-radius: 15px;
}

.fancybox__content h3 {
  margin-bottom: 1.2rem;
}

.fancybox__content img {
  margin-bottom: 1rem;
  border: solid 1px #333;
}

.fancybox__content ul li {
  padding-top: 3px;
  padding-bottom: 3px;
}

/* I have to hide the navmenu so that it does not generate errors in the web condole.
   The code that looks for it is in assets/js/main.js, but I was not able to modify
   the custom code.
*/
#navmenu {
    display: none !important;
}

/* Mobile-specific touch handling for 3D content */
@media (max-width: 767px) {
  /* Ensure splat canvases have proper touch handling on mobile */
  canvas {
    touch-action: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
  }
  
  /* Prevent text selection during touch panning */
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Ensure touch events work properly on mobile */
  .toggle-on-scroll {
    touch-action: manipulation;
  }
  
  /* Improve touch response for navigation buttons */
  .nav-button {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Photo Gallery */

/* Gallery item container - fixed size to prevent growth */
.gallery-item {
    position: relative !important;
    /* Use clip-path instead of overflow to ensure strict containment */
    clip-path: inset(0 0 0 0) !important;
    width: 100% !important;
    height: 225px !important;
    /* Ensure container size is fixed and won't change */
    box-sizing: border-box !important;
    /* Bootstrap-specific flexbox constraints */
    flex: 0 0 100% !important;
    flex-basis: 100% !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* Force container to maintain size */
    min-width: 0 !important;
    max-width: 100% !important;
    /* Prevent any size changes */
    resize: none !important;
    transform: none !important;
    /* Additional constraints to prevent growth */
    min-height: 225px !important;
    max-height: 225px !important;
    /* Force container to stay exactly this size */
    width: 100% !important;
    height: 225px !important;
    /* Prevent any overflow or growth */
    contain: layout size style !important;
    /* Prevent any margin/padding expansion */
    margin: 0 !important;
    padding: 0 !important;
    /* Bootstrap column containment */
    max-width: 100% !important;
    min-width: 0 !important;

}

/* Gallery item link - ensure it doesn't affect sizing */
.gallery-item a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    text-decoration: none !important;
    /* Prevent link from growing */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    overflow: hidden !important;
}

/* No hover effect */

/* Removed duplicate - using consolidated definition above */

/* Gallery item images - consolidated styles */
.gallery-item img {
    width: 100% !important;
    height: 225px !important;
    object-fit: cover !important;
    transition: 0.5s all ease !important;
    display: block !important;
    max-width: 300px !important;
    /* Enable zoom effect */
    position: relative !important;
    transform-origin: center center !important;
}

/* Removed duplicate - using consolidated definition above */

/* Transparent overlay effect on hover */
.gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(64, 64, 64, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
    /* Ensure overlay stays within container bounds */
    box-sizing: border-box;
    /* Force overlay to stay within bounds */
    max-width: 100% !important;
    max-height: 100% !important;
    /* Additional constraints */
    contain: layout size style !important;
    /* Ensure overlay is strictly contained */
    clip-path: inset(0 0 0 0) !important;

}

.gallery-item:hover::before {
    opacity: 1;
}

/* Photo Gallery Navigation Buttons - Fancybox v6.0.25 */
/* Fancybox v6 uses different CSS classes and structure */

/* Style the navigation buttons */
.fancybox__nav__button {
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    color: white !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.3s ease !important;
}

.fancybox__nav__button:hover {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Position navigation arrows inside the image for v6 */
.fancybox__nav__button--prev {
    left: 20px !important;
    right: auto !important;
    position: absolute !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    color: white !important;
    z-index: 1000 !important;
}

.fancybox__nav__button--next {
    right: 20px !important;
    left: auto !important;
    position: absolute !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    color: white !important;
    z-index: 1000 !important;
}

/* Force the navigation container to be positioned relative to the content */
.fancybox__nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    pointer-events: none !important;
    left: 0 !important;
    right: 0 !important;
}

/* Make the buttons clickable and ensure proper positioning */
.fancybox__nav__button {
    pointer-events: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Ensure the content container has relative positioning */
.fancybox__content {
    position: relative !important;
}

/* Removed duplicate - using consolidated definition above */

/* Responsive photo gallery optimization - SIMPLIFIED */
@media (min-width: 768px) and (max-width: 991px) { /* Medium screens */
    .col-md-6 {
        flex: 0 0 48% !important;
        max-width: 48% !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }
    
    .col-md-6 .gallery-item {
        width: 100% !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .gallery-item img {
        max-width: 200px !important;
        width: 100% !important;
        height: 150px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 767px) { /* Small screens */
    .col-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }
    
    .col-12 .gallery-item {
        width: 100% !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    .gallery-item img {
        max-width: 300px !important;
        width: 100% !important;
        height: 225px !important;
        object-fit: cover !important;
    }
}

/* Large screen optimization for 5-column layout */
@media (min-width: 992px) { /* lg breakpoint and above */
    /* Bootstrap column constraints */
    .col-lg-3 {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        padding: 0 5px !important;
        box-sizing: border-box !important;
    }
    
    /* Center thumbnails within their containers */
    .col-lg-3 .gallery-item {
        width: 100% !important;
        flex: 0 0 100% !important;
        flex-basis: 100% !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure images maintain their size and are centered */
    .gallery-item img {
        max-width: 100%;
        height: 225px !important;
        object-fit: cover !important;
        display: block;
    }
    
    /* Minimal spacing between rows */
    .row.g-1 + .row.g-1 {
        margin-top: 5px !important;
    }
}

/* Removed duplicate - using consolidated definition above */

/* Removed duplicate - using consolidated definition above */

/* Removed duplicate - using consolidated definition above */

/* Zoom effect on hover - now safe with Bootstrap containment */
.gallery-item:hover img {
    transform: scale(1.1) !important;
    transition: transform 0.3s ease !important;
}

/* Center gallery rows */
.row.g-1 {
    justify-content: center !important;
    align-items: center !important;
}

/* Video controls are now enabled for FancyBox videos */

/* Ensure videos maintain their natural aspect ratio in FancyBox with reasonable constraints */
.fancybox__content video {
    max-width: 90vw !important;        /* 90% of viewport width */
    max-height: 80vh !important;       /* 80% of viewport height */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;    /* Maintain aspect ratio */
}

/* Ensure FancyBox container can accommodate different video sizes */
.fancybox__slide.has-html5video .fancybox__content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    /* Keep reasonable constraints */
    max-width: 90vw !important;
    max-height: 80vh !important;
}

/* Override FancyBox's default video container sizing */
.fancybox__slide.has-html5video .fancybox__content .f-html5video {
    max-width: 90vw !important;
    max-height: 80vh !important;
    width: auto !important;
    height: auto !important;
}



/* Try to override FancyBox's CSS custom properties */
.fancybox__slide.has-html5video .fancybox__content {
    --f-video-width: auto !important;
    --f-video-height: auto !important;
    --f-video-aspect-ratio: auto !important;
}

/* Force video elements to ignore any inherited sizing */
.fancybox__slide.has-html5video video {
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 80vh !important;
    min-width: auto !important;
    min-height: auto !important;
    object-fit: contain !important;
    /* Override any inline styles */
    width: auto !important;
    height: auto !important;
}

/* Override any Bootstrap interference with videos */
.fancybox__slide.has-html5video video,
.fancybox__slide.has-html5video .f-html5video,
.fancybox__slide.has-html5video .f-html {
    /* Force override any Bootstrap utility classes */
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 80vh !important;
    min-width: auto !important;
    min-height: auto !important;
    /* Override any Bootstrap responsive classes */
    flex: none !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    flex-basis: auto !important;
}

/* Target Bootstrap's potential interference */
.fancybox__slide.has-html5video .fancybox__content {
    /* Override any Bootstrap grid constraints */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Force container to accommodate video size */
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    max-width: none !important;
    max-height: none !important;
}

/* Fix mouse pointer visibility in Fancybox */
.fancybox__container {
    cursor: default !important;
}

.fancybox__content {
    cursor: default !important;
}

.fancybox__content img {
    cursor: default !important;
}

/* Ensure navigation buttons show proper cursor */
.fancybox__nav__button {
    cursor: pointer !important;
}

/* Ensure toolbar buttons show proper cursor */
.fancybox__toolbar button {
    cursor: pointer !important;
}

/* Ensure thumbnails show proper cursor */
.fancybox__thumbs button {
    cursor: pointer !important;
}

/* Additional cursor fixes for all clickable Fancybox elements */
.fancybox__container button,
.fancybox__container [role="button"],
.fancybox__container .f-button,
.fancybox__container .fancybox__nav__button,
.fancybox__container .fancybox__toolbar button,
.fancybox__container .fancybox__thumbs button {
    cursor: pointer !important;
}

/* Ensure navigation arrows specifically show pointer cursor */
.fancybox__nav__button--prev,
.fancybox__nav__button--next {
    cursor: pointer !important;
}