/* =======================================================================
   Sitea Testimonials – testimonials.css v1.4.2
   ======================================================================= */

.stea-carousel-wrap {
    position: relative;
    width: 100%;
    padding: 60px 0 80px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.stea-viewport {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.stea-carousel {
    display: flex;
    align-items: flex-start;
    transition: transform 0.45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.stea-carousel.is-dragging {
    cursor: grabbing;
    transition: none;
}

/* -----------------------------------------------------------------------
   Card — 70% wide slot; inner card is the visible glass surface
   Padding here = visual gap between cards (never changes card offsetWidth
   in a way the JS cares about — JS reads offsetWidth of .stea-card which
   includes this padding, and that is fine because every card is identical)
----------------------------------------------------------------------- */
.stea-card {
    flex: 0 0 70%;
    width: 70%;
    padding: 0 4px;
    box-sizing: border-box;
    position: relative;
}

/* -----------------------------------------------------------------------
   Glass card inner
----------------------------------------------------------------------- */
.stea-card-inner {
    display: grid;
    grid-template-columns: 34% 1fr;
    grid-template-rows: 1fr;
    align-items: stretch;
    width: 100%;
    min-height: 480px;
    border-radius: 20px;
    overflow: hidden;
    position: relative;

    /* Solid glass-look background — no backdrop-filter to prevent bleed between cards */
    background: rgba(255, 255, 255, 0.92);
    border: none;
    outline: none;
}

/* No image — content spans full card width */
.stea-card--img-none .stea-card-inner,
.stea-card--no-img .stea-card-inner {
    grid-template-columns: 1fr;
}

/* Also handle missing featured image with full-height style */
.stea-card--img-full .stea-card-inner:not(:has(.stea-photo-wrap--desktop)) {
    grid-template-columns: 1fr;
}
.stea-card-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient(
        140deg,
        rgba(255, 255, 255, 0.60) 0%,
        rgba(255, 255, 255, 0.15) 35%,
        rgba(255, 255, 255, 0.00) 55%
    );
    pointer-events: none;
    z-index: 1;
}

/* Keep all content above the glass overlay */
.stea-photo-wrap--full,
.stea-photo-wrap--circle,
.stea-photo-wrap--square,
.stea-content {
    position: relative;
    z-index: 2;
}

/* -----------------------------------------------------------------------
   Photo — FULL HEIGHT
----------------------------------------------------------------------- */
.stea-photo-wrap--full {
    grid-column: 1;
    grid-row: 1;
    align-self: stretch;
    overflow: hidden;
    position: relative;
    z-index: 2;
    /* Ensure the wrap fills its grid cell height */
    display: block;
}
.stea-photo--full {
    width: 100%;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

/* -----------------------------------------------------------------------
   Photo — CIRCLE
----------------------------------------------------------------------- */
.stea-card--img-circle .stea-card-inner,
.stea-card--img-square .stea-card-inner {
    display: flex;
    align-items: center;
}
.stea-photo-wrap--circle {
    flex: 0 0 auto;
    width: auto;
    padding: 0 0 0 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stea-photo--circle {
    display: block;
    width:  96px !important;
    height: 96px !important;
    min-width:  96px; min-height: 96px;
    max-width:  96px; max-height: 96px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

/* -----------------------------------------------------------------------
   Photo — SQUARE CROP
----------------------------------------------------------------------- */
/* square handled above */
.stea-photo-wrap--square {
    flex: 0 0 auto;
    width: auto;
    padding: 0 0 0 28px;
    display: flex;
    align-items: center;
}
.stea-photo--square {
    display: block;
    width:  110px !important;
    height: 110px !important;
    min-width:  110px; min-height: 110px;
    max-width:  110px; max-height: 110px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 2px 10px rgba(0,0,0,.12);
}

/* -----------------------------------------------------------------------
   Content pane
----------------------------------------------------------------------- */
.stea-content {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
}
/* No image — override grid-column AFTER the base rule so it wins */
.stea-card--img-none .stea-content,
.stea-card--no-img .stea-content {
    grid-column: 1;
    padding: 48px 64px;
}
/* When no image — content fills the whole card */
.stea-card--img-none .stea-card-inner,
.stea-card--img-circle .stea-card-inner,
.stea-card--img-square .stea-card-inner { grid-template-columns: 1fr; }
.stea-card--img-none .stea-content { grid-column: 1; }

.stea-logo-wrap { margin-bottom: 2px; }
.stea-logo {
    width: auto;
    display: block;
    max-width: 200px;
    object-fit: contain;
}

.stea-stars { display: flex; gap: 3px; line-height: 1; }
.stea-star         { font-size: 20px; color: #d1d5db; }
.stea-star--filled { color: #f59e0b; }

.stea-quote {
    margin: 0; padding: 0;
    border: none; background: none;
    line-height: 1.55;
    color: #1a1a2e;
    font-weight: 500;
}

.stea-attribution { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.stea-name        { font-weight: 700; font-size: 15px; color: #1a1a2e; }
.stea-meta        { font-size: 13px; color: #6b7280; }

/* -----------------------------------------------------------------------
   Fade overlays
----------------------------------------------------------------------- */
.stea-fade {
    position: absolute;
    top: 0; bottom: 0;
    width: 15%;
    pointer-events: none;
    z-index: 10;
    transition: opacity .3s;
}
.stea-fade--left  { left:  0; background: linear-gradient(to right, rgba(255,255,255,.95) 10%, rgba(255,255,255,0)); }
.stea-fade--right { right: 0; background: linear-gradient(to left,  rgba(255,255,255,.95) 10%, rgba(255,255,255,0)); }

/* -----------------------------------------------------------------------
   Navigation
----------------------------------------------------------------------- */
.stea-nav {
    position: relative; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    gap: 14px; margin-top: 20px;
}
.stea-prev,
.stea-next {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: none !important;
    /* Glass */
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(12px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.6) !important;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        inset 0 -1px 0 rgba(255, 255, 255, 0.30) !important;
    color: #374151 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: box-shadow .2s, color .2s, background .2s !important;
}
.stea-prev:hover,
.stea-next:hover {
    background: rgba(255, 255, 255, 0.80) !important;
    box-shadow:
        0 6px 20px rgba(0, 0, 0, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        inset 0 -1px 0 rgba(255, 255, 255, 0.40) !important;
    color: #1a1a2e !important;
}
.stea-prev:disabled,
.stea-next:disabled { opacity: .3 !important; cursor: default !important; pointer-events: none !important; }

.stea-dots { display: flex; gap: 7px; align-items: center; }
.stea-dot {
    width: 8px; height: 8px;
    border-radius: 50%; background: #d1d5db;
    cursor: pointer; transition: background .2s, transform .2s;
    border: none; padding: 0;
}
.stea-dot.is-active { background: #2563EB; transform: scale(1.3); }

.stea-empty { color: #6b7280; font-style: italic; }

/* Mobile photo — hidden on desktop, shown on mobile */
.stea-photo-wrap--mob { display: none; }

/* -----------------------------------------------------------------------
   Responsive — tablet
----------------------------------------------------------------------- */
@media (max-width: 768px) {
    .stea-card { flex: 0 0 86%; width: 86%; }
    .stea-card-inner { min-height: 420px; }
    .stea-photo-wrap--full { flex: 0 0 38%; max-width: 38%; }
    .stea-content { padding: 24px 22px; gap: 12px; }
}

/* -----------------------------------------------------------------------
   Responsive — mobile stacked
----------------------------------------------------------------------- */
@media (max-width: 520px) {
    .stea-card { flex: 0 0 88%; width: 88%; padding: 0 4px; }
    .stea-card-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: auto;
        max-height: none;
        min-height: 0;
    }
    /* Reset absolute photo back to normal flow on mobile */
    .stea-photo-wrap--full {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: 280px !important;
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        display: block !important;
        overflow: hidden !important;
    }
    .stea-photo--full {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .stea-content {
        grid-column: 1;
        grid-row: 2;
        padding: 20px 18px;
    }
    .stea-photo-wrap--circle { padding: 20px 0 0; justify-content: center; }
    .stea-photo-wrap--square { padding: 20px 0 0; justify-content: center; }

    /* Hide desktop photo, show mobile photo */
    .stea-photo-wrap--desktop { display: none !important; }
    .stea-photo-wrap--mob     { display: flex !important; justify-content: center; align-items: center; padding: 28px 0 0; grid-column: 1 / -1 !important; grid-row: 1 !important; }

    /* Mobile circle */
    .stea-photo--mob-circle {
        width:  120px !important;
        height: 120px !important;
        border-radius: 50% !important;
        object-fit: cover !important;
        display: block !important;
        box-shadow: 0 4px 16px rgba(0,0,0,.15);
    }
    /* Mobile square */
    .stea-photo--mob-square {
        width:  120px !important;
        height: 120px !important;
        border-radius: 14px !important;
        object-fit: cover !important;
        display: block !important;
        box-shadow: 0 4px 16px rgba(0,0,0,.12);
    }
    /* Mobile full width */
    .stea-photo-wrap--mob-full {
        display: block !important;
        padding: 0 !important;
        width: 100% !important;
        height: 260px !important;
        position: relative !important;
    }
    .stea-photo--mob-full {
        position: absolute !important;
        top: 0 !important; left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}