/* ==========================================================================
   Treks to Machu Picchu: local page surfaces and reading rhythm
   ========================================================================== */

/* The page extends the shared trekking tokens while preserving the 7px shape language. */
.treks-machu-page {
    --treks-machu-ink: #171717;
    --treks-machu-copy: #5d5d5d;
    --treks-machu-red: #f10100;
    --treks-machu-red-deep: #b90201;
    --treks-machu-line: #e8e8e4;
    --treks-machu-soft: #f7f7f5;
    --treks-machu-warm: #fffaf5;
    --treks-machu-radius: 7px;
}

/* The shared hero keeps the supplied page title readable over wide mountain photography. */
.treks-machu-page .tour-category-hero-title {
    max-width: 12ch;
    text-transform: none;
}

/* The source breadcrumb is restored as a quiet orientation line between hero and chapters. */
.treks-machu-breadcrumb {
    padding: 0.75rem 0;
    background-color: #ffffff;
    color: var(--treks-machu-copy);
    font-size: 0.82rem;
}

/* Breadcrumb text retains the exact source wording without extra decoration. */
.treks-machu-breadcrumb p {
    margin: 0;
}

/* The home link uses the deeper accessible brand red on white. */
.treks-machu-breadcrumb a {
    color: var(--treks-machu-red-deep);
    font-weight: 800;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

/* The sticky chapter rail keeps long source headings available without wrapping the page. */
.treks-machu-nav .welcome-nav-list {
    justify-content: center;
}

/* Navigation labels use the exact reference headings at a compact operational scale. */
.treks-machu-nav .welcome-nav-link {
    white-space: nowrap;
}

/* The opening argument retains an editorial measure despite the long supplied copy. */
.treks-machu-reading {
    max-width: 1040px;
}

/* Introductory paragraphs sit in a narrow reading column beneath the centered title. */
.treks-machu-intro-copy {
    max-width: 76ch;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
}

/* Inline links in the source copy remain unmistakable and keyboard-visible. */
.treks-machu-intro-copy a {
    color: var(--treks-machu-red-deep);
    font-weight: 800;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
}

/* The lifetime-adventure section pairs the full reference text with one decisive photograph. */
.treks-machu-story-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

/* The portrait frame echoes the original tall expedition photograph. */
.treks-machu-story-media {
    min-height: 680px;
    overflow: hidden;
    margin: 0;
    border-radius: var(--treks-machu-radius);
    background-color: var(--treks-machu-soft);
}

/* Story photography fills the editorial frame without distortion. */
.treks-machu-story-media img {
    width: 100%;
    height: 100%;
    min-height: 680px;
    object-fit: cover;
}

/* Long-form story text keeps a comfortable reading measure. */
.treks-machu-story-copy {
    max-width: 72ch;
}

/* The exact planning sequence becomes the page's single immersive dark passage. */
.treks-machu-steps {
    background-color: var(--treks-machu-ink);
    color: #ffffff;
}

/* Planning steps stay compact enough to read as one continuous promise. */
.treks-machu-steps-inner {
    max-width: 1000px;
}

/* Source step lines use spacing instead of decorative side rails or card borders. */
.treks-machu-steps-copy {
    max-width: 76ch;
    margin: clamp(2rem, 4vw, 3rem) auto 0;
    text-align: center;
}

/* Each supplied step remains visually distinct without changing its wording. */
.treks-machu-steps-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    line-height: 1.75;
}

/* Vertical rhythm separates consecutive exact source lines. */
.treks-machu-steps-copy p + p {
    margin-top: 1.15rem;
}

/* Reasons use a warm editorial surface to distinguish them from the tour collection. */
.treks-machu-reasons {
    background-color: var(--treks-machu-warm);
}

/* Each reason group alternates photography and text while remaining one continuous section. */
.treks-machu-reason-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 6rem);
    margin-top: clamp(3rem, 6vw, 5rem);
}

/* The second group reverses the editorial reading direction on wide screens. */
.treks-machu-reason-layout.is-reversed .treks-machu-reason-media {
    order: 2;
}

/* Reason photography uses the shared corner treatment and a stable landscape crop. */
.treks-machu-reason-media {
    min-height: 480px;
    overflow: hidden;
    margin: 0;
    border-radius: var(--treks-machu-radius);
    background-color: var(--treks-machu-soft);
}

/* The first reason image is slightly taller to balance two dense text passages. */
.treks-machu-reason-media.is-tall {
    min-height: 600px;
}

/* Reason images occupy their frames without stretching. */
.treks-machu-reason-media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

/* Reason copy stays open and borderless for long reading. */
.treks-machu-reason-copy {
    max-width: 74ch;
}

/* Each reason heading uses the established display voice. */
.treks-machu-reason-block h3 {
    margin: 0 0 1rem;
    color: var(--treks-machu-ink);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.55rem, 2.5vw, 2.15rem);
    font-weight: 500;
    line-height: 1.12;
}

/* Exact reference paragraphs use the standard readable body treatment. */
.treks-machu-reason-block p {
    margin: 0;
    color: var(--treks-machu-copy);
    font-size: 1rem;
    line-height: 1.75;
}

/* Spacing, rather than a boxed card, distinguishes adjacent reason blocks. */
.treks-machu-reason-block + .treks-machu-reason-block {
    padding-top: clamp(2rem, 4vw, 3rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--treks-machu-line);
}

/* The exact six-card collection uses three columns at desktop width. */
.treks-machu-tour-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The planning close uses a dark surface to keep the form and emergency details connected. */
.treks-machu-plan {
    background-color: var(--treks-machu-ink);
}

/* Form and emergency information share one responsive two-column composition. */
.treks-machu-plan-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    align-items: start;
    gap: clamp(2.5rem, 6vw, 6rem);
}

/* Planning headings and reference copy reverse cleanly on the dark surface. */
.treks-machu-plan .welcome-section-heading h2,
.treks-machu-plan .welcome-section-heading p {
    color: #ffffff;
}

/* The reusable form stacks exact reference fields with consistent spacing. */
.treks-machu-form {
    display: grid;
    gap: 1rem;
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* Two secondary planning fields share a compact row on larger screens. */
.treks-machu-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Every form group keeps its label and control in one readable unit. */
.treks-machu-form-field {
    display: grid;
    gap: 0.55rem;
}

/* Field labels remain clear against the dark planning surface. */
.treks-machu-form-field label {
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 900;
}

/* Planning controls use the shared white surface, border, and 7px radius. */
.treks-machu-form input,
.treks-machu-form textarea {
    width: 100%;
    min-height: 50px;
    padding: 0.85rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--treks-machu-radius);
    background-color: #ffffff;
    color: var(--treks-machu-ink);
    font: inherit;
}

/* The message field preserves comfortable vertical space. */
.treks-machu-form textarea {
    min-height: 132px;
    resize: vertical;
}

/* Focus states use the established expedition red without reducing contrast. */
.treks-machu-form input:focus,
.treks-machu-form textarea:focus {
    border-color: var(--treks-machu-red);
    outline: 3px solid rgba(241, 1, 0, 0.28);
    outline-offset: 2px;
}

/* The exact source action label sits on the primary red button. */
.treks-machu-form-submit {
    min-height: 50px;
    padding: 0.85rem 1.5rem;
    border: 0;
    border-radius: var(--treks-machu-radius);
    background-color: var(--treks-machu-red);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 900;
    transition: background-color 200ms ease, transform 200ms ease;
}

/* Button hover and focus make the form action visibly interactive. */
.treks-machu-form-submit:hover,
.treks-machu-form-submit:focus-visible {
    transform: translateY(-2px);
    background-color: var(--treks-machu-red-deep);
}

/* Emergency contact information remains one integrated image-led support surface. */
.treks-machu-contact {
    overflow: hidden;
    border-radius: var(--treks-machu-radius);
    background-color: #ffffff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}

/* Contact photography uses a wide crop above the exact source details. */
.treks-machu-contact > img {
    width: 100%;
    height: 330px;
    object-fit: cover;
}

/* The contact copy uses generous padding and no decorative side border. */
.treks-machu-contact-copy {
    padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Emergency title remains prominent without competing with the page heading. */
.treks-machu-contact-copy h3 {
    margin: 0 0 1rem;
    color: var(--treks-machu-ink);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.35rem, 2.2vw, 1.85rem);
    font-weight: 500;
    line-height: 1.2;
}

/* Exact emergency details retain their source line breaks and readable measure. */
.treks-machu-contact-copy p {
    margin: 0;
    color: var(--treks-machu-copy);
    font-size: 0.98rem;
    line-height: 1.8;
}

/* Contact email links use the deeper accessible red on white. */
.treks-machu-contact-copy a {
    color: var(--treks-machu-red-deep);
    font-weight: 800;
    overflow-wrap: anywhere;
}

/* Tablet layouts keep two tour cards while editorial splits collapse for reading. */
@media (max-width: 991.98px) {
    .treks-machu-story-grid,
    .treks-machu-reason-layout,
    .treks-machu-plan-grid {
        grid-template-columns: 1fr;
    }

    /* Reversed media returns to natural document order after the layout stacks. */
    .treks-machu-reason-layout.is-reversed .treks-machu-reason-media {
        order: initial;
    }

    /* Tablet tour collections retain two balanced columns. */
    .treks-machu-tour-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Emergency contact details do not exceed a readable centered width. */
    .treks-machu-contact {
        max-width: 720px;
        margin: 0 auto;
    }
}

/* Mobile layouts reduce image height and place every interactive unit in one column. */
@media (max-width: 767.98px) {
    .treks-machu-story-media,
    .treks-machu-story-media img,
    .treks-machu-reason-media,
    .treks-machu-reason-media.is-tall,
    .treks-machu-reason-media img {
        min-height: 420px;
    }

    /* Mobile form fields and tour cards use one uninterrupted column. */
    .treks-machu-form-row,
    .treks-machu-tour-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile navigation begins at the first exact section label. */
    .treks-machu-nav .welcome-nav-list {
        justify-content: flex-start;
    }
}

/* Reduced-motion users keep every state visible without movement. */
@media (prefers-reduced-motion: reduce) {
    .treks-machu-form-submit {
        transition: none;
    }

    /* Motion is removed while the deeper hover color remains available. */
    .treks-machu-form-submit:hover,
    .treks-machu-form-submit:focus-visible {
        transform: none;
    }
}