/**
 * Traveller Stories CTA components.
 *
 * These blocks are dropped onto any page, not only the story templates, so the
 * colour tokens are declared on the components themselves rather than borrowed
 * from the .rts-single / .rts-archive scope in road-trip-story.css.
 */

/* Strip -------------------------------------------------------------------- */

.rts-cta-strip {
    --rts-cta-green: #45AC34;
    --rts-cta-wash: #EAF8ED;
    background: var(--rts-cta-wash);
    border-radius: 5px;
    padding: 15px;
    margin: 40px 0;
}

.rts-cta-strip__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0 auto;
}

.rts-cta-strip__text {
    margin: 0;
    color: #333;
    font-weight: 500;
    line-height: 22px;
}

.rts-cta-strip__text a {
    color: inherit;
    text-decoration: underline;
}

.rts-cta-strip__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--rts-cta-green);
    text-decoration: none;
    text-transform: uppercase;
}
.rts-cta-strip__link span {
    font-weight: 600;
}

.rts-cta-strip__link:hover,
.rts-cta-strip__link:focus {
    text-decoration: underline;
}

@media (max-width: 767px) {
    .rts-cta-strip {
        padding: 16px 10px;
        margin: 30px 0;
    }

    .rts-cta-strip__inner {
        gap: 10px;
    }
    .rts-cta-strip__text {
        text-align: center;
    }
    .rts-cta-strip__link,
    .rts-cta-strip__text {
        font-size: 14px !important;
        line-height: 20px;
    }
}

/* Story slider ------------------------------------------------------------- */

/* .rts-chip comes from road-trip-story.css, which only declares the tokens it
   uses under .rts-single / .rts-archive. Redeclared here so the slider carries
   its own colours onto an ordinary page. */

.rts-story-slider-container {
    border-top: 1px solid #ddd;
    margin-top: 40px;
    padding-top: 60px;
}

/* Blog posts are the only template where related posts follow the slider with no
   band of their own, so the two run together without a rule between them.

   The rule stays on the slider because that is the element carrying .container,
   so the line lines up with the content either side of it. .blog-related-posts is
   full width, and a border on it ran the whole viewport. :has() is what keeps it
   honest: no related posts under the slider, no line — single-post.php only
   prints that wrapper when the section has something in it. A browser without
   :has() drops the rule and loses the line, which beats a line to nowhere.

   Paired with the h2 clearance in style.css. */
.blog-single-page .rts-story-slider-container:has(+ .blog-related-posts) {
    border-bottom: 1px solid #ddd;
}

@media (max-width: 860px) {
    .rts-story-slider-container {
        width: 95%;
    }
}

.rts-story-slider {
    --rts-green: #44B649;
    --rts-ink: #4C4C4C;
    --rts-muted: #999;
    --rts-line: #E5E5E5;
    color: var(--rts-ink);
    padding: 0 0 46px;
}

.rts-story-slider__intro {
    text-align: center;
    margin-bottom: 36px;
    padding: 0 15px;
}

.rts-story-slider__title {
    font-size: 40px;
    margin: 0 0 14px;
}

.rts-story-slider__standfirst {
    margin: 0 auto;
    max-width: 720px;
    font-size: 16px;
}

/* Inset by the arrow width plus its gap, so the arrows sit clear of the card
   rather than over the photo. */
.rts-story-slider__track {
    position: relative;
    margin: 0 68px;
}

/* Without these the slide is only as tall as its own content and the photo
   column stops short of the panel beside it. */
.rts-story-slider .slick-track {
    display: flex;
}

.rts-story-slider .slick-slide {
    height: auto;
    min-height: 288px;
}

.rts-story-slider .slick-slide > div {
    height: 100%;
}

.rts-story-slide__inner {
    display: flex;
    align-items: stretch;
    height: 100%;
    border: 1px solid var(--rts-line);
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
}

.rts-story-slide__media {
    position: relative;
    flex: 0 0 36%;
    min-height: 288px;
}

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

/* Keeps the chips and the title legible over whatever photo is set. */
.rts-story-slide__media:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.70) 100%);
}

.rts-story-slide__stats {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 1;
    display: flex;
    gap: 8px;
}

/* The chip is declared in full here, scoped to the slide, rather than leaning on
   the shared .rts-chip in road-trip-story.css — that file is 32 KB and this block
   needs two rules out of it, on every blog post and rental page it appears on.
   Colours are the photo-legible variant: the shared chip is dark text on 15%
   white, which reads on a white card but not over an image. */
.rts-story-slide__stats .rts-chip {
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: 22px;
    padding: 4px 8px;
    margin: 0;

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

    color: #fff;
    text-transform: uppercase;
    font-size: 10px !important;
    font-weight: 500;
    letter-spacing: 1px;
}

/* dsa_rts_country_flag() emits .rts-facts__flag, whose only rule lives in
   road-trip-story.css — the other half of why this block used to load it. */
.rts-story-slide__country .rts-facts__flag {
    font-size: large;
}

.rts-story-slide__title {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: 24px;
    z-index: 1;
    margin: 0;
    font-size: 24px;
    line-height: 1.3;
}

.rts-story-slide__title a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

.rts-story-slide__title a:hover,
.rts-story-slide__title a:focus {
    color: #fff;
    text-decoration: underline;
}

.rts-story-slide__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 28px;
    padding: 40px;
}

/* Bootstrap gives blockquote a left rule, a big font size and its own margin. */
.rts-story-slide__quote {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--rts-ink);
}

.rts-story-slide__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.rts-story-slide__traveller {
    display: flex;
    gap: 12px;
}

.rts-story-slide__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}
@media (max-width: 520px) {
    .rts-story-slide__avatar {
        width: 29px;
        height: 29px;
    }
}

.rts-story-slide__names {
    margin: 0;
    font-size: 12px;
    line-height: 22px;
    color: #666;
}

.rts-story-slide__country {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 11px;
    color: #666;
}

.rts-story-slide__cta {
    flex: 0 0 auto;
    padding: 10px 20px;
    border: 1px solid var(--rts-green);
    border-radius: 4px;
    color: var(--rts-green);
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

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

/* Arrows ------------------------------------------------------------------- */

.rts-story-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #DFDFDF;
    cursor: pointer;
}

.rts-story-slider__arrow:hover {
    background: #CDCDCD;
}

.rts-story-slider__arrow--prev {
    left: -68px;
}

.rts-story-slider__arrow--next {
    right: -68px;
}

.rts-story-slider__arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* slick hides a disabled arrow behind this class on a non-infinite slider. */
.rts-story-slider__arrow.slick-disabled {
    opacity: 0.4;
    cursor: default;
}

.rts-story-slider .slick-dots {
    margin: 24px 0 0;
    padding: 0;
}

.rts-story-slider__all {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 36px auto 0;
    padding: 10px 20px;
    border: 1px solid var(--rts-green);
    border-radius: 4px;
    background: var(--rts-green);
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
}

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

@media (max-width: 820px) {
    .rts-story-slide__title {
        font-size: 20px;
        left: 16px;
        right: 16px;
        bottom: 16px;
    }
}

@media (max-width: 768px) {
    /* Arrows are dropped below this width — see js/rts-story-slider.js — so the
       track reclaims their gutter and dots take over. */
    .rts-story-slider__track {
        margin: 0;
    }

    .rts-story-slide__media {
        flex-basis: 42%;
    }

    .rts-story-slide__body {
        padding: 28px;
    }
}

@media (max-width: 767px) {
    .rts-story-slider {
        padding: 0 0 60px;
    }

    .rts-story-slider__title {
        font-size: 30px;
    }

    .rts-story-slide__inner {
        flex-direction: column;
    }

    .rts-story-slide__media {
        flex: 0 0 auto;
        min-height: 240px;
    }


    .rts-story-slide__body {
        padding: 20px;
        gap: 20px;
    }

    .rts-story-slide__quote {
        font-size: 14px;
    }

    .rts-story-slide__foot {
        align-items: flex-start;
        gap: 16px;
    }

    /* Leaves the next card peeking at the right edge, which is the only cue that
       the slider swipes once the arrows are gone. slick derives its slide width
       from .slick-list's content box, so padding here narrows every slide — the
       same mechanism centerMode uses internally, minus the left-hand peek.

       The gap sits on the slide, not the track: slick writes an inline width and
       translate3d onto .slick-track, and a flex gap there is invisible to that
       maths, so every advance lands short by another 15px. */
    .rts-story-slider .slick-list {
        padding-right: 32px;
    }

    .rts-story-slider .slick-slide {
        padding-right: 12px;
    }
}

@media (max-width: 520px) {
    .rts-story-slider-container { 
        padding-left: 0;
        padding-right: 0; 
    }

    .rts-story-slide__media {
        min-height: 133px;
    }

    .rts-story-slide__title {
        display: none;
    }

    .rts-story-slide__cta {
        width: 100%;
        text-align: center;
    }

}