/* Polished venue listing cards for region, county and lake listing pages */

main .lake-grid,
main .venue-grid,
main .listing-grid,
main .results-grid,
main .cards-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

main .lake-card,
main .venue-card,
main .listing-card,
main .result-card,
main article:has(a[href^="/lake/"]),
main .card:has(a[href^="/lake/"]) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 210px !important;
  padding: 28px 28px 24px !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(0,107,69,.08), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #fbfdfb 100%) !important;
  border: 1px solid #dce8de !important;
  border-radius: 26px !important;
  box-shadow: 0 14px 34px rgba(12, 44, 27, .075) !important;
  overflow: hidden !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

main .lake-card::before,
main .venue-card::before,
main .listing-card::before,
main .result-card::before,
main article:has(a[href^="/lake/"])::before,
main .card:has(a[href^="/lake/"])::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 0 auto 0 !important;
  height: 6px !important;
  background: linear-gradient(90deg, #006b45, #6fa65f) !important;
}

main .lake-card::after,
main .venue-card::after,
main .listing-card::after,
main .result-card::after,
main article:has(a[href^="/lake/"])::after,
main .card:has(a[href^="/lake/"])::after {
  content: "↗" !important;
  position: absolute !important;
  top: 20px !important;
  right: 22px !important;
  width: 38px !important;
  height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: #eef6f0 !important;
  color: #006b45 !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 1px #d5e8da !important;
}

main .lake-card:hover,
main .venue-card:hover,
main .listing-card:hover,
main .result-card:hover,
main article:has(a[href^="/lake/"]):hover,
main .card:has(a[href^="/lake/"]):hover {
  transform: translateY(-4px) !important;
  border-color: #bdd8c5 !important;
  box-shadow: 0 20px 42px rgba(12, 44, 27, .12) !important;
}

main .lake-card h2,
main .lake-card h3,
main .venue-card h2,
main .venue-card h3,
main .listing-card h2,
main .listing-card h3,
main .result-card h2,
main .result-card h3,
main article:has(a[href^="/lake/"]) h2,
main article:has(a[href^="/lake/"]) h3,
main .card:has(a[href^="/lake/"]) h2,
main .card:has(a[href^="/lake/"]) h3 {
  max-width: calc(100% - 54px) !important;
  margin: 0 0 18px !important;
  color: #06351f !important;
  font-size: 1.7rem !important;
  line-height: 1.18 !important;
  letter-spacing: -.025em !important;
  font-weight: 900 !important;
}

main .lake-card p,
main .venue-card p,
main .listing-card p,
main .result-card p,
main article:has(a[href^="/lake/"]) p,
main .card:has(a[href^="/lake/"]) p {
  color: #40584a !important;
  font-size: 1rem !important;
  line-height: 1.65 !important;
  margin: 0 0 18px !important;
}

main .lake-card p:first-of-type,
main .venue-card p:first-of-type,
main .listing-card p:first-of-type,
main .result-card p:first-of-type,
main article:has(a[href^="/lake/"]) p:first-of-type,
main .card:has(a[href^="/lake/"]) p:first-of-type {
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  margin-bottom: 22px !important;
  border-radius: 999px !important;
  background: #eef6f0 !important;
  color: #365343 !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

main .lake-card p:first-of-type::before,
main .venue-card p:first-of-type::before,
main .listing-card p:first-of-type::before,
main .result-card p:first-of-type::before,
main article:has(a[href^="/lake/"]) p:first-of-type::before,
main .card:has(a[href^="/lake/"]) p:first-of-type::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 999px !important;
  background: #1f8a57 !important;
  flex: 0 0 auto !important;
}

main .lake-card a[href^="/lake/"],
main .venue-card a[href^="/lake/"],
main .listing-card a[href^="/lake/"],
main .result-card a[href^="/lake/"],
main article:has(a[href^="/lake/"]) a[href^="/lake/"],
main .card:has(a[href^="/lake/"]) a[href^="/lake/"] {
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start !important;
  margin-top: auto !important;
  padding: 10px 15px !important;
  border-radius: 999px !important;
  background: #006b45 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

main .lake-card a[href^="/lake/"]:hover,
main .venue-card a[href^="/lake/"]:hover,
main .listing-card a[href^="/lake/"]:hover,
main .result-card a[href^="/lake/"]:hover,
main article:has(a[href^="/lake/"]) a[href^="/lake/"]:hover,
main .card:has(a[href^="/lake/"]) a[href^="/lake/"]:hover {
  background: #004f34 !important;
  color: #ffffff !important;
}

@media (max-width: 760px) {
  main .lake-grid,
  main .venue-grid,
  main .listing-grid,
  main .results-grid,
  main .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  main .lake-card,
  main .venue-card,
  main .listing-card,
  main .result-card,
  main article:has(a[href^="/lake/"]),
  main .card:has(a[href^="/lake/"]) {
    min-height: 180px !important;
    padding: 24px 22px 22px !important;
    border-radius: 22px !important;
  }

  main .lake-card h2,
  main .lake-card h3,
  main .venue-card h2,
  main .venue-card h3,
  main .listing-card h2,
  main .listing-card h3,
  main .result-card h2,
  main .result-card h3,
  main article:has(a[href^="/lake/"]) h2,
  main article:has(a[href^="/lake/"]) h3,
  main .card:has(a[href^="/lake/"]) h2,
  main .card:has(a[href^="/lake/"]) h3 {
    font-size: 1.45rem !important;
  }
}