/* ═══════════════════════════════════════════════════════
   Cotactic Testimonial – Swiper Edition
═══════════════════════════════════════════════════════ */

/* ── CSS Variable defaults ────────────────────────────── */
.ctt-wrapper {
    --card-bg:       #ffffff;
    --card-radius:   16px;
    --card-shadow:   0 4px 20px rgba(0,0,0,0.08);
    --border-top:    0px;
    --border-right:  0px;
    --border-bottom: 0px;
    --border-left:   0px;
    --border-color:  #e0e0e0;
    --cp-top:        20px;
    --cp-right:      24px;
    --cp-bottom:     20px;
    --cp-left:       24px;
    --text-color:    #444444;
    --text-size:     14px;
    --name-color:    #111111;
    --name-size:     15px;
    --role-color:    #888888;
    --role-size:     12px;
    --image-width:  120px;
    --img-r-tl:     0px;
    --img-r-tr:     0px;
    --img-r-br:     0px;
    --img-r-bl:     0px;
    --dot-size:      10px;
    --dot-color:     #cccccc;
    --dot-active:    #F5A623;
    --dot-spacing:   8px;
    --overlay-color: rgba(0,0,0,0.55);

    position: relative;
    width: 100%;
}

/* ── Track wrap (also .swiper) ───────────────────────── */
.ctt-track-wrap {
    width: 100%;
    overflow: hidden;
}

/* ── Track (also .swiper-wrapper) ────────────────────── */
/* Force equal-height slides via stretch (must be explicit) */
.ctt-track.swiper-wrapper {
    align-items: stretch;
}

/* ── Card (also .swiper-slide) ───────────────────────── */
/* Override Swiper's height:100% so cards size to content */
.ctt-card.swiper-slide {
    height: auto !important;
    display: flex;
    flex-direction: column;
}
.ctt-card {
    position: relative;
    box-sizing: border-box;
}

.ctt-card-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1;          /* fill card height (set by flexbox stretch above) */
    box-sizing: border-box;
    overflow: hidden;
    background:    var(--card-bg);
    border-radius: var(--card-radius);
    box-shadow:    var(--card-shadow);
    border-width:  var(--border-top) var(--border-right) var(--border-bottom) var(--border-left);
    border-style:  solid;
    border-color:  var(--border-color);
}

/* ── Image: full card height, controllable width ──────── */
.ctt-image-wrap {
    flex-shrink:   0;
    align-self:    stretch;
    width:         var(--image-width);
    position:      relative;
    overflow:      hidden;
    border-radius: var(--img-r-tl) var(--img-r-tr) var(--img-r-br) var(--img-r-bl);
}
.ctt-image {
    position:   absolute;
    top:        0;
    left:       0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

/* ── Content area ────────────────────────────────────── */
.ctt-content-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--cp-top) var(--cp-right) var(--cp-bottom) var(--cp-left);
}

.ctt-name {
    font-weight: 700;
    font-size:   var(--name-size);
    color:       var(--name-color);
    margin:      0 0 8px 0;
}

.ctt-text {
    font-size:   var(--text-size);
    color:       var(--text-color);
    line-height: 1.7;
    margin:      0;
}

/* ── Overlay (peek effect) ────────────────────────────── */
.ctt-overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--card-radius);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.ctt-card.ctt-peek .ctt-overlay {
    background: var(--overlay-color);
    opacity: 1;
}

/* ── Dots — override Swiper absolute positioning ─────── */
.ctt-dots {
    position:   static !important;
    width:      auto   !important;
    bottom:     auto   !important;
    left:       auto   !important;
    z-index:    auto   !important;
    transform:  translateX(0) !important;

    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    margin-top:      20px;
    padding-bottom:  4px;
}

.ctt-dot {
    width:         var(--dot-size);
    height:        var(--dot-size);
    border-radius: 50%;
    border:        none;
    background:    var(--dot-color);
    cursor:        pointer;
    padding:       0;
    margin:        0 calc(var(--dot-spacing) / 2);
    transition:    background 0.25s ease, transform 0.25s ease;
    flex-shrink:   0;
}
.ctt-dot.active {
    background: var(--dot-active);
    transform:  scale(1.25);
}
.ctt-dot:focus-visible { outline: 2px solid var(--dot-active); outline-offset: 2px; }

/* ── Dots RIGHT layout ────────────────────────────────── */
.ctt-wrapper.dots-right {
    display: flex;
    gap: 16px;
    align-items: stretch;
    overflow: visible;
}
.ctt-wrapper.dots-right .ctt-track-wrap { flex: 1; overflow: hidden; }
.ctt-wrapper.dots-right .ctt-dots {
    flex-direction: column;
    margin-top: 0;
    justify-content: center;
    align-items: center;
}
.ctt-wrapper.dots-right .ctt-dot { margin: calc(var(--dot-spacing) / 2) 0; }

/* ── Space Between: JS applies margin via setProperty('important')
       These rules are CSS-only fallback. The JS in testimonial.js
       re-applies with inline !important after Swiper init so any
       external plugin CSS cannot override it. ───────────────── */
.ctt-wrapper.layout-horizontal .ctt-card.swiper-slide {
    margin-right: var(--ctt-space-between, 0px) !important;
}
.ctt-wrapper.layout-vertical .ctt-card.swiper-slide {
    margin-bottom: var(--ctt-space-between, 0px) !important;
}

/* ── VERTICAL layout ──────────────────────────────────── */
.ctt-wrapper.layout-vertical .ctt-overlay { display: none; }