/* ==========================================================================
   Rainbow Mountain tours: page shell and local design tokens
   ========================================================================== */

/* The page maps every inherited component to the established 7px geometry. */
.rainbow-page {
    --rainbow-ink: #171717;
    --rainbow-copy: #5d5d5d;
    --rainbow-red: #f10100;
    --rainbow-red-deep: #b90201;
    --rainbow-line: #e8e8e4;
    --rainbow-soft: #f7f7f5;
    --rainbow-warm: #fffaf5;
    --rainbow-radius: 7px;
    --welcome-radius: 7px;
    --treks-radius: 7px;
    --treks-machu-radius: 7px;
}

/* Interactive and framed component corners remain consistent across inherited styles. */
.rainbow-page :where(button, input, textarea, figure, img, article, .tour-best-card, .tour-best-card-media, .tour-best-card-badge, .tour-best-card-button, .rainbow-altitude-marker) {
    border-radius: var(--rainbow-radius);
}

/* Opaque focus rings meet non-text contrast requirements on both light and dark chapters. */
.rainbow-page :where(a, button, input, textarea):focus-visible {
    outline: 3px solid var(--rainbow-red-deep);
    outline-offset: 3px;
    box-shadow: 0 0 0 2px #ffffff;
}

/* The shared hero leaves enough height for the long destination name. */
.rainbow-page .tour-category-hero {
    min-height: 650px;
    height: clamp(650px, calc(100svh - 69px), 800px);
}

/* Hero imagery favors the colored ridges and people on the trail. */
.rainbow-page .tour-category-hero-image {
    object-position: center 58%;
}

/* The destination title keeps two decisive lines without crowding the award mark. */
.rainbow-page .tour-category-hero-title {
    max-width: 12ch;
    text-transform: none;
}

/* The breadcrumb quietly restores the exact source hierarchy. */
.rainbow-breadcrumb {
    padding: 0.75rem 0;
    background-color: #ffffff;
    color: var(--rainbow-copy);
    font-size: 0.82rem;
}

/* Breadcrumb content stays on a single lightweight line. */
.rainbow-breadcrumb p {
    margin: 0;
}

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

/* Long navigation labels start at the leading edge on narrow viewports. */
.rainbow-nav .welcome-nav-list {
    justify-content: flex-start;
}

/* Major anchored sections clear the sticky chapter navigation. */
.rainbow-intro,
.rainbow-practical,
.rainbow-altitude,
.rainbow-tours,
.rainbow-plan {
    scroll-margin-top: 58px;
}

/* ==========================================================================
   Destination introduction and operator statement
   ========================================================================== */

/* The opening spread pairs the complete source narrative with tall field photography. */
.rainbow-intro-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

/* Long source paragraphs retain a readable measure. */
.rainbow-intro-copy {
    max-width: 76ch;
}

/* The portrait window creates a strong visual counterweight to the complete copy. */
.rainbow-intro-media {
    min-height: 760px;
    overflow: hidden;
    margin: 0;
    background-color: var(--rainbow-soft);
}

/* The introductory photograph fills its editorial frame without distortion. */
.rainbow-intro-media img {
    width: 100%;
    height: 100%;
    min-height: 760px;
    object-fit: cover;
}

/* The exact operator statement forms one unboxed, authoritative ink band. */
.rainbow-operator {
    padding: clamp(3.5rem, 7vw, 6.5rem) 0;
    background-color: var(--rainbow-ink);
}

/* The operator sentence keeps a generous display scale and centered measure. */
.rainbow-operator h2 {
    max-width: 1000px;
    margin: 0 auto;
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.8rem, 4vw, 3.4rem);
    font-weight: 500;
    line-height: 1.08;
    text-align: center;
    text-transform: none;
    text-wrap: balance;
}

/* ==========================================================================
   Documentary landscape rhythm
   ========================================================================== */

/* The first image spread balances a dominant panorama with a supporting view. */
.rainbow-landscape-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 1rem;
}

/* Landscape frames stay clipped and stable while images load. */
.rainbow-landscape-media {
    min-height: 520px;
    overflow: hidden;
    margin: 0;
    background-color: var(--rainbow-soft);
}

/* The wider landscape receives slightly more vertical presence. */
.rainbow-landscape-media.is-wide {
    min-height: 620px;
}

/* Mountain imagery fills every documentary frame. */
.rainbow-landscape-media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

/* ==========================================================================
   Trek highlights and practical conditions
   ========================================================================== */

/* Practical guidance uses the dark expedition surface for clear separation. */
.rainbow-practical {
    background-color: var(--rainbow-ink);
    color: #ffffff;
}

/* Highlights and operating facts share one aligned two-column chapter. */
.rainbow-practical-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
    gap: clamp(3rem, 7vw, 7rem);
}

/* The small chapter marker introduces the practical passage without a side border. */
.rainbow-kicker {
    margin: 0 0 1rem;
    color: #ff8a85;
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

/* The exact highlights heading uses the page display voice. */
.rainbow-highlights h2 {
    max-width: 18ch;
    margin: 0;
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    line-height: 1.08;
    text-transform: none;
}

/* Check-list spacing replaces decorative boxes around the supplied statements. */
.rainbow-check-list {
    display: grid;
    gap: 1.15rem;
    padding: 0;
    margin: clamp(2rem, 4vw, 3rem) 0 0;
    list-style: none;
}

/* Each supplied highlight aligns its icon and untouched wording. */
.rainbow-check-list li {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.85rem;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.65;
}

/* Highlight icons use the brand red without creating a bordered callout. */
.rainbow-check-list i {
    padding-top: 0.32rem;
    color: #ff5650;
}

/* Fact groups use horizontal dividers to remain one continuous reading surface. */
.rainbow-fact-group {
    padding: clamp(1.5rem, 3vw, 2.5rem) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Fact headings are compact relative to the highlights title. */
.rainbow-fact-group h3 {
    margin: 0 0 1rem;
    color: #ffffff;
    font-family: "Metromedium", "Roboto", sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    font-weight: 500;
}

/* Exact activity and timing lists keep a calm reading rhythm. */
.rainbow-fact-group ul {
    display: grid;
    gap: 0.8rem;
    padding-left: 1.15rem;
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.65;
}

/* ==========================================================================
   Altitude chapter
   ========================================================================== */

/* The altitude chapter returns to warm paper for sustained reading. */
.rainbow-altitude {
    background-color: var(--rainbow-warm);
}

/* Altitude photography and full source explanation form a balanced split. */
.rainbow-altitude-grid {
    display: grid;
    grid-template-columns: minmax(380px, 0.95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 7rem);
}

/* The altitude image frame provides room for the factual elevation marker. */
.rainbow-altitude-media {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    margin: 0;
    background-color: var(--rainbow-soft);
}

/* Altitude photography preserves the broad landscape crop. */
.rainbow-altitude-media img {
    width: 100%;
    height: 100%;
    min-height: 600px;
    object-fit: cover;
}

/* The source elevation becomes a compact, high-contrast image annotation. */
.rainbow-altitude-marker {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    padding: 0.8rem 1rem;
    background-color: rgba(23, 23, 23, 0.9);
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 900;
}

/* Altitude prose remains narrow enough for its technical values to scan easily. */
.rainbow-altitude-copy {
    max-width: 72ch;
}

/* ==========================================================================
   Tour collection and final image spread
   ========================================================================== */

/* The collection heading allows the complete supplied description to breathe. */
.rainbow-tours-heading {
    max-width: 920px;
}

/* The nine source tours form a three-column comparison grid. */
.rainbow-tour-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Every inherited tour card uses the mandated 7px corner treatment. */
.rainbow-tour-grid .tour-best-card,
.rainbow-tour-grid .tour-best-card-media,
.rainbow-tour-grid .tour-best-card-image {
    border-radius: var(--rainbow-radius);
}

/* Deep red badges keep white status text above the WCAG AA contrast threshold. */
.rainbow-tour-grid .tour-best-card-badge {
    background-color: var(--rainbow-red-deep);
    color: #ffffff;
}

/* Exact tour names receive a stable row height for easier comparison. */
.rainbow-tour-grid .tour-best-card-title {
    min-height: 5.7rem;
}

/* The post-collection spread gives the long decision grid a visual release. */
.rainbow-after-tours {
    background-color: #ffffff;
}

/* Two equally weighted Ausangate views create the transition into planning. */
.rainbow-after-tours-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* Supporting image frames use one stable documentary proportion. */
.rainbow-after-tours figure {
    min-height: 500px;
    overflow: hidden;
    margin: 0;
    background-color: var(--rainbow-soft);
}

/* Supporting images fill their paired frames without stretching. */
.rainbow-after-tours img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
}

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

/* The planning section closes the journey on the established ink surface. */
.rainbow-plan {
    background-color: var(--rainbow-ink);
}

/* The complete supplied planning paragraph stays centered above the form. */
.rainbow-plan-heading {
    max-width: 980px;
    margin: 0 auto clamp(3rem, 6vw, 5rem);
    text-align: center;
}

/* Form and contact card align at the top of one decision-focused layout. */
.rainbow-plan-grid {
    align-items: start;
}

/* The emergency card obeys the shared 7px treatment and avoids decorative side borders. */
.rainbow-contact {
    border-radius: var(--rainbow-radius);
}

/* Contact imagery gives the assistance block a clear destination context. */
.rainbow-contact > img {
    border-radius: var(--rainbow-radius) var(--rainbow-radius) 0 0;
}

/* The primary form action uses the accessible deep brand red behind white text. */
.rainbow-plan .treks-machu-form-submit {
    background-color: var(--rainbow-red-deep);
}

/* Focused fields replace the inherited translucent outline with an opaque accessible ring. */
.rainbow-plan .treks-machu-form input:focus,
.rainbow-plan .treks-machu-form textarea:focus {
    border-color: var(--rainbow-red-deep);
    outline-color: var(--rainbow-red-deep);
}

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

/* Tablet reading order collapses editorial splits while retaining two tour columns. */
@media (max-width: 991.98px) {
    .rainbow-intro-grid,
    .rainbow-practical-grid,
    .rainbow-altitude-grid {
        grid-template-columns: 1fr;
    }

    /* Tablet imagery remains immersive without extending beyond one viewport. */
    .rainbow-intro-media,
    .rainbow-intro-media img,
    .rainbow-altitude-media,
    .rainbow-altitude-media img {
        min-height: 560px;
    }

    /* The tour collection keeps two comparable cards per row on tablets. */
    .rainbow-tour-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile layouts simplify every photo spread and comparison set to one column. */
@media (max-width: 767.98px) {
    .rainbow-page .tour-category-hero {
        min-height: 620px;
        height: 100svh;
    }

    /* Documentary spreads become one uninterrupted vertical sequence. */
    .rainbow-landscape-grid,
    .rainbow-after-tours-grid,
    .rainbow-tour-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile photography uses a compact but still immersive frame height. */
    .rainbow-intro-media,
    .rainbow-intro-media img,
    .rainbow-landscape-media,
    .rainbow-landscape-media.is-wide,
    .rainbow-altitude-media,
    .rainbow-altitude-media img,
    .rainbow-after-tours figure,
    .rainbow-after-tours img {
        min-height: 420px;
    }

    /* Tour title height returns to natural flow in the single-column list. */
    .rainbow-tour-grid .tour-best-card-title {
        min-height: 0;
    }

    /* Header quick actions meet the recommended 44px mobile touch target. */
    .rainbow-mountain-tours-body .csp-mobile-quick-actions a,
    .rainbow-mountain-tours-body .csp-navbar-toggle {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }
}

/* Very narrow screens reclaim header room without reducing action target sizes. */
@media (max-width: 359.98px) {
    .rainbow-mountain-tours-body .csp-brand-logo {
        width: 104px;
    }

    /* Compact spacing keeps the 44px targets inside the narrow header. */
    .rainbow-mountain-tours-body .csp-header-mobile-bar {
        gap: 0.2rem;
    }
}

/* Reduced-motion users receive static cards, media, buttons, and menu controls. */
@media (prefers-reduced-motion: reduce) {
    .rainbow-page .tour-best-card,
    .rainbow-page .tour-best-card-image,
    .rainbow-page .tour-best-card-button,
    .rainbow-page .treks-machu-form-submit,
    .rainbow-mountain-tours-body .csp-navbar-toggle {
        animation: none;
        transition: none;
    }

    /* Hover and focus states remain visible without positional movement or zoom. */
    .rainbow-page .tour-best-card:hover,
    .rainbow-page .tour-best-card:focus-within,
    .rainbow-page .tour-best-card:hover .tour-best-card-image,
    .rainbow-page .tour-best-card:focus-within .tour-best-card-image,
    .rainbow-page .tour-best-card-button:hover,
    .rainbow-page .tour-best-card-button:focus-visible,
    .rainbow-page .treks-machu-form-submit:hover,
    .rainbow-page .treks-machu-form-submit:focus-visible {
        transform: none;
    }
}