/* ============================================================
   Team Showcase Widget v1.4.0
   - No divider between content and photo
   - Clean mobile-first card layout for phones
   - Desktop/tablet keeps side-by-side hero
   ============================================================ */

.tsw-section *,
.tsw-section *::before,
.tsw-section *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.tsw-section {
    width: 100%;
    font-family: inherit;
    position: relative;
    --tsw-accent:      #3db843;
    --tsw-accent-dark: #2e9933;
}

/* ---- Section Heading ---- */
.tsw-section-heading {
    text-align: center;
    padding: 56px 20px 36px;
    background: #fff;
}

.tsw-section-title {
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
}

/* ============================================================
   DESKTOP HERO (>680px)
   Side-by-side: content left, photo right, NO divider
   ============================================================ */
.tsw-hero {
    position: relative;
    width: 100%;
}

.tsw-panels-wrapper {
    position: relative;
    width: 100%;
    min-height: 480px;
    overflow: hidden;
}

/* Progress bar */
.tsw-progress-track {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(0,0,0,0.06);
    z-index: 5;
    overflow: hidden;
}
.tsw-progress-bar {
    height: 100%;
    width: 0%;
    background: #3db843 !important;
    border-radius: 0 2px 2px 0;
    will-change: width;
}

/* Panel */
.tsw-panel {
    display: flex !important;
    width: 100%;
    min-height: 480px;
    position: absolute;
    top: 0; left: 0; right: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(60px);
    transition: opacity 0.55s cubic-bezier(.4,0,.2,1),
                transform 0.55s cubic-bezier(.4,0,.2,1);
    will-change: transform, opacity;
    background: none !important;
    /* Kill any theme border between columns */
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.tsw-panel.active {
    opacity: 1;
    pointer-events: all;
    position: relative;
    transform: translateX(0);
}

[data-animation="fade"]  .tsw-panel            { transform: none; }
[data-animation="scale"] .tsw-panel            { transform: scale(0.95); }
[data-animation="scale"] .tsw-panel.active     { transform: scale(1); }
[data-animation="flip"]  .tsw-panel            { transform: perspective(900px) rotateY(12deg); }
[data-animation="flip"]  .tsw-panel.active     { transform: perspective(900px) rotateY(0); }

.tsw-panel.leaving-left  { transform: translateX(-60px) !important; opacity: 0 !important; }
.tsw-panel.leaving-right { transform: translateX(60px)  !important; opacity: 0 !important; }
.tsw-panel.entering-left  { transform: translateX(-60px); }
.tsw-panel.entering-right { transform: translateX(60px); }

/* ---- Text content side ---- */
.tsw-hero-content {
    width: 55%;
    flex-shrink: 0;
    padding: 52px 52px 72px 64px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #ffffff;
    overflow-y: auto;
    max-height: 560px;
    /* Explicitly kill any border — theme interference */
    border: none !important;
    border-right: none !important;
    border-left: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.tsw-hero-content::-webkit-scrollbar { width: 3px; }
.tsw-hero-content::-webkit-scrollbar-thumb {
    background: rgba(61,184,67,0.25);
    border-radius: 2px;
}

/* ---- Photo side ---- */
.tsw-hero-photo-wrap {
    width: 45%;
    flex-shrink: 0;
    min-height: 480px;
    position: relative;
    overflow: hidden;
    background-color: #e0e5e6;
    /* Kill any border */
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.tsw-hero-photo-inner {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    transition: transform 0.7s cubic-bezier(.4,0,.2,1), opacity 0.5s ease;
    opacity: 0;
    transform: scale(1.06);
}

.tsw-panel.active .tsw-hero-photo-inner {
    opacity: 1;
    transform: scale(1);
    transition-delay: 0.05s;
}

.tsw-panel.photo-left { flex-direction: row-reverse; }

/* ---- Typography ---- */
.tsw-member-name {
    font-size: clamp(1.3rem, 2.4vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #111111;
    line-height: 1.15;
    margin-bottom: 8px;
}

.tsw-member-role-wrap { margin-bottom: 20px; }

.tsw-member-role {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #3db843;
    display: block;
    margin-bottom: 8px;
}

.tsw-role-divider {
    width: 32px;
    height: 2px;
    background: #3db843;
    border-radius: 1px;
}

.tsw-member-bio {
    font-size: 0.86rem;
    line-height: 1.8;
    color: #444444;
    margin-bottom: 20px;
}
.tsw-member-bio p           { margin-bottom: 0.7em; }
.tsw-member-bio p:last-child { margin-bottom: 0; }

.tsw-credentials {
    list-style: none;
    border-top: 1px solid #eeeeee;
    padding-top: 14px;
}

.tsw-credential-item {
    font-size: 0.80rem;
    line-height: 1.7;
    color: #2e9933;
    padding-left: 15px;
    position: relative;
}
.tsw-credential-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0.58em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #3db843;
}

/* ============================================================
   ARROWS — pure green, no divider side effect
   ============================================================ */
.tsw-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 44px; height: 44px;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    line-height: 1;
    transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.22s;
    background-image: none !important;
    text-decoration: none;
}

.tsw-arrow-prev {
    left: 16px;
    border: 2px solid #111111 !important;
    background: transparent !important;
    color: #111111 !important;
}
.tsw-arrow-prev:hover, .tsw-arrow-prev:focus {
    background: #3db843 !important;
    border-color: #3db843 !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.08);
}

.tsw-arrow-next {
    right: 16px;
    border: 2px solid #3db843 !important;
    background: #3db843 !important;
    color: #fff !important;
}
.tsw-arrow-next:hover, .tsw-arrow-next:focus {
    background: #2e9933 !important;
    border-color: #2e9933 !important;
    transform: translateY(-50%) scale(1.08);
}

/* ============================================================
   THUMBNAIL STRIP — Glassmorphism
   ============================================================ */
.tsw-thumbs-strip {
    position: relative;
    z-index: 10;
    margin-top: -70px;
    background: rgba(255,255,255,0.50);
    backdrop-filter: blur(20px) saturate(170%) brightness(1.04);
    -webkit-backdrop-filter: blur(20px) saturate(170%) brightness(1.04);
    border-top: 1px solid rgba(255,255,255,0.80);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.65), 0 -4px 24px rgba(0,0,0,0.06);
    padding: 20px 0 24px;
}

.tsw-thumbs-strip::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.26) 100%);
}

.tsw-thumbs-inner {
    position: relative; z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 28px; flex-wrap: wrap;
    padding: 0 32px;
    max-width: 900px; margin: 0 auto;
}

.tsw-thumb-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    padding: 0 !important;
    transition: opacity 0.2s, transform 0.25s;
    opacity: 0.45;
    text-align: center;
}

.tsw-thumb-item:hover  { opacity: 0.78; transform: translateY(-3px); }
.tsw-thumb-item.active {
    opacity: 1; transform: translateY(-5px);
    background: none !important;
    background-color: transparent !important;
    border: none !important;
}

.tsw-thumb-avatar {
    width: 68px !important; height: 68px !important;
    border-radius: 50% !important;
    overflow: hidden;
    border: 3px solid transparent !important;
    background: #c8d0d4 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.13);
    transition: border-color 0.3s, box-shadow 0.3s;
    flex-shrink: 0; display: block;
}

.tsw-thumb-item.active .tsw-thumb-avatar {
    border: 3px solid #3db843 !important;
    box-shadow: 0 0 0 3px rgba(61,184,67,0.20), 0 6px 18px rgba(61,184,67,0.28) !important;
}

.tsw-thumb-avatar-bg {
    width: 100%; height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    display: block;
}

.tsw-thumb-name {
    font-size: 0.67rem !important; font-weight: 700;
    letter-spacing: 0.05em; color: #111111;
    text-transform: uppercase; line-height: 1.3;
    max-width: 86px; background: none !important;
    word-break: break-word;
}

.tsw-thumb-role {
    font-size: 0.60rem !important; color: #555555;
    line-height: 1.2; max-width: 86px; background: none !important;
}

/* ============================================================
   LARGE TABLET  901px–1100px
   ============================================================ */
@media (max-width: 1100px) {
    .tsw-hero-content  { padding: 44px 40px 60px 48px; }
    .tsw-member-name   { font-size: clamp(1.2rem, 2.2vw, 1.8rem); }
    .tsw-member-bio    { font-size: 0.83rem; }
}

/* ============================================================
   TABLET  681px–900px  — still side-by-side, tighter
   ============================================================ */
@media (max-width: 900px) {
    .tsw-hero-content  {
        width: 58%;
        padding: 36px 28px 52px 36px;
        max-height: none;
        overflow-y: visible;
    }
    .tsw-hero-photo-wrap { width: 42%; }
    .tsw-panels-wrapper,
    .tsw-panel,
    .tsw-hero-photo-wrap { min-height: 400px; }
    .tsw-thumbs-strip { margin-top: -50px; }
    .tsw-thumbs-inner { gap: 20px; }
    .tsw-thumb-avatar { width: 58px !important; height: 58px !important; }
    .tsw-arrow        { width: 38px; height: 38px; font-size: 0.9rem; }
    .tsw-arrow-prev   { left: 8px; }
    .tsw-arrow-next   { right: 8px; }
}

/* ============================================================
   MOBILE  ≤680px
   Completely different layout — clean stacked card
   ============================================================ */
@media (max-width: 680px) {

    /* Hide the side-by-side hero entirely on mobile */
    .tsw-hero          { display: none !important; }

    /* Show the mobile cards instead */
    .tsw-mobile-cards  { display: block !important; }

    /* Strip sits flush below, no overlap */
    .tsw-thumbs-strip  {
        margin-top: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: #f5f5f5;
        border-top: 1px solid #e0e0e0;
        box-shadow: none;
        padding: 16px 0 20px;
    }
    .tsw-thumbs-strip::before { display: none; }
    .tsw-thumbs-inner  { gap: 20px; padding: 0 16px; }
    .tsw-thumb-avatar  { width: 60px !important; height: 60px !important; }
    .tsw-thumb-name    { font-size: 0.62rem !important; max-width: 72px; }
    .tsw-thumb-role    { display: none; }
}

/* ============================================================
   MOBILE CARD LAYOUT
   Hidden on desktop, shown only on mobile
   ============================================================ */
.tsw-mobile-cards {
    display: none; /* hidden by default — shown via media query above */
}

.tsw-mobile-card {
    display: none;
    flex-direction: column;
    background: #fff;
}

.tsw-mobile-card.active {
    display: flex;
}

/* Photo — full width, fixed aspect ratio */
.tsw-mobile-photo {
    width: 100%;
    height: 56vw;
    max-height: 320px;
    min-height: 200px;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-color: #d8dfe0;
    flex-shrink: 0;
}

/* Content below photo */
.tsw-mobile-content {
    padding: 28px 24px 20px;
}

.tsw-mobile-name {
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #111111;
    line-height: 1.15;
    margin-bottom: 6px;
}

.tsw-mobile-role-wrap { margin-bottom: 16px; }

.tsw-mobile-role {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #3db843;
    display: block;
    margin-bottom: 7px;
}

.tsw-mobile-divider {
    width: 28px; height: 2px;
    background: #3db843; border-radius: 1px;
}

.tsw-mobile-bio {
    font-size: 0.88rem;
    line-height: 1.78;
    color: #444;
    margin-bottom: 18px;
}
.tsw-mobile-bio p           { margin-bottom: 0.7em; }
.tsw-mobile-bio p:last-child { margin-bottom: 0; }

.tsw-mobile-credentials {
    list-style: none;
    border-top: 1px solid #eee;
    padding-top: 14px;
    margin-bottom: 24px;
}

.tsw-mobile-cred-item {
    font-size: 0.80rem;
    line-height: 1.7;
    color: #2e9933;
    padding-left: 15px;
    position: relative;
}
.tsw-mobile-cred-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0.58em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #3db843;
}

/* Mobile nav arrows row */
.tsw-mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 20px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.tsw-mobile-nav-btn {
    width: 40px; height: 40px;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    background-image: none !important;
}

.tsw-mobile-nav-prev {
    border: 2px solid #111 !important;
    background: transparent !important;
    color: #111 !important;
}
.tsw-mobile-nav-prev:hover {
    background: #3db843 !important;
    border-color: #3db843 !important;
    color: #fff !important;
}

.tsw-mobile-nav-next {
    border: 2px solid #3db843 !important;
    background: #3db843 !important;
    color: #fff !important;
}
.tsw-mobile-nav-next:hover {
    background: #2e9933 !important;
    border-color: #2e9933 !important;
}

.tsw-mobile-counter {
    font-size: 0.78rem;
    color: #888;
    letter-spacing: 0.06em;
}

/* Extra small phone */
@media (max-width: 380px) {
    .tsw-mobile-content  { padding: 22px 18px 16px; }
    .tsw-mobile-name     { font-size: 1.15rem; }
    .tsw-mobile-bio      { font-size: 0.84rem; }
    .tsw-mobile-cred-item { font-size: 0.76rem; }
    .tsw-thumb-avatar    { width: 50px !important; height: 50px !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tsw-panel, .tsw-hero-photo-inner, .tsw-arrow, .tsw-thumb-item {
        transition: none !important; animation: none !important;
    }
    .tsw-progress-bar { transition: none !important; }
}

/* ============================================================
   NUCLEAR DIVIDER KILL
   The vertical line is Elementor or the theme injecting a border
   on the widget wrapper or an inner column. Override everything.
   ============================================================ */

/* Widget wrapper itself */
.elementor-widget-tsw_team_showcase,
.elementor-widget-tsw_team_showcase .elementor-widget-container {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* Every direct child of the panel — kills column borders */
.tsw-panel > * {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    outline: none !important;
}

/* Explicitly on content and photo wrap */
.tsw-hero-content,
.tsw-hero-photo-wrap,
.tsw-hero-photo-inner {
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Kill any ::before / ::after pseudo that might draw a line */
.tsw-hero-content::before,
.tsw-hero-content::after,
.tsw-hero-photo-wrap::before,
.tsw-hero-photo-wrap::after,
.tsw-panel::before,
.tsw-panel::after,
.tsw-panels-wrapper::before,
.tsw-panels-wrapper::after {
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    width: 0 !important;
    height: 0 !important;
}