/* CampTrailZone Routes Page Styles */

.routes-hero-section {
  background: linear-gradient(120deg, rgba(98,182,203,0.13) 0%, rgba(16,20,24,1) 82%), url('../images/climbing-rope-mountain-background-4594.webp') center/cover no-repeat;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
  color: var(--color-text);
}
.routes-hero-section .hero-content {
  text-align: center;
  gap: var(--space-8);
}
.routes-hero-section .hero-slider-img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  margin-top: var(--space-8);
  max-width: 690px;
  object-fit: cover;
}

.route-finder-section {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
  box-shadow: var(--shadow-md);
}
.route-filters {
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 140px;
}
.filter-actions {
  gap: var(--space-3);
  align-items: flex-end;
}
.route-map {
  background: #181d22;
  min-height: 240px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gray-300);
  font-style: italic;
  box-shadow: var(--shadow-xs);
  position: relative;
}
#route-map span {
  opacity: 0.75;
  padding: var(--space-6);
}

.featured-routes-section {
  margin-bottom: var(--space-16);
}
.featured-routes-list {
  gap: var(--space-8);
  margin-top: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.route-card {
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  min-height: 440px;
  position: relative;
}
.route-img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.route-info {
  flex-grow: 1;
}
.route-difficulty {
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: .5px;
}
.route-quickfacts span {
  margin-left: var(--space-1);
  margin-right: var(--space-1);
}
.route-shortdesc {
  color: var(--color-gray-100);
  font-size: var(--text-sm);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
.route-details {
  margin-top: var(--space-6);
  background: var(--color-bg);
  border-top: 1px solid var(--color-gray-700);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  display: none;
  font-size: var(--text-base);
}
.route-details[open],
.route-details.active {
  display: block;
}
.review {
  margin-bottom: var(--space-4);
  background: #20232a;
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.review-rating {
  color: var(--color-warning);
  font-size: 1.18em;
  margin-right: var(--space-1);
}
.review-header strong {
  color: var(--color-text);
  font-weight: 600;
}
.review-photos img {
  margin-top: var(--space-2);
  max-width: 120px;
  max-height: 90px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}
.review-sort {
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.route-review-form {
  background: #16191d;
  border-radius: var(--radius-sm);
  padding: var(--space-4);
}
.route-review-form label {
  font-size: var(--text-xs);
  color: var(--color-gray-300);
}
.route-review-form textarea {
  min-height: 52px;
}
@media (max-width: 900px) {
  .featured-routes-list {
    grid-template-columns: 1fr;
  }
}

.route-collections-section {
  margin-bottom: var(--space-16);
}
.route-collections-list {
  gap: var(--space-8);
  margin-top: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.collection-card img.collection-img {
  width: 100%;
  max-width: 264px;
  max-height: 130px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}
.collection-card h4 {
  margin-top: var(--space-4);
  font-size: var(--text-lg);
}

.route-safety-section {
  margin-bottom: var(--space-12);
  box-shadow: var(--shadow-xs);
}
.route-bulletins {
  margin-bottom: var(--space-4);
  padding-left: var(--space-4);
  color: var(--color-gray-100);
}
.route-bulletins li {
  margin-bottom: var(--space-2);
  line-height: 1.5;
}
.route-access-alert {
  background: #181d22;
  padding: var(--space-4);
  border-left: 4px solid var(--color-warning);
  border-radius: var(--radius-md);
  color: var(--color-warning);
  font-weight: 600;
}

[aria-expanded="true"] + .route-details {
  display: block;
}

/* Checklist style improvements */
.route-details ul {
  list-style: disc inside;
  margin-bottom: var(--space-3);
}

.cta-section {
  margin-top: var(--space-12);
  margin-bottom: var(--space-10);
  background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)), url('../images/outdoor-adventure-gear-climbing-camping-essentials-2674.webp') center/cover no-repeat;
  padding: var(--space-12) var(--space-6);
  border-radius: var(--radius-lg);
  color: var(--color-white);
  text-align: center;
}

.cta-section h2 {
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.cta-section p {
  color: var(--color-gray-100);
  margin-bottom: var(--space-6);
}

/**** Utilities ****/
.flex-wrap {
  flex-wrap: wrap;
}