/* Ski Touring Routes — card index
 *
 * Scoped under .skr-cards so nothing leaks into the theme. Reuses the same
 * tokens and the same slope ramp as the single route pages, so a 38° line is
 * the same colour on the index as it is on its own page.
 *
 * To match the index to a different site accent, override one variable:
 *   .skr-cards{ --skr-accent:#c2551e; }
 *
 * Dark mode is opt-in, exactly as in skitouring-routes.css.
 */

.skr-cards{
  --skr-surface-1:#fcfcfb;
  --skr-surface-2:#f2f1ed;
  --skr-text-1:#0b0b0b;
  --skr-text-2:#52514e;
  --skr-text-3:#7d7b76;
  --skr-rule:#e4e3de;
  --skr-accent:#2a78d6;
  --skr-slope-0:#a8ada4;
  --skr-slope-1:#d9963c;
  --skr-slope-2:#bf5a24;
  --skr-slope-3:#8c2a14;

  color:var(--skr-text-1);
  margin:0 0 26px;
}

[data-skr-theme="dark"] .skr-cards,
.skr-dark .skr-cards{
  --skr-surface-1:#1a1a19;
  --skr-surface-2:#232322;
  --skr-text-1:#fff;
  --skr-text-2:#c3c2b7;
  --skr-text-3:#9b9a92;
  --skr-rule:#37372f;
  --skr-accent:#7fb2f0;
}

.skr-cards *{box-sizing:border-box;}

/* ---------- filters ---------- */
.skr-c-filters{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 22px;padding-bottom:18px;border-bottom:1px solid var(--skr-rule);
}
.skr-c-flabel{
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--skr-text-3);margin-right:4px;
}
.skr-c-chip{
  font:inherit;font-size:13px;font-weight:600;line-height:1.2;
  padding:7px 14px;border:1px solid var(--skr-rule);border-radius:2px;
  background:var(--skr-surface-1);color:var(--skr-text-1);cursor:pointer;
}
.skr-c-chip:hover{border-color:var(--skr-text-3);}
.skr-c-chip[aria-pressed="true"]{
  background:var(--skr-accent);border-color:var(--skr-accent);color:#fff;
}
.skr-c-chip:focus-visible{outline:2px solid var(--skr-accent);outline-offset:2px;}
.skr-c-count{
  margin-left:auto;font-size:12px;color:var(--skr-text-3);
  font-variant-numeric:tabular-nums;
}

/* ---------- grid ---------- */
.skr-c-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));
  gap:16px;
}

.skr-c-card{
  display:flex;flex-direction:column;
  background:var(--skr-surface-1);
  border:1px solid var(--skr-rule);border-radius:4px;overflow:hidden;
  transition:border-color .15s ease, transform .15s ease;
}
.skr-c-card:hover{border-color:var(--skr-text-3);transform:translateY(-2px);}
.skr-c-card[hidden]{display:none;}

.skr-c-main{padding:16px 16px 0;}
.skr-c-area{
  font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--skr-text-3);margin-bottom:5px;
}
.skr-c-title{
  margin:0;font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em;
}
.skr-c-title a{text-decoration:none;color:inherit;}
.skr-c-card:hover .skr-c-title a{color:var(--skr-accent);}

/* ---------- mini elevation profile ---------- */
.skr-c-sparkwrap{padding:14px 16px 0;}
.skr-c-spark{display:block;width:100%;height:46px;overflow:visible;}
.skr-c-spark-area{fill:var(--skr-text-1);opacity:.09;stroke:none;}
.skr-c-spark-line{
  fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.skr-c-spark-0{stroke:var(--skr-slope-0);}
.skr-c-spark-1{stroke:var(--skr-slope-1);stroke-width:2.4;}
.skr-c-spark-2{stroke:var(--skr-slope-2);stroke-width:2.4;}
.skr-c-spark-3{stroke:var(--skr-slope-3);stroke-width:2.8;}
.skr-c-sparklabel{
  display:block;margin-top:6px;padding-bottom:12px;
  border-bottom:1px solid var(--skr-rule);
  font-size:10px;letter-spacing:.03em;color:var(--skr-text-3);
  font-variant-numeric:tabular-nums;
}

/* ---------- stats ---------- */
.skr-c-panel{margin-top:12px;}
.skr-c-stats{
  list-style:none;margin:0;padding:14px 16px 16px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:11px 10px;
}
.skr-c-stats-empty{
  display:block;margin:10px 0 0;padding:12px 16px;
  border-top:1px solid var(--skr-rule);
}
.skr-c-stats li{display:flex;flex-direction:column;gap:1px;min-width:0;}
.skr-c-k{
  font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--skr-text-3);white-space:nowrap;
}
.skr-c-v{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.skr-c-na{color:var(--skr-text-3);font-weight:400;font-size:12.5px;}

/* ---------- card foot ---------- */
.skr-c-foot{
  margin-top:auto;padding:10px 16px;
  border-top:1px solid var(--skr-rule);background:var(--skr-surface-2);
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.skr-c-tag{
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 7px;border:1px solid var(--skr-rule);border-radius:2px;
  color:var(--skr-text-3);white-space:nowrap;background:var(--skr-surface-1);
}
.skr-c-tag-gpx{border-color:var(--skr-accent);color:var(--skr-accent);}
.skr-c-tag-rec{border-color:var(--skr-text-2);color:var(--skr-text-2);}
.skr-c-tag-drawn{border-style:dashed;}
.skr-c-go{
  margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--skr-accent);text-decoration:none;white-space:nowrap;
}
.skr-c-go:hover{text-decoration:underline;}

.skr-c-angle{display:inline-flex;align-items:baseline;gap:6px;}
.skr-c-angle::before{
  content:"";width:9px;height:9px;border-radius:1px;flex:none;
  transform:translateY(-1px);background:var(--skr-slope-0);
}
.skr-c-angle-1::before{background:var(--skr-slope-1);}
.skr-c-angle-2::before{background:var(--skr-slope-2);}
.skr-c-angle-3::before{background:var(--skr-slope-3);}

/* ---------- slope key ---------- */
.skr-c-ramp{
  display:flex;flex-wrap:wrap;gap:14px;align-items:center;
  margin-top:22px;padding-top:16px;border-top:1px solid var(--skr-rule);
  font-size:12px;color:var(--skr-text-3);
}
.skr-c-ramp span{display:inline-flex;align-items:center;gap:7px;}
.skr-c-ramp i{width:11px;height:11px;border-radius:1px;display:inline-block;}
.skr-c-sw0{background:var(--skr-slope-0);}
.skr-c-sw1{background:var(--skr-slope-1);}
.skr-c-sw2{background:var(--skr-slope-2);}
.skr-c-sw3{background:var(--skr-slope-3);}
.skr-c-rampnote{max-width:56ch;line-height:1.5;}

/* ---------- archive header ---------- */
.skr-archive .skr-c-head{max-width:70ch;margin:0 0 26px;}
.skr-c-eyebrow{
  margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#2a78d6;
}
.skr-c-h1{margin:0 0 14px;line-height:1.1;}
.skr-c-intro{margin:0;line-height:1.6;}

@media (max-width:420px){
  .skr-c-list{grid-template-columns:1fr;}
  .skr-c-count{margin-left:0;width:100%;}
}