@charset "UTF-8";

/* Dates, readable itinerary copy, and photographs form three clear columns. */
.itinerary .itinerary-heading {
    position: relative;
    isolation: isolate;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, .85fr) minmax(0, .75fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    gap: 6px 24px;
    min-height: 120px;
    padding: 0;
    margin-bottom: 24px;
}
.itinerary-mountain {
    position: static;
    grid-column: 2;
    grid-row: 1 / 3;
    justify-self: center;
    width: 100%;
    max-width: 330px;
    height: auto;
    opacity: .55;
    pointer-events: none;
}
.itinerary .itinerary-heading .eyebrow { grid-column: 1; grid-row: 2; margin: 0; color: #708c7b; letter-spacing: .3em; }
.itinerary .itinerary-heading h2 {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    white-space: nowrap;
}
.itinerary .itinerary-heading h2::after { content: ""; flex: 1; max-width: 64px; min-width: 24px; height: 1px; background: #728b7b; }
.itinerary .itinerary-heading h2 span { color: inherit; }
.itinerary .itinerary-heading > p:last-child {
    grid-column: 3;
    grid-row: 1 / 3;
    justify-self: end;
    margin: 0;
    font: 400 24px/1.65 var(--serif);
    letter-spacing: .08em;
}
.itinerary .itinerary-list { border-color: #b9c8bd; }
.itinerary .itinerary-row {
    position: relative;
    grid-template-columns: 110px minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    min-height: 220px;
    padding: 28px 0;
    border-color: #cdd8cf;
}
.itinerary .day-block {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-content: center;
    align-items: baseline;
    column-gap: 8px;
    row-gap: 10px;
    width: auto;
    height: 100%;
    border: 0;
}
.itinerary .day-block::after {
    content: "";
    position: absolute;
    right: -12px;
    top: -28px;
    bottom: -28px;
    width: 1px;
    background: #a4b6a9;
}
.itinerary .day-block::before {
    content: "";
    position: absolute;
    z-index: 1;
    right: -17px;
    top: calc(50% - 5px);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--green);
}
.itinerary .day-block > span { writing-mode: horizontal-tb; font: 500 14px/1.5 Georgia, serif; letter-spacing: .12em; }
.itinerary .day-block strong { font: 500 36px/1 var(--serif); }
.itinerary .day-block time { grid-column: 1 / -1; font-size: 23px; white-space: nowrap; }
.itinerary .day-block small { font-size: 16px; }
.itinerary .day-copy { grid-column: 2; grid-row: 1; min-width: 0; }
.itinerary .day-copy h3 { font-size: 23px; line-height: 1.65; }
.itinerary .day-copy h3 i { margin-inline: 2px; }
.itinerary .day-copy > p { font-size: var(--reading-body, 18px); line-height: 1.9; }
.itinerary .day-copy > p + p { margin-top: 10px; }
.itinerary .day-copy > .day-evening-plan { margin-top: 1.9em; margin-top: 1lh; }
.itinerary .panda-names--marked {
  padding-inline: .08em;
  margin-inline: -.08em;
  background: linear-gradient(to bottom, transparent 60%, #d5e1c7 60%, #d5e1c7 94%, transparent 94%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.itinerary .day-meta { gap: 8px; margin-top: 14px; }
.itinerary .day-meta span { padding: 4px 10px; }
.itinerary-gallery {
    grid-column: 3;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}
.itinerary-gallery figure { position: relative; margin: 0; aspect-ratio: 1.35 / 1; overflow: hidden; background: #edf2e9; }
.itinerary-gallery figure img { width: 100%; height: 100%; object-fit: cover; }
.itinerary-twins-photos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    width: 100%;
    height: 100%;
}
.itinerary-twins-photos img { min-width: 0; }
.itinerary-twins-photos img:first-child { object-position: 55% center; }
.itinerary-twins-photos img:last-child { object-position: 40% center; }
/* Travel days stay text-led; photographs highlight the panda visits. */
.itinerary .itinerary-row-travel,
.itinerary .itinerary-row-return { min-height: 180px; }
.itinerary .itinerary-row-travel .day-copy { grid-column: 2 / -1; max-width: 760px; }
.itinerary-return-message {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    width: min(100%, 310px);
    margin: 0;
    padding-left: 24px;
    border-left: 1px solid #a4b6a9;
    color: #465148;
    font: 400 16px/1.85 var(--serif);
}
.itinerary-gallery figcaption {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    color: #fff;
    background: rgba(20,37,26,.65);
    font: 400 11px/1.6 var(--sans);
}
.itinerary-flight {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    min-height: 160px;
    padding: 24px;
    background: linear-gradient(145deg, #edf3f3, #f3f5eb);
    color: #355940;
}
.flight-airline { font: 500 16px/1.5 var(--sans); text-align: center; }
.flight-route { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 12px; align-items: center; text-align: center; }
.flight-route > span:not(.flight-route-line) { font: 400 28px/1.2 Georgia, serif; letter-spacing: .06em; }
.flight-route small { display: block; margin-top: 8px; font: 400 15px/1.5 var(--sans); letter-spacing: 0; }
.flight-route-line { position: relative; height: 1px; background: #9ab0a2; }
.flight-route-line::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid #9ab0a2; border-right: 1px solid #9ab0a2; transform: rotate(45deg); }
.flight-route-line svg { position: absolute; top: -15px; left: calc(50% - 15px); width: 30px; height: 30px; transform: rotate(90deg); }
.itinerary .itinerary-notes { margin: 24px 0 0 142px; }

@media (min-width: 1001px) {
    .itinerary .itinerary-heading {
        grid-template-columns: max-content minmax(0, 1fr) max-content;
    }
    .itinerary-mountain { max-width: 310px; }
}

@media (min-width: 641px) and (max-width: 1000px) {
    .itinerary .itinerary-heading { grid-template-columns: max-content minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 110px; }
    .itinerary .itinerary-heading > p:last-child { grid-column: 1 / -1; grid-row: 3; font-size: 20px; }
    .itinerary .itinerary-row { grid-template-columns: 100px minmax(0, 1fr); gap: 20px 32px; }
    .itinerary .day-block { grid-column: 1; grid-row: 1 / 3; }
    .itinerary-gallery { grid-column: 2; grid-row: 2; width: 100%; max-width: 580px; }
    .itinerary-gallery figure { aspect-ratio: 1.7 / 1; }
    .itinerary .itinerary-row-travel .day-block { grid-row: 1; }
    .itinerary-return-message { grid-column: 2; grid-row: 2; justify-self: start; }
    .itinerary .itinerary-notes { margin-left: 132px; }
}
@media (max-width: 640px) {
    .itinerary .itinerary-heading {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 140px;
        grid-template-rows: auto auto auto;
        gap: 12px;
        min-height: 0;
        padding: 0;
        margin-bottom: 24px;
        text-align: left;
    }
    .itinerary .itinerary-heading h2 { grid-column: 1 / -1; grid-row: 2; display: block; white-space: normal; }
    .itinerary .itinerary-heading h2::after { display: none; }
    .itinerary .itinerary-heading .eyebrow { grid-column: 1; grid-row: 1; position: static; margin: 0; letter-spacing: .2em; }
    .itinerary-mountain { grid-column: 2; grid-row: 1; position: static; width: 140px; opacity: .45; }
    .itinerary .itinerary-heading > p:last-child {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: stretch;
        margin: 0;
        font-size: 18px;
        line-height: 1.85;
        letter-spacing: .02em;
        text-align: left;
    }
    .itinerary .itinerary-row { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 0; }
    .itinerary .day-block {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        gap: 8px;
        height: auto;
        padding-left: 16px;
    }
    .itinerary .day-block::after { display: none; }
    .itinerary .day-block::before { left: 0; right: auto; top: calc(50% - 4px); width: 8px; height: 8px; }
    .itinerary .day-block strong { font-size: 28px; }
    .itinerary .day-block time { margin-left: 8px; font-size: 22px; }
    .itinerary .day-copy { grid-column: 1; grid-row: 2; }
    .itinerary .day-copy h3 { font-size: 21px; }
    .itinerary .day-meta { margin-top: 12px; }
    .itinerary-gallery { grid-column: 1; grid-row: 3; }
    .itinerary-gallery figure { aspect-ratio: 1.5 / 1; }
    .itinerary-gallery--twins { grid-template-columns: minmax(0, 1fr); }
    .itinerary-gallery--twins .itinerary-photo-twins { aspect-ratio: 1.8 / 1; }
    .itinerary-gallery--twins > figure:not(.itinerary-photo-twins) { aspect-ratio: 1.6 / 1; }
    .itinerary .itinerary-row-travel .day-copy { grid-column: 1; }
    .itinerary-return-message { grid-column: 1; grid-row: 3; justify-self: start; width: 100%; padding-left: 16px; }
    .itinerary-gallery figcaption { font-size: 10px; }
    .itinerary-flight { min-height: 140px; padding: 20px; gap: 18px; }
    .flight-airline { font-size: 15px; }
    .flight-route { gap: 8px; }
    .flight-route > span:not(.flight-route-line) { font-size: 26px; }
    .flight-route small { font-size: 14px; }
    .itinerary .itinerary-notes { margin-left: 0; }
}