/* === JetFix: Facilities cards & thumbnails bigger, keep responsive === */

/* Perbesar facility-card container */
.facility-marquee .facility-card,
.facility-static-grid .facility-card,
.section-facilities .facility-card,
#facilities .facility-card,
.facilities .facility-card {
  width: 420px !important;          /* dari 320px ke 420px */
  min-height: 280px !important;     /* tinggi minimum lebih besar */
}

/* Target fleksibel: pakai salah satu container yang ada di project */
.section-facilities .facility-card img,
#facilities .facility-card img,
.facilities .facility-card img,
.facility-marquee .facility-card .facility-thumb,
.facility-static-grid .facility-card .facility-thumb {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;           /* lebih tinggi → gambar terlihat lebih besar */
  object-fit: cover !important;     /* tetap rapi, crop elegan */
  max-height: none !important;      /* hilangkan batas tinggi lama */
}

/* Tablet: perbesar card dan pertahankan proporsi */
@media (max-width: 992px) {
  .facility-marquee .facility-card,
  .facility-static-grid .facility-card,
  .section-facilities .facility-card,
  #facilities .facility-card,
  .facilities .facility-card {
    width: 360px !important;        /* dari 280px ke 360px */
    min-height: 240px !important;
  }

  .section-facilities .facility-card img,
  #facilities .facility-card img,
  .facilities .facility-card img,
  .facility-marquee .facility-card .facility-thumb,
  .facility-static-grid .facility-card .facility-thumb {
    aspect-ratio: 4 / 3;
  }
}

/* Override CSS Variables untuk Mobile - FORCE OVERRIDE */
@media (max-width: 576px) {
  :root {
    --card-width-mobile: 192px !important;
    --card-gap-mobile: 8px !important;
    --card-width-desktop: 192px !important;
    --card-width-tablet: 192px !important;
  }
  
  /* FORCE OVERRIDE semua selector facility card */
  .facility-marquee .facility-card,
  .facility-static-grid .facility-card,
  .section-facilities .facility-card,
  #facilities .facility-card,
  .facilities .facility-card,
  .facility-card,
  article.facility-card {
    width: 192px !important;        /* diperkecil 20% dari 240px ke 192px */
    height: 192px !important;       /* sama dengan width untuk 1:1 ratio */
    min-width: 192px !important;
    max-width: 192px !important;
    min-height: 192px !important;
    max-height: 192px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    flex: 0 0 192px !important;
  }
  
  /* Grid lebih rapat dengan gap yang lebih kecil */
  .marquee-track {
    gap: 8px !important;
  }
  
  .facility-marquee {
    height: 220px !important;  /* sesuaikan tinggi container */
  }

  .section-facilities .facility-card img,
  #facilities .facility-card img,
  .facilities .facility-card img,
  .facility-marquee .facility-card .facility-thumb,
  .facility-static-grid .facility-card .facility-thumb {
    aspect-ratio: 1 / 1 !important;  /* tetap 1:1 aspect ratio */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 12px !important;
  }
}

/* Speed up facilities marquee animation - dari 60s ke 20s (lebih cepat) */
.facility-marquee .marquee-track {
  animation-duration: 20s !important;
}

/* Pastikan hanya marquee fasilitas yang dipercepat, bukan hero slider */
.marquee-track:not(.hero-slider .marquee-track):not(.hero-track) {
  animation-duration: 20s !important;
}
