/* Styles partagés par les 3 pages catégorie : trekking.html, climbing.html,
   day-trip.html (liste filtrable par pills). Le header, footer et les
   tokens partagés sont dans base.css */

/* ===== INTRO ===== */
.category-intro{ background:var(--stone); padding:76px 0 50px; border-bottom:1px solid var(--line); }
.category-intro .eyebrow{ color:var(--eco-deep); margin-bottom:16px; }
.category-intro h1{ font-size:clamp(38px, 5vw, 64px); color:var(--ink); max-width:760px; }
.category-intro p.lead{ max-width:560px; margin-top:20px; font-size:16px; color:#4B564F; }

/* ===== FILTER PILLS ===== */
.filter-pills{ display:flex; flex-wrap:wrap; gap:10px; margin-top:38px; }
.filter-pill{
  font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; padding:11px 20px; border-radius:999px;
  border:1px solid var(--line); background:var(--paper); color:var(--ink);
  cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-pill:hover{ border-color:var(--eco-deep); }
.filter-pill.active{ background:var(--eco-deep); border-color:var(--eco-deep); color:#F7F4EC; }

/* ===== GRID / CARDS ===== */
.category-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:28px; padding:70px 0; }
.category-card{ background:var(--stone-light); border:1px solid var(--line); display:flex; flex-direction:column; }
.category-card.is-hidden{ display:none; }
.category-photo{ position:relative; aspect-ratio:16/10; overflow:hidden; }
.category-photo img{ width:100%; height:100%; object-fit:cover; }
.category-tag{ position:absolute; top:14px; left:14px; background:var(--glacier-deep); color:#DCEEF7; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; padding:5px 10px; }
.category-body{ padding:24px 22px 26px; display:flex; flex-direction:column; flex:1; }
.category-region{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--eco-deep); margin-bottom:10px; }
.category-body h3{ font-family:'Big Shoulders Display', sans-serif; font-weight:800; text-transform:uppercase; font-size:24px; line-height:1.05; color:var(--ink); margin-bottom:12px; }
.category-body p{ font-size:14px; color:#4B564F; flex:1; margin-bottom:22px; }
.category-link{ font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--eco-deep); display:inline-flex; align-items:center; gap:8px; border-bottom:1px solid var(--eco-deep); padding-bottom:2px; align-self:flex-start; }

@media (max-width: 900px){
  .category-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 620px){
  .category-grid{ grid-template-columns:1fr; }
}