/* Trail Picks host pages — loads AFTER ride-guide.css and reuses its variables/components. */

/* hero */
.tp-hero{display:flex;flex-wrap:wrap;gap:16px;padding:32px 32px 24px}
.tp-hero-panel{flex:7 1 520px;min-width:0;padding:64px 96px 40px 48px;display:flex;flex-direction:column;gap:32px}
.tp-crumbs{display:flex;flex-wrap:wrap;gap:8px;font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#4a4a47}
.tp-crumbs a:hover{color:#a86f00}
.tp-crumb-here{color:var(--ink)}
.tp-amber{color:var(--amber)}
.tp-hero h1{margin:0;font-weight:800;font-size:clamp(52px,7.4vw,96px);line-height:.88;font-stretch:66%;text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.tp-teaser{margin:0;max-width:520px;font-size:18px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.tp-index{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.tp-index a{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid rgba(20,20,20,.18)}
.tp-index a:hover{color:#a86f00}
.tp-index-name{flex:1;font:800 22px/1 var(--sans);font-stretch:70%;text-transform:uppercase}
.tp-index-km{font:500 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#4a4a47}
.tp-hero-img{flex:5 1 360px;min-height:420px;margin-top:48px;position:relative;overflow:hidden;background:var(--charcoal)}
.tp-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* layout */
.tp-main{display:flex;flex-direction:column;gap:96px;padding:72px 32px 88px}
.tp-intro{display:flex;flex-direction:column;gap:20px;max-width:860px}
.tp-intro::before{content:"";width:48px;height:5px;background:var(--amber)}
.tp-intro p{margin:0;font-size:clamp(20px,2.2vw,26px);line-height:1.45;text-wrap:pretty}

/* buttons */
.tp-btn{align-self:flex-start;display:inline-block;background:var(--charcoal);color:var(--offwhite);border:0;padding:14px 20px;font:500 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;cursor:pointer}
.tp-btn:hover{background:var(--amber);color:var(--charcoal)}
.tp-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);padding:13px 20px}
.tp-btn--ghost:hover{background:transparent;border-color:#a86f00;color:#a86f00}

/* map */
.rg-sec-head{flex-wrap:wrap}
.tp-map-hint{font:500 13px/1.4 var(--mono);color:var(--muted);max-width:360px}

/* trail entries */
.tp-entry{display:flex;flex-direction:column;scroll-margin-top:24px}
.tp-entry-head{display:flex;align-items:flex-end;gap:20px;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:16px}
.tp-entry-num{font:800 clamp(88px,10vw,128px)/.8 'Big Shoulders Display',sans-serif;color:var(--ink);text-shadow:0 1px 0 rgba(255,255,255,.95),0 -1px 0 rgba(0,0,0,.28)}
.tp-entry-title{display:flex;flex-direction:column;gap:12px;padding-bottom:4px}
.tp-entry-title::before{content:"";width:48px;height:5px;background:var(--amber)}
.tp-entry-title h2{margin:0;font:800 clamp(36px,4.6vw,58px)/.9 var(--sans);font-stretch:66%;text-transform:uppercase;text-wrap:balance}
.tp-entry-title a:hover{color:#a86f00}
.tp-entry-img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--charcoal)}
.tp-entry-img img{width:100%;height:100%;object-fit:cover}
.tp-entry-card{position:relative;margin:-72px clamp(12px,3vw,40px) 0;padding:clamp(24px,3.5vw,44px);display:flex;flex-wrap:wrap;gap:40px}
.tp-facts{flex:1 1 220px;display:flex;flex-direction:column;gap:24px}
.tp-facts dl{margin:0;display:flex;flex-direction:column}
.tp-facts dl>div{padding:12px 0;border-top:1px solid rgba(20,20,20,.18)}
.tp-facts dl>div:first-child{border-top:2px solid var(--ink)}
.tp-facts dl>div:last-child{border-bottom:1px solid rgba(20,20,20,.18)}
.tp-facts dt{font:500 11px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:#8a5b00;margin-bottom:6px}
.tp-facts dd{margin:0;font-size:15px;line-height:1.4}
.tp-entry-body{flex:3 1 420px;min-width:0;max-width:680px;display:flex;flex-direction:column;gap:20px;font-size:18px;line-height:1.65;color:#2a2a28}
.tp-entry-body p{margin:0;text-wrap:pretty}
.tp-entry-body a{box-shadow:inset 0 -2px 0 var(--amber)}
.tp-entry-body a:hover{color:#8a5b00}

/* where to next */
.tp-next{background:var(--grain-light),var(--charcoal);color:var(--offwhite);border-bottom:6px solid var(--amber)}
.tp-next-copy{padding:clamp(32px,5vw,64px) clamp(24px,5vw,64px);display:flex;flex-direction:column;gap:20px}
.tp-next .rg-kit-label{color:var(--amber)}
.tp-next h2{margin:0;font:800 clamp(44px,5.4vw,72px)/.88 var(--sans);font-stretch:66%;text-transform:uppercase}
.tp-next p{margin:0;font:400 16px/1.7 var(--mono);color:#d6d5d1;text-wrap:pretty}
.tp-next p a{color:var(--amber);text-decoration:none;box-shadow:inset 0 -1px 0 rgba(245,164,0,.55);transition:color .15s,box-shadow .15s}
.tp-next p a:hover{color:var(--offwhite);box-shadow:inset 0 -1px 0 var(--offwhite)}
.tp-next .rg-kit-btn{align-self:flex-start;margin-top:8px}
.tp-next .rg-kit-btn:hover{background:var(--offwhite)}
@media (min-width:861px){
  .tp-next-copy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"label text" "title text" ". text" "btn text";grid-template-rows:auto auto 1fr auto;column-gap:clamp(40px,5vw,72px);row-gap:16px}
  .tp-next .rg-kit-label{grid-area:label}
  .tp-next h2{grid-area:title}
  .tp-next .rg-kit-btn{grid-area:btn;justify-self:start;align-self:end;margin-top:24px}
  .tp-next p{grid-area:text;align-self:center;padding-left:clamp(32px,4vw,56px);border-left:1px solid rgba(245,244,241,.18);font-size:17px}
}

@media (max-width:960px){
  .tp-hero{padding:20px 20px 24px}
  .tp-hero-panel{padding:40px 24px}
  .tp-hero-img{margin-top:0}
  .tp-main{gap:64px;padding:48px 20px 56px}
}