/* Alpine passes hub: "Die höchsten Alpenpässe". Bars from 600 px up, ink only. */

.ap-rk { list-style: none; margin: 0; padding: 0; }
.ap-rk__row {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: center;
    padding: 10px 0; border-bottom: 1px solid rgba(17, 18, 20, .08);
}
.ap-rk__n { font-size: 13px; font-weight: 800; color: var(--ap-muted); font-variant-numeric: tabular-nums; }
.ap-rk__name { font-size: 15px; font-weight: 700; }
.ap-rk__name:hover { text-decoration: underline; text-decoration-color: var(--ap-or); text-underline-offset: 3px; }
.ap-rk__bar { display: none; position: relative; height: 10px; border-radius: 2px; background: rgba(17, 18, 20, .08); }
.ap-rk__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 2px; background: var(--ap-ink); }
.ap-rk__h { font-size: 15px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (min-width: 600px) {
    .ap-rk__row { grid-template-columns: 28px minmax(0, 210px) minmax(0, 1fr) 86px; gap: 14px; }
    .ap-rk__bar { display: block; }
}

/* Thumbnails: every row carries its pass's photo. */
.ap-rk__row { grid-template-columns: 22px 56px minmax(0, 1fr) auto; }
.ap-rk__thumb { display: block; width: 56px; height: 42px; overflow: hidden; border-radius: 4px; background: var(--ap-closed); }
.ap-rk__thumb picture { display: block; width: 100%; height: 100%; }
.ap-rk__img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 600px) {
    .ap-rk__row { grid-template-columns: 28px 64px minmax(0, 200px) minmax(0, 1fr) 86px; }
    .ap-rk__thumb { width: 64px; height: 46px; }
}

/* The highest pass as a photo that fills the left column (.ap-fill). */
.ap-rk__feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 18, 20, .82) 0%, rgba(17, 18, 20, .2) 55%, rgba(17, 18, 20, 0) 100%); }
.ap-rk__feature .ap-fill__img { transition: transform .45s ease; }
.ap-rk__feature:hover .ap-fill__img { transform: scale(1.04); }
.ap-rk__feature-text { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; display: flex; flex-direction: column; gap: 2px; color: #EDE3D5; }
.ap-rk__feature-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #FF8A3D; }
.ap-rk__feature-text b { font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; }
.ap-rk__feature-text > span:last-child { font-size: 13px; color: rgba(237, 227, 213, .82); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .ap-rk__feature .ap-fill__img, .ap-rk__feature:hover .ap-fill__img { transition: none; transform: none; }
}