/* Trek Detail Page Styles */
.trek-hero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  margin-top: 0;
}
.trek-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(26,26,46,0.3) 0%, rgba(26,26,46,0.85) 100%);
}
.trek-hero-content {
  position: relative;
  z-index: 10;
  padding: var(--space-lg) 0;
  width: 100%;
}
.trek-hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--space-sm);
}
.trek-hero-tagline {
  font-size: 1.2rem;
  color: var(--color-accent);
  font-style: italic;
  margin-bottom: var(--space-md);
}
.trek-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.trek-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  color: white;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.2);
}
.trek-hero-tag i { color: var(--color-accent); }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 250px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }
.gallery-item:first-child { grid-column: span 2; height: 350px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Gear List */
.gear-category { margin-bottom: var(--space-md); }
.gear-category h4 { font-size: 1.1rem; color: var(--color-accent); margin-bottom: var(--space-sm); }
.gear-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.gear-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; color: rgba(255,255,255,0.8);
}
.gear-item i { color: var(--color-success); font-size: 0.8rem; }

/* Detail Sections */
.detail-section { margin-bottom: var(--space-xl); }
.detail-section h2 {
  font-size: 2rem; margin-bottom: var(--space-md);
  display: flex; align-items: center; gap: var(--space-sm);
}
.detail-section h2 i { color: var(--color-accent); font-size: 1.5rem; }
.detail-section p, .detail-section li { color: rgba(255,255,255,0.8); line-height: 1.8; }
.detail-section ul { list-style: disc; padding-left: 1.5rem; }
.detail-section ul li { margin-bottom: 0.5rem; }

/* Difficulty Meter */
.diff
cd /var/www/kl-outdoors/wp-content/themes/kunlun-outdoors && \
sudo tee css/trek-detail.css > /dev/null << 'CSSEOF'
/* Trek Detail Page Styles */
.trek-hero {
  position: relative;
  height: 70vh;
  min-height: 500px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  margin-top: 0;
}
.trek-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to bottom, rgba(26,26,46,0.3) 0%, rgba(26,26,46,0.85) 100%);
}
.trek-hero-content {
  position: relative;
  z-index: 10;
  padding: var(--space-lg) 0;
  width: 100%;
}
.trek-hero-content h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: var(--space-sm);
}
.trek-hero-tagline {
  font-size: 1.2rem;
  color: var(--color-accent);
  font-style: italic;
  margin-bottom: var(--space-md);
}
.trek-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.trek-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  color: white;
  font-size: 0.9rem;
  border: 1px solid rgba(255,255,255,0.2);
}
.trek-hero-tag i { color: var(--color-accent); }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.gallery-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 250px;
  cursor: pointer;
  transition: var(--transition-fast);
}
.gallery-item:hover { transform: scale(1.02); box-shadow: var(--shadow-lg); }
.gallery-item:first-child { grid-column: span 2; height: 350px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

/* Gear List */
.gear-category { margin-bottom: var(--space-md); }
.gear-category h4 { font-size: 1.1rem; color: var(--color-accent); margin-bottom: var(--space-sm); }
.gear-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.gear-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; color: rgba(255,255,255,0.8);
}
.gear-item i { color: var(--color-success); font-size: 0.8rem; }

/* Detail Sections */
.detail-section { margin-bottom: var(--space-xl); }
.detail-section h2 {
  font-size: 2rem; margin-bottom: var(--space-md);
  display: flex; align-items: center; gap: var(--space-sm);
}
.detail-section h2 i { color: var(--color-accent); font-size: 1.5rem; }
.detail-section p, .detail-section li { color: rgba(255,255,255,0.8); line-height: 1.8; }
.detail-section ul { list-style: disc; padding-left: 1.5rem; }
.detail-section ul li { margin-bottom: 0.5rem; }

/* Difficulty Meter */
.difficulty-meter { display: flex; gap: 4px; margin-top: 0.5rem; }
.difficulty-bar { width: 40px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.15); }
.difficulty-bar.filled { background: var(--color-accent); }
.difficulty-bar.filled-warning { background: #E74C3C; }

/* Itinerary */
.itinerary-day { margin-bottom: var(--space-sm); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-md); overflow: hidden; }
.itinerary-day h4 { padding: 1rem; margin: 0; cursor: pointer; background: rgba(255,255,255,0.05); transition: background 0.3s; }
.itinerary-day h4:hover { background: rgba(255,255,255,0.1); }
.itinerary-content { padding: 0 1rem 1rem; }

/* Inclusions */
.inclusions-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.inclusion-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: rgba(39,174,96,0.1); border-radius: var(--radius-sm); }
.inclusion-item i { color: var(--color-success); }
.inclusion-item.excluded { background: rgba(231,76,60,0.1); }
.inclusion-item.excluded i { color: #E74C3C; }

/* Trek Overview Stats */
.trek-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); margin-bottom: var(--space-xl); padding: var(--space-lg); background: rgba(255,255,255,0.03); border-radius: var(--radius-lg); border: 1px solid rgba(255,255,255,0.08); }
.overview-item { text-align: center; }
.overview-item i { font-size: 2rem; color: var(--color-accent); margin-bottom: 0.5rem; }
.overview-item h4 { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-bottom: 0.25rem; }
.overview-item p { font-size: 1.1rem; color: white; font-weight: 600; }

/* Trek Details Layout */
.trek-details { display: grid; grid-template-columns: 1fr 350px; gap: var(--space-xl); }

/* Sidebar */
.trek-sidebar { background: rgba(255,255,255,0.05); border-radius: var(--radius-lg); padding: var(--space-lg); border: 1px solid rgba(255,255,255,0.1); position: sticky; top: 100px; }
.sidebar-price { font-size: 2.5rem; font-weight: 800; color: var(--color-accent); margin-bottom: var(--space-lg); }
.sidebar-price span { font-size: 1rem; color: rgba(255,255,255,0.6); font-weight: 400; }

/* Breadcrumb */
.page-breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: rgba(255,255,255,0.6); }
.page-breadcrumb a { color: rgba(255,255,255,0.8); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--color-accent); }

/* Responsive */
@media (max-width: 1024px) {
  .trek-details { grid-template-columns: 1fr; }
  .trek-sidebar { position: static; }
  .trek-overview { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .trek-hero { min-height: 350px; height: 55vh; }
  .trek-hero-content h1 { font-size: 1.8rem; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item:first-child { grid-column: span 1; height: 250px; }
  .gear-list { grid-template-columns: 1fr; }
  .inclusions-list { grid-template-columns: 1fr; }
  .trek-overview { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
  .trek-hero { min-height: 280px; height: 45vh; }
  .trek-hero-content h1 { font-size: 1.4rem; }
  .trek-overview { grid-template-columns: 1fr; }
}