/* ============================================================================
   AWPS — Trekking page: the Kilimanjaro route cards.

   Ported from css/style.css §995-1011 (`.route-card`) plus `.btn.dark` (§101).
   Elementor supplies the row and its two columns; the fixed 300px photo column, the
   mint fact pills and the deep-gradient buttons are the source's own values.
   ============================================================================ */

.awps-route-card {
  background: #fff;
  border-radius: var(--awps-radius, 18px);
  overflow: hidden;
  box-shadow: var(--awps-shadow, 0 10px 40px rgba(20, 70, 60, .12));
  margin-bottom: 30px;
  transition: transform .35s, box-shadow .35s;
}
.awps-route-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 60px rgba(20, 70, 60, .18);
}

/* `.route-card { grid-template-columns: 300px 1fr; gap: 0 }` — a fixed photo column
   beside a body that takes the rest. Elementor's columns are percentage-based, so the
   fixed track is set here instead. */
.awps-route-card > .awps-route-photo {
  flex: 0 0 300px;
  max-width: 300px;
  padding: 0;
}
.awps-route-card > .awps-route-body {
  flex: 1 1 auto;
  padding: 30px 34px;
}
.awps-route-card .awps-route-photo .elementor-widget-image,
.awps-route-card .awps-route-photo .elementor-image,
.awps-route-card .awps-route-photo figure { height: 100%; margin: 0; }
.awps-route-card .awps-route-img img {
  width: 100%;
  height: 100%;
  min-height: 220px;
  object-fit: cover;
  display: block;
}

/* `.route-card h3 { font-size: 21px }`. The extra `.elementor-element` step is for
   weight — Elementor's per-element heading CSS lands at (0,3,0). */
.awps-route-card .awps-route-body .elementor-element h3.elementor-heading-title {
  font-family: "Manrope", sans-serif;
  font-weight: 800;
  font-size: 21px;
  line-height: 1.25;
  color: var(--awps-deep, #14463C);
}

/* `.route-card .facts span` — mint pills, 22px apart, Manrope 700 13.5px. */
.awps-route-facts .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}
.awps-route-facts .elementor-icon-list-item {
  background: var(--awps-mint, #EDF7EE);
  padding: 6px 14px;
  border-radius: 30px;
  margin: 0;
}
.awps-route-facts .elementor-icon-list-icon { display: none; }
.awps-route-card .elementor-element.awps-route-facts .elementor-icon-list-text {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--awps-deep, #14463C);
  padding: 0;
}

/* The chip row inside a split's prose — Meru's "3–4 Days" / "Armed ranger walks".
   The source styles these inline: white pills on the mint band, 14px apart. */
.awps-chip-row .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.awps-chip-row .elementor-icon-list-item {
  background: #fff;
  padding: 6px 14px;
  border-radius: 30px;
  margin: 0;
}
.awps-chip-row .elementor-icon-list-icon { display: none; }
.awps-chip-row .elementor-icon-list-text {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  color: var(--awps-deep, #14463C);
  padding: 0;
}

/* `.btn.dark { background: var(--grad-deep) }` — the deep teal gradient pill. */
.awps-route-actions .awps-btn-dark .elementor-button {
  background-image: linear-gradient(135deg, var(--awps-deep, #14463C) 0%, #2E7D6E 100%);
  color: #fff;
  border: 0;
  border-radius: 40px;
  padding: 15px 32px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.75;
  box-shadow: 0 8px 22px rgba(20, 70, 60, .35);
  transition: transform .3s, box-shadow .3s;
}
.awps-route-actions .awps-btn-dark .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(20, 70, 60, .45);
}

/* `@media (max-width: 760px) { .route-card { grid-template-columns: 1fr } }` */
@media (max-width: 760px) {
  .awps-route-card { flex-direction: column; }
  .awps-route-card > .awps-route-photo {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .awps-route-card > .awps-route-body { padding: 26px 22px 30px; }
}