/* Safari tour hero (/safari/{land}/{tour}): the /safari cluster's photo hero
   (soft scrim, crumbs over the photo, counted pills, two calls) for one
   tour. Tokens are the house ones: ink #111214, milk #EDE3D5, orange
   #FF6A00 for the call and the sun only. */

.sft-hero {
    position: relative;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
    background: #111214;
}
.sft-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
/* The photograph carries the page: the scrim shades the copy corner and
   the foot, never the whole frame. */
.sft-hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(17,18,20,.58) 0%, rgba(17,18,20,.24) 45%, rgba(17,18,20,0) 100%),
        linear-gradient(to bottom, rgba(17,18,20,.06) 0%, rgba(17,18,20,.28) 55%, rgba(17,18,20,.78) 100%);
}
.sft-hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 140px 24px 56px;
    box-sizing: border-box;
}

/* Breadcrumbs over the photo: milk at falling alpha */
.sft-hero__crumbs {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(237, 227, 213, .55);
    margin-bottom: 18px;
}
.sft-hero__crumb-link {
    color: rgba(237, 227, 213, .72);
    text-decoration: none;
    transition: color .18s;
}
.sft-hero__crumb-link:hover { color: #EDE3D5; }
.sft-hero__crumb-link:focus-visible { outline: 2px solid #FF6A00; outline-offset: 3px; }
.sft-hero__crumb-sep { margin: 0 8px; opacity: .5; }
.sft-hero__crumb-current { color: rgba(237, 227, 213, .92); }

/* Eyebrow: Safari · 57 Tage · Overland-Truck */
.sft-hero__eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #FF6A00;
}
.sft-hero__eyebrow-sep { color: rgba(237,227,213,.5); }

.sft-hero__h1 {
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
    text-transform: uppercase;
    color: #EDE3D5;
    margin: 0 0 20px;
    max-width: 900px;
    text-shadow: 0 2px 24px rgba(0,0,0,.35);
}
.sft-hero__h1--long {
    font-size: clamp(30px, 4.4vw, 52px);
}
.sft-hero__sub {
    font-size: clamp(15px, 1.6vw, 19px);
    line-height: 1.6;
    color: rgba(237,227,213,.82);
    margin: 0 0 28px;
    max-width: 640px;
}

/* Pills */
.sft-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}
.sft-hero__pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(237,227,213,.3);
    border-radius: 2px;
    color: rgba(237,227,213,.85);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
}
.sft-hero__pill b { font-weight: 700; color: #EDE3D5; }
.sft-hero__pill--link {
    text-decoration: none;
    cursor: pointer;
    transition: border-color .18s, background .18s, color .18s;
}
.sft-hero__pill--link:hover {
    border-color: #FF6A00;
    background: rgba(255, 106, 0, .14);
    color: #EDE3D5;
}
.sft-hero__pill--link:focus-visible { outline: 2px solid #FF6A00; outline-offset: 3px; }
.sft-hero__pill--paw .sft-ic { width: 16px; height: 16px; color: #FF6A00; }
.sft-hero__pill--price { border-color: rgba(255,106,0,.55); font-weight: 700; color: #EDE3D5; }

/* Calls */
.sft-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.sft-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 24px;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}
.sft-hero__btn--primary {
    background: #FF6A00;
    color: #fff;
    border: 1px solid #FF6A00;
}
.sft-hero__btn--primary:hover { background: #e55e00; border-color: #e55e00; }
.sft-hero__btn--ghost {
    background: rgba(17,18,20,.25);
    color: #EDE3D5;
    border: 1px solid rgba(237,227,213,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sft-hero__btn--ghost:hover { background: #EDE3D5; color: #111214; border-color: #EDE3D5; }
.sft-hero__btn:focus-visible { outline: 2px solid #FF6A00; outline-offset: 3px; }

/* A section a hero pill or call scrolls to keeps clear of the fixed header */
#sft-facts, #sft-wild, #tour-overview { scroll-margin-top: 90px; }

@media (max-width: 1024px) {
    .sft-hero__inner { padding: 120px 24px 48px; }
}
@media (max-width: 768px) {
    .sft-hero { min-height: 92svh; }
    .sft-hero__inner { padding: 110px 20px 40px; }
    .sft-hero__sub {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 22px;
    }
}
@media (max-width: 600px) {
    .sft-hero__eyebrow { font-size: 10px; gap: 8px; }
    .sft-hero__pill { height: 32px; padding: 0 12px; font-size: 12px; }
    .sft-hero__cta { flex-direction: column; }
    .sft-hero__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .sft-hero__btn, .sft-hero__pill--link, .sft-hero__crumb-link { transition: none; }
}