/*
 * Strong Testimonials - one look, everywhere.
 *
 * The reviews appear on the home page, on every tour page and anywhere else
 * the [testimonial_view] shortcode is dropped, and they were styled in only
 * one of those places. Everything here is keyed on .strong-view, the wrapper
 * the plugin puts around every view, so a review looks the same wherever it
 * turns up.
 *
 * Two things about the plugin's own markup are worth knowing before reading
 * the rules:
 *
 *  - The visible outline came from the SLIDE, .wpmtst-testimonial, not from
 *    the card. The slide carries `border: 1px solid #e6e6e6` and the card
 *    inside it carries a white one, so styling only the card left the grey
 *    line sitting there.
 *
 *  - The slider is bxSlider. It floats every slide and leaves the track at
 *    height 0, which is why each card sized itself to its own text and the
 *    row came out ragged. bxSlider does measure the tallest slide and write
 *    that onto .wpmslider-viewport, so passing that height down the chain is
 *    all the equalising takes. Turning the track into a flex row equalises
 *    them too - and breaks the slider, because bxSlider positions the strip
 *    with floats and a very large negative right margin.
 */

/* The slide is a carrier. Everything visible belongs to the card. */
.strong-view .wpmtst-testimonial {
    height: 100%;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.strong-view .wpmslider-content {
    height: 100%;
}

.strong-view .wpmtst-testimonial-inner {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    padding: 26px 24px 20px;
    /* No hard outline. A pale ring plus a soft drop shadow reads as a raised
       card; the 1px grey box it replaces read as a table cell. */
    border: 1px solid rgba(23, 32, 51, 0.06) !important;
    border-radius: 16px !important;
    background-color: #fff !important;
    box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04), 0 10px 28px rgba(23, 32, 51, 0.08);
    transition: transform 220ms ease, box-shadow 220ms ease;
}

.strong-view .wpmtst-testimonial-inner:hover {
    transform: translateY(-4px);
    box-shadow: 0 2px 4px rgba(23, 32, 51, 0.05), 0 18px 40px rgba(23, 32, 51, 0.13);
}

/* The quote takes the slack, which is what pins the name and stars to the
   bottom of the card however long or short the review is. */
.strong-view .wpmtst-testimonial-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.strong-view .wpmtst-testimonial-content > div {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

/*
 * The review text itself: the one paragraph that is neither empty nor the
 * "Read More" line.
 *
 * Every !important below is earned. The reviews were pasted into the editor
 * with their own inline styles - `color: black` on the text, `margin-top:35px`
 * on the link - and an inline style beats any stylesheet.
 *
 * The five-line clamp is what keeps a long review and a short one the same
 * size. Without it the tallest review sets the height for the whole row and
 * every other card is left half empty.
 */
.strong-view .wpmtst-testimonial-content p:not(:empty):not(:last-child) {
    display: -webkit-box;
    overflow: hidden;
    height: 8.5em;
    margin: 0 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    color: #3f4859 !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

/* Read More is the card's only call to action, so it is the one centred line. */
.strong-view .wpmtst-testimonial-content p:last-child {
    margin: 14px 0 0 !important;
    text-align: center;
}

.strong-view .wpmtst-testimonial-content p:last-child a {
    color: #00a1a4;
    font-weight: 600;
    text-decoration: none;
}

.strong-view .wpmtst-testimonial-content p:last-child a:hover {
    text-decoration: underline;
}

/* The TripAdvisor mark, kept quiet so it reads as a source, not a headline. */
.strong-view .wpmtst-testimonial-content img {
    width: 86px !important;
    height: auto !important;
    margin: 0 auto 16px !important;
    opacity: 0.75;
}

/* Empty paragraphs the editor left behind would otherwise open a gap. */
.strong-view .wpmtst-testimonial-content p:empty,
.strong-view .wpmtst-testimonial-content .maybe-clear {
    display: none;
}

/* Name and rating as one block at the foot of the card, over a hairline. */
.strong-view .wpmtst-testimonial-field.testimonial-name {
    margin-top: 18px;
    padding-top: 16px;
    color: #172033;
    font-size: 15px;
    font-weight: 700;
    text-align: left;
    border-top: 1px solid #eef1f5;
}

.strong-view .strong-rating-wrapper {
    display: block;
    margin-top: 4px;
    text-align: left;
}

.strong-view .strong-rating .star svg {
    width: 16px;
    height: 16px;
    fill: #ffb400;
}

/*
 * Slider arrows.
 *
 * The plugin puts each arrow in its own .wpmslider-controls-direction wrapper
 * and positions them itself, which is how the two ended up sitting on the same
 * spot - one round button showing two chevrons stacked on each other. Laying
 * the row out here, with both wrappers back in normal flow, is what keeps them
 * apart; the gap is the only thing deciding the distance between them.
 *
 * The label inside each link is real text ("Previous Slide"), so it is hidden
 * rather than shrunk, and the chevron is drawn as a pseudo element.
 *
 * The plugin's stylesheet loads after the theme's, so the paint properties
 * need the extra weight to land.
 */
.strong-view .wpmslider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 0 0;
}

.strong-view .wpmslider-controls-direction {
    position: static !important;
    display: inline-flex !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

.strong-view .wpmslider-controls-direction a {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    color: #123b6d !important;
    background: #fff !important;
    border: 1px solid #e3e9f0 !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(23, 32, 51, 0.08);
    text-indent: 0 !important;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

/* The plugin draws its own chevron here; ours replaces it rather than joining
   it, which is what the doubled arrow was. */
.strong-view .wpmslider-controls-direction a::before {
    content: none !important;
}

.strong-view .wpmslider-controls-direction a .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.strong-view .wpmslider-controls-direction a::after {
    color: currentColor;
    font: 600 20px/1 Arial, sans-serif !important;
}

.strong-view .wpmslider-prev::after {
    content: '\2039' !important;
}

.strong-view .wpmslider-next::after {
    content: '\203A' !important;
}

.strong-view .wpmslider-controls-direction a:hover {
    color: #fff !important;
    background: #ff8a3a !important;
    border-color: #ff8a3a !important;
}

/* A disabled arrow keeps its place so the pair does not jump sideways. */
.strong-view .wpmslider-controls-direction a.disabled {
    display: inline-flex !important;
    opacity: 0.3;
    pointer-events: none;
}

@media only screen and (max-width: 680px) {
    .strong-view .wpmtst-testimonial-inner {
        padding: 22px 18px 18px;
    }
}