/* ==========================================================
   Elementor Profile Carousel v1.0.6
   ========================================================== */

/* ---------- Wrapper ---------- */
.epc-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    user-select: none;
}

/* ---------- Dots ---------- */
.epc-dots {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 20;
}
.epc-dots--top    { top: 0; }
.epc-dots--bottom { bottom: 0; }

.epc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--epc-dots-inactive, rgba(0,48,135,0.3));
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background var(--epc-trans,500ms) ease,
                transform  var(--epc-trans,500ms) ease;
}
.epc-dot--active {
    background: var(--epc-dots-active, #003087);
    transform: scale(1.35);
}

/* ---------- Track wrapper ---------- */
.epc-track-wrapper {
    position: relative;
    /*
     * Clip image overflow at track level (not at wrapper),
     * so images can exceed card top but not go above pagination dots.
     * overflow-x clips slide peek; overflow-y allows image to rise above card.
     */
    overflow-x: hidden;
    overflow-y: visible;
    padding-top: 36px;
    padding-bottom: 4px;
}

/* ---------- Track ---------- */
.epc-track {
    display: flex;
    align-items: flex-start;
    will-change: transform;
}

/* ---------- Slide ---------- */
.epc-slide {
    flex: 0 0 auto;
    box-sizing: border-box;
    transition: opacity var(--epc-trans,500ms) ease;
    /* Allow left-panel image to overflow card top upward */
    overflow: visible;
}
.epc-slide--clone { pointer-events: none; }

/* ---------- Card ---------- */
.epc-card {
    display: flex;
    align-items: stretch;
    background: var(--card-bg, #f0f2f8);
    border-radius: var(--card-radius, 16px);
    box-shadow: var(--card-shadow, 4px 8px 24px 0 rgba(0,0,0,0.15));
    position: relative;
    min-height: var(--card-min-h, 240px);
    width: 100%;
    box-sizing: border-box;
    /* Card itself clips its own interior content (right panel text etc)
       but left panel image can overflow via z-index trick */
    overflow: visible;
}

/* ---------- Left Panel ---------- */
.epc-card__left {
    flex: 0 0 var(--epc-left-pct, 44%);
    width: var(--epc-left-pct, 44%);
    position: relative;
    /* overflow visible so image can rise above card top */
    overflow: visible;
    border-radius: var(--card-radius,16px) 0 0 var(--card-radius,16px);
    background: var(--card-bg, #f0f2f8);
    min-height: var(--card-min-h, 240px);
    box-sizing: border-box;
    /* clip x-overflow inside left panel only */
    clip-path: none;
}

/* Combined left image wrapper */
.epc-left-img-wrap {
    position: absolute;
    /* position set via inline: left, top from PHP */
    height: 100%;
    overflow: hidden;
    border-radius: var(--card-radius,16px) 0 0 var(--card-radius,16px);
}
.epc-left-img-wrap img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

/* ---------- Right Panel ---------- */
.epc-card__right {
    flex: 1 1 0;
    min-width: 0;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    box-sizing: border-box;
    /* clip text overflow cleanly */
    overflow: hidden;
    border-radius: 0 var(--card-radius,16px) var(--card-radius,16px) 0;
    background: var(--card-bg, #f0f2f8);
}

.epc-slide-content {
    font-size: 14px;
    line-height: 1.65;
    color: #1a1a2e;
}
.epc-slide-content p      { margin: 0 0 4px; }
.epc-slide-content strong { font-size: 1.08em; font-weight: 700; }
.epc-slide-content em     { font-style: normal; opacity: 0.72; }

/* ---------- Button ---------- */
.epc-btn {
    display: inline-block;
    padding: 9px 24px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    align-self: flex-start;
    line-height: 1.4;
    transition: opacity 0.2s ease, transform 0.15s ease;
}
.epc-btn:hover { opacity: 0.85; transform: translateY(-1px); }

/* ---------- Accordion ---------- */
/*
 * The accordion sits directly after .epc-card in the DOM.
 * It uses a negative top margin to pull it up under the card's
 * bottom-border-radius, creating a seamless overlap.
 * The card's bottom corners and the accordion's top corners share
 * the same radius so they look connected.
 */
.epc-accordion {
    position: relative;
    background: var(--acc-bg, #ffffff);
    color: var(--acc-tc, #333);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    /* Pull up under card by the radius amount — seamless connection */
    margin-top: calc(var(--acc-rad, 16px) * -1);
    /* Push accordion behind card so card shadow renders on top */
    z-index: 0;
    border-radius: 0 0 var(--acc-rad,16px) var(--acc-rad,16px);
    box-shadow: var(--acc-shadow, 4px 8px 24px 0 rgba(0,0,0,0.15));
    transition:
        max-height var(--epc-trans,500ms) cubic-bezier(0.4,0,0.2,1),
        opacity    var(--epc-trans,500ms) ease;
}
/* When open: reveal from under card naturally */
.epc-accordion.epc-accordion--open {
    max-height: 1000px;
    opacity: 1;
}

/* Overlay */
.epc-accordion__overlay {
    position: absolute;
    inset: 0;
    background: var(--acc-ov, rgba(0,0,0,0));
    pointer-events: none;
    z-index: 1;
}

/* Body text */
.epc-accordion-body {
    position: relative;
    z-index: 2;
    /* padding from CSS vars, set globally */
    padding: var(--acc-pt,20px) var(--acc-pr,24px) var(--acc-pb,20px) var(--acc-pl,24px);
    /* top padding adds extra to account for the overlap margin */
    padding-top: calc(var(--acc-pt,20px) + var(--acc-rad,16px));
    font-size: 14px;
    line-height: 1.75;
    flex: 1 1 auto;
}
.epc-accordion-body p { margin: 0 0 10px; }
.epc-accordion-body p:last-child { margin-bottom: 0; }

/* ---------- Accordion Bottom Strip ---------- */
/*
 * Separate fixed-height section, always visible when accordion is open.
 * Image flush edge to edge, no padding, no margin.
 */
.epc-acc-strip {
    position: relative;
    z-index: 2;
    width: 100%;
    height: var(--strip-h, 80px);
    flex-shrink: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    /* rounded bottom corners to match accordion */
    border-radius: 0 0 var(--acc-rad,16px) var(--acc-rad,16px);
    /* show even when empty — will just be transparent */
    background: transparent;
}
.epc-acc-strip img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}
/* When no image uploaded, hide strip entirely */
.epc-acc-strip:empty,
.epc-acc-strip:not(:has(img)) {
    display: none;
}

/* ---------- Arrows ---------- */
.epc-arrow {
    position: absolute;
    z-index: 30;
    width:  calc(var(--epc-arrow-size,16px) + 28px);
    height: calc(var(--epc-arrow-size,16px) + 28px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--epc-arrow-bg, rgba(0,0,0,0.35));
    color: var(--epc-arrow-color, #ffffff);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: filter 0.2s ease;
    line-height: 1;
}
.epc-arrow:hover { filter: brightness(1.3); }
.epc-arrow i, .epc-arrow svg {
    font-size: var(--epc-arrow-size, 16px);
    width:  var(--epc-arrow-size, 16px);
    height: var(--epc-arrow-size, 16px);
    display: block;
    fill: currentColor;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .epc-arrow { display: none; }
}