/* ══════════════════════════════════════════════════════════════════
   trek.css
   Page-specific styles for trek.html, view-trek.html, and the
   dedicated guide pages.

   Global trek-card / filter / .td-* styles live in style.css (or the
   per-page inline <style> blocks on view-trek.html and guide pages).
   Only rules that are UNIQUE to the pages above belong in this file —
   anything that also exists in style.css has been removed to avoid
   load-order surprises.
   ══════════════════════════════════════════════════════════════════ */


/* ══════════ ALL-TREKS HERO (trek.html) ══════════ */

.all-treks-hero {
  height: 350px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: url("images/20251027_095207.jpg");
  background-size: cover;
  background-position: center;
}

.at-hero-content h1 {
  font-family: "Playfair Display", serif;
  font-size: 48px;
  color: var(--white);
  z-index: 2;
}

.at-hero-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  z-index: 2;
}


/* ══════════ TREK FILTER BAR (trek.html) ══════════ */

.trek-filter-bar {
  background: var(--light);
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.trek-search-input {
  flex: 1;
  padding: 12px 20px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  outline: none;
  font-family: "Inter", sans-serif;
}


/* ══════════ TREKS GRID (trek.html) ══════════ */

.treks-grid-section {
  padding: 60px;
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
  padding: 20px;
}

/* Override the slider's flex sizing so cards lay out correctly in the
   grid. Every other .trek-card property comes from style.css. */
.grid-layout .trek-card {
  flex: none;
  width: 100%;
}


/* ══════════ CARD PRICE (rendered by trek-logic.js) ══════════ */

.tk-price {
  margin-top: 10px;
  font-size: 14px;
  color: var(--navy);
}

.tk-price strong {
  color: var(--teal);
  font-size: 16px;
}


/* ══════════ MUST READ ARTICLES (view-trek.html) ══════════ */

.articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.td-article-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  height: 100%;
}

.td-article-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
  border-color: var(--gold);
}

.td-art-tag {
  display: inline-block;
  align-self: flex-start;
  background: var(--gold);
  color: var(--navy);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 3px 9px;
  border-radius: 4px;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.td-article-card h4 {
  font-family: "Inter", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--navy);
  margin: 0 0 10px;
}

.td-article-card .td-art-meta {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 14px;
}

.td-article-card .td-art-cta {
  margin-top: auto;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
}

.td-article-card:hover .td-art-cta {
  color: var(--gold2, var(--gold));
}


/* ══════════ RESPONSIVE ══════════ */

@media (max-width: 600px) {
  .treks-grid-section {
    padding: 20px 10px;
  }

  .grid-layout {
    gap: 15px;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .articles-grid {
    grid-template-columns: 1fr;
  }
}