/* =========================================================
   PHILOSOPHY SECTION
========================================================= */

.philosophy-section {
  padding: 80px 0;
  background-image: url("../images/patterns/jungle-texture.png");
  background-size: cover;
  background-position: center;
}

/* CARD */
.philosophy-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 28px;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;

  padding: 70px;
  overflow: hidden;
}

/* TEXT */
.philosophy-text h2 {
  font-size: 2.3rem;
  margin-bottom: 20px;
}

.philosophy-lead {
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.55;
  color: var(--green-dark);
  margin-bottom: 24px;
}

.philosophy-text p {
  max-width: 520px;
  margin-bottom: 16px;
  color: #333;
}

.philosophy-text h4 {
  font-family: "Playfair Display", serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.55;
  color: var(--green-dark);
  margin-top: 10px;
}

/* IMAGE */
.philosophy-image {
  width: 420px;
  height: 420px;
  justify-self: center;

  border-radius: 50%;
  overflow: hidden;

  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.25),
    inset 0 0 0 8px rgba(255, 255, 255, 0.35);
}

.philosophy-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================================
   SOUVENIR SLIDER
========================================================= */

.souvenir-slider {
  margin-top: 28px;

  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding-bottom: 10px;

  scrollbar-width: none;
}
.souvenir-slider::-webkit-scrollbar {
  display: none;
}

.souvenir-item {
  flex: 0 0 auto;
  width: 96px;
}

.souvenir-item img {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;

  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

/* =========================================================
   MOBILE FIX (HP)
========================================================= */

@media (max-width: 900px) {
  .philosophy-section {
    padding: 60px 0;
  }

  .philosophy-card {
    grid-template-columns: 1fr; /* ⬅️ jadi 1 kolom */
    gap: 40px;

    padding: 32px 22px; /* ⬅️ FIX: jangan terlalu besar */
  }

  .philosophy-text h2 {
    font-size: 1.9rem;
  }

  .philosophy-lead {
    font-size: 1.1rem;
  }

  .philosophy-text p,
  .philosophy-text h4 {
    max-width: 100%; /* ⬅️ FIX teks keluar */
  }

  /* IMAGE PINDAH KE BAWAH */
  .philosophy-image {
    width: 260px;
    height: 260px;
    margin: 0 auto;
  }

  /* SOUVENIR FIX */
  .souvenir-slider {
    justify-content: center;
    gap: 14px;
  }

  .souvenir-item {
    width: 82px;
  }

  .souvenir-item img {
    width: 82px;
    height: 82px;
  }
}