/**
 * @file
 * Property Detail Page Styles
 *
 * Splide gallery specific overrides. Everything else uses Tailwind utility classes.
 */

/* ========== Gallery Overrides ========== */
.property-detail__main-slider .splide__slide img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .property-detail__main-slider .splide__slide img {
    height: 300px;
  }
}

.property-detail__thumb-slider .splide__slide {
  opacity: 0.5;
  transition: opacity 0.3s ease;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  overflow: hidden;
}

.property-detail__thumb-slider .splide__slide.is-active {
  opacity: 1;
  border-color: var(--color-main-green, #2a7d5f);
}

.property-detail__thumb-slider .splide__slide img {
  width: 100%;
  height: 80px;
  object-fit: cover;
}

.property-detail__single-image img {
  width: 100%;
  height: 500px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .property-detail__single-image img {
    height: 300px;
  }
}

/* Splide arrow overrides for property detail */
.property-detail__main-slider .splide__arrow {
  background-color: rgba(255, 255, 255, 0.9);
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.property-detail__main-slider:hover .splide__arrow {
  opacity: 1;
}

.property-detail__main-slider .splide__arrow svg {
  fill: #111827;
  width: 1rem;
  height: 1rem;
}