/**
 * Single Road Trip Story, plus the card, chip and colour tokens the archive
 * shares. Page furniture is scoped under .rts-single so it cannot leak into
 * shared components; .rts-card and .rts-chip are deliberately unscoped so the
 * archive grid can reuse them.
 */

.rts-single,
.rts-archive {
    --rts-green: #44B649;
    --rts-ink: #4C4C4C;
    --rts-muted: #999;
    --rts-line: #F2F2F2;
    --rts-radius: 8px;
    /* Clears the fixed site header (106px) so the sticky contents panel parks
       just under the breadcrumb line. */
    --rts-sticky-top: 120px;
    /* Anchor targets must clear the same fixed header, or jumping to a section
       tucks its heading underneath the menu bar. */
    --rts-anchor-offset: 126px;
    color: var(--rts-ink);
    margin-top: 106px;
}
@media (max-width: 770px) {
    .rts-single { margin-top: 60px; }
}

.rts-single .container {
    max-width: 1140px;
}

/* Breadcrumb -------------------------------------------------------------- */

.rts-breadcrumb {
    background: #E5E5E5;
    padding: 2px 0;
    margin-bottom: 80px;
}
@media (max-width : 991px) {
    .rts-breadcrumb {
        padding: 5px 0;
        margin-bottom: 30px;
    }
}

/* The theme already styles .dsa_breadcrumbs, including the ">" separators via
   li a:after. Only the colours and the unlinked last crumb are adjusted here. */

.rts-single .dsa_breadcrumbs li a {
    color: var(--rts-muted);
    text-decoration: none;
}

.rts-single .dsa_breadcrumbs li:last-child a {
    color: var(--rts-ink);
}

.rts-single .dsa_breadcrumbs li:last-child a:after {
    content: none;
}

/* Layout ------------------------------------------------------------------ */

/* stretch, not flex-start, so the sidebar spans the article height and the
   sticky contents-panel inside it has room to travel. */
.rts-layout {
    display: flex;
    align-items: stretch;
    gap: 40px;
}

.rts-sidebar {
    flex: 0 0 380px;
    max-width: 380px;
}

.rts-article {
    flex: 1 1 auto;
    min-width: 0;
    /* The contents panel's "Introduction" link targets this element. */
    scroll-margin-top: var(--rts-anchor-offset);
}

@media (max-width: 991px) {
    .rts-layout {
        display: block;
    }

    /* The script moves both children out on mobile, leaving an empty box. Its
       margin would still collapse into a phantom gap, so the spacing lives on the
       form instead — which also covers the no-script case, where the form stays
       put. (:empty is no good here: the markup's indentation counts as content.) */
    .rts-sidebar {
        max-width: none;
        margin-bottom: 0;
    }

    .rts-sidebar > .rts-sidebar__search {
        margin-bottom: 30px;
    }

    /* Hidden while it is still in the sidebar, so it never paints up here before
       the script relocates it. Once moved it matches .rts-single > … below and
       shows. Keyed on .rts-js so it stays visible when script is unavailable. */
    .rts-js .rts-sidebar > .rts-sidebar__search {
        display: none;
    }

    /* The booking form moves to the foot of the page, outside .container, so it
       needs the gutter the container was giving it. */
    .rts-single > .rts-sidebar__search {
        padding: 0 15px;
        margin: 40px 0;
    }
}

/* Sidebar search card ------------------------------------------------------
   [lspp_hero_section_shortcode] is a full-width hero. These overrides strip the
   hero furniture and reflow the form into the sidebar column. Scoped to
   .rts-sidebar__search so LSPP pages are untouched. */

.rts-sidebar__search #hero,
.rts-sidebar__search .hero {
    position: static;
    min-height: 0;
    height: auto;
    padding: 0;
    margin: 0;
    background: none;
}

.rts-sidebar__search .grid-container {
    display: block;
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

.rts-sidebar__search .header_right_container,
.rts-sidebar__search .header_media_section,
.rts-sidebar__search .grid-item-logos,
.rts-sidebar__search .header_messaging {
    display: none;
}

.rts-sidebar__search .grid-item-searchform,
.rts-sidebar__search #search_form_home,
.rts-sidebar__search .search_form,
.rts-sidebar__search .search-form {
    width: 100%;
    max-width: none;
    margin: 0;
    float: none;
}

.rts-sidebar__search .h3.inner {
    float: none !important;
    width: 100%;
}

/* Ticks above a full-width submit, rather than the hero's side-by-side split. */
.rts-sidebar__search .search-form-footer [class*="col-"] {
    width: 100%;
    float: none;
}

.rts-sidebar__search .search-form-footer input[type="submit"],
.rts-sidebar__search .search-form-footer button {
    width: 100%;
}

/* Table of contents ------------------------------------------------------- */

/* The bar is what sticks, once it reaches the breadcrumb line and clears the
   fixed site header. Keeping the sticky on the wrapper rather than the panel is
   what lets the mobile background run full width while the panel stays inset. */
.rts-toc-bar {
    position: sticky;
    top: var(--rts-sticky-top);
    margin-top: 24px;
}

/* Positioned so the open list on mobile anchors to the panel, not the bar. */
.rts-toc {
    position: relative;
    padding: 20px 0px 20px;
    border: 1px solid var(--rts-line);
    border-radius: var(--rts-radius);
    background: #fff;
    max-height: calc(100vh - var(--rts-sticky-top) - 20px);
    overflow-y: auto;
}

.rts-toc[hidden] {
    display: none;
}

/* A button in the markup at every width so its state can be announced, but
   styled as a plain heading on desktop where it never collapses. */
.rts-toc__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    border: 0;
    background: none;
    text-align: left;
    font-family: inherit;
    color: inherit;
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 12px;
    padding-left: 20px;
    cursor: default;
}

.rts-toc__chevron {
    display: none;
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
    transition: transform 0.15s ease;
}
@media (max-width: 991px) {
    .rts-toc__chevron {
        display: block;
    }
}

.rts-toc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rts-toc__list[hidden] {
    display: none;
}

.rts-toc__list li {
    border-left: 2px solid transparent;
    padding: 6px 0 6px 12px;
}

.rts-toc__list a {
    color: var(--rts-muted);
    font-size: 14px !important;
    line-height: 1.35;
    text-decoration: none;
    display: block;
}

.rts-toc__list li.is-active {
    border-left-color: var(--rts-green);
}

.rts-toc__list li.is-active a {
    color: var(--rts-green);
}

@media (max-width: 991px) {
    /* Full width white bar behind the panel. The negative margin cancels the
       container's 15px gutter so it reaches both edges, and the padding puts the
       space back around the panel inside it. */
    .rts-toc-bar {
        /* All four are read back by the open list, which is absolutely positioned and
           so cannot size the bar itself — it derives its own cap from these instead.
           Change one here and the list follows. */
        --rts-toc-bar-pad-x: 24px;
        --rts-toc-bar-pad-y: 10px;
        --rts-toc-open-height: 40vh;
        --rts-toc-list-top: 58px;

        top: 60px;
        margin: 0 -15px 28px;
        padding: var(--rts-toc-bar-pad-y) var(--rts-toc-bar-pad-x);
        background: #fff;
        /* Above the story so content scrolls under the stuck bar, but below the
           WhatsApp bubble (9999) and back-to-top (9998). */
        z-index: 20;
    }

    .rts-toc-bar.is-open {
        height: var(--rts-toc-open-height);
    }
    .rts-toc-bar.is-open .rts-toc {
        border-radius: 6px 6px 0 0;
    }

    .rts-toc {
        margin: 0;
        max-height: none;
        /* Must stay visible so the open list can break out as an overlay. */
        overflow-y: visible;
        padding: 15px 0;
    }

    /* Open list hangs off the bar instead of sitting in flow, so nothing below
       it shifts and the story scrolls underneath.

       Its own tinted card, with the bottom corners square so it reads as meeting the
       foot of the white bar. The -1px insets line its border box up with the panel's,
       since an absolute child is positioned against the padding box and the panel's
       own border sits outside that.

       The cap is the bar's open height less everything above the list inside it: the
       bar's two paddings, the panel border and the list's own top offset. The item
       count follows however many headings the story has, so past that the list
       scrolls rather than spilling out below the white background. */
    .rts-toc__list {
        position: absolute;
        top: var(--rts-toc-list-top);
        left: -1px;
        right: -1px;
        z-index: 1;
        padding: 16px var(--rts-toc-bar-pad-x);
        border: 1px solid var(--rts-line);
        background: #fafafa;
        max-height: calc(
            var(--rts-toc-open-height) - var(--rts-toc-list-top)
            - (var(--rts-toc-bar-pad-y) * 2) - 1px
        );
        overflow-y: auto;
    }


    /* Collapsible here, so the heading becomes a real control. */
    .rts-toc__title {
        cursor: pointer;
        margin-bottom: 0;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Stays 0 when open: the list is an overlay, so it needs no space reserved
       under the bar and the bar must not change height. */
    .rts-toc__title[aria-expanded="true"] {
        margin-bottom: 0;
    }

    .rts-toc__title[aria-expanded="true"] .rts-toc__chevron {
        transform: rotate(180deg);
    }
}

/* Title and fact card ----------------------------------------------------- */

.rts-title {
    font-size: 34px;
    line-height: 1.25;
    margin: 0 0 24px;
    padding-left: 20px;
}

.rts-facts {
    display: flex;
    align-items: stretch;
    gap: 48px;
    border: 1px solid var(--rts-line);
    border-radius: var(--rts-radius);
    padding: 20px 24px;
    margin-bottom: 28px;
    border-radius: 5px;
    border: 1px solid rgba(242, 242, 242, 0.50);
    background: #FFF;

    /* Dropshadow */
    box-shadow: 0 8px 10px -4px rgba(106, 106, 106, 0.03), 0 3px 5px -1.5px rgba(106, 106, 106, 0.04);
}

.rts-facts__author {
    flex: 0 0 150px;
    text-align: center;
}

.rts-facts__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 8px;
}

.rts-facts__byline__country_container {
    display: flex;
    flex-direction: column;
}

@media (max-width: 767px) {
    .rts-facts__avatar {
        width: 44px;
        height: 44px;
    }

    .rts-facts__byline__country_container {
        text-align: left;
    }
}


.rts-facts__byline {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;

    display: flex;
    flex-direction: column;
}
@media (max-width: 767px) {
    .rts-facts__byline {
        flex-direction: row;
        gap: 8px;
    }
}

.rts-facts__byline span {
    display: block;
    font-weight: 400;
}

.rts-facts__country {
    font-size: 12px;
    color: var(--rts-muted);
    margin: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
@media (max-width: 770px) {
    .rts-facts__country {
        justify-content: flex-start;
    }
}


.rts-facts__flag {
    font-size: large;
}

.rts-facts__grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 20px;
    margin: 0;
}

.rts-facts__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rts-facts__item dt {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--rts-muted);
    margin-bottom: 4px;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 14px; /* 107.692% */
}
@media (max-width: 767px) {
    .rts-facts__item dt {
        flex-direction: column;
        align-items: flex-start;
    }
}

.rts-facts__item dd {
    display: flex;
    flex-direction: column;
    gap: 4px;

    color: #4C4C4C;

    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 15px; /* 107.143% */
    word-wrap: break-word;
}
@media (max-width: 767px) {
    .rts-facts__item dd {
        font-size: 13px;
    }
}

.rts-facts__link {
    color: var(--rts-ink);
    text-decoration: underline;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 15px; /* 107.143% */
    text-decoration-line: underline;
}

.rts-chip {
    display: flex;
    padding: 4px 8px;
    margin: 0;
    justify-content: center;
    align-items: center;
    width: fit-content;

    border-radius: 20px;
    border: 1px solid rgba(58, 58, 58, 0.10);
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);

    color: var(--rts-ink);
    text-transform: uppercase;
    font-size: 10px !important;
    font-weight: 500;
    letter-spacing: 1px;
}

@media (max-width: 767px) {
    .rts-facts {
        display: block;
        padding: 16px;
    }

    .rts-facts__author {
        border-right: 0;
        border-bottom: 1px solid var(--rts-line);
        padding: 0 0 16px;
        margin-bottom: 16px;

        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* .rts-facts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    } */

    .rts-title {
        font-size: 26px;
        padding: 0;
    }
}

/* Hero and audio player --------------------------------------------------- */

.rts-hero {
    position: relative;
    margin: 0 0 28px;
}

.rts-hero__image {
    width: 100%;
    height: 472px;
    object-fit: cover;
    display: block;
}
@media (max-width: 820px) {
    .rts-hero__image  {
        height: 233px;
    }
}

.rts-player {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.10);
    /* Prefixed for iOS 17 and below. Without the blur this panel is a 10% white
       wash, so the text has nothing to sit against. */
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    padding: 10px 14px;
    color: #fff;
}

/* The hero has no scrim of its own, so where the blur is unavailable the panel
   falls back to the dark wash it used before TECH-814. */
@supports not ((backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px))) {
    .rts-player {
        background: rgba(0, 0, 0, 0.55);
    }
}

.rts-player__toggle {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    /* Signed off on TECH-814. Deliberately darker than --rts-green, which is too
       light to hold a white icon against the hero. */
    background: #1B571E;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: filter 0.2s ease;
}

.rts-player__toggle:hover {
    filter: brightness(1.35);
}

.rts-player__toggle:active {
    filter: brightness(0.9);
}

.rts-player__toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.rts-player__icon {
    width: 10px;
    height: 12px;
}

.rts-player__icon--play {
    /* Optical centring: the triangle's mass sits left of its bounding box. */
    margin-left: 2px;
}

.rts-player__icon--pause,
.rts-player.is-playing .rts-player__icon--play {
    display: none;
}

.rts-player.is-playing .rts-player__icon--pause {
    display: block;
}

.rts-player__labels {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.rts-player__hint {
    font-size: 11px;
    opacity: 0.8;
}

.rts-player__title {
    font-size: 13px;
    font-weight: 600;
}

.rts-player__time {
    margin-left: auto;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Story body -------------------------------------------------------------- */

.rts-content {
    font-size: 16px;
    line-height: 1.75;
}

.rts-content h2 {
    font-size: 24px;
    margin: 36px 0 14px;
    scroll-margin-top: var(--rts-anchor-offset);
}

.rts-content h3 {
    font-size: 19px;
    margin: 28px 0 12px;
}

.rts-content p {
    margin-bottom: 18px;
}

.rts-content img {
    max-width: 100%;
    height: auto;
}

.rts-content figcaption,
.rts-content .wp-caption-text {
    font-size: 12px;
    font-style: italic;
    color: var(--rts-muted);
    margin-top: 6px;
}

/* Pull quote — stories drop the Bootstrap bar-and-small-text treatment
   (bootstrap.css:1457) for a large italic quote led by a decorative mark.
   Every Bootstrap default it overrides is restated so the block survives a
   change in stylesheet order. */
.rts-content blockquote {
    position: relative;
    /* Desktop hangs the mark in a left gutter. Absolute rather than flex so a
       cite/footer still falls under the quote text instead of beside it. */
    padding: 0 0 0 55px;
    margin: 40px 0;
    border-left: 0;
    font-size: 24px;
    font-style: italic;
    line-height: 1.35;
    color: var(--rts-ink);
}

.rts-content blockquote::before {
    content: "\201C";
    /* The mark is decorative, and some screen readers announce pseudo element
       text. The empty alt silences it — declared second so browsers that cannot
       parse the alt syntax keep the plain value above rather than dropping the
       mark entirely. */
    content: "\201C" / "";
    position: absolute;
    top: 0;
    left: 0;
    /* em-based so the mark keeps the design's ratio to the quote at both sizes. */
    font-size: 2.6em;
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    color: var(--rts-ink);
}

.rts-content blockquote p {
    margin-bottom: 14px;
    font-size: 24px;
    font-style: italic;
    font-weight: 500;
    line-height: 140%; /* 33.6px */
}

.rts-content blockquote p:last-child {
    margin-bottom: 0;
}

.rts-content blockquote cite,
.rts-content blockquote footer {
    display: block;
    margin-top: 16px;
    font-size: 14px;
    font-style: normal;
    line-height: 1.5;
    color: var(--rts-muted);
}

.rts-content blockquote cite::before,
.rts-content blockquote footer::before {
    content: none;
}

@media (max-width: 767px) {
    /* Mobile stacks the mark above the quote, both flush left. */
    .rts-content blockquote {
        padding-left: 0;
        margin: 30px 0;
    }
    .rts-content blockquote p {
        font-size: 20px;
    }

    .rts-content blockquote::before {
        position: static;
        display: block;
        height: 35px;
    }
}

/* Image grid ---------------------------------------------------------------
   [rts_image_grid] — captions come from each attachment's caption field. */

.rts-image-grid {
    display: grid;
    grid-template-columns: repeat(var(--rts-image-grid-columns, 2), minmax(0, 1fr));
    gap: 16px;
    margin: 26px 0;
}

.rts-image-grid__item {
    margin: 0;
}

.rts-image-grid__item img {
    width: 100%;
    height: 240px;
    display: block;
    object-fit: cover;
}

.rts-image-grid__caption {
    font-size: 12px;
    font-style: italic;
    line-height: 18px;
    color: #767676;
    margin: 6px 0 0;
}

@media (max-width: 575px) {
    .rts-image-grid__item img  {
        height: 215px;
    }
}

/* Gallery block ----------------------------------------------------------- */

.rts-gallery {
    margin: 30px 0;
    scroll-margin-top: var(--rts-anchor-offset);
}

.rts-gallery__stage {
    position: relative;
    height: 440px;
}

.rts-gallery__slide {
    display: none;
    margin: 0;
    height: 440px;
}

@media (max-width: 767px) {
    .rts-gallery__stage,
    .rts-gallery__slide {
        height: 215px;
    }
}

.rts-gallery__slide.is-active {
    display: block;
}

.rts-gallery__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: var(--rts-radius); */
    display: block;
}

.rts-gallery__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: 0;
    background: transparent;
    font-size: 42px;
    line-height: normal;
    color: #fff;
    cursor: pointer;
}

.rts-gallery__arrow--prev {
    left: 12px;
}

.rts-gallery__arrow--next {
    right: 12px;
}

.rts-gallery__thumbs {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
}

/* The thumbnail image is a background so the tints below can layer over it. The
   design specifies those tints as a two-stop gradient of one colour, which is a
   flat overlay — done here with ::after so the image URL stays inline. */
.rts-gallery__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 131px;
    height: 90px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: lightgray;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}
@media (max-width: 768px) {
    .rts-gallery__thumb {
        width: 85px;
        height: 57px;
    }
}

.rts-gallery__thumb[hidden] {
    display: none;
}

.rts-gallery__thumb:after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.15s ease;
}

.rts-gallery__thumb:hover:after {
    background: rgba(0, 0, 0, 0.3);
}

.rts-gallery__thumb.is-active:after {
    background: rgba(0, 0, 0, 0.6);
}

.rts-gallery__credit {
    font-size: 12px;
    font-style: italic;
    line-height: 16px;
    color: #767676;
    margin: 8px 0 0;
}
@media (max-width: 768px) {
    .rts-gallery__credit {
        line-height: 18px;
    }
}
/* One line per group of thumbnails, so 10 images at 5 a group give two lines. */
.rts-gallery__lines {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.rts-gallery__line {
    width: 38px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 2px;
    background: var(--rts-line);
    cursor: pointer;
}

.rts-gallery__line.is-active {
    background: var(--rts-ink);
    width: 68px;
}

/* Itinerary block --------------------------------------------------------- */

.rts-itinerary {
    margin: 30px 0;
    scroll-margin-top: var(--rts-anchor-offset);
}

.rts-itinerary__list {
    list-style: none;
    margin: 0 0 20px;
    padding: 20px 24px;
    border: 1px solid var(--rts-line);
}

.rts-itinerary__stop {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    /* padding: 14px 0; */
}

/* Dotted connector from each marker down to the next one. Offsets derive from
   the marker below: 22px circle, 2px margin-top, inside 14px row padding, so it
   starts at 14 + 2 + 22 + 4 and runs past the row edge into the next row's
   padding. Adjust the marker size and these follow. */
.rts-itinerary__stop:not(:last-child):before {
    content: "";
    position: absolute;
    left: 14px;
    top: 0;
    bottom: 0;
    border-left: 1px dotted #3a3a3a;
    z-index: 1;
}

.rts-itinerary__stop:last-child {
    padding-bottom: 0;
}

.rts-itinerary__marker {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.rts-itinerary__detail {
    flex: 1 1 auto;
    min-width: 0;
}

.rts-itinerary__description {
    font-size: 14px;
    line-height: 1.5;
    margin: 0 !important;
}

.rts-itinerary__location {
    font-size: 14px;
    font-weight: 500;
    color: var(--rts-muted);
    margin: 0;
}

.rts-itinerary__distance {
    flex: 0 0 auto;
    font-size: 14px;
    white-space: nowrap;
}

.rts-itinerary__map {
    overflow: hidden;
}

/* map-direction-script.js hides these with .d-none until the route resolves, but
   that is a Bootstrap 5 class and this template loads Bootstrap 3. Without a rule
   here the empty 340px map box shows on every story with an itinerary. */
.rts-itinerary__map.d-none,
.anchor-container.d-none,
.anchor-container .map.d-none {
    display: none;
}

.rts-itinerary__map #map {
    width: 100%;
    height: 340px;
}
@media (max-width: 520px) {
    .rts-itinerary__map #map {
        height: 240px;
    }
}

/* Share ------------------------------------------------------------------- */

.rts-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-top: 1px solid var(--rts-line);
    border-bottom: 1px solid var(--rts-line);
    margin-top: 36px;
    padding: 16px 0;
}

.rts-share__label {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 30px; /* 214.286% */
    color: #aaa;
    margin-right: 4px;
}

.rts-share__links_container {
    display: flex;
    gap: 10px;
}

.rts-share__link {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: pointer;
    
    background: none;
    border-radius: 200px;
    border: 1px solid rgba(58, 58, 58, 0.10);
    backdrop-filter: blur(15px);
}

.rts-share__link svg {
    width: 16px;
    height: 16px;
}

.rts-share__link:hover {
    border-color: var(--rts-green);
}

@media (max-width: 520px) {
    .rts-share {
        flex-direction: column;
        gap: 0;
    }
    .rts-share__label { 
        margin-right: 0; 
    }
}

/* Previous / next --------------------------------------------------------- */

.rts-prevnext {
    background: #f7f7f7;
    margin-top: 75px;
    padding: 30px 0;
}
@media (max-width: 520px) {
    .rts-prevnext {
        margin-top: 35px;
    }
}

.rts-prevnext__inner {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.rts-prevnext__cell {
    flex: 1 1 50%;
}

.rts-prevnext__cell--next {
    text-align: right;
}

.rts-prevnext__cell a {
    text-decoration: none;
    color: var(--rts-ink);
}

.rts-prevnext__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--rts-green);
    margin-bottom: 8px;
}

.rts-prevnext__cell--next .rts-prevnext__label {
    justify-content: flex-end;
}

.rts-prevnext__cell p {
    font-size: 15px;
    margin: 0;
}
@media (max-width: 520px) {
    .rts-prevnext__cell p {
        display: none;
    }
}

/* More stories ------------------------------------------------------------ */

.rts-more {
    padding: 46px 0;
}

.rts-more__title {
    text-align: center;
    font-size: 40px;
}
@media (max-width: 520px) {
    .rts-more__title {
        font-size: 30px;
        margin: 0;
    }

    .rts-more .container  {
        padding-right: 0;
    }
}

.rts-more__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 48px 0;
}
/* Tablet and below the grid becomes a horizontal snap strip. The part-visible card
   at the right edge is the only affordance that it scrolls, so the column basis is
   a percentage rather than a fixed width — the peek has to survive every viewport.
   Negative inline margin cancels .container's padding so cards run to its edge,
   and the block padding stops the cards' box-shadow being clipped by overflow. */
@media (max-width: 991px) {
    .rts-more__grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(308px, 46%);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-inline: -15px;
        padding: 10px 15px;
    }

    .rts-more__grid::-webkit-scrollbar {
        display: none;
    }

    /* .rts-more__grid > .rts-card {
        scroll-snap-align: start;
    } */
}

@media (max-width: 767px) {
    .rts-more__grid {
        grid-auto-columns: minmax(295px, 82%);
        margin: 24px 0;
        gap: 18px;
    }

    .rts-prevnext__cell {
        flex: 1;
    }
}

.rts-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(242, 242, 242, 0.5);
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 10px 0 rgba(153, 153, 153, 0.60);

    width: 100%;


}

.rts-card__media {
    position: relative;
    background-color: lightgray;
}

/* Figma layers the gradient over the image itself, but here the image is an
   <img> (cropped by object-fit rather than Figma's background offsets), so the
   gradient goes on top as an overlay. 0deg puts the dark end at the foot of the
   image, under the chips. */
.rts-card__media:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(102, 102, 102, 0.00) 100%);
    pointer-events: none;
}

.rts-card__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}
@media (max-width: 770px) {
    .rts-card__image {
        height: 139px;
    }
}

/* Duration and distance sit over the foot of the image, above the gradient. */
.rts-card__stats {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    display: flex;
    gap: 8px;

    height: 22px;
}

/* The shared chip is 15% white with dark text, which is legible on the white
   facts card but not over a photo. Inverted for the two places a chip sits on an
   image — the card's stats and the archive hero's. */
.rts-card__stats .rts-chip,
.rts-featured__stats .rts-chip {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(15px);
}

.rts-card__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 30px 20px 18px;
}

.rts-card__title {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 500;
    margin: 0 0 12px;
}
@media (max-width: 768px) {
    .rts-card__title {
        font-size: 18px;
    }

    .rts-card__body {
        padding: 20px 20px 17px;
    }

    .rts-card__stats {
        left: 9px;
        bottom: 13px;
    }
}

/* Stretched so the whole card is the click target, with only one link in the
   markup — no nested anchor for READ MORE. */
.rts-card__link {
    color: var(--rts-ink);
    text-decoration: none;
}

.rts-card__link:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rts-card__excerpt {
    font-size: 14px;
    line-height: 24px;
    color: var(--rts-muted);
    margin: 0 0 22px;
}

.rts-card__traveller {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-bottom: 16px;
}

.rts-card__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.rts-card__names {
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    margin: 0;
}

.rts-card__country {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    line-height: 22px;
    color: #666;
    margin: 0;
}

.rts-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--rts-line);
    padding-top: 16px;
}

.rts-card__date {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 500;
    color: #999;
}
@media (max-width: 768px) {
    .rts-card__date {
        font-size: 13px;
    }
}

.rts-card__more {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--rts-green);
}

.rts-card__date svg,
.rts-card__more svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.rts-card__date svg {
    stroke: var(--rts-muted);
}

.rts-view-all-btn {
    background-color: var(--rts-green);
    border: 1px solid var(--rts-green);
    border-radius: 4px;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;

    display: flex;
    justify-content: center;
    padding: 8px;
    margin: 0 auto;
    width: fit-content;
}
.rts-view-all-btn:hover {
    background-color: #fff;
    color: var(--rts-green);
}

.rts-single .dsa-reviews-slider {
    margin: 34px 0 80px;
}
.rts-archive .dsa-reviews-slider .slick-dots,
.rts-single .dsa-reviews-slider .slick-dots {
    bottom: -50px;
}
@media (max-width: 768px) {
    .rts-single .dsa-reviews-slider {
        margin: 34px 0 40px;
    }
}

/* Back to top --------------------------------------------------------------
   Sits directly above the WhatsApp bubble, which the dag-whatsapp plugin fixes
   at bottom/right 24px on a 60px circle with z-index 9999. Ours sits just under
   that so the chat window covers it when opened.

   The theme's own #toTop is suppressed here only: it appears on the first pixel
   of scroll and shares the bubble's corner. Scoped to the body class so every
   other template keeps it. */

body.single-road_trip_stories #toTop {
    display: none !important;
}

.rts-totop {
    position: fixed;
    right: 32px;
    bottom: 100px;
    z-index: 9998;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.rts-totop[hidden] {
    display: none;
}

/* Literal colour: this button lives in the footer, outside the .rts-single scope
   where the custom properties are declared. */
.rts-totop svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: #4C4C4C;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rts-totop:hover {
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
}

@media (max-width: 767px) {
    .rts-totop {
        right: 26px;
        bottom: 92px;
        width: 38px;
        height: 38px;
    }
}