/* The trek card, the same everywhere a trek is listed: the trek's photo, a difficulty chip, a hiker badge,
   the name large at the bottom and an arrow. Markup from card() in tools/month_pages.py (and its JS twin in treks/index.html). */
.tk{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;aspect-ratio:4/5;padding:16px 18px 18px;border-radius:24px;overflow:hidden;background:#0b3f33;color:#fff;text-decoration:none;font-family:'Google Sans Flex',system-ui,sans-serif}
.tk>img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.tk::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(2,36,25,.4),transparent 26%,transparent 46%,rgba(2,36,25,.92))}
.tk:hover>img{transform:scale(1.06)}
.tk-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.tk-c{flex:none;padding:5px 11px;border-radius:10px;background:#e5fcc9;color:#03342a;font-size:12.5px;font-weight:700;line-height:1.3}
.tk-cr{font-size:9.5px;line-height:1.3;text-align:right;color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.tk-i{display:grid;place-items:center;width:40px;height:40px;margin-bottom:12px;border-radius:50%;background:#e5fcc9}
.tk-i svg{width:22px;height:22px;fill:none;stroke:#03342a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tk-b{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tk h3{margin:0;font-size:clamp(22px,2.1vw,30px);line-height:1.05;letter-spacing:-.035em;font-weight:700}
.tk small{display:block;margin-top:8px;font-size:13px;font-weight:600;color:#e5fcc9}
.tk-a{flex:none;font-size:34px;line-height:1;color:#e5fcc9;transition:transform .35s}
.tk:hover .tk-a{transform:translate(4px,-4px)}