/**
 * Tektonic Tek Testimonials Block – style.css V1.0.5
 * Author:  Tektonic Limited
 * Date:    07 May 2026
 * Changes: Active slide position:relative (in flow, sets carousel height),
 *          inactive slides position:absolute (no layout contribution) —
 *          carousel height is always exactly the active slide height.
 *          Quote mark whitespace fixed with height+overflow:hidden clipping.
 *          Dots flow naturally below the carousel as a sibling element.
 */

/* ── Outer wrapper ────────────────────────────────────────────────────── */
.tek-testi-wrap {
    text-align: center;
    width:      100%;
}

/* ── Carousel — contains only the slides ─────────────────────────────── */
/*
 * position:relative is the containing block for the absolute-positioned
 * inactive slides. overflow:hidden stops them showing outside the active
 * slide area. Height is set by whichever slide has class is-active,
 * since that slide is the only one in normal flow (position:relative).
 */
.tek-testimonials-carousel {
    position: relative;
    overflow: hidden;
    width:    100%;
}

/* ── Inactive slides — absolute, zero layout contribution ────────────── */
.tek-testimonial-item {
    position:        absolute;
    top:             0;
    left:            0;
    right:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    padding:         40px 40px 20px;
    box-sizing:      border-box;
    opacity:         0;
    transition:      opacity 0.8s ease-in-out;
    pointer-events:  none;
}

/* ── Active slide — back in flow, sets the carousel height ───────────── */
.tek-testimonial-item.is-active {
    position:       relative;
    opacity:        1;
    pointer-events: auto;
}

/* ── Quote body wrapper ───────────────────────────────────────────────── */
/*
 * Quote mark glyphs ("  ") sit near the TOP of Georgia's em square,
 * leaving roughly 44px of empty space below the visible glyph at 72px.
 *
 * Fix: height + overflow:hidden clips that empty space.
 *   72px font, glyph visible in top ~28px → height:34px keeps the glyph
 *   and clips everything below, leaving a clean 6px gap to the text.
 *
 * This replaces the negative-margin approach which was pulling the close
 * quote UP INTO the text rather than below it.
 */
.tek-testi-quote-wrap {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    width:          100%;
    max-width:      720px;
    margin:         0 auto;
    min-width:      0;
}

.tek-testi-quote-wrap::before,
.tek-testi-quote-wrap::after {
    font-family: Georgia, 'Times New Roman', serif;
    font-size:   72px;
    line-height: 1;
    display:     block;
    height:      34px;      /* clips the ~44px empty space below the glyph */
    overflow:    hidden;
    width:       100%;
    flex-shrink: 0;
}

.tek-testi-quote-wrap::before {
    content:       '\201C';
    color:         var(--navy, #173660);
    text-align:    left;
    margin-bottom: 6px;
}

.tek-testi-quote-wrap::after {
    content:    '\201D';
    color:      var(--cyan, #23BDCD);
    text-align: right;
    margin-top: 6px;
}

/* ── Quote text ───────────────────────────────────────────────────────── */
.tek-testi-quote {
    font-size:     1.1rem;
    line-height:   1.7;
    color:         var(--navy, #173660);
    font-style:    italic;
    margin:        0;
    width:         100%;
    max-width:     100%;
    box-sizing:    border-box;
    overflow-wrap: break-word;
    word-break:    break-word;
    hyphens:       auto;
}

/* ── Author ───────────────────────────────────────────────────────────── */
.tek-testi-author {
    font-size:      0.85rem;
    font-weight:    500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--muted, #6E90AA);
    margin:         6px 0 0;
    overflow-wrap:  break-word;
    word-break:     break-word;
    max-width:      100%;
}

.tek-testi-author::before {
    content: '— ';
}

/* ── Stars — tight below author ──────────────────────────────────────── */
.tek-testi-stars {
    display:         flex;
    gap:             4px;
    justify-content: center;
    margin-top:      4px;
    flex-shrink:     0;
}

.tek-testi-star {
    width:       20px;
    height:      20px;
    color:       var(--cyan, #23BDCD);
    fill:        var(--cyan, #23BDCD);
    flex-shrink: 0;
}

.tek-testi-star.is-empty {
    color: #dcdcde;
    fill:  #dcdcde;
}

/* ── Dot navigation — normal flow sibling of .tek-testimonials-carousel ─ */
.tek-testi-dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    align-items:     center;
    padding:         10px 0 16px;
    white-space:     nowrap;
}

.tek-testi-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    background:    var(--muted, #6E90AA);
    border:        none;
    padding:       0;
    cursor:        pointer;
    opacity:       0.35;
    transition:    opacity 0.3s, transform 0.3s;
    flex-shrink:   0;
}

.tek-testi-dot.is-active {
    opacity:    1;
    transform:  scale(1.35);
    background: var(--cyan, #23BDCD);
}

/* ── No testimonials notice ───────────────────────────────────────────── */
.tek-testimonials-empty {
    padding:    48px 24px;
    text-align: center;
    color:      var(--muted, #6E90AA);
    font-style: italic;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .tek-testi-quote-wrap::before,
    .tek-testi-quote-wrap::after { font-size: 56px; height: 28px; }
    .tek-testi-quote    { font-size: 1rem; }
    .tek-testimonial-item { padding: 28px 24px 16px; }
}

@media (max-width: 480px) {
    .tek-testi-quote-wrap::before,
    .tek-testi-quote-wrap::after { font-size: 44px; height: 22px; }
    .tek-testi-quote    { font-size: 0.95rem; }
    .tek-testimonial-item { padding: 20px 16px 12px; }
}