/* ========================================================================
 * Pequod Testimonial Widget
 *
 * Layout model:
 *   .swiper-slide            -> fixed track width (card width), no bg
 *     .pequod-testimonial-slide  -> THE CARD (background, radius, padding)
 *       .pequod-testimonial-quote-icon -> absolutely positioned, straddles top edge
 *       .pequod-testimonial-body       -> content stack, cleared below the icon
 *
 * All tunable values are CSS custom properties written by Elementor's
 * Style tab. The values below are fallbacks only.
 * ======================================================================== */

.pequod-testimonial {
    --pqt-card-width: 956px;
    --pqt-card-bg: #E4EBFA;
    --pqt-card-radius: 8px;
    --pqt-icon-size: 140px;
    --pqt-icon-overlap: 70px;   /* how far the icon rises above the card */
    --pqt-arrow-gutter: 72px;   /* space between card edge and arrow */

    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ------------------------------------------------------------------------
 * Swiper container
 * Full width of the Elementor container. Slide width does the work.
 * ------------------------------------------------------------------------ */
.pequod-testimonial-swiper {
    width: 100%;
    overflow: hidden;
}

.pequod-testimonial-swiper .swiper-wrapper {
    align-items: stretch;
}

/* Explicit width is what makes slidesPerView:'auto' work.
   max-width:100% collapses it to a single full-width slide on narrow screens. */
.pequod-testimonial-swiper .swiper-slide {
    width: var(--pqt-card-width);
    max-width: 100%;
    height: auto;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    /* Deliberately no opacity fade — neighbouring cards render at full strength. */
}

/* ------------------------------------------------------------------------
 * The card
 * margin-top reserves space for the icon overhang so the swiper's
 * overflow:hidden doesn't clip the top of the circle.
 * ------------------------------------------------------------------------ */
.pequod-testimonial-slide {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    background-color: transparent;
    border-radius: 2px;
    border: solid 1px var(--pequod-dark);
    padding: 60px 40px;
    margin-top: var(--pqt-icon-overlap);
}

/* ------------------------------------------------------------------------
 * Quote icon — half above the card, half inside it
 * ------------------------------------------------------------------------ */
.pequod-testimonial-quote-icon {
    position: absolute;
    top: calc(var(--pqt-icon-overlap) * -1);
    left: 50%;
    transform: translateX(-50%);
    width: var(--pqt-icon-size);
    height: auto;
    max-width: none;
    display: block;
    z-index: 2;
}

/* ------------------------------------------------------------------------
 * Content stack
 * flex:1 + margin-top:auto on the button wrap pins buttons to the bottom
 * so they line up across cards of differing text length.
 * ------------------------------------------------------------------------ */
.pequod-testimonial-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 29px;
    width: 100%;
    flex: 1 1 auto;
}

/* Clears the portion of the icon that sits inside the card.
   Only applied when an icon is actually set. */
.pequod-testimonial-slide--has-icon .pequod-testimonial-body {
    padding-top: calc(var(--pqt-icon-size) - var(--pqt-icon-overlap));
}

.pequod-testimonial-divider,
.pequod-testimonial-footer-image {
    display: block;
    max-width: 100%;
    height: auto;
}

.pequod-testimonial-text,
.pequod-testimonial-attribution {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: 1.375rem;
    line-height: 2rem;
    color: var(--pequod-dark, #1A1A1A);
}

.pequod-testimonial-attribution {
    font-weight: 700;
}

.pequod-testimonial-button-wrap {
    margin-top: auto;
    padding-top: 16px;
}

/* ------------------------------------------------------------------------
 * Arrows
 * Positioned relative to the card edge, clamped so they never leave the
 * viewport on narrow screens. Vertically centred on the CARD, not the
 * widget — the icon overhang shifts the widget's midpoint otherwise.
 * ------------------------------------------------------------------------ */
.pequod-testimonial-arrow {
    position: absolute;
    top: calc(50% + (var(--pqt-icon-overlap) / 2));
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: transparent;
    color: var(--pequod-dark, #1A1A1A);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.pequod-testimonial-arrow:hover {
    opacity: 0.6;
}

.pequod-testimonial-arrow:focus-visible {
    outline: 2px solid var(--pequod-focus, #5C7A1B);
    outline-offset: 2px;
}

.pequod-testimonial-arrow.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pequod-testimonial-prev {
    left: max(8px, calc(50% - (var(--pqt-card-width) / 2) - var(--pqt-arrow-gutter)));
}

.pequod-testimonial-next {
    right: max(8px, calc(50% - (var(--pqt-card-width) / 2) - var(--pqt-arrow-gutter)));
}

/* ------------------------------------------------------------------------
 * Editor preview fallback (Swiper never initialises in the editor preview)
 * ------------------------------------------------------------------------ */
.pequod-testimonial--editor-preview .pequod-testimonial-swiper {
    overflow: visible;
}

.pequod-testimonial--editor-preview .swiper-wrapper {
    flex-direction: column;
    gap: 60px;
}

.pequod-testimonial--editor-preview .swiper-slide {
    width: 100%;
}

.pequod-testimonial--editor-preview .pequod-testimonial-arrow {
    display: none;
}

/* ------------------------------------------------------------------------
 * Responsive
 * Icon size / overlap / padding are responsive Elementor controls, so they
 * are handled in the Style tab. Only structural bits live here.
 * ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    .pequod-testimonial-arrow {
        width: 40px;
        height: 40px;
    }
}