/* ==========================================================================
   Best Trek to Machu Picchu: long-form editorial composition
   ========================================================================== */

/* The page keeps the established 7px shape and shared trekking palette. */
.best-trek-page {
    --best-trek-ink: #171717;
    --best-trek-copy: #5d5d5d;
    --best-trek-red: #f10100;
    --best-trek-red-deep: #b90201;
    --best-trek-line: #e8e8e4;
    --best-trek-soft: #f7f7f5;
    --best-trek-warm: #fffaf5;
    --best-trek-radius: 7px;
}

/* The long hero title keeps a readable editorial measure on every slide. */
.best-trek-page .tour-category-hero-title {
    max-width: 13ch;
    text-transform: none;
}

/* Chapter links remain on one line inside the horizontally scrollable shared nav. */
.best-trek-nav .welcome-nav-link {
    white-space: nowrap;
}

/* The long chapter sequence starts at the first item while retaining horizontal scroll. */
.best-trek-nav .welcome-nav-list {
    justify-content: flex-start;
}

/* The opening answer is intentionally narrower than the surrounding page. */
.best-trek-reading {
    max-width: 1040px;
}

/* Exact opening paragraphs maintain the design system's long-form reading measure. */
.best-trek-answer-copy {
    max-width: 74ch;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
}

/* The unique-trail chapter pairs a tall image with the complete nine-point argument. */
.best-trek-unique {
    background-color: var(--best-trek-warm);
}

/* The unique-trail grid gives dense copy more width than its supporting image. */
.best-trek-unique-grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.78fr) minmax(0, 1.22fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 7rem);
}

/* Tall Inca Trail photography anchors the long source section without becoming a card. */
.best-trek-unique-media {
    position: sticky;
    top: 112px;
    min-height: 720px;
    overflow: hidden;
    margin: 0;
    border-radius: var(--best-trek-radius);
    background-color: var(--best-trek-soft);
}

/* The unique-trail image fills its portrait frame cleanly. */
.best-trek-unique-media img {
    width: 100%;
    height: 100%;
    min-height: 720px;
    object-fit: cover;
}

/* The complete source argument remains within an optimal reading width. */
.best-trek-unique-copy {
    max-width: 76ch;
}

/* Reasons read as a continuous editorial sequence separated only by horizontal rhythm. */
.best-trek-reason-list {
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* Individual reasons use generous line height and no side accent border. */
.best-trek-reason-list p {
    margin: 0;
    color: var(--best-trek-copy);
    font-size: 1rem;
    line-height: 1.78;
}

/* Thin horizontal rules distinguish consecutive reasons without boxing the prose. */
.best-trek-reason-list p + p {
    padding-top: 1.35rem;
    margin-top: 1.35rem;
    border-top: 1px solid var(--best-trek-line);
}

/* The season chapter becomes the page's single immersive dark editorial spread. */
.best-trek-season {
    background-color: var(--best-trek-ink);
    color: #ffffff;
}

/* Season copy and photography share an asymmetrical two-column layout. */
.best-trek-season-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

/* Season body copy uses warm white for readable contrast on ink. */
.best-trek-season-prose p {
    color: rgba(255, 255, 255, 0.84);
}

/* Season photography uses the shared corner language and a decisive landscape crop. */
.best-trek-season-media {
    min-height: 540px;
    overflow: hidden;
    margin: 0;
    border-radius: var(--best-trek-radius);
    background-color: #252525;
}

/* Season imagery fills its frame without distortion. */
.best-trek-season-media img {
    width: 100%;
    height: 100%;
    min-height: 540px;
    object-fit: cover;
}

/* Preparation introduction centers the two supplied framing paragraphs. */
.best-trek-preparation-heading {
    max-width: 1040px;
    margin: 0 auto;
}

/* The preparation preface keeps a comfortable long-form line length. */
.best-trek-preparation-intro {
    max-width: 74ch;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
}

/* Tip groups create a paced editorial sequence instead of a wall of equal cards. */
.best-trek-tip-groups {
    display: grid;
    gap: clamp(4rem, 8vw, 7rem);
    margin-top: clamp(4rem, 8vw, 7rem);
}

/* Every tip group pairs route photography with its exact source advice. */
.best-trek-tip-group {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
}

/* Alternating groups reverse the visual order without changing document semantics. */
.best-trek-tip-group.is-reversed .best-trek-tip-media {
    order: 2;
}

/* Tip photography uses consistent landscape frames and the global 7px radius. */
.best-trek-tip-media {
    min-height: 430px;
    overflow: hidden;
    margin: 0;
    border-radius: var(--best-trek-radius);
    background-color: var(--best-trek-soft);
}

/* Advice imagery fills the frame and prioritizes the trail environment. */
.best-trek-tip-media img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover;
}

/* Advice copy maintains the same readable measure across groups. */
.best-trek-tip-copy {
    max-width: 74ch;
}

/* Exact tip headings use the local display face and a clear hierarchy. */
.best-trek-tip-item h3 {
    margin: 0 0 0.85rem;
    color: var(--best-trek-ink);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.45rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.15;
}

/* Tip paragraphs remain unboxed and readable. */
.best-trek-tip-item p {
    margin: 0;
    color: var(--best-trek-copy);
    font-size: 1rem;
    line-height: 1.75;
}

/* Multiple paragraphs within one tip retain a compact internal rhythm. */
.best-trek-tip-item p + p {
    margin-top: 1rem;
}

/* Horizontal separation distinguishes adjacent tips without forbidden side rails. */
.best-trek-tip-item + .best-trek-tip-item {
    padding-top: 1.75rem;
    margin-top: 1.75rem;
    border-top: 1px solid var(--best-trek-line);
}

/* The two winning Inca Trail cards sit on a warm editorial surface. */
.best-trek-primary-tours {
    background-color: var(--best-trek-warm);
}

/* Tour-heading copy remains centered above its literal source link list. */
.best-trek-tour-heading,
.best-trek-alternatives-heading {
    max-width: 940px;
    margin: 0 auto;
}

/* The original lists become compact centered route links without altering their wording. */
.best-trek-source-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.5rem;
    padding: 0;
    margin: 2rem 0 0;
    list-style: none;
}

/* Four alternative source links receive enough measure to wrap naturally. */
.best-trek-source-links.is-wide {
    max-width: 880px;
    margin-right: auto;
    margin-left: auto;
}

/* Route links use underlines and deep red for accessible editorial emphasis. */
.best-trek-source-links a {
    color: var(--best-trek-red-deep);
    font-weight: 800;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.24em;
}

/* Two primary tours use generous centered cards. */
.best-trek-primary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 920px;
    margin-right: auto;
    margin-left: auto;
}

/* The four permit alternatives use the wider card collection rhythm. */
.best-trek-alternatives {
    background-color: var(--best-trek-soft);
}

/* Alternative tours display four across on wide screens. */
.best-trek-alternative-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Alternative-card actions stay compact and readable inside the four-column grid. */
.best-trek-alternative-grid .tour-best-card-button {
    flex-shrink: 0;
    padding-right: 0.85rem;
    padding-left: 0.85rem;
    font-size: 0.78rem;
    white-space: nowrap;
}

/* Tablet layouts collapse editorial splits and use two tour columns. */
@media (max-width: 1199.98px) {
    .best-trek-unique-grid,
    .best-trek-season-grid,
    .best-trek-tip-group {
        grid-template-columns: 1fr;
    }

    /* Sticky portrait media becomes part of the natural tablet reading flow. */
    .best-trek-unique-media {
        position: static;
        min-height: 620px;
    }

    /* Tablet unique-trail imagery keeps a stable editorial crop. */
    .best-trek-unique-media img {
        min-height: 620px;
    }

    /* Reversed media returns to source order once groups stack. */
    .best-trek-tip-group.is-reversed .best-trek-tip-media {
        order: initial;
    }

    /* Four alternatives become a balanced two-column tablet grid. */
    .best-trek-alternative-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile layouts use shorter images and one tour card per row. */
@media (max-width: 767.98px) {
    .best-trek-unique-media,
    .best-trek-unique-media img,
    .best-trek-season-media,
    .best-trek-season-media img,
    .best-trek-tip-media,
    .best-trek-tip-media img {
        min-height: 400px;
    }

    /* Primary and alternative tours collapse to one complete card per row. */
    .best-trek-primary-grid,
    .best-trek-alternative-grid {
        grid-template-columns: 1fr;
    }

    /* Literal route lists stack cleanly for compact touch targets. */
    .best-trek-source-links {
        display: grid;
        justify-content: stretch;
        text-align: center;
    }
}