/* ─── Swiper structural rules ────────────────────────────────────────────────
   Ensures slides lay out in a horizontal row and off-screen slides are clipped,
   regardless of whether Elementor's own Swiper stylesheet is loaded on the page.
   ─────────────────────────────────────────────────────────────────────────── */

.tc-testimonial-swiper {
    overflow: hidden;
    position: relative;
    width: 100%;
    /* Animates the container between the shared collapsed height and a
       single slide's expanded height (see setBaseHeight() and the
       read-more click handler in the JS). Matches the text-wrap's own
       max-height transition below so both grow/shrink in step. */
    transition: height 0.35s ease;
}

.tc-testimonial-swiper .swiper-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    box-sizing: content-box;
    /* This ensures the progressive fade starts beautifully slow and accelerates up */
    transition-timing-function: cubic-bezier(0.42, 0, 1, 1) !important;
}

.tc-testimonial-swiper .swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    box-sizing: border-box;
    transition-timing-function: cubic-bezier(0.42, 0, 1, 1) !important;
}

/* AutoHeight support (currently dormant) ─────────────────────────────────
   The slider doesn't use Swiper's autoHeight — see setBaseHeight() and the
   read-more click handler in the JS, which size the container directly
   instead: collapsed slides share one uniform height, and the active slide
   grows to fit when a reader expands it. This rule is left in as a safety
   net in case autoHeight is ever re-enabled:
   Swiper's own core CSS resets slide height to `auto` via a
   `swiper-autoheight` class it adds to the root element (autoHeight relies
   on reading the active slide's own offsetHeight). Our earlier
   `height: 100%` rule above has the same specificity and loads after
   Swiper's core CSS, so it was silently overriding that reset — locking
   every slide's box to whatever height was first measured and causing
   expanded content to get clipped by overflow:hidden. This selector uses
   an extra class to reliably outrank the rule above regardless of
   stylesheet order, should autoHeight come back into play. */
.tc-testimonial-swiper.swiper-autoheight,
.tc-testimonial-swiper.swiper-autoheight .swiper-wrapper,
.tc-testimonial-swiper.swiper-autoheight .swiper-slide {
    height: auto;
}

/* ─── Arrow buttons ───────────────────────────────────────────────────────────
   Swiper draws its default arrows via ::after using a custom icon font.
   We always inject our own icon (custom upload or built-in chevron SVG), so
   the ::after glyph must be hidden — otherwise both render simultaneously.
   ─────────────────────────────────────────────────────────────────────────── */

.tc-testimonial-swiper .swiper-button-next::after,
.tc-testimonial-swiper .swiper-button-prev::after {
    display: none !important;
}

/* Absolute position layout tracking ensures clean spacing off layout boundaries */
.tc-testimonial-swiper .swiper-button-prev,
.tc-testimonial-swiper .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 10px;
    z-index: 10;
}

.tc-testimonial-swiper .swiper-button-prev {
    left: 15px;
    /* Clean gap off left-border bounds */
}

.tc-testimonial-swiper .swiper-button-next {
    right: 15px;
    /* Clean gap off right-border bounds */
}

/* Icon element shared by default chevron SVGs and custom uploads */
.tc-testimonial-swiper .tc-arrow-icon {
    display: block;
    /* Default size — overridden by the Elementor nav_icon_size control */
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* ─── Slide content ───────────────────────────────────────────────────────── */

.tc-testimonial-slider-container {
    position: relative;
    width: 100%;
}

.tc-testimonial-slide {
    text-align: center;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Collapsed slides share one uniform height — the tallest slide's own
   *collapsed* content, not its expanded content (JS: setBaseHeight()) — so
   autoplay never jumps the layout. The container then resizes on its own
   whenever a reader expands or collapses a slide (see the read-more
   handler in the JS). A little slack between one slide's collapsed content
   and that shared height is still possible (e.g. a short heading/name next
   to one that wraps onto two lines), so this centers the content vertically
   rather than leaving it stranded at the top. Remove this rule if you'd
   rather it stay top-aligned. */
.tc-testimonial-slide__inner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Used only momentarily by JS while measuring a slide's fully-expanded
   height (measureExpandedSlideHeight()) — forces the text-wrap open
   regardless of its current state so the measurement reflects real
   content, not whatever happened to be collapsed at the time. */
.tc-testimonial-text-wrap.tc-measuring {
    max-height: none !important;
    transition: none !important;
}

/* Font sizes below are defaults only — overridden by Elementor typography controls */

.tc-testimonial-heading {
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.4;
    margin: 0 0 14px;
}

/* Truncated (not hidden) by default — the reader sees a preview of the
   testimonial immediately. --tc-collapsed-height is set per-instance by the
   Elementor "Collapsed Height" control (falls back to 4.5em if unset). JS
   animates max-height on toggle between this value and the full scrollHeight. */
.tc-testimonial-text-wrap {
    position: relative;
    overflow: hidden;
    max-height: var(--tc-collapsed-height, 4.5em);
    margin: 0 0 4px;
    transition: max-height 0.35s ease;
}

/* Fades the last line of truncated text so the cut-off reads as intentional.
   --tc-fade-color is the Elementor "Fade Colour" control (Style > Colors) —
   deliberately separate from "Slide Background", since the widget is often
   placed on a section/container background that differs from its own slide
   background (there's no way in CSS to sample an ancestor's actual rendered
   background colour, so this has to be set explicitly to match). Falls back
   to white if unset. Removed automatically once expanded (.is-open) or when
   the text is short enough that it never gets truncated (.tc-no-truncate,
   set by JS). */
.tc-testimonial-text-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.6em;
    background: linear-gradient(to bottom, transparent, var(--tc-fade-color, #fff));
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.tc-testimonial-text-wrap.is-open::after,
.tc-testimonial-text-wrap.tc-no-truncate::after {
    opacity: 0;
}

.tc-testimonial-content {
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0;
}

/* Default look is a bare text link (background: transparent). Elementor's
   Background Color control (Style > Read More Button > Hover/Normal) can
   turn this into a filled button — padding and radius are already in place
   so a background colour has somewhere to show. */
.tc-testimonial-cta {
    display: inline-block;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    padding: 8px 18px;
    margin: 0 0 18px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    cursor: pointer;
    color: inherit;
    font-family: inherit;
    transition-property: background-color, color;
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

.tc-testimonial-cta:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.tc-testimonial-name {
    font-weight: bold;
    font-size: 1rem;
    margin: 0;
}

/* ─── Responsive Adjustments ───────────────────────────────────────────────── */

@media (max-width: 767px) {
    .tc-testimonial-swiper .swiper-button-prev {
        left: 5px;
    }

    .tc-testimonial-swiper .swiper-button-next {
        right: 5px;
    }
}