/* === SECTION FASILITAS === */
.facility-section {
  text-align: center;
}
.facility-title {
  color: var(--primary-color);
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 2rem;
}

/* === SLIDER WRAPPER === */
.facility-slider {
  position: relative;
  display: flex;
  align-items: center;
}
.facility-slider {
  display: flex;
  align-items: center;
  justify-content: center; /* new! center slider in section */
  gap: 0; /* new! no gap between arrow and slides */
  margin: 2rem 0;
}
/* === SLIDES CONTAINER === */
.slides {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0 2rem;
}
.slides::-webkit-scrollbar {
  display: none;
}

/* === SINGLE SLIDE === */
.slide {
  position: relative;
  flex: 0 0 32%;
  width: 100%;
  background: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
}

/* dasar gambar */
.slide img {
  width: 100%;
  height: auto;
  display: block;

  height: 200px;
  object-fit: cover;      
  object-position: center;

}

/* overlay gelap */
.slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.3s ease;
}
.slide:hover::before {
  background: rgba(0, 0, 0, 0.5);
}

/* teks nama alat */
.slide::after {
  content: attr(data-title);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.slide:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* === NAVIGATION BUTTONS === */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--third-color);
  border: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  font-size: 1.5rem;
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;

  transition: opacity 0.3s ease;
}
.slider-arrow:hover {
  background: var(--primary-color);
}
.slider-arrow.prev {
  left: 1.5rem;
}
.slider-arrow.next {
  right: .5rem;
}

/* === RESPONSIVE === */
@media (max-width: 992px) {
  .slide {
    flex: 0 0 45%;
  }
}
@media (max-width: 576px) {
  .slide {
    flex: 0 0 80%;
  }
}


/* ── HIDE PARTIAL SLIDES AT EDGES ── */
.facility-slider {
  /* Mask overflow sehingga hanya 3 slide utuh yang terlihat */
  overflow: hidden;
}

.slides {
  /* Hapus padding kiri/kanan supaya slide mulai tepat di tepi container */
  padding: 0;
  margin: 0;
  
  /* Biarkan scroll di dalam mask parent */
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
}

/* Pastikan gap masih dipakai */
.slides {
  display: flex;
  gap: 1.5rem;
}

/* ── PARENT MASK: HIDE PARTIAL SLIDES ── */
.facility-slider {
  overflow: hidden; /* sembunyikan kelebihan di kiri/kanan */
}

/* ── SLIDES CONTAINER ── */
.slides {
  display: flex;
  gap: 1.5rem;
  padding: 0;        /* hilangkan padding yang memunculkan peeking */
  margin: 0;
  overflow-x: auto;
  scroll-behavior: smooth;
}

/* ── DEFAULT: 3 SLIDE DI DESKTOP ── */
.slides .slide {
  flex: 0 0 calc((100% / 3) - (1.5rem * 2 / 3));
}

/* ── TABLET (≤992px): 2 SLIDE ── */
@media (max-width: 992px) {
  .slides .slide {
    flex: 0 0 calc((100% / 2) - (1.5rem * 1 / 2));
  }
}

/* ── SMALL TABLET / HP LANDSCAPE (≤768px): 2 SLIDE, lebih sempit ── */
@media (max-width: 768px) {
  .slides .slide {
    flex: 0 0 calc((100% / 2) - (1.5rem * 1 / 2));
  }
}

/* ── HP (≤576px): 1 SLIDE ── */
@media (max-width: 576px) {
  .slides .slide {
    flex: 0 0 100%;
  }
}


/* styling ikon di tombol slider */
.slider-arrow i {
  font-size: 0.8rem;        /* ubah sesuai kebutuhan */
  color: var(--text-color); /* sesuaikan warna */
  line-height: 1;           /* untuk vertical align */
}
.slider-arrow:hover {
  opacity: 1;                /* full opacity on hover */
}

.slider-arrow:hover i {
  color: var(--background-color);
}

/* === Perkecil Ukuran Section Fasilitas === */
.facility-section {
    padding-top: 4rem ;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* === Sesuaikan Lebar & Gap Slide === */
.slides {
  gap: 1rem;      /* rapatkan jarak antar slide */
  padding: 0;     /* pastikan tanpa padding samping */
}

.slides .slide {
  /* desktop: 3 kolom lebih sempit */
  flex: 0 0 calc((100% / 3) - (1rem * 2 / 3));
}

/* tablet: 2 kolom */
@media (max-width: 992px) {
  .slides .slide {
    flex: 0 0 calc((100% / 2) - (1rem * 1 / 2));
  }
}

/* hp: 1 kolom penuh */
@media (max-width: 576px) {
  .slides .slide {
    flex: 0 0 100%;
  }
}

/* === WRAPPER === */
.facility-slider {
  position: relative;
  overflow: visible;  /* biarkan tombol panah di luar tidak ter-clip */
}

/* === SLIDES CONTAINER === */
.slides {
  display: flex;
  gap: 1rem;
  overflow-x: auto;    /* scroll hanya di sini */
  scroll-behavior: smooth;
  padding: 0;          
  margin: 0;
}

/* === NAV BUTTON DI LUAR DENGAN JARAK 2rem === */
.slider-arrow.prev {
  position: absolute;
  top: 50%;
  left: -1rem;                /* 2rem keluar kiri */
  transform: translateY(-50%);
  z-index: 2;
}

.slider-arrow.next {
  position: absolute;
  top: 50%;
  right: -1rem;               /* 2rem keluar kanan */
  transform: translateY(-50%);
  z-index: 2;
}


/* Page header & breadcrumb */
.page-header {
  background: var(--background-muted);
  margin-top: -30px;
  padding-bottom: 1rem;
  padding-left: 2rem;
  padding-right: 2rem;
}

.page-header .inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1rem;
  background: #7fc8c52c;
}

.page-header .inner h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text-color);
}

.page-header .breadcrumb {
  font-size: 0.875rem;
  display: flex;
  align-items: center;
}

.page-header .breadcrumb a {
  color: var(--link-color);
  text-decoration: none;
}

.page-header .breadcrumb a:hover {
  color: var(--hover-color);
}

.page-header .breadcrumb .separator {
  margin: 0 0.5rem;
  color: var(--text-muted);
}

/* Responsive: kecilkan font di mobile */
@media (max-width: 640px) {
  .page-header .inner {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
  }
}

/* Highlight kata pertama (News) di judul page-header */
.page-header .inner h1 .text-primary {
  color: var(--primary-color);
}

.page-header .breadcrumb a,
.page-header .breadcrumb .separator {
  color: var(--primary-color);
}


.facility-detail-img-wrap {
  position: relative;
  margin: 2.5rem auto 1.5rem auto;
  display: flex; justify-content: center; align-items: center;
}

.facility-detail-img-wrap img {
  max-width: 1000px;
  width: 100%;
  max-height: 430px;
  object-fit: contain;
  box-shadow: 0 2px 20px #0002;
  background: #fff;
  display: block;
}

.img-title-overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  padding-bottom: 0;
  z-index: 2;
  background: linear-gradient(
    0deg,
    rgba(30,30,30,0.77) 0%,
    rgba(30,30,30,0.43) 50%,
    rgba(30,30,30,0.0) 100%
  );
  padding: 2.3rem 2rem 1.5rem 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}



.img-title-overlay h1 {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
  text-shadow: 0 3px 12px rgba(0,0,0,0.33);
  line-height: 1.2;
}

@media (max-width:700px){
  .img-title-overlay { padding: 1.3rem 0.7rem 1rem 0.7rem;}
  .img-title-overlay h1 { font-size: 1.15rem; }
}