/* Page-level fixes for the Rakaposhi expedition pages.

   Deliberately NOT in grid-center.css: the first rule below would break the
   other nine expeditions. On those pages <aside class="enq"> is a real child
   of .exp__body-grid and fills the 320px sidebar column. On these two pages it
   was moved inside .exp__body, so the column the grid still reserves is empty
   and drags every heading 184px left of the page centre. Collapsing it to one
   column puts the content back in the middle -- and hands the timeline the
   full 920px instead of 768px. */

div.container.exp__body-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}
/* width:100% matters. As a grid item, margin-inline:auto suppresses the
   default stretch, so without it the column shrinks to fit-content -- 704px on
   the text-only expeditions vs 920px on Rakaposhi. Centred either way, but the
   pages would not match each other. */
div.exp__body[data-astro-cid-dp5z3flg] {
    width: 100%;
    max-width: 920px;
    margin-inline: auto;
}

/* On the other nine expeditions the enquiry aside IS a grid child filling the
   sidebar column. With the column gone it flows below the content, so match
   the content width and drop the sticky, which only made sense in a column. */
.exp__body-grid > .enq {
    max-width: 920px;
    margin: 2.5rem auto 0;
    position: static;
}

/* ---- in-page anchor nav, centred ----------------------------------------
   "safe" keeps the first link reachable instead of scrolled off-screen when
   the row overflows on narrow screens; older browsers drop it and keep the
   plain centre above. */
.exp__anchors[data-astro-cid-dp5z3flg] ul[data-astro-cid-dp5z3flg] {
    justify-content: center;
    justify-content: safe center;
}

/* ---- highlights as full-width stripes ------------------------------------
   Was a two-up grid of boxes. These selectors have to carry the astro cid to
   outrank the two-column rule in grid-center.css and the centred/top-border
   rule in exp-days.css. */

ul.exp__highlights[data-astro-cid-dp5z3flg] {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    max-width: none;
    width: 100%;
    margin-top: 1.5rem;
}

ul.exp__highlights[data-astro-cid-dp5z3flg] > li[data-astro-cid-dp5z3flg] {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .85rem;
    text-align: left;
    background: var(--color-ivory-tint);
    border: 0;
    border-left: 4px solid var(--color-sienna);
    border-radius: 10px;
    padding: .95rem 1.35rem;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--color-ink);
    transition: transform .2s ease, box-shadow .2s ease;
}

/* a small sienna dot so a long stripe still has a starting point for the eye */
ul.exp__highlights[data-astro-cid-dp5z3flg] > li[data-astro-cid-dp5z3flg]::before {
    content: "";
    flex: none;
    width: .45rem;
    height: .45rem;
    border-radius: 50%;
    background: var(--color-sienna);
    opacity: .7;
}

ul.exp__highlights[data-astro-cid-dp5z3flg] > li[data-astro-cid-dp5z3flg]:hover {
    transform: translateX(3px);
    box-shadow: var(--shadow-soft);
}

@media (max-width: 600px) {
    ul.exp__highlights[data-astro-cid-dp5z3flg] > li[data-astro-cid-dp5z3flg] {
        padding: .8rem 1rem;
        font-size: .9rem;
    }
}

/* ---- highlight stripes: shorter measure --------------------------------
   They were running the full 920px body width, which made each one a very
   long line. Capping the list keeps the stripe form but a readable length. */
ul.exp__highlights[data-astro-cid-dp5z3flg] {
    max-width: 42rem;
    margin-inline: auto;
}

/* ---- departures dropdown, under the timeline pill ---------------------- */
.tl-pill--btn {
    cursor: pointer;
    font: inherit;
    border: 1px solid var(--color-rule);
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}
.tl-pill--btn:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px) }
.tl-pill--btn:focus-visible { outline: 3px solid var(--color-sage-deep); outline-offset: 2px }
.tl-pill__caret {
    width: .7rem; height: .7rem; flex: none;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform .25s ease;
}
.tl-pill--btn[aria-expanded="true"] .tl-pill__caret { transform: rotate(-135deg) translate(-2px, -2px) }

.tl-dates {
    max-width: 30rem;
    margin: .9rem auto 0;
    text-align: left;
    background: #fff;
    border: 1px solid var(--color-rule);
    border-radius: 14px;
    box-shadow: var(--shadow-lift);
    overflow: hidden;
}
.tl-dates[hidden] { display: none }
.tl-dates .exp__date {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: .7rem 1rem;
    border-bottom: 1px solid var(--color-ivory-tint);
    flex: none; min-width: 0; width: auto;
}
.tl-dates .exp__date:last-child { border-bottom: 0 }
.tl-dates .exp__date-range { font-size: .9rem; font-weight: 600; color: var(--color-ink) }
.tl-dates .btn { padding: .35rem .85rem; font-size: .78rem; white-space: nowrap }

/* ---- pricing ------------------------------------------------------------ */
.pricing { max-width: 46rem; margin-inline: auto; margin-top: 1.5rem }
.pricing__head {
    text-align: center;
    background: var(--color-ivory-tint);
    border-radius: 14px;
    padding: 1.4rem 1.25rem;
}
.pricing__amount {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 3.4vw, 2.8rem);
    line-height: 1.1; color: var(--color-ink); margin: 0;
}
.pricing__flights { margin: .45rem 0 0; font-size: .95rem; color: var(--color-ink-soft) }
.pricing__single {
    margin: .8rem 0 0; font-size: .86rem; color: var(--color-sage-deep); font-weight: 600;
}
.pricing__cols {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem; margin-top: 1.5rem;
}
.pricing__col {
    background: #fff; border: 1px solid var(--color-rule);
    border-radius: 14px; padding: 1.15rem 1.3rem;
}
.pricing__col h3 {
    margin: 0 0 .7rem; font-size: .8rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase;
}
.pricing__col--in h3 { color: var(--color-sage-deep) }
.pricing__col--out h3 { color: var(--color-sienna) }
.pricing__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem }
.pricing__list li {
    position: relative; padding-left: 1.4rem;
    font-size: .9rem; line-height: 1.5; color: var(--color-ink-soft);
}
.pricing__list li::before {
    position: absolute; left: 0; top: -.02em; font-weight: 700;
}
.pricing__col--in .pricing__list li::before { content: "✓"; color: var(--color-sage) }
.pricing__col--out .pricing__list li::before { content: "×"; color: var(--color-sienna) }
.pricing__cta { text-align: center; margin-top: 1.6rem }

/* the hero gets a second button beside Register */
.exp__hero-ctas { display: flex; gap: .7rem; flex-wrap: wrap; align-items: center }

@media (max-width: 600px) {
    .pricing__cols { grid-template-columns: 1fr }
    .tl-dates .exp__date { flex-wrap: wrap; gap: .5rem }
}

/* The lifted departures list keeps the grid/flex and card padding it had as a
   full section. Inside the dropdown it should be a plain compact list, and
   capped so nine departures do not push the timeline far down the page. */
.tl-dates div.exp__dates[data-astro-cid-dp5z3flg] {
    display: block;
    gap: 0;
    max-width: none;
    margin: 0;
}
.tl-dates div.exp__date[data-astro-cid-dp5z3flg] {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-ivory-tint);
    border-radius: 0;
    padding: .65rem 1rem;
}
.tl-dates div.exp__date[data-astro-cid-dp5z3flg]:last-child { border-bottom: 0 }
.tl-dates { max-height: 21rem; overflow-y: auto }

/* The hero pricing button sits on a dark photo. btn--ghost-light only exists
   in HomePage.css (and is scoped to the homepage component id), which is not
   loaded here, so the button fell back to .btn--ghost's dark ink and the label
   was invisible. Give the hero pair its own light ghost treatment. */
.exp__hero-ctas .btn--ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .6);
}
.exp__hero-ctas .btn--ghost:hover,
.exp__hero-ctas .btn--ghost:focus-visible {
    background: rgba(255, 255, 255, .16);
    border-color: #fff;
    color: #fff;
}

/* ---- enquiry block ------------------------------------------------------
   This aside used to sit in a 320px sidebar column, so its heading and lead
   were sized for a narrow rail. Now that the column is gone and it runs the
   full 920px body width, both lines were too small for the space. */
.enq__title[data-astro-cid-q3wqv7qa] {
    font-size: clamp(1.55rem, 1.9vw, 2.05rem);
    line-height: 1.2;
    margin: .4rem 0 .55rem;
}
.enq__sub[data-astro-cid-q3wqv7qa] {
    font-size: clamp(.98rem, 1.05vw, 1.12rem);
    line-height: 1.55;
}

/* ---- places list --------------------------------------------------------
   Replaces the highlight stripes on this trip: a centred run of dot + name
   chips that wrap, matching the reference layout. Uses the brand sage rather
   than a raw green so it sits with the rest of the page. */
ul.exp__places[data-astro-cid-dp5z3flg] {
    list-style: none;
    margin: 1.75rem auto 0;
    padding: 0;
    max-width: 46rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem 1.5rem;
}
ul.exp__places[data-astro-cid-dp5z3flg] > li[data-astro-cid-dp5z3flg] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: clamp(.95rem, 1.05vw, 1.08rem);
    line-height: 1.4;
    color: var(--color-ink);
    white-space: nowrap;
}
ul.exp__places[data-astro-cid-dp5z3flg] > li[data-astro-cid-dp5z3flg]::before {
    content: "";
    flex: none;
    width: .62rem;
    height: .62rem;
    border-radius: 50%;
    background: var(--color-sage);
}
@media (max-width: 600px) {
    ul.exp__places[data-astro-cid-dp5z3flg] { gap: .5rem 1rem }
    ul.exp__places[data-astro-cid-dp5z3flg] > li[data-astro-cid-dp5z3flg] { white-space: normal }
}

/* Sentence-length variant. The base list uses nowrap so short place names
   never break mid-name; the other expeditions' highlights are 60-90 character
   sentences, which must be allowed to wrap or they overflow the container.
   The dot gets a top offset so it aligns with the first line, not the middle. */
ul.exp__places--text[data-astro-cid-dp5z3flg] {
    max-width: 52rem;
    gap: .8rem 1.6rem;
}
ul.exp__places--text[data-astro-cid-dp5z3flg] > li[data-astro-cid-dp5z3flg] {
    white-space: normal;
    align-items: flex-start;
    text-align: left;
    max-width: 100%;
}
ul.exp__places--text[data-astro-cid-dp5z3flg] > li[data-astro-cid-dp5z3flg]::before {
    margin-top: .42em;
}

/* ---- departures pill: bigger, and obviously a control -------------------
   It was a small white chip with a hairline border, easy to read as a label
   rather than something you can press. Filled, larger type and a resting
   pulse make it the clear next action under the itinerary heading.
   Overrides the base .tl-pill in exp-timeline.css, so it comes after it. */
.tl-intro .tl-pill--btn {
    gap: .7rem;
    padding: .95rem 1.75rem;
    font-size: 1.06rem;
    font-weight: 700;
    letter-spacing: .005em;
    color: #fff;
    background: linear-gradient(135deg, var(--color-sage-deep), var(--color-sage));
    border: 0;
    border-radius: var(--radius-pill);
    box-shadow: 0 10px 26px rgba(74, 99, 86, .30), inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: box-shadow .22s ease, transform .22s ease, filter .22s ease;
}
.tl-intro .tl-pill--btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 16px 34px rgba(74, 99, 86, .38), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.tl-intro .tl-pill--btn:active { transform: translateY(0); }
.tl-intro .tl-pill--btn:focus-visible {
    outline: 3px solid var(--color-sienna);
    outline-offset: 3px;
}

/* The dot sat in sage, which disappears against the filled background. */
.tl-intro .tl-pill--btn .tl-pill__dot {
    width: .6rem; height: .6rem;
    background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .65);
    animation: tl-pill-pulse 2.6s ease-out infinite;
}
@keyframes tl-pill-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .65); }
    70%  { box-shadow: 0 0 0 .55rem rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* Once it is open the pulse has done its job. */
.tl-intro .tl-pill--btn[aria-expanded="true"] .tl-pill__dot { animation: none; }

.tl-intro .tl-pill--btn .tl-pill__caret {
    width: .82rem; height: .82rem;
    border-right-width: 2.5px;
    border-bottom-width: 2.5px;
}

/* Give it room so it does not crowd the lead line or the first day card. */
.tl-intro .tl-pill--btn { margin-top: .35rem; }
.tl-intro:has(.tl-pill--btn) { margin-bottom: 2.75rem; }

/* Wider panel to match, and a touch more room per row. */
.tl-dates { max-width: 34rem; }
.tl-dates .exp__date { padding: .85rem 1.15rem; }
.tl-dates .exp__date-range { font-size: .96rem; }
.tl-dates .btn { padding: .45rem 1rem; font-size: .82rem; }

@media (max-width: 640px) {
    .tl-intro .tl-pill--btn {
        width: min(100%, 22rem);
        justify-content: center;
        padding: 1rem 1.25rem;
        font-size: 1rem;
    }
}

/* A resting animation is exactly what reduced-motion asks you to drop. */
@media (prefers-reduced-motion: reduce) {
    .tl-intro .tl-pill--btn .tl-pill__dot { animation: none; }
    .tl-intro .tl-pill--btn { transition: none; }
    .tl-intro .tl-pill--btn:hover { transform: none; }
}