/* ==========================================================================
   Peru Packages, Tours & Travel: page shell and browser surfaces
   ========================================================================== */

/* The package page extends the established Andean editorial palette. */
.peru-packages-page {
    --packages-red: #b90201;
    --packages-red-bright: #f10100;
    --packages-ink: #171717;
    --packages-copy: #525252;
    --packages-muted: #747474;
    --packages-paper: #fffaf5;
    --packages-soft: #f7f7f5;
    --packages-line: #e8e8e4;
    --packages-radius: 7px;
    overflow: clip;
    background-color: #ffffff;
    color: var(--packages-copy);
}

/* The surrounding body stays visually continuous with the shared dark footer. */
body.peru-packages-body {
    background-color: #050505;
}

/* Text selection keeps browser chrome inside the single-red palette. */
.peru-packages-page ::selection {
    background-color: var(--packages-red);
    color: #ffffff;
}

/* The page scrollbar uses a quiet neutral track and branded thumb. */
.peru-packages-page {
    scrollbar-color: var(--packages-red) var(--packages-soft);
    scrollbar-width: thin;
}

/* WebKit scrollbars repeat the shared 7px geometry. */
.peru-packages-page::-webkit-scrollbar {
    width: 10px;
}

/* The scrollbar track remains subordinate to the photography. */
.peru-packages-page::-webkit-scrollbar-track {
    background-color: var(--packages-soft);
}

/* The scrollbar thumb uses the primary action color. */
.peru-packages-page::-webkit-scrollbar-thumb {
    border-radius: var(--packages-radius);
    background-color: var(--packages-red);
}

/* Every interactive element receives the same visible keyboard focus treatment. */
.peru-packages-page :where(a, button, summary):focus-visible,
.peru-packages-body .csp-site-header :where(a, button):focus-visible {
    border-radius: var(--packages-radius);
    outline: 3px solid var(--packages-red);
    outline-offset: 3px;
}

/* Figures reset their browser margin so editorial grids align predictably. */
.peru-packages-page figure {
    margin: 0;
}

/* ==========================================================================
   Shared hero and page navigation
   ========================================================================== */

/* The opening hero creates an immersive first view of the complete country. */
.peru-packages-page .tour-category-hero {
    min-height: 680px;
    height: clamp(680px, calc(100svh - 69px), 820px);
}

/* Hero photography favors the destination while retaining people in the frame. */
.peru-packages-page .tour-category-hero-image {
    object-position: center;
}

/* The long title wraps into an intentional editorial block. */
.peru-packages-page .tour-category-hero-title {
    max-width: 13ch;
    font-size: clamp(2.8rem, 5.8vw, 5.35rem);
    letter-spacing: -0.025em;
    line-height: 0.94;
    text-wrap: balance;
}

/* The sticky chapter strip follows the established welcome-page navigation. */
.peru-packages-nav {
    border-bottom-color: var(--packages-line);
}

/* ==========================================================================
   Verbatim editorial introduction
   ========================================================================== */

/* The opening story gives equal authority to the supplied copy and original imagery. */
.peru-packages-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

/* The verbatim source copy remains at a comfortable reading width. */
.peru-packages-intro-copy {
    max-width: 670px;
}

/* The original paragraphs keep their wording and gain only editorial rhythm. */
.peru-packages-source-copy {
    max-width: 66ch;
}

/* The source emphasis stays typographic rather than becoming a decorative callout. */
.peru-packages-source-copy strong {
    color: var(--packages-ink);
    font-weight: 900;
}

/* The journey link keeps a generous target while reading like an editorial action. */
.peru-packages-page .welcome-text-link {
    min-height: 44px;
    align-items: center;
}

/* The city photograph uses one decisive vertical frame beside the copy. */
.peru-packages-intro-media {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    border-radius: var(--packages-radius);
    background-color: var(--packages-ink);
}

/* The introduction image fills its frame without distorting the historic square. */
.peru-packages-intro-media > img {
    width: 100%;
    height: 100%;
    min-height: 680px;
    object-fit: cover;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* One measured zoom provides the page's authored image interaction. */
.peru-packages-intro-media:hover > img {
    transform: scale(1.025);
}

/* The caption remains legible over changing photographic tones. */
.peru-packages-intro-media figcaption {
    position: absolute;
    right: 1.25rem;
    bottom: 1.25rem;
    left: 1.25rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--packages-radius);
    background-color: rgba(10, 10, 10, 0.86);
    color: #ffffff;
}

/* The place label uses the display face as a compact destination marker. */
.peru-packages-intro-media figcaption strong {
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
}

/* Supporting caption copy remains quieter than the location. */
.peru-packages-intro-media figcaption span {
    max-width: 25ch;
    color: #eeeeea;
    font-size: 0.84rem;
    line-height: 1.4;
    text-align: right;
}

/* ==========================================================================
   Reusable package mosaic
   ========================================================================== */

/* The collection sits on warm paper so the photographic grid reads as one exhibit. */
.peru-packages-collection {
    background-color: var(--packages-paper);
}

/* The collection heading is centered above the irregular mosaic. */
.peru-packages-collection-heading {
    max-width: 780px;
    margin: 0 auto clamp(2.5rem, 5vw, 4.5rem);
    text-align: center;
}

/* The page narrows the shared mosaic gutters into one coherent image wall. */
.peru-packages-mosaic > .row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
}

/* Shared package cards adopt this surface's red accent and soft interaction depth. */
.peru-packages-page .package-card {
    --package-card-hover-color: #ff6b69;
    min-height: 470px;
    box-shadow: 0 10px 30px rgba(17, 24, 39, 0.1);
    transition: box-shadow 260ms ease, transform 260ms ease;
}

/* The first and sixth packages establish larger editorial anchors in the mosaic. */
.peru-packages-mosaic .col-lg-6 .package-card {
    min-height: 540px;
}

/* Interactive package cards lift gently without turning the grid into floating tiles. */
.peru-packages-page .package-card:hover,
.peru-packages-page .package-card:focus-visible {
    box-shadow: 0 22px 48px rgba(17, 24, 39, 0.18);
    transform: translateY(-4px);
}

/* Package photography receives a small continuous zoom under the fixed content. */
.peru-packages-page .package-card-img {
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hovered or focused packages reveal more image detail without changing layout. */
.peru-packages-page .package-card:hover .package-card-img,
.peru-packages-page .package-card:focus-visible .package-card-img {
    transform: scale(1.04);
}

/* Package titles use the established display voice rather than a generic bold face. */
.peru-packages-page .package-card-title {
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.25rem, 1.8vw, 1.75rem);
    letter-spacing: -0.015em;
    line-height: 1.1;
}

/* ==========================================================================
   Coast, Andes and Amazon panorama
   ========================================================================== */

/* The panorama creates an immersive dark interval after the dense package wall. */
.peru-packages-panorama {
    padding: clamp(5rem, 9vw, 8rem) 0;
    background-color: var(--packages-ink);
    color: #ffffff;
}

/* The panorama heading leaves enough quiet space before the image sequence. */
.peru-packages-panorama-copy {
    max-width: 850px;
    margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

/* Three unequal panels express a connected journey rather than equal feature cards. */
.peru-packages-landscape {
    display: grid;
    min-height: 600px;
    grid-template-columns: 0.85fr 1.55fr 1fr;
    gap: 0.75rem;
}

/* Every destination panel is a photographic aperture with shared corner geometry. */
.peru-packages-landscape-panel {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-radius: var(--packages-radius);
    background-color: #080808;
}

/* Landscape photography fills each intentionally unequal aperture. */
.peru-packages-landscape-panel img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The coast panel favors its architectural center. */
.peru-packages-landscape-panel.is-coast img {
    object-position: 55% center;
}

/* The Andean panel preserves the archaeological complex in the central frame. */
.peru-packages-landscape-panel.is-andes img {
    object-position: center;
}

/* The Amazon panel keeps the traveler visible as the human scale. */
.peru-packages-landscape-panel.is-amazon img {
    object-position: 58% center;
}

/* Destination captions sit on an opaque dark field for reliable contrast. */
.peru-packages-landscape-panel figcaption {
    position: absolute;
    right: 0.85rem;
    bottom: 0.85rem;
    left: 0.85rem;
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border-radius: var(--packages-radius);
    background-color: rgba(5, 5, 5, 0.88);
}

/* Destination names use the display face for instant scanning. */
.peru-packages-landscape-panel figcaption strong {
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
}

/* Place lists remain compact supporting information. */
.peru-packages-landscape-panel figcaption span {
    color: #deded8;
    font-size: 0.82rem;
    line-height: 1.35;
}

/* ==========================================================================
   Planning process and closing hero
   ========================================================================== */

/* The planning section returns to white and separates explanation from sequence. */
.peru-packages-process-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(3rem, 8vw, 8rem);
}

/* The planning heading stays readable beside the denser ordered sequence. */
.peru-packages-process-heading {
    max-width: 560px;
}

/* Steps form one continuous responsive rail instead of repeated cards. */
.peru-packages-process-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
    counter-reset: package-step;
}

/* Each step uses a horizontal rule and meaningful sequence number. */
.peru-packages-process-list li {
    display: grid;
    gap: 0.65rem;
    padding-top: 1rem;
    border-top: 1px solid var(--packages-line);
    counter-increment: package-step;
}

/* The numeric marker communicates the actual order of trip planning. */
.peru-packages-process-list li::before {
    color: var(--packages-red);
    content: counter(package-step, decimal-leading-zero);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

/* Step names use the display face without competing with the section heading. */
.peru-packages-process-list strong {
    color: var(--packages-ink);
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: 1.3rem;
    font-weight: 500;
}

/* Step descriptions maintain a compact but readable measure. */
.peru-packages-process-list span {
    max-width: 32ch;
    color: var(--packages-copy);
    line-height: 1.65;
}

/* The planning anchor accounts for the shared sticky navigation. */
.peru-packages-planning-anchor {
    scroll-margin-top: 78px;
}

/* The closing CTA acts as a second photographic hero for conversion. */
.peru-packages-planning-anchor .welcome-planning-cta {
    min-height: 640px;
}

/* ==========================================================================
   Responsive and reduced-motion behavior
   ========================================================================== */

/* Tablet layouts stack the introduction and planning sequence without losing hierarchy. */
@media (max-width: 991.98px) {
    .peru-packages-intro-grid,
    .peru-packages-process-layout {
        grid-template-columns: 1fr;
    }

    /* Tablet copy uses the full readable measure before the image. */
    .peru-packages-intro-copy,
    .peru-packages-process-heading {
        max-width: 760px;
    }

    /* Tablet panorama gives the central Andean destination extra height. */
    .peru-packages-landscape {
        min-height: 760px;
        grid-template-columns: 1fr 1.35fr;
    }

    /* The Amazon panel completes the second row across the full panorama. */
    .peru-packages-landscape-panel.is-amazon {
        min-height: 320px;
        grid-column: 1 / -1;
    }
}

/* Mobile layouts become one clear reading and decision column. */
@media (max-width: 767.98px) {
    .peru-packages-page .tour-category-hero {
        min-height: 660px;
        height: 100svh;
    }

    /* The mobile hero title remains decisive without overflowing narrow screens. */
    .peru-packages-page .tour-category-hero-title {
        max-width: 11ch;
        font-size: clamp(2.35rem, 12.5vw, 3.45rem);
    }

    /* The introduction photograph shortens after the copy on handheld screens. */
    .peru-packages-intro-media,
    .peru-packages-intro-media > img {
        min-height: 500px;
    }

    /* Mobile captions stack to avoid squeezing the supporting sentence. */
    .peru-packages-intro-media figcaption {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Mobile supporting captions return to left alignment. */
    .peru-packages-intro-media figcaption span {
        text-align: left;
    }

    /* Mosaic cards keep an immersive but viewport-appropriate height. */
    .peru-packages-page .package-card,
    .peru-packages-mosaic .col-lg-6 .package-card {
        min-height: 430px;
        height: 430px;
    }

    /* Package text uses the full media width without approaching the edge. */
    .peru-packages-page :is(.package-card-title, .package-card-info) {
        max-width: 100%;
    }

    /* Destination panels become a cinematic vertical sequence. */
    .peru-packages-landscape {
        min-height: 0;
        grid-template-columns: 1fr;
    }

    /* Every mobile destination panel receives a consistent photographic height. */
    .peru-packages-landscape-panel,
    .peru-packages-landscape-panel.is-amazon {
        min-height: 360px;
        grid-column: auto;
    }

    /* Planning steps stack while keeping their order visible. */
    .peru-packages-process-list {
        grid-template-columns: 1fr;
    }

    /* The second hero remains immersive without creating an overly long closing screen. */
    .peru-packages-planning-anchor .welcome-planning-cta {
        min-height: 600px;
    }

    /* Header and hero controls meet the recommended mobile touch target. */
    .peru-packages-body .csp-mobile-quick-actions a,
    .peru-packages-body .csp-navbar-toggle,
    .peru-packages-page .tour-category-hero-nav-btn {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

}

/* Very narrow headers preserve all actions by reducing only the logo footprint. */
@media (max-width: 359.98px) {
    .peru-packages-body .csp-brand-logo {
        width: 104px;
    }

    /* Compact gaps keep the header inside a 320px viewport. */
    .peru-packages-body .csp-header-mobile-bar {
        gap: 0.2rem;
    }
}

/* Reduced-motion readers receive immediate states without decorative movement. */
@media (prefers-reduced-motion: reduce) {
    .peru-packages-page :is(.package-card, .package-card-img, .peru-packages-intro-media > img),
    .peru-packages-body .csp-navbar-toggle {
        animation: none;
        transition: none;
    }
}