/* Standard trail cards (partials/trail-card.njk): the trail finder, collection pages, My trails and Nearby trails on
   trail pages. Split out of trail-finder.css (5 Nov 2026) so trail pages load only the card rules. */
.tf-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px;}
.tf-item{position:relative;}
.tf-item[hidden], .tf-grid[hidden], .tf-empty[hidden]{display:none;}
.tf-card{display:flex; gap:14px; align-items:flex-start; height:100%; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--white); color:inherit; text-decoration:none;
  transition:border-color .15s ease, box-shadow .15s ease;}
.tf-card:hover, .tf-item.is-hot .tf-card{border-color:var(--ink); box-shadow:0 4px 14px rgba(11,42,71,.10);}
.tf-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-color:var(--ink);}
.tf-item.has-mt .tf-card{padding-right:52px;}
.mt-page .tf-item.has-mt .tf-card{padding-right:96px;}
.tf-item .mt-btns{top:6px; right:6px;}
.tf-thumb{width:68px; height:68px; flex:none; display:block;}
.tf-thumb-bg{fill:var(--accent-soft);}
.tf-thumb-line{fill:none; stroke:var(--ink); stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round;}
.tf-thumb-start{fill:var(--accent); stroke:var(--white); stroke-width:2.5;}
.tf-thumb-pin{fill:var(--accent);}
.tf-thumb-dot{fill:var(--white);}
.tf-body{display:flex; flex-direction:column; gap:3px; min-width:0;}
.tf-name{font-family:'Newsreader', serif; font-weight:400; font-size:18px; line-height:1.2; margin:0;}
.tf-park{font-size:12.5px; color:var(--text-softer);}
.tf-stats{display:flex; flex-wrap:wrap; gap:3px 12px; margin-top:3px; font-size:12.5px; line-height:1.4; color:var(--text-soft);}
.tf-stats > span{display:inline-flex; align-items:flex-start; gap:5px;}
.tf-i{width:14px; height:14px; margin-top:2px; flex:none; fill:none; stroke:var(--accent); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.tf-badges{display:flex; flex-wrap:wrap; gap:6px; margin-top:5px;}
.tf-badges > span{font-size:11px; line-height:1.5; padding:1px 9px; border:1px solid var(--line); border-radius:100px; color:var(--text-soft);}
.tf-badges > .tag-closed{background:var(--ink); border-color:var(--ink); color:var(--white); font-weight:600; border-radius:8px;} /* wraps on narrow cards as a neat block, not a broken pill */
.tf-dist{font-size:12.5px; font-weight:600; color:var(--accent);}
.tf-dist[hidden]{display:none;}