/* =========================================================
   PROFIL DIREKSI RSKO JAKARTA
   Hero Hijau + Grid Card Direksi
   ========================================================= */


/* =========================================================
   1. HERO / BANNER PROFIL DIREKSI
   ========================================================= */

.rsko-page-hero {
  position: relative !important;

  width: 100% !important;
  max-width: none !important;
  min-height: 260px !important;

  margin: 0 0 48px !important;
  padding: 48px 0 !important;

  display: flex !important;
  align-items: center !important;

  overflow: hidden !important;

  background:
    radial-gradient(
      circle at 78% 45%,
      rgba(255, 255, 255, 0.22) 0%,
      rgba(255, 255, 255, 0.10) 25%,
      rgba(255, 255, 255, 0) 52%
    ),
    linear-gradient(
      110deg,
      #07998b 0%,
      #12aa96 48%,
      #7bd2ae 100%
    ) !important;
}


/* Overlay dekoratif hero */
.rsko-page-hero__overlay {
  position: absolute !important;
  inset: 0 !important;

  z-index: 1 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      rgba(0, 102, 91, 0.13) 0%,
      rgba(255, 255, 255, 0) 58%,
      rgba(255, 255, 255, 0.08) 100%
    ) !important;
}


/* Container isi hero */
.rsko-page-hero .container {
  position: relative !important;
  z-index: 2 !important;

  width: min(1440px, calc(100% - 64px)) !important;
  max-width: 1440px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/* Area judul hero */
.rsko-page-hero__content {
  position: relative !important;
  z-index: 3 !important;

  width: 100% !important;

  text-align: left !important;
}


/* Judul hero */
.rsko-page-hero__content h1,
.rsko-page-hero h1 {
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: clamp(42px, 4.5vw, 68px) !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;

  text-align: left !important;
  text-transform: none !important;

  text-shadow: none !important;
}


/* =========================================================
   2. AREA PROFIL DIREKSI
   ========================================================= */

.profil-direksi {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 0 78px !important;

  background: #ffffff !important;
}


/* Container area card */
.profil-direksi > .container {
  width: min(1400px, calc(100% - 64px)) !important;
  max-width: 1400px !important;

  margin: 0 auto !important;
  padding: 0 !important;
}


/* =========================================================
   3. WRAPPER DRUPAL VIEWS
   Class View: direksi
   ========================================================= */

.direksi {
  width: min(1400px, calc(100% - 64px)) !important;
  max-width: 1400px !important;

  margin: 0 auto 78px !important;
  padding: 0 !important;
}


/* Jika view berada di dalam container profil-direksi */
.profil-direksi .direksi {
  width: 100% !important;
  max-width: 1400px !important;

  margin: 0 auto !important;
}


/* =========================================================
   4. GRID CARD
   ========================================================= */

.direksi .view-content,
.direksi-grid {
  width: 100% !important;

  display: grid !important;

  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 30px !important;

  align-items: start !important;
}


/* =========================================================
   5. ROW DRUPAL VIEWS
   ========================================================= */

.direksi .views-row,
.direksi-grid .views-row {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  display: block !important;

  float: none !important;
  clear: none !important;
}


/* =========================================================
   6. CARD DIREKSI
   ========================================================= */

.direksi-card {
  width: 100% !important;
  max-width: 410px !important;
  min-width: 0 !important;

  margin: 0 auto !important;
  padding: 11px !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;

  background: #ffffff !important;

  border: 1px solid #e3ebf2 !important;
  border-radius: 22px !important;

  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.10),
    0 3px 8px rgba(15, 23, 42, 0.04) !important;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}


/* Efek hover card */
.direksi-card:hover {
  transform: translateY(-6px) !important;

  box-shadow:
    0 20px 42px rgba(15, 23, 42, 0.15),
    0 5px 12px rgba(15, 23, 42, 0.06) !important;
}


/* =========================================================
   7. FOTO DIREKSI
   ========================================================= */

.direksi-card__photo {
  position: relative !important;

  width: 100% !important;
  height: 390px !important;
  min-height: 390px !important;

  overflow: hidden !important;

  background: #f3f4f6 !important;

  border-radius: 17px 17px 0 0 !important;
}


/* Wrapper picture */
.direksi-card__photo picture {
  width: 100% !important;
  height: 100% !important;

  display: block !important;
}


/* Wrapper link gambar */
.direksi-card__photo a {
  width: 100% !important;
  height: 100% !important;

  display: block !important;
}


/* Gambar foto */
.direksi-card__photo img {
  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;
  object-position: top center !important;

  transition: transform 0.45s ease !important;
}


/* Zoom ringan saat hover */
.direksi-card:hover .direksi-card__photo img {
  transform: scale(1.025) !important;
}


/* =========================================================
   8. BODY CARD
   ========================================================= */

.direksi-card__body {
  width: 100% !important;
  min-height: 108px !important;

  padding: 17px 15px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  background: #0f9f8f !important;
  color: #ffffff !important;

  text-align: center !important;

  border-radius: 0 0 17px 17px !important;
}


/* Nama direksi */
.direksi-card__body h3 {
  margin: 0 0 6px !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: 17px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;

  text-align: center !important;
}


/* Jabatan direksi */
.direksi-card__body p {
  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255, 255, 255, 0.96) !important;

  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 500 !important;

  text-align: center !important;
}


/* =========================================================
   9. EMPTY VIEW
   ========================================================= */

.direksi .view-empty {
  width: 100% !important;

  padding: 40px 24px !important;

  color: #64748b !important;
  font-size: 16px !important;
  line-height: 1.6 !important;

  text-align: center !important;

  background: #f8fafc !important;

  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
}


/* =========================================================
   10. TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .rsko-page-hero {
    min-height: 225px !important;

    margin-bottom: 42px !important;
    padding: 42px 0 !important;
  }

  .rsko-page-hero .container {
    width: calc(100% - 44px) !important;
  }

  .rsko-page-hero__content h1,
  .rsko-page-hero h1 {
    font-size: clamp(38px, 7vw, 54px) !important;
  }

  .profil-direksi > .container,
  .direksi {
    width: calc(100% - 44px) !important;
  }

  .direksi .view-content,
  .direksi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 26px !important;
  }

  .direksi-card {
    max-width: 430px !important;
  }

  .direksi-card__photo {
    height: 430px !important;
    min-height: 430px !important;
  }
}


/* =========================================================
   11. MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .rsko-page-hero {
    min-height: 180px !important;

    margin-bottom: 32px !important;
    padding: 34px 0 !important;
  }

  .rsko-page-hero .container {
    width: calc(100% - 30px) !important;
  }

  .rsko-page-hero__content h1,
  .rsko-page-hero h1 {
    font-size: clamp(31px, 10vw, 40px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
  }

  .profil-direksi {
    padding-bottom: 55px !important;
  }

  .profil-direksi > .container,
  .direksi {
    width: calc(100% - 28px) !important;
  }

  .profil-direksi .direksi {
    width: 100% !important;
  }

  .direksi .view-content,
  .direksi-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .direksi-card {
    width: 100% !important;
    max-width: 390px !important;

    padding: 10px !important;

    border-radius: 20px !important;
  }

  .direksi-card__photo {
    height: 410px !important;
    min-height: 410px !important;

    border-radius: 16px 16px 0 0 !important;
  }

  .direksi-card__body {
    min-height: 104px !important;

    padding: 16px 14px !important;

    border-radius: 0 0 16px 16px !important;
  }

  .direksi-card__body h3 {
    font-size: 16px !important;
  }

  .direksi-card__body p {
    font-size: 13px !important;
  }
}


/* =========================================================
   12. MOBILE KECIL
   ========================================================= */

@media (max-width: 400px) {

  .rsko-page-hero {
    min-height: 165px !important;
  }

  .rsko-page-hero__content h1,
  .rsko-page-hero h1 {
    font-size: 29px !important;
  }

  .direksi-card__photo {
    height: 380px !important;
    min-height: 380px !important;
  }
}