/* Alpine pass page (/alpenpaesse/{slug}): the hero. Tokens and the band rhythm come from
   alpine-hub-hero.css (ap-). docs/seo/alpine-passes/PASS-DESIGN.md 4.1 and 9. Prefix pp-. */

.pp-hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 440px; padding: 96px 0 32px;
    background: #2a2b2e;
}
.pp-hero--plain { background: #F5EDDE url('/images/backgrounds/6a0acbec-9e6a-463e-a7e9-0ae96154faa9.webp') center / cover no-repeat; }
.pp-hero picture { position: absolute; inset: 0; z-index: -2; display: block; }
.pp-hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; }
.pp-hero__scrim {
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(to top, rgba(17, 18, 20, .82) 0%, rgba(17, 18, 20, .35) 55%, rgba(17, 18, 20, .15) 100%);
}
.pp-hero__inner { width: 100%; }

.pp-hero__h1 {
    margin: 0 0 10px;
    font-size: clamp(36px, 6vw, 72px); font-weight: 800; line-height: 1.03; letter-spacing: -.025em;
    text-transform: uppercase; color: #EDE3D5; text-shadow: 0 2px 24px rgba(0, 0, 0, .35);
    overflow-wrap: anywhere; hyphens: auto;
}
.pp-hero--plain .pp-hero__h1, .pp-hero--plain .pp-hero__alt, .pp-hero--plain .pp-pills li { color: var(--ap-ink); text-shadow: none; }
.pp-hero__alt { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.5; color: rgba(237, 227, 213, .85); }

.pp-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.pp-pills li {
    padding: 8px 11px;
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #EDE3D5;
    border: 1px solid rgba(237, 227, 213, .45); border-radius: 2px; background: rgba(17, 18, 20, .28);
}

/* The credit: under the photo on phones (a light caption line), in the corner from 900. */
.pp-hero__credit {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 6px var(--oc-gutter, 20px);
    font-size: 11px; line-height: 1.4; color: rgba(237, 227, 213, .6);
}
.pp-hero__credit a { text-decoration: underline; text-underline-offset: 2px; }
.ap-page .pp-hero__credit a:hover { color: #EDE3D5; }

@media (min-width: 600px) {
    .pp-hero__alt { font-size: 16px; }
}

@media (min-width: 900px) {
    .pp-hero { min-height: 560px; padding: 132px 0 44px; }
    .pp-hero__credit { left: auto; right: 12px; bottom: 8px; padding: 0; max-width: 60%; text-align: right; }
}