/* Shared page gutters: mirror the homepage's 87.5% editorial canvas.
   Full-bleed photography, image rails and backgrounds remain outside this grid. */
.fjxx-inner-page {
    --fjxx-page-width: 87.5%;
}

.fjxx-inner-page :is(
    .fjxx-destination-hero-content,
    .fjxx-destination-season-guide-inner,
    .fjxx-destination-season-faces-inner,
    .fjxx-destination-recommended-routes-inner,
    .fjxx-spring-intro-inner,
    .fjxx-spring-glance-inner,
    .fjxx-spring-places-inner,
    .fjxx-itinerary-wilderness-inner,
    .fjxx-itinerary-offers-inner,
    .fjxx-itinerary-routes-inner,
    .fjxx-itinerary-services-inner,
    .fjxx-about-story-inner,
    .fjxx-about-feature-inner,
    .fjxx-faq-list-inner,
    .fjxx-beijing-facts-inner,
    .fjxx-beijing-inspiration-inner,
    .fjxx-beijing-highlights-inner,
    .fjxx-beijing-rhythm-inner,
    .fjxx-beijing-accommodation-inner,
    .fjxx-beijing-pricing-inner,
    .fjxx-beijing-notes-inner,
    .fjxx-explore-city-hero-content,
    .fjxx-info-layout,
    .fjxx-travel-layout,
    .fjxx-plan-hero-content,
    .fjxx-plan-inspiration,
    .fjxx-plan-form-section
) {
    width: var(--fjxx-page-width);
    max-width: none;
    margin-inline: auto;
}

/* The itinerary hero is a centered flex child, not an auto-margin section. */
.fjxx-inner-page .fjxx-beijing-detail-hero-content {
    width: var(--fjxx-page-width);
    max-width: none;
}

/* Long-form material has a full-width section grid but a comfortable reading measure. */
.fjxx-inner-page :is(.fjxx-info-article, .fjxx-travel-article) {
    max-width: 57rem;
}
.fjxx-inner-page :is(.fjxx-beijing-pricing-inner, .fjxx-beijing-notes-inner) {
    padding-inline: 0;
}
.fjxx-inner-page .fjxx-beijing-notes-list {
    max-width: 72rem;
}
.fjxx-inner-page .fjxx-faq-question > span:first-child,
.fjxx-inner-page .fjxx-faq-answer {
    max-width: 70rem;
}

/* The city introduction is deliberately a compact editorial island inside
   the homepage-sized canvas: narrow copy faces portrait photography, with
   the next story reversing the rhythm. Keep the rest of the page on its
   shared gutters. */
.fjxx-inner-page .fjxx-explore-city-story-inner {
    width: min(calc(100% - 3rem), 44rem);
    max-width: none;
    margin-inline: auto;
}

@media (min-width: 53rem) {
    .fjxx-inner-page .fjxx-explore-city-story-row-intro {
        grid-template-columns: minmax(0, 16.2rem) minmax(0, 1fr);
        column-gap: 4.2rem;
    }
    .fjxx-inner-page .fjxx-explore-city-story-row-opera {
        grid-template-columns: minmax(0, 18.5rem) minmax(0, 1fr);
        column-gap: 7.5rem;
        margin-top: 7.6rem;
    }
    .fjxx-inner-page .fjxx-explore-city-story-copy {
        max-width: 16.2rem;
    }
    .fjxx-inner-page .fjxx-explore-city-story-row-opera .fjxx-explore-city-story-copy {
        max-width: 18rem;
    }
    .fjxx-inner-page .fjxx-explore-city-story-media {
        width: 100%;
    }
    .fjxx-inner-page .fjxx-explore-city-story-row-intro::before {
        top: -2.75rem;
        right: auto;
        left: 5rem;
        width: 22.5rem;
        height: 33.5rem;
    }
    .fjxx-inner-page .fjxx-explore-city-story-row-opera::before {
        right: auto;
        bottom: -3.4rem;
        left: 3.5rem;
        width: 19rem;
        height: 17rem;
    }
}

/* Preserve readable columns on tablet: the original fixed 11.5rem track
   made the opera copy wrap into an exceptionally tall strip. */
@media (min-width: 38.01rem) and (max-width: 52rem) {
    .fjxx-inner-page .fjxx-explore-city-story-inner {
        width: min(calc(100% - 3rem), 42rem);
    }
    .fjxx-inner-page .fjxx-explore-city-story-row-intro,
    .fjxx-inner-page .fjxx-explore-city-story-row-opera {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: clamp(2rem, 6vw, 3.5rem);
    }
    .fjxx-inner-page .fjxx-explore-city-story-row-intro .fjxx-explore-city-story-media {
        width: min(100%, 16rem);
        justify-self: end;
    }
    .fjxx-inner-page .fjxx-explore-city-story-row-opera {
        align-items: start;
        margin-top: 5rem;
    }
    .fjxx-inner-page .fjxx-explore-city-story-row-opera .fjxx-explore-city-story-media {
        width: min(100%, 15.5rem);
    }
    .fjxx-inner-page .fjxx-explore-city-story-row-opera::before {
        top: 8rem;
        right: auto;
        bottom: auto;
        left: 6rem;
        width: 15rem;
        height: 15rem;
    }
}

@media (max-width: 38rem) {
    /* On a stacked story the accent belongs to the portrait, not the copy. */
    .fjxx-inner-page .fjxx-explore-city-story-row-opera::before {
        top: 10rem;
        bottom: auto;
    }
}

/* The accommodation section already owns its horizontal padding: avoid applying
   a second gutter to its inner grid. */
.fjxx-inner-page .fjxx-beijing-accommodation { padding-inline: 6.25vw; }
.fjxx-inner-page .fjxx-beijing-accommodation-inner { width: 100%; }

/* City lower sections used 5vw padding while the adjacent sections used 6.25vw. */
@media (min-width: 48.01rem) {
    .fjxx-inner-page :is(.fjxx-explore-city-flavors, .fjxx-explore-city-stay, .fjxx-explore-city-getting-around) {
        padding-inline: 6.25vw;
    }
    .fjxx-inner-page :is(.fjxx-explore-city-stay-inner, .fjxx-explore-city-getting-around-inner) {
        width: 100%;
        max-width: none;
    }
    .fjxx-inner-page .fjxx-explore-city-stay-content {
        max-width: 50rem;
    }
}

@media (max-width: 60rem) {
    .fjxx-inner-page {
        --fjxx-page-width: calc(100% - 3rem);
    }
    .fjxx-inner-page .fjxx-beijing-accommodation,
    .fjxx-inner-page :is(.fjxx-explore-city-flavors, .fjxx-explore-city-stay, .fjxx-explore-city-getting-around) {
        padding-inline: 1.5rem;
    }
}

@media (max-width: 48rem) {
    .fjxx-inner-page {
        --fjxx-page-width: calc(100% - 2rem);
    }
    .fjxx-inner-page .fjxx-beijing-accommodation { padding-inline: 1rem; }
    /* These sections set their mobile gutters on the section rather than an inner wrapper. */
    .fjxx-inner-page :is(.fjxx-explore-city-flavors, .fjxx-explore-city-stay, .fjxx-explore-city-getting-around) {
        padding-inline: 1rem;
    }
    .fjxx-inner-page .fjxx-travel-hero .fjxx-destination-hero-content {
        width: var(--fjxx-page-width);
    }
}