/* ==========================================================================
   Best Machu Picchu Tours: page tokens and global behavior
   ========================================================================== */

/* The page extends the established Andean editorial palette and 7px corners. */
.best-tours-page {
    --best-tours-ink: #171717;
    --best-tours-copy: #5c5b59;
    --best-tours-muted: #777672;
    --best-tours-red: #b90201;
    --best-tours-red-bright: #f10100;
    --best-tours-line: #e5e3de;
    --best-tours-soft: #f6f5f2;
    --best-tours-warm: #fff8f1;
    --best-tours-dark: #181817;
    --best-tours-radius: 7px;
    overflow: clip;
    background: #ffffff;
    color: var(--best-tours-copy);
}

/* Anchor targets stop below the sticky chapter navigation. */
.best-tours-page section[id] {
    scroll-margin-top: 72px;
}

/* Browser selection uses the page accent while preserving readable contrast. */
.best-tours-page ::selection {
    background: var(--best-tours-red);
    color: #ffffff;
}

/* Keyboard users receive one consistent focus treatment throughout the page. */
.best-tours-page a:focus-visible,
.best-tours-page button:focus-visible,
.best-tours-page input:focus-visible,
.best-tours-page textarea:focus-visible {
    border-radius: var(--best-tours-radius);
    outline: 3px solid rgba(185, 2, 1, 0.32);
    outline-offset: 3px;
}

/* Inline links stay easy to recognize inside long-form copy. */
.best-tours-reading-copy a,
.best-tours-editorial-copy a {
    color: var(--best-tours-red);
    font-weight: 750;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Editorial figures align cleanly with their paired text columns. */
.best-tours-page figure {
    margin: 0;
}

/* ==========================================================================
   Shared hero, breadcrumb and chapter navigation
   ========================================================================== */

/* The shared hero keeps the cinematic scale used across related travel pages. */
.best-tours-page .tour-category-hero {
    min-height: 620px;
    height: clamp(620px, calc(100svh - 69px), 790px);
}

/* Hero photography prioritizes the citadel and surrounding Andes. */
.best-tours-page .tour-category-hero-image {
    object-position: center 52%;
}

/* The hero title remains bold and balanced without overpowering the image. */
.best-tours-page .tour-category-hero-title {
    max-width: 12ch;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(2rem, 4vw, 3.6rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 0.98;
    text-wrap: balance;
}

/* The breadcrumb provides a quiet transition from hero to reading surface. */
.best-tours-breadcrumb {
    border-bottom: 1px solid var(--best-tours-line);
    background: #ffffff;
}

/* Breadcrumb typography is intentionally compact and scannable. */
.best-tours-breadcrumb p {
    padding: 0.85rem 0;
    margin: 0;
    color: var(--best-tours-copy);
    font-size: 0.84rem;
}

/* Breadcrumb links use the deeper red for accessible contrast. */
.best-tours-breadcrumb a {
    color: var(--best-tours-red);
    font-weight: 800;
    text-decoration: none;
}

/* The section navigation inherits the page divider color. */
.best-tours-nav {
    border-bottom-color: var(--best-tours-line);
}

/* ==========================================================================
   Overview and supplemental planning guidance
   ========================================================================== */

/* The overview separates its headline from the complete source copy. */
.best-tours-intro-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(3rem, 7vw, 7rem);
}

/* The overview heading follows the reader through the longer introduction. */
.best-tours-intro-heading {
    position: sticky;
    top: 108px;
}

/* Long-form overview copy stays within a comfortable reading measure. */
.best-tours-reading-copy {
    max-width: 780px;
}

/* Source paragraphs use a calm rhythm suited to travel planning. */
.best-tours-reading-copy > p,
.best-tours-editorial-copy > p,
.best-tours-reason-copy p {
    margin: 0 0 1.2rem;
    color: var(--best-tours-copy);
    font-size: 1rem;
    line-height: 1.82;
}

/* The added planning guidance is distinct without a left-side border. */
.best-tours-planning-note {
    padding: clamp(1.5rem, 3vw, 2.15rem);
    margin-top: 2.25rem;
    border: 1px solid var(--best-tours-line);
    border-radius: var(--best-tours-radius);
    background: var(--best-tours-warm);
}

/* Supplemental guidance uses the established editorial display face. */
.best-tours-planning-note h3 {
    margin: 0 0 0.7rem;
    color: var(--best-tours-ink);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}

/* The planning note closes without unnecessary bottom space. */
.best-tours-planning-note p {
    margin: 0;
    color: var(--best-tours-copy);
    line-height: 1.72;
}

/* ==========================================================================
   Once-in-a-lifetime editorial chapter
   ========================================================================== */

/* The first image-and-copy chapter gives both halves equal visual weight. */
.best-tours-editorial-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(2.5rem, 6vw, 6rem);
}

/* The source portrait image fills a tall, calm editorial frame. */
.best-tours-editorial-media {
    min-height: 650px;
    overflow: hidden;
    border-radius: var(--best-tours-radius);
    background: var(--best-tours-soft);
}

/* The editorial photograph fills its column without distortion. */
.best-tours-editorial-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Journey copy is centered against the stronger photographic anchor. */
.best-tours-editorial-copy {
    align-self: center;
    max-width: 720px;
}

/* ==========================================================================
   Planning steps
   ========================================================================== */

/* The dark planning chapter creates a confident pause in the long page. */
.best-tours-steps {
    background: var(--best-tours-dark);
    color: #ffffff;
}

/* Planning title and exact steps share a balanced two-column layout. */
.best-tours-steps-grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
    align-items: start;
    gap: clamp(3rem, 8vw, 8rem);
}

/* The planning title remains available while travelers scan each action. */
.best-tours-steps-heading {
    position: sticky;
    top: 108px;
}

/* Shared heading copy is inverted on the dark planning surface. */
.best-tours-steps .welcome-section-heading h2 {
    color: #ffffff;
}

/* The direct planning action uses an outlined rectangular target. */
.best-tours-step-action {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    margin-top: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--best-tours-radius);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease;
}

/* The planning action receives a quiet filled hover state. */
.best-tours-step-action:hover {
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* The source sequence uses a custom counter instead of generic bullets. */
.best-tours-steps-copy ul {
    padding: 0;
    margin: 0;
    counter-reset: best-tour-step;
    list-style: none;
}

/* Each planning action uses spacing and a top rule instead of a text-box border. */
.best-tours-steps-copy li {
    position: relative;
    padding: 1.35rem 0 1.35rem 4.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    color: #f1f0ed;
    line-height: 1.72;
    counter-increment: best-tour-step;
}

/* Step counters remain tabular and compact for fast scanning. */
.best-tours-steps-copy li::before {
    position: absolute;
    top: 1.25rem;
    left: 0;
    color: #ffffff;
    content: counter(best-tour-step, decimal-leading-zero);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: 1.25rem;
    font-variant-numeric: tabular-nums;
}

/* The final source paragraph is visually connected to the completed sequence. */
.best-tours-steps-copy > p {
    margin: 1.8rem 0 0;
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: 1.25rem;
    line-height: 1.55;
}

/* ==========================================================================
   Reasons to travel with Peru Summit
   ========================================================================== */

/* The reasons introduction remains readable without spanning the full viewport. */
.best-tours-section-heading {
    max-width: 940px;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Centered section introductions align the reusable heading and supporting copy. */
.best-tours-section-heading.is-centered {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

/* Each reason pair gives half the width to authentic photography and half to copy. */
.best-tours-reason-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(2.5rem, 6vw, 6rem);
    margin-bottom: clamp(4rem, 8vw, 7rem);
}

/* The last reason row closes without surplus spacing before the tour collection. */
.best-tours-reason-row:last-child {
    margin-bottom: 0;
}

/* Alternating reason rows move photography to the right on wide screens. */
.best-tours-reason-row.is-reversed .best-tours-reason-media {
    order: 2;
}

/* Reason photography remains immersive but never crops into an unstable ratio. */
.best-tours-reason-media {
    min-height: 620px;
    overflow: hidden;
    border-radius: var(--best-tours-radius);
    background: var(--best-tours-soft);
}

/* Reason images fill their dedicated half of each row. */
.best-tours-reason-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Reason copy aligns vertically with generous separation between source topics. */
.best-tours-reason-copy {
    display: grid;
    align-content: center;
    gap: clamp(2rem, 5vw, 4rem);
}

/* Source reason titles carry the hierarchy without decorative labels. */
.best-tours-reason-copy h3 {
    margin: 0 0 0.85rem;
    color: var(--best-tours-ink);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.25rem, 2.7vw, 2.5rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

/* The final reason paragraph in each group removes trailing whitespace. */
.best-tours-reason-copy p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Reusable tour-card collection
   ========================================================================== */

/* The tour collection sits on a quiet neutral field for clear comparison. */
.best-tours-collection {
    background: var(--best-tours-soft);
}

/* Six shared tour cards use three columns at wide desktop widths. */
.best-tours-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

/* Every reusable card surface keeps the project-wide 7px corner language. */
.best-tours-grid .tour-best-card,
.best-tours-grid .tour-best-card-media,
.best-tours-grid .tour-best-card-image,
.best-tours-grid .tour-best-card-button,
.best-tours-grid .tour-best-card-badge {
    border-radius: var(--best-tours-radius);
}

/* Card actions and badges use the accessible deep brand red. */
.best-tours-grid .tour-best-card-button,
.best-tours-grid .tour-best-card-badge {
    border-color: var(--best-tours-red);
    background: var(--best-tours-red);
    color: #ffffff;
}

/* Card numerals align predictably when travelers compare price and duration. */
.best-tours-grid .tour-best-card-price-group {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Planning form and emergency contact
   ========================================================================== */

/* The closing planning area returns to a warm, practical working surface. */
.best-tours-plan {
    background: var(--best-tours-warm);
}

/* The planning form and emergency contact panel divide available width evenly. */
.best-tours-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: clamp(2rem, 4vw, 4rem);
}

/* The form uses a clean white surface with the shared corner radius. */
.best-tours-plan-form {
    padding: clamp(1.5rem, 3.5vw, 3.25rem);
    border-radius: var(--best-tours-radius);
    background: #ffffff;
}

/* Submission feedback uses a full outline rather than a left accent border. */
.best-tours-form-notice {
    padding: 0.9rem 1rem;
    margin-top: 1.25rem;
    border: 1px solid var(--best-tours-line);
    border-radius: var(--best-tours-radius);
    background: var(--best-tours-soft);
    color: var(--best-tours-ink);
    font-weight: 700;
    line-height: 1.55;
}

/* Successful feedback uses the warm editorial surface. */
.best-tours-form-notice.is-success {
    background: var(--best-tours-warm);
}

/* Error feedback uses a full red outline and matching text. */
.best-tours-form-notice.is-error {
    border-color: var(--best-tours-red);
    color: var(--best-tours-red);
}

/* Form fields use predictable vertical rhythm. */
.best-tours-plan .treks-machu-form {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

/* Paired travel fields share a row on larger screens. */
.best-tours-plan .treks-machu-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Every label stays attached to its matching input. */
.best-tours-plan .treks-machu-form-field {
    display: grid;
    gap: 0.45rem;
}

/* Form labels remain compact and high contrast. */
.best-tours-plan .treks-machu-form-field label {
    color: var(--best-tours-ink);
    font-size: 0.82rem;
    font-weight: 850;
}

/* Inputs use neutral borders, generous targets and exactly 7px corners. */
.best-tours-plan .treks-machu-form-field input,
.best-tours-plan .treks-machu-form-field textarea {
    width: 100%;
    min-height: 50px;
    padding: 0.78rem 0.9rem;
    border: 1px solid #d1d0cc;
    border-radius: var(--best-tours-radius);
    background: #ffffff;
    color: var(--best-tours-ink);
    caret-color: var(--best-tours-red);
}

/* Field placeholders remain readable without competing with entered text. */
.best-tours-plan .treks-machu-form-field input::placeholder,
.best-tours-plan .treks-machu-form-field textarea::placeholder {
    color: var(--best-tours-muted);
    opacity: 1;
}

/* Textareas resize vertically without breaking their column. */
.best-tours-plan .treks-machu-form-field textarea {
    min-height: 140px;
    resize: vertical;
}

/* The submit action uses the primary brand color and a clear minimum target. */
.best-tours-plan .treks-machu-form-submit {
    justify-self: start;
    min-height: 48px;
    padding: 0.75rem 1.7rem;
    border: 1px solid var(--best-tours-red);
    border-radius: var(--best-tours-radius);
    background: var(--best-tours-red);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    transition: background-color 180ms ease, border-color 180ms ease;
}

/* The submit hover state deepens without moving the control. */
.best-tours-plan .treks-machu-form-submit:hover {
    border-color: var(--best-tours-red);
    background: var(--best-tours-red);
}

/* Emergency imagery and details form one continuous dark panel. */
.best-tours-contact {
    display: grid;
    grid-template-rows: minmax(300px, 1fr) auto;
    overflow: hidden;
    border-radius: var(--best-tours-radius);
    background: var(--best-tours-dark);
    color: #ffffff;
}

/* Contact photography fills the upper portion of the panel. */
.best-tours-contact > img {
    width: 100%;
    height: 100%;
    min-height: 340px;
    object-fit: cover;
}

/* Contact details remain readable over the dark surface. */
.best-tours-contact-copy {
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

/* The emergency heading uses a compact display treatment. */
.best-tours-contact-copy h3 {
    margin: 0 0 1rem;
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    font-weight: 500;
    line-height: 1.12;
}

/* Contact details use generous leading for fast telephone and email scanning. */
.best-tours-contact-copy p {
    margin: 0;
    color: #efefec;
    line-height: 1.75;
}

/* Contact links remain bright against the dark panel. */
.best-tours-contact-copy a {
    color: #ffffff;
}

/* Quick contact actions sit in one predictable row. */
.best-tours-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Contact actions use outlined rectangular targets instead of pills. */
.best-tours-contact-actions a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--best-tours-radius);
    color: #ffffff;
    font-weight: 800;
    text-decoration: none;
}

/* Quick contact hover states gain a modest translucent fill. */
.best-tours-contact-actions a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Responsive behavior
   ========================================================================== */

/* Medium desktop widths reduce the comparison grid to two columns. */
@media (max-width: 1199.98px) {
    .best-tours-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Tablet layouts stack editorial relationships while preserving source order. */
@media (max-width: 991.98px) {
    .best-tours-page .tour-category-hero {
        min-height: 580px;
        height: 72svh;
    }

    .best-tours-intro-grid,
    .best-tours-editorial-grid,
    .best-tours-steps-grid,
    .best-tours-reason-row,
    .best-tours-plan-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.25rem;
    }

    .best-tours-intro-heading,
    .best-tours-steps-heading {
        position: static;
    }

    .best-tours-reason-row.is-reversed .best-tours-reason-media {
        order: 0;
    }

    .best-tours-editorial-media,
    .best-tours-reason-media {
        width: 100%;
        height: min(68vw, 620px);
        min-height: 430px;
    }

    .best-tours-editorial-copy,
    .best-tours-reading-copy {
        max-width: none;
    }
}

/* Mobile layouts reduce spacing and keep all controls easy to reach. */
@media (max-width: 767.98px) {
    .best-tours-page .tour-category-hero {
        min-height: 540px;
        height: 72svh;
    }

    .best-tours-page .tour-category-hero-title {
        max-width: 11ch;
        font-size: clamp(2rem, 4vw, 3.6rem);
    }

    .best-tours-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.15rem;
    }

    .best-tours-editorial-media,
    .best-tours-reason-media {
        height: 118vw;
        min-height: 390px;
        max-height: 580px;
    }

    .best-tours-steps-copy li {
        padding-left: 3.35rem;
    }

    .best-tours-plan .treks-machu-form-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .best-tours-plan .treks-machu-form-submit {
        width: 100%;
        justify-self: stretch;
    }

    .best-tours-contact-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .best-tours-contact-actions a {
        justify-content: center;
    }
}

/* Reduced-motion users retain the complete interface without transitions. */
@media (prefers-reduced-motion: reduce) {
    .best-tours-page *,
    .best-tours-page *::before,
    .best-tours-page *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}