/* Halaman Mitra memakai navbar dan footer dari Dashboard Umum.css. */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body > main {
  flex: 1;
}

/* Foto dan lapisan warna di bagian pembuka dibuat dengan CSS. */
.partners-hero {
  min-height: 200px;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #e3f1dd 0%, #e3f1dd 42%, rgba(227, 241, 221, .85) 50%, rgba(227, 241, 221, 0) 72%), url('greenhouse-luar.png') right center / cover no-repeat;
}

.partners-hero-content {
  width: 100%;
  max-width: 965px;
  margin: 0 auto;
}

.partners-hero h1 {
  font-size: 46px;
  letter-spacing: -1.2px;
}

.partners-hero p {
  margin: 10px 0 0;
  color: #505a54;
  font-size: 18px;
}

/* Kartu-kartu kawasan ditampilkan dalam empat kolom di layar besar. */
.partners-content {
  width: min(100% - 68px, 1010px);
  margin: 0 auto;
  padding: 25px 0 24px;
}

.section-heading {
  margin: 0 12px 24px;
}

.section-heading h2 {
  font-size: 34px;
}

.section-heading p {
  margin: 3px 0 0;
  color: #555c5b;
  font-size: 16px;
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.partner-card {
  overflow: hidden;
  border: 1px solid #d4d8d4;
  border-radius: 11px;
  background: white;
}

.partner-card img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
}

.partner-card:nth-child(3) img {
  object-position: 70% center;
}

.partner-card:nth-child(4) img {
  object-position: 80% center;
}

.partner-details {
  min-height: 108px;
  padding: 10px 13px;
}

.partner-details h3 {
  margin: 0;
  font-size: 20px;
}

.location {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 5px 0 10px;
  color: #555c58;
  font-size: 14px;
}

.location svg {
  width: 16px;
  height: 16px;
  fill: #3b843e;
}

.partner-action, .partner-badge {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
}

.partner-action {
  background: #216c25;
  color: white;
  font-weight: 700;
}

.partner-badge {
  width: 84%;
  margin: 20px auto 0;
  background: #deedd4;
  color: #536154;
}

/* Catatan membantu pengguna memahami pilihan kawasan. */
.partners-note {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 9px 22px;
  border-radius: 10px;
  background: #e6f3e0;
}

.note-leaf {
  padding-right: 18px;
  border-right: 1px solid #8db879;
  color: #438f3b;
  font-size: 27px;
  line-height: 1;
}

.partners-note p {
  margin: 0;
  font-size: 15px;
}

/* Susun ulang kartu agar nyaman digunakan di tablet dan ponsel. */
@media (max-width: 1000px) {
  .partners-hero-content {
    margin: 0 5%;
  }
}

@media (max-width: 700px) {
  .partners-hero {
    min-height: 190px;
    background-position: center, 60% center;
  }

  .partners-hero h1 {
    font-size: 34px;
  }

  .partners-hero p {
    max-width: 300px;
    font-size: 16px;
  }

  .partners-content {
    width: 90%;
  }

  .partners-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .partners-grid {
    grid-template-columns: 1fr;
  }

  .partners-hero h1 {
    font-size: 30px;
  }

  .section-heading h2 {
    font-size: 28px;
  }
}