/* Main container */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 40px 20px;
}

/* Page title */
.title {
  text-align: center;
  color: #5b7f6b; /* soft green accent */
  font-size: 40px;
  margin-bottom: 40px;
  font-weight: 600;
}

/* Grid: 3 cards per row */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* Card */
.card {
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.12);
}

/* Image */


.wrapdiv {
  width: 100%;
  height: 200px;      /* 🔒 fixed image area */
  overflow: hidden;   /* 🔒 hides extra image */
}

.wrapdiv img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* 🔒 crops image properly */
  display: block;
}




/* Remove default anchor styling */
.card a {
  text-decoration: none;
  color: inherit;
}

/* Place name */
.card h3 {
  font-size: 18px;
  color: #3e3e3e;
  margin: 15px 12px 6px;
   font-family: "IBM Plex Sans", sans-serif;
}

/* Distance text */
.distance {
  font-size: 14px;
  color: #777;
  margin-bottom: 6px;
}

/* Location link */
.card a:last-of-type {
  display: inline-block;
  margin-bottom: 16px;
  color: #5b7f6b;
  font-weight: 500;
}

.card a:last-of-type:hover {
  text-decoration: underline;
}

/* Tablet view: 2 cards per row */
@media (max-width: 992px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .title {
    font-size: 34px;
  }
}





/* =========================
   MOBILE VIEW
   ========================= */
@media (max-width: 576px) {

  /* Grid: 1 card per row */
  .card-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Image wrapper */
  .wrapdiv {
    height: 160px;          /* ✅ fixed image height for mobile */
    overflow: hidden;
  }

  /* Image */
  .wrapdiv img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  /* Card */
  .card {
    height: auto;           /* ✅ prevent extra tall cards */
  }

  /* Title */
  .title {
    font-size: 28px;
  }

  /* Place name */
  .card h3 {
    font-size: 16px;
    margin: 12px 10px 4px;
	 font-family: "IBM Plex Sans", sans-serif;
  }

  /* Distance text */
  .distance {
    font-size: 13px;
  }
}