/* ============ Kilimanjaro guide & route pages ============
   Small overrides layered on top of safaris.css (shell, sidebar, prose,
   callouts, tables, FAQ) and kilimanjaro.css (the .kili-* content blocks).
   Only the bits that differ from the safari pages live here. */

/* Keep the article column free to shrink inside the safari shell. */
.kili-content {
    min-width: 0;
}

/* Page and section titles on these pages are deliberately NOT redefined
   here: they come from the global tokens (--fs-h1/--fs-h2/--fs-h3) so every
   page in the site shares one title scale. */

/* The kili blocks sit inside .safari-blocks, so give them the same
   readable measure the prose uses. */
.safari-blocks > .kili-stats,
.safari-blocks > .kili-features,
.safari-blocks > .kili-pricing-grid,
.safari-blocks > .kili-cost-lists,
.safari-blocks > .kili-route-grid,
.safari-blocks > .kili-route-carousel,
.safari-blocks > .kili-routes,
.safari-blocks > .kili-trio {
    margin: var(--space-6) 0;
}

/* Route carousel / tabs / pricing were built for the wide single column;
   inside the narrower article column they stay full width. */
.safari-blocks > .kili-route-carousel,
.safari-blocks > .kili-routes,
.safari-blocks > .kili-route-grid {
    max-width: 100%;
}

/* Route map: a schematic, so show the whole drawing (never crop it) and
   centre it in a light frame under the lead-in paragraph. */
.safari-map {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: var(--space-6) 0;
}

.safari-map-frame {
    display: block;
    width: 100%;
    max-width: 560px;
    padding: var(--space-4);
    background: #fff;
    border: 1px solid var(--border);
}

.safari-map-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.safari-map figcaption {
    max-width: 560px;
    margin-top: 0.7rem;
    font-size: 0.78rem;
    color: var(--moss);
    text-align: center;
}

/* ---------- Itinerary tabs + day timeline ---------- */
.safari-blocks > .kili-itin {
    margin: var(--space-6) 0;
}

/* One tab per itinerary length (e.g. 7-day / 8-day); they stretch evenly. */
.kili-itin-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.kili-itin-tab {
    flex: 1 1 220px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.85rem 1.2rem;
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--sand);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.kili-itin-tab i {
    color: var(--moss);
}

.kili-itin-tab:hover {
    color: var(--brand);
    border-color: var(--brand);
}

.kili-itin-tab.is-active {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
    color: #fff;
}

.kili-itin-tab.is-active i {
    color: #fff;
}

.kili-itin-panel[hidden] {
    display: none;
}

.kili-itin-note {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-small);
    color: var(--moss);
}

/* Day timeline: numbered circles down the left, joined by a vertical rule;
   the day title, detail, lunch line and photo sit to the right. */
.kili-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kili-day {
    display: flex;
    gap: var(--space-4);
}

.kili-day-rail {
    flex: 0 0 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.kili-day-num {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-dark);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1;
}

.kili-day-line {
    flex: 1;
    width: 2px;
    min-height: 1.5rem;
    margin-top: 0.4rem;
    background: var(--sand);
}

.kili-day:last-child .kili-day-line {
    display: none;
}

.kili-day-body {
    flex: 1 1 auto;
    min-width: 0;
    padding-bottom: var(--space-6);
}

.kili-day-title {
    margin: 0.15rem 0 0.55rem;
    font-size: 1.12rem;
    line-height: 1.35;
}

.kili-day-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.8rem;
}

.kili-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--sand);
    border-radius: 999px;
}

.kili-day-chip i {
    color: var(--brand);
}

.kili-day-text {
    margin: 0 0 0.9rem;
    line-height: 1.7;
}

.kili-day-lunch {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0 0 var(--space-4);
    padding: 0.6rem 0.85rem;
    font-size: var(--fs-small);
    background: var(--surface);
    border-left: 3px solid var(--brand);
}

.kili-day-lunch i {
    margin-top: 0.2rem;
    color: var(--brand);
}

.kili-day-lunch strong {
    color: var(--heading);
}

.kili-day-media {
    margin: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
}

.kili-day-media img {
    display: block;
    width: 100%;
    height: 240px;
    object-fit: cover;
}

@media (max-width: 640px) {
    .kili-day {
        gap: var(--space-3);
    }

    .kili-day-rail {
        flex-basis: 36px;
    }

    .kili-day-num {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .kili-day-media img {
        height: 180px;
    }

    .kili-itin-tab {
        flex-basis: 100%;
    }
}

/* ---------- Group departures in the article column ---------- */
/* The hub's departure picker, embedded on route pages: same cards, just
   left-aligned and tightened to sit inside the narrower prose measure. */
.safari-blocks > .kili-dep {
    margin: var(--space-5) 0 var(--space-6);
}

.safari-blocks .kili-dep-years,
.safari-blocks .kili-dep-months {
    justify-content: flex-start;
    margin-top: var(--space-4);
}

.safari-blocks .kili-dep-years {
    margin-top: 0;
}

.safari-blocks .kili-dep-card {
    gap: var(--space-3) var(--space-4);
}

.safari-blocks .kili-dep-dates {
    flex: 1 1 150px;
}