.map-trip-paper {
    min-height: calc(100vh - 5rem);
    padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(2rem, 4vw, 3.5rem);
    color: #26352d;
    background: #f4eedf;
}

.map-trip-layout {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
}

.map-trip-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .35rem 0 1rem;
    border-bottom: 1px solid rgb(38 53 45 / 20%);
}

.map-trip-heading .eyebrow {
    margin: 0 0 .35rem;
    color: #8e2527;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.map-trip-heading h1 {
    margin: 0;
    color: #26352d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3.8rem);
    line-height: 1;
}

.map-trip-heading__description {
    max-width: 52rem;
    margin: .7rem 0 0;
    color: #445047;
}

.map-trip-close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem;
    color: #7c2d24;
    background: #fffaf0;
    border: 1px solid rgb(124 45 36 / 35%);
    border-radius: .2rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}

.map-trip-close:hover,
.map-trip-close:focus-visible {
    color: #fff;
    background: #7c2d24;
}

.map-trip-close span {
    font-size: 1.25rem;
    line-height: .8;
}

.map-trip-summary {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 .65rem;
    color: #26352d;
}

.map-trip-summary p,
.map-trip-summary h2 {
    margin: 0;
    color: inherit;
}

.map-trip-summary > p {
    color: #5c665f;
    font-size: .86rem;
}

.map-trip-summary__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.map-trip-summary h2 {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.15rem, 2vw, 1.55rem);
}

.map-trip-map-shell {
    margin-top: .5rem;
}

.map-trip-map-shell .wmo-map {
    min-height: min(72vh, 760px);
}

.map-trip-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
    padding: .8rem 0 0;
    color: #26352d;
    font-size: .82rem;
}

.map-trip-legend span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.map-trip-swatch {
    display: inline-block;
    width: 2.2rem;
    height: 0;
    border-top: 4px solid #31d158;
    box-shadow: 0 -1px 0 #172019, 0 1px 0 #172019;
}

.map-trip-swatch--route {
    border-top-color: #ff4b2b;
    box-shadow: 0 -1px 0 #25120d, 0 1px 0 #25120d;
}

.map-trip-swatch--inferred {
    height: .35rem;
    background: #ffd400;
    border: 1px dashed #111;
    box-shadow: none;
}

.map-trip-dot {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    background: #18271f;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #18271f;
}

.map-trip-gallery-dot {
    display: inline-grid;
    width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    color: #fff;
    background: #18271f;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #18271f;
    font: 700 .62rem/1 system-ui, sans-serif;
}

.map-trip-marker-shell {
    background: transparent;
    border: 0;
}

.map-trip-marker {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    color: #fff;
    background: #18271f;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 .15rem .4rem rgb(0 0 0 / 38%);
    font: 700 12px/1 system-ui, sans-serif;
}

.map-trip-marker--camp,
.map-trip-marker--camp_alt {
    background: #245c3c;
}

.map-trip-marker--trailhead,
.map-trip-marker--start,
.map-trip-marker--end {
    background: #8e2527;
}

.map-trip-popup {
    width: min(270px, 70vw);
}

.map-trip-popup__eyebrow {
    margin: 0 0 .25rem;
    color: #8e2527;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.map-trip-popup__title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
}

.map-trip-popup__description {
    margin: .5rem 0 0;
}

.map-trip-empty {
    padding: 2rem 0;
}

@media (max-width: 620px) {
    .map-trip-layout {
        width: min(100% - 1.25rem, 1180px);
    }

    .map-trip-heading,
    .map-trip-summary {
        align-items: flex-start;
        flex-direction: column;
    }

    .map-trip-close {
        align-self: stretch;
        justify-content: center;
    }

    .map-trip-map-shell .wmo-map {
        min-height: 65vh;
    }
}


/* Pass 7.2: public Track and Route information. */
.map-trip-details {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgb(38 53 45 / 20%);
}

.map-trip-section-heading {
    margin-bottom: 1rem;
}

.map-trip-section-heading .eyebrow {
    margin: 0 0 .25rem;
    color: #8e2527;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.map-trip-section-heading h2 {
    margin: 0;
    color: #26352d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.45rem, 3vw, 2rem);
}

.map-trip-path-grid,
.map-trip-point-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 1rem;
}

.map-trip-path-card {
    padding: 1.15rem;
    background: #fffaf0;
    border: 1px solid rgb(38 53 45 / 18%);
    border-radius: .3rem;
}

.map-trip-card-eyebrow {
    margin: 0 0 .3rem;
    color: #8e2527;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.map-trip-path-card h3 {
    margin: 0;
    color: #26352d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.25rem;
}

.map-trip-card-description {
    margin: .65rem 0 0;
    color: #4d584f;
}

.map-trip-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: .75rem;
    margin: 1rem 0 0;
}

.map-trip-stat-grid div {
    min-width: 0;
}

.map-trip-stat-grid dt {
    color: #687269;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.map-trip-stat-grid dd {
    margin: .12rem 0 0;
    color: #26352d;
    font-size: 1rem;
    font-weight: 700;
}

.map-trip-card-note {
    margin: .8rem 0 0;
    color: #687269;
    font-size: .78rem;
}

/* Pass 7.3: visitor-facing WMOverland points. */
.map-trip-section-heading--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}

.map-trip-section-note {
    max-width: 34rem;
    margin: 0;
    color: #5c665f;
    font-size: .82rem;
}

.map-trip-point-card {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    color: #26352d;
    text-align: left;
    background: #fffaf0;
    border: 1px solid rgb(38 53 45 / 18%);
    border-radius: .3rem;
    cursor: pointer;
}

.map-trip-point-card:hover,
.map-trip-point-card:focus-visible {
    border-color: #8e2527;
    box-shadow: 0 .2rem .7rem rgb(38 53 45 / 12%);
}

.map-trip-point-card__type {
    margin-bottom: .25rem;
    color: #8e2527;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.map-trip-point-card strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.1rem;
}

.map-trip-point-card__description {
    margin-top: .45rem;
    color: #4d584f;
    font-size: .88rem;
}

.map-trip-point-card__coordinates {
    margin-top: .65rem;
    color: #687269;
    font: .78rem/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.map-trip-point-card__action {
    margin-top: .65rem;
    color: #7c2d24;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.map-trip-popup__eyebrow {
    letter-spacing: .05em;
}


@media (max-width: 620px) {
    .map-trip-section-heading--split {
        align-items: flex-start;
        flex-direction: column;
        gap: .5rem;
    }
}


/* Pass 7.4: curated Trip downloads. */
.map-trip-summary__actions {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    gap: .55rem;
}

.map-trip-summary__actions > p {
    margin: 0;
}

.map-trip-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .55rem;
}

.map-trip-downloads a {
    display: inline-block;
    padding: .45rem .7rem;
    color: #fffaf0;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
    background: #30483a;
    border-radius: .2rem;
}

.map-trip-downloads a:hover,
.map-trip-downloads a:focus-visible {
    background: #8e2527;
}

@media (max-width: 720px) {
    .map-trip-summary__actions {
        align-items: flex-start;
    }

    .map-trip-downloads {
        justify-content: flex-start;
    }
}




/* Pass 7.4.1.1: downloads share the Tracks & Routes heading row. */
.map-trip-paths-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.map-trip-paths-heading h2 {
    margin-bottom: 0;
}

.map-trip-paths-heading .map-trip-downloads {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-bottom: .15rem;
}

@media (max-width: 720px) {
    .map-trip-paths-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .map-trip-paths-heading .map-trip-downloads {
        justify-content: flex-start;
        margin-bottom: 0;
    }
}

/* Trip/Gallery 1.5: in-place fullscreen viewer for Gallery photos opened from the Trip Map. */
.map-trip-gallery-popup__image-button {
    display: block;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: zoom-in;
}

.map-trip-gallery-popup__image-button .wmo-map-popup__image {
    width: 100%;
}

.map-trip-gallery-popup__open {
    padding: 0;
    font: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.gallery-viewer[hidden] {
    display: none;
}

.gallery-viewer {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.25rem;
}

.gallery-viewer__backdrop {
    position: absolute;
    inset: 0;
    background: rgb(5 8 6 / 92%);
}

.gallery-viewer__dialog {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: minmax(0, 1fr) auto;
    width: min(96vw, 1500px);
    height: min(92vh, 1000px);
    overflow: hidden;
    background: #111612;
    border: 1px solid rgb(255 255 255 / 18%);
    box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 55%);
}

.gallery-viewer__stage {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    min-width: 0;
    min-height: 0;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 4.5rem;
    overflow: hidden;
}

.gallery-viewer__stage img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.gallery-viewer__nav,
.gallery-viewer__close {
    color: #fff;
    background: rgb(24 39 31 / 88%);
    border: 1px solid rgb(255 255 255 / 35%);
    cursor: pointer;
}

.gallery-viewer__nav {
    position: relative;
    z-index: 2;
    grid-row: 1;
    align-self: center;
    width: 3rem;
    height: 4rem;
    margin: .5rem;
    font-size: 2.4rem;
}

.gallery-viewer__nav--prev { grid-column: 1; }
.gallery-viewer__nav--next { grid-column: 3; }

.gallery-viewer__close {
    position: absolute;
    z-index: 2;
    top: .7rem;
    right: .7rem;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.7rem;
    line-height: 1;
}

.gallery-viewer__info {
    grid-column: 1 / -1;
    grid-row: 2;
    max-height: 28vh;
    overflow: auto;
    padding: 1rem 4.5rem 1.15rem;
    color: #e8e5dc;
    background: #1a211c;
    border-top: 1px solid rgb(255 255 255 / 12%);
    text-align: center;
}

.gallery-viewer__counter {
    margin: 0 0 .3rem;
    color: #c8bca7;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.gallery-viewer__info h2 {
    margin: 0;
    color: #fff;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.5rem;
}

.gallery-viewer__info p:last-child {
    margin: .45rem auto 0;
    max-width: 60rem;
}

body.gallery-viewer-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .gallery-viewer { padding: .5rem; }
    .gallery-viewer__dialog { width: 98vw; height: 96vh; }
    .gallery-viewer__info { padding-right: 3.5rem; padding-left: 3.5rem; }
}

@media (max-width: 620px) {
    .gallery-viewer__dialog { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; }
    .gallery-viewer__nav { width: 2.25rem; height: 3.5rem; margin: .1rem; font-size: 1.8rem; }
    .gallery-viewer__info { padding: .85rem 1rem 1rem; }
}