/* Latest Properties Carousel - Extends Base System */

/* Base styles are loaded via WordPress enqueue system - this file contains overrides only */

/* ==========================================================================
   Scrollbar Hide Utility (for mobile tab scrolling)
   ========================================================================== */

.scrollbar-hide {
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;  /* Safari and Chrome */
}

/* ==========================================================================
   Mobile-First Tab Styling
   ========================================================================== */

/* Enhanced mobile tab container */
@media (max-width: 639px) {
  .scrollbar-hide {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  
  /* Add spacing between tabs on mobile */
  .scrollbar-hide [role="tab"] {
    scroll-snap-align: start;
    margin-right: 0.25rem;
  }
  
  /* Remove margin from last tab */
  .scrollbar-hide [role="tab"]:last-child {
    margin-right: 0;
  }
}

/* ==========================================================================
   Latest Properties Specific Overrides
   ========================================================================== */

/* Latest Properties: Show 4 slides per view on larger screens */
@media (min-width: 640px) {
  .latest-properties-carousel .embla__slide {
    flex: 0 0 calc(50% - 0.375rem); /* 50% minus half of 0.75rem gap */
    min-width: 0;
  }
}

@media (min-width: 1024px) {
  .latest-properties-carousel .embla__slide {
    flex: 0 0 calc(25% - 0.75rem); /* 25% minus 3/4 of 1rem gap (4 slides = 3 gaps) */
    min-width: 0;
  }
}

@media (min-width: 1280px) {
  .latest-properties-carousel .embla__slide {
    flex: 0 0 calc(25% - 0.75rem); /* 25% minus 3/4 of 1rem gap (4 slides = 3 gaps) */
    min-width: 0;
  }
}

/* Latest Properties Specific Button Styling */
.latest-properties-carousel .carousel-button:hover {
  border-color: theme('colors.primary.600');
  background: theme('colors.gray.50');
}

/* Latest Properties Responsive Overrides */
@media (max-width: 639px) {
  .latest-properties-carousel .carousel-button {
    width: 2rem;
    height: 2rem;
  }
}