@charset "utf-8";

/* Jungle Safari - page specific styles */

.jungle-page,
.jungle-page * {
  box-sizing: border-box;
}

.jungle-page {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  padding: 20px 22px 38px;
  color: #333;
  font-size: 16px;
  line-height: 1.8;
}

/* Intro */
.jungle-intro {
  margin: 0 0 22px;
  padding: 30px 30px 26px;
  border: 1px solid #d9e3d4;
  border-top: 6px solid #386a34;
  border-radius: 11px;
  background: linear-gradient(180deg, #fff 0%, #f4f8f1 100%);
  box-shadow: 0 7px 20px rgba(45, 60, 40, .09);
}

.jungle-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e9f3e4;
  color: #3b6b35;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.jungle-intro h1 {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #d8e3d4;
  color: #274f25;
  font-size: clamp(1.75rem, 4vw, 2.4rem);
  line-height: 1.32;
}

.jungle-lead {
  margin: 15px 0 12px;
  color: #bd6220;
  font-size: 1.12rem;
  font-weight: 700;
}

/* Four key highlights */
.jungle-highlights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}

.jungle-highlights > div {
  min-height: 112px;
  padding: 15px 13px;
  border-radius: 9px;
  background: #426e3b;
  color: #fff;
  text-align: center;
  box-shadow: 0 5px 14px rgba(39, 70, 34, .13);
}

.jungle-highlights strong,
.jungle-highlights span {
  display: block;
}

.jungle-highlights strong {
  margin-bottom: 5px;
  font-size: 1.04rem;
}

.jungle-highlights span {
  color: #f1f7ed;
  font-size: .9rem;
  line-height: 1.55;
}

.jungle-main-photo {
  margin: 0 0 25px;
  overflow: hidden;
  border: 6px solid #fff;
  border-radius: 11px;
  box-shadow: 0 8px 23px rgba(0, 0, 0, .15);
}

.jungle-main-photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Content cards */
.jungle-story,
.jungle-card,
.jungle-opm-section {
  margin: 24px 0;
  padding: 22px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(43, 56, 38, .08);
}

.jungle-story h2,
.jungle-card h2,
.jungle-opm-section > h2 {
  margin: 0 0 16px;
  padding: 0 0 10px 12px;
  border-bottom: 1px solid #dce4d7;
  border-left: 5px solid #5b874d;
  color: #315b2d;
  font-size: 1.3rem;
}

.jungle-story-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}

.jungle-story article {
  padding: 17px;
  border: 1px solid #e0e6dc;
  border-radius: 8px;
  background: #f8faf6;
}

.jungle-story h3 {
  margin: 0 0 8px;
  color: #466f3e;
  font-size: 1.05rem;
}

.jungle-story p {
  margin: 0;
}

/* Existing Project Seven OPM */
.jungle-opm-section {
  border-top: 5px solid #df7b25;
}

.jungle-opm-section .p7OPM {
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid #d8dfd3;
  border-radius: 9px;
  box-shadow: 0 4px 13px rgba(43, 56, 38, .07);
}

.jungle-opm-section .opm-panel-content {
  overflow-x: auto;
  padding: 14px;
}

.jungle-opm-section table {
  max-width: 100%;
}

.jungle-opm-section table img {
  max-width: 100%;
  height: auto;
}

/* Route */
.jungle-schedule {
  background: #f5f9f2;
}

.jungle-time {
  margin: 0 0 17px;
  padding: 12px 15px;
  border-radius: 7px;
  background: #4b7542;
  color: #fff;
}

.jungle-route {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.jungle-route span {
  position: relative;
  padding: 12px 11px 12px 29px;
  border: 1px solid #dce5d7;
  border-radius: 7px;
  background: #fff;
  line-height: 1.5;
}

.jungle-route span::before {
  content: "●";
  position: absolute;
  left: 11px;
  color: #df7825;
}

.jungle-included {
  border-top: 4px solid #df7b25;
  background: #fffdf8;
}

.jungle-card ul {
  margin: 0;
  padding-left: 1.45em;
}

.jungle-card li {
  margin: 6px 0;
}

.jungle-card li::marker {
  color: #568047;
}

.jungle-caution {
  border-left: 5px solid #d5a044;
  background: #fffaf0;
}

.jungle-related {
  background: #f2f7ee;
}

.jungle-note {
  margin: 13px 0 0;
  color: #666;
  font-size: .92rem;
}

/* CTA */
.jungle-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
  padding: 22px;
  border-radius: 11px;
  background: #eef5ea;
}

.jungle-button {
  display: inline-flex;
  min-width: 230px;
  min-height: 50px;
  padding: 12px 24px;
  align-items: center;
  justify-content: center;
  border: 2px solid #5d864c;
  border-radius: 7px;
  background: #fff;
  color: #3e6632;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 4px 11px rgba(0, 0, 0, .09);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.jungle-button--primary {
  border-color: #df7623;
  background: #df7623;
  color: #fff;
}

.jungle-button:hover,
.jungle-button:focus {
  transform: translateY(-1px);
  text-decoration: none;
  box-shadow: 0 7px 15px rgba(0, 0, 0, .13);
}

/* Lower AGM photo gallery inside OPM */
.jungle-page #p7AGM_2 {
  margin-top: 8px;
}

/* Mobile */
@media (max-width: 760px) {
  .jungle-page {
    padding: 12px 10px 28px;
    font-size: 15px;
  }

  .jungle-intro,
  .jungle-story,
  .jungle-card,
  .jungle-opm-section {
    padding: 17px;
  }

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

  .jungle-story-grid {
    grid-template-columns: 1fr;
  }

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

  .jungle-actions {
    flex-direction: column;
    padding: 16px;
  }

  .jungle-button {
    width: 100%;
    min-width: 0;
  }

  .jungle-opm-section .p7TKL-list-h li {
    width: 100% !important;
    margin-bottom: 7px;
  }
}

@media (max-width: 480px) {
  .jungle-highlights,
  .jungle-route {
    grid-template-columns: 1fr;
  }
}