/**
 * Traveller Road Trip Stories archive.
 *
 * Loads after road-trip-story.css, which supplies the --rts-* tokens and the
 * .rts-card / .rts-chip styling the grid reuses.
 */

.rts-archive {
    margin-top: 106px;
}
@media (max-width: 770px) {
    .rts-archive {
        margin-top: 60px;
    }
}

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

/* Intro ------------------------------------------------------------------- */

.rts-archive__intro {
    position: relative;
    text-align: center;
    max-width: 750px;
    margin: 0 auto 35px;
    padding: 0;
    box-shadow: unset;

    z-index: 0;
}

.rts-archive__title {
    color: #4C4C4C;
    text-align: center;
    font-size: 36px;
    font-style: normal;
    font-weight: 500;
    line-height: 39.6px; /* 110% */
    margin-top: 0;
}

.rts-archive__standfirst {
    color: #999;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
}

@media (max-width: 767px) {
    .rts-archive__intro {
        margin-bottom: 28px;
    }

    .rts-archive__title {
        font-size: 30px;
        line-height: 35px;
    }
}

/* Featured hero ------------------------------------------------------------
   One <a> around the lot so the whole hero is clickable; the call to action is a
   span rather than a nested link. */

.rts-featured {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: var(--rts-radius);
    min-height: 300px;
    max-height: 364px;
    margin-bottom: 32px;
    color: #fff;
    text-decoration: none;
}

.rts-featured:hover,
.rts-featured:focus {
    color: #fff;
    text-decoration: none;
}

.rts-featured__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Keeps the title and chips legible over whatever photo is set. */
.rts-featured:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.15) 70%, rgba(0, 0, 0, 0.45) 100%);
}

.rts-featured__body,
.rts-featured__traveller {
    position: relative;
    z-index: 1;
}

.rts-featured__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 150px 32px 32px;
}

.rts-featured__stats {
    display: flex;
    gap: 8px;
    height: 22px;
}

.rts-featured__title {
    font-size: 30px;
    line-height: 1.3;
    color: #fff;
    margin: 0;
    max-width: 640px;
}

.rts-featured__cta_and_traveller_container {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.rts-featured__cta {
    padding: 8px 16px;
    border-radius: 4px;
    background: var(--rts-green);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
}

.rts-featured__traveller {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rts-featured__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.rts-featured__names,
.rts-featured__country {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
    color: #fff;
}

.rts-featured__country {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 400;
    line-height: 22px;
}

@media (max-width: 767px) {
    .rts-featured {
        max-height: 368px;
    }
    .rts-featured__body {
        padding: 120px 15px 15px;
        max-width: none;
        gap: 12px;
    }

    .rts-featured__title {
        font-size: 22px;
    }

    .rts-featured__cta_and_traveller_container {
        flex-direction: column-reverse;
        gap: 16px;
    }

    .rts-featured__cta {
        width: fit-content;
    }
}

/* Controls ---------------------------------------------------------------- */

.rts-controls {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-bottom: 32px;
    /* Applying a filter reloads to #rts-controls, so the row has to clear the
       fixed site header rather than tuck under it. */
    scroll-margin-top: var(--rts-anchor-offset);
}

@media (max-width: 770px) {
    .rts-controls {
        scroll-margin-top: 5px;
    }
}

.rts-controls__field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--rts-line);
    border-radius: 4px;
    background: #fff;
    color: var(--rts-ink);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    margin: 0;
}

.rts-controls__chevron,
.rts-controls__sort-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 767px) {
    .rts-controls {
        justify-content: stretch;
    }

    .rts-controls > * {
        flex: 1 1 0;
    }

    /* Both toggles fill half the row here, so the chevron belongs at its right edge
       rather than tucked against the label. */
    .rts-controls__field {
        justify-content: space-between;
    }
}

/* Filter drawer ----------------------------------------------------------- */

.rts-filters {
    position: relative;
}

.rts-filters__toggle {
    width: 100%;
}

.rts-filters__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--rts-green);
    color: #fff;
    font-size: 12px;
}

/* Hangs off the toggle rather than sitting in flow, so opening it shifts nothing.
   Without script the [hidden] attribute is never added, so it renders open and its
   submit button still works. */
.rts-filters__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    width: 320px;
    max-width: calc(100vw - 30px);
    padding: 20px;
    border: 1px solid var(--rts-line);
    border-radius: var(--rts-radius);
    background: #fff;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.18);
}

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

.rts-filters__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.rts-filters__heading {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.rts-filters__close {
    border: 0;
    background: none;
    padding: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--rts-muted);
    cursor: pointer;
}

.rts-filters__group {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
}

.rts-filters__list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.rts-filters__option {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 3px 0;
    font-size: 14px;
    font-weight: 400;
    color: var(--rts-ink);
    cursor: pointer;
}

/* Custom rather than accent-color: the box keeps its border and stays white in both
   states, and accent-color cannot express that — it fills the box with the accent,
   which loses the border and left a ticked box looking empty at the design's
   near-white value. The tick's colour has to be literal, since a data URI cannot
   read --rts-green. */
.rts-filters__option input {
    width: 16px;
    height: 16px;
    margin: 0;
    flex: 0 0 auto;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--rts-line);
    border-radius: 3px;
    background: transparent no-repeat center;
    background-size: 11px 11px;
    cursor: pointer;
}

.rts-filters__option input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 5' fill='none' stroke='%2344B649' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The sort panel's options are radios — same box, round, with a dot for a tick. */
.rts-filters__option input[type="radio"] {
    border-radius: 50%;
}

.rts-filters__option input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='%2344B649'/%3E%3C/svg%3E");
}

.rts-filters__option input:focus-visible {
    outline: 2px solid var(--rts-green);
    outline-offset: 1px;
}

/* Two options and no apply button, so it needs neither the destinations panel's
   width nor its trailing gap. */
.rts-filters--sort .rts-filters__panel {
    width: 240px;
}

.rts-filters--sort .rts-filters__list {
    margin-bottom: 0;
}

.rts-filters__empty {
    margin: 0 0 20px;
    color: var(--rts-muted);
    font-size: 14px;
}

.rts-filters__actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rts-filters__apply,
.rts-filters__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 3px;
    font-size: 16px !important;
    font-weight: 400;
    cursor: pointer;
}

.rts-filters__apply {
    border: 1px solid var(--rts-green);
    background: var(--rts-green);
    color: #fff;
}

.rts-filters__clear {
    border: 1px solid var(--rts-green);
    background: #fff;
    color: var(--rts-green);
}

.rts-filters__clear:hover,
.rts-filters__clear:focus,
.rts-filters__apply:hover,
.rts-filters__apply:focus {
    text-decoration: none;
    color: #fff;
    background: var(--rts-green);
}

/* Both panels anchor to the row rather than their own toggle here. For the sort
   panel that alone is enough to keep the desktop dropdown on screen, because its
   toggle is flush with the row's right edge. The destinations toggle is only the
   left half of the row, so a panel hung off its right edge would run off the left
   of the screen — that one spans the row instead. This is also the no-script
   fallback for it, since nothing can close the overlay below without the script. */
@media (max-width: 767px) {
    .rts-controls {
        position: relative;
    }

    .rts-filters {
        position: static;
    }

    [data-rts-filters-drawer] .rts-filters__panel {
        left: 0;
        right: 0;
        width: auto;
    }
}

/* Scripted mobile: a full-height drawer off the right edge, stopping short of the
   full width so the dimmed page stays visible beside it. The z-index has to clear
   the theme's sticky header, which is 99999. */
@media (max-width: 767px) {
    /* :not([hidden]) is not decoration — display: flex here would otherwise outrank
       the equally specific .rts-filters__panel[hidden] rule above it and the drawer
       would never close. */
    .rts-js [data-rts-filters-drawer] .rts-filters__panel:not([hidden]) {
        position: fixed;
        inset: 0 0 0 auto;
        display: flex;
        flex-direction: column;
        width: 82%;
        max-width: 340px;
        padding: 24px 20px;
        border: 0;
        border-radius: 0;
        box-shadow: -8px 0 24px -8px rgba(0, 0, 0, 0.2);
        z-index: 10000001;
    }

    /* The dim. Hung off the toggle rather than a backdrop element of its own, which
       also means a tap on the dimmed area lands on the toggle and closes the panel. */
    .rts-js [data-rts-filters-drawer] .rts-filters__toggle[aria-expanded="true"]::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 10000000;
        background: rgba(0, 0, 0, 0.55);
    }

    /* Only the destinations scroll; the buttons stay put at the foot of the drawer. */
    .rts-js [data-rts-filters-drawer] .rts-filters__list {
        flex: 1 1 auto;
        max-height: none;
        margin-bottom: 0;
    }

    /* auto rather than a fixed gap so the buttons still sit at the foot when there
       are no destinations and no scrolling list to fill the drawer. */
    .rts-js [data-rts-filters-drawer] .rts-filters__actions {
        margin-top: auto;
        padding-top: 20px;
    }

    .rts-js [data-rts-filters-drawer] .rts-filters__close {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border: 1px solid #E5E5E5;
        border-radius: 50%;
        font-size: 18px;
    }

    /* Stops the page behind the drawer scrolling under it. */
    body.rts-filters-open {
        overflow: hidden;
    }
}

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

.rts-archive__layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
}

/* Deliberately not sticky. The single story's contents panel travels with the
   reader because it is navigation for the page they are on; the booking form has
   nothing to track, and following the grid down the page just crowds it. */
.rts-archive__sidebar {
    flex: 0 0 380px;
    max-width: 380px;
}

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

.rts-archive__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.rts-archive__empty {
    margin: 0 0 60px;
    color: var(--rts-muted);
}

@media(max-width: 1200px) {
    .rts-archive__sidebar {
        max-width: 300px;
        flex: 0 0 300px;
    }
}

/* The script lifts the booking form out to the foot of the page, below the reviews
   slider. Everything here covers the two states that leaves. */
@media (max-width: 991px) {
    .rts-archive__layout {
        flex-direction: column;
    }

    .rts-archive__main {
        order: 1;
        width: 100%;
    }

    /* No-script case: the form stays here, so it gets the full column. Margin on the
       wrapper would collapse into a phantom gap below the stories, so the spacing
       lives on the form instead. */
    .rts-archive__sidebar {
        order: 2;
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        margin-top: 0;
    }

    .rts-archive__sidebar > .rts-sidebar__search {
        margin-top: 40px;
    }

    /* Script moves the form to the foot of the page, leaving this empty — hidden so
       it neither paints before the move nor leaves a gap after it. Keyed on .rts-js
       so the no-script layout above survives. (:empty is no good: the markup's
       indentation counts as content.) */
    .rts-js .rts-archive__sidebar {
        display: none;
    }

    /* Once moved it is outside .container, so it needs the gutter the container
       was giving it. */
    .rts-archive > .rts-sidebar__search {
        padding: 0 15px;
        margin: 40px 0;
    }
}

@media (max-width: 767px) {
    .rts-archive__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.rts-archive .dsa-reviews-slider {
    padding: 80px 0 !important; 
    margin-top: 60px;
    background-color: #fafafa !important;
}
@media (max-width: 600px) {
    .rts-archive .dsa-reviews-slider {
        padding: 60px 0 80px !important;
    }
}
.rts-archive .dsa-reviews-slider .review-items .item {
    background-color: #fff !important;
}