/* —————————————————————————— */
/* Overlay Cards (hero-content) */
/* —————————————————————————— */

/* 0) Reset posisi agar terpisah dari carousel */
.hero-content {
  position: relative;       /* jangan absolute lagi */
  margin: 0 auto;           /* center secara horizontal */
  padding: 0 1.5rem;
  width: 100%;
  max-width: 1200px;        /* atau sesuai container Anda */
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;         /* ruang awal, desktop akan overlap */
  z-index: 20;
}

/* —————————————————————————————— */
/* Desktop besar (≥1025px): overlap */
/* —————————————————————————————— */
@media (min-width: 1025px) {
  .hero-content {
    margin-top: -5rem;      /* sesuaikan overlap */
  }
}

/* ———————————————————————————————— */
/* Layar sedang (769px – 1024px): tetap 4 kolom */
/* ———————————————————————————————— */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-content {
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    margin-top: -3rem;     /* overlap sedikit lebih kecil */
  }
}

/* ———————————————————————————————— */
/* Tablet & bawah (≤768px): 2 kolom, bawah carousel */
/* ———————————————————————————————— */
@media (max-width: 768px) {
  .hero-content {
    position: relative;
    margin-top: 2rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ———————————————————————————————— */
/* HP kecil (≤480px): 1 kolom */
/* ———————————————————————————————— */
@media (max-width: 480px) {
  .hero-content {
    grid-template-columns: 1fr;
  }
}

/* ———————————————————————————————— */
/* Card styles (default) */
/* ———————————————————————————————— */
.card-search {
  background: var(--background-color);
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 1.5rem;
  text-align: center;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

/* Icon & teks */
.card-search .icon {
  font-size: 2rem;
  margin-bottom: .75rem;
  transition: color 0.3s ease;
}
.card-search h3,
.card-search p {
  transition: color 0.3s ease;
}

/* Background khusus tiap kartu */
.card-search.dokter    { background: linear-gradient(135deg, var(--primary-color), var(--hover-color)); color: #fff; }
.card-search.ambulans  { background: var(--primary-color);   color: #fff; }
.card-search.lokasi    { background: var(--hover-color);     color: #fff; }
.card-search.kamar     { background: var(--secondary-color); color: #fff; }

/* Hover: lift effect */
.card-search:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

/* ———————————————————————————————— */
/* Hover state: putih + teks/ikon primary */
/* ———————————————————————————————— */
/* dari */
.card-search:hover {
  background-color: var(--background-color) !important;
  color: var(--primary-color) !important;
}

/* menjadi */
.card-search:hover {
  background: var(--background-color) !important;   /* override semua background, termasuk gradient */
  color: var(--primary-color) !important;
}

/* Judul & paragraf ikut berubah */
.card-search:hover h3,
.card-search:hover p {
  color: var(--primary-color) !important;
}


.menu-fade {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.7s cubic-bezier(.42,2,.65,.97), transform 2.7s cubic-bezier(.42,2,.65,.97);
}
.menu-fade.show {
  opacity: 1;
  transform: scale(1);
}
.menu-fade:nth-child(1) { transition-delay: 0.25s;}
.menu-fade:nth-child(2) { transition-delay: 0.43s;}
.menu-fade:nth-child(3) { transition-delay: 0.61s;}
.menu-fade:nth-child(4) { transition-delay: 0.79s;}


/* sembunyikan default */
.widget-menu {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* tampilkan saat class .visible ditambahkan */
.widget-menu.visible {
  opacity: 1;
  pointer-events: auto;
}