/* ========================================================
 * Team Slider for Elementor — Front-end styles
 *
 * Responsive strategy:
 *   - Card image uses aspect-ratio (portrait 4:5) instead of fixed
 *     pixel heights so it scales fluidly at any viewport width.
 *   - Typography uses clamp() for smooth scaling desktop → mobile.
 *   - Breakpoints align with Elementor defaults:
 *       Desktop:      >= 1025px
 *       Tablet:       768px – 1024px
 *       Mobile:       <= 767px
 * ======================================================== */

/* -------- Wrapper + slider -------- */
.tse-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.tse-wrapper *,
.tse-wrapper *::before,
.tse-wrapper *::after {
    box-sizing: border-box;
}

.tse-slider {
    width: 100%;
}

/* Before Slick initializes, lay slides out as a simple flex row so the widget
   is visible in the Elementor editor even if the JS hasn't run yet. */
.tse-slider:not(.slick-initialized) {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    overflow: hidden;
}
.tse-slider:not(.slick-initialized) .tse-slide {
    flex: 0 0 33.3333%;
    min-width: 0;
}
@media (max-width: 1024px) {
    .tse-slider:not(.slick-initialized) .tse-slide { flex-basis: 50%; }
}
@media (max-width: 767px) {
    .tse-slider:not(.slick-initialized) .tse-slide { flex-basis: 100%; }
}

/* Prevent horizontal overflow that can happen on narrow phones. */
.tse-slider .slick-list {
    overflow: hidden;
    width: 100%;
}

/* -------- Slide + card -------- */
.tse-slide {
    height: auto;
    box-sizing: border-box;
    padding: 0 6px;      /* Default gutter, overridden by Elementor control */
}

/* Equal-height cards inside slick */
.tse-slider .slick-track {
    display: flex !important;
    align-items: stretch;
}
.tse-slider .slick-slide {
    height: inherit !important;
    display: flex !important;
    float: none;         /* Cancel slick float, we use flex */
}
.tse-slider .slick-slide > div {
    width: 100%;
    display: flex;
}

.tse-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #2d3f4a;
    overflow: hidden;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}

/* -------- Image: fluid, aspect-ratio driven -------- */
.tse-card__image {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;                 /* portrait like the reference */
    max-height: 520px;                   /* hard cap so single/wide cards stay reasonable */
    overflow: hidden;
    background-color: #eaeef1;
}
.tse-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* Fallback for very old browsers without aspect-ratio (Safari < 15). */
@supports not (aspect-ratio: 1 / 1) {
    .tse-card__image {
        height: 0;
        padding-bottom: 125%;            /* 4:5 == 125% */
    }
}

/* When Slick hasn't initialized yet (editor preview, initial load), the card
   may be sized by its flex parent and get huge on wide screens. Cap the image
   with a fixed height so the preview stays proportional. */
.tse-slider:not(.slick-initialized) .tse-card__image {
    aspect-ratio: auto;
    height: 380px;
    max-height: 380px;
}
@media (max-width: 1024px) {
    .tse-slider:not(.slick-initialized) .tse-card__image { height: 320px; }
}
@media (max-width: 767px) {
    .tse-slider:not(.slick-initialized) .tse-card__image { height: 280px; }
}

/* -------- Footer / text -------- */
.tse-card__footer {
    padding: clamp(18px, 3vw, 32px) clamp(14px, 2.5vw, 24px);
    text-align: center;
    background: #2d3f4a;
    flex: 1 1 auto;
}

.tse-card__name {
    margin: 0 0 12px;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(22px, 2.4vw, 32px);
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: 0.5px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Decorative divider: line — dot — line */
.tse-card__divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px auto 14px;
    width: clamp(70px, 8vw, 100px);
}
.tse-card__divider::before,
.tse-card__divider::after {
    content: "";
    display: block;
    height: 2px;
    flex: 1 1 auto;
    max-width: 40px;
    background-color: #ffffff;
    border-radius: 2px;
}
.tse-card__divider-dot {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #4ade80;
    flex: 0 0 auto;
}

.tse-card__role {
    margin: 0;
    font-weight: 700;
    font-size: clamp(14px, 1.3vw, 18px);
    line-height: 1.3;
    color: #ec4899;
    letter-spacing: 0.3px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* -------- Arrows -------- */
.tse-slider .slick-prev,
.tse-slider .slick-next {
    z-index: 5;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.tse-slider .slick-prev { left: 10px; }
.tse-slider .slick-next { right: 10px; }

.tse-slider .slick-prev:hover,
.tse-slider .slick-next:hover,
.tse-slider .slick-prev:focus,
.tse-slider .slick-next:focus {
    background: rgba(0, 0, 0, 0.65);
}

.tse-slider .slick-prev::before,
.tse-slider .slick-next::before {
    font-family: "slick";
    font-size: 22px;
    color: #ffffff;
    opacity: 1;
}

/* -------- Dots -------- */
.tse-slider .slick-dots {
    position: relative;
    bottom: auto;
    margin-top: 18px;
    padding: 0;
    line-height: 1;
}
.tse-slider .slick-dots li {
    margin: 0 4px;
}
.tse-slider .slick-dots li button::before {
    font-size: 10px;
    color: #94a3b8;
    opacity: 0.8;
}
.tse-slider .slick-dots li.slick-active button::before {
    color: #ec4899;
    opacity: 1;
}

/* -------- Empty state (editor) -------- */
.tse-empty {
    padding: 40px;
    text-align: center;
    background: #f7f8fa;
    border: 2px dashed #cbd5e1;
    border-radius: 8px;
    color: #475569;
    font-size: 15px;
    line-height: 1.6;
}
.tse-empty a { color: #ec4899; font-weight: 600; text-decoration: none; }
.tse-empty a:hover { text-decoration: underline; }

/* ================================================
 * Responsive tuning (Elementor default breakpoints)
 * ================================================ */

/* --- Tablet (768px – 1024px) --- */
@media (max-width: 1024px) {
    .tse-slide { padding: 0 5px; }
    .tse-card__footer { padding: 22px 18px; }
}

/* --- Mobile (<= 767px) --- */
@media (max-width: 767px) {
    .tse-slide { padding: 0 4px; }

    .tse-card__image {
        aspect-ratio: 3 / 4;             /* Slightly less tall on phones */
    }
    @supports not (aspect-ratio: 1 / 1) {
        .tse-card__image { padding-bottom: 133.33%; }
    }

    .tse-card__footer { padding: 20px 14px; }
    .tse-card__name   { font-size: clamp(22px, 6vw, 28px); }
    .tse-card__role   { font-size: clamp(14px, 4vw, 17px); }

    /* Smaller, more visible tap targets for arrows on phones */
    .tse-slider .slick-prev,
    .tse-slider .slick-next {
        width: 38px;
        height: 38px;
    }
    .tse-slider .slick-prev { left: 6px; }
    .tse-slider .slick-next { right: 6px; }
    .tse-slider .slick-prev::before,
    .tse-slider .slick-next::before { font-size: 18px; }
}

/* --- Extra small (<= 400px): give the single card room to breathe --- */
@media (max-width: 400px) {
    .tse-card__image { aspect-ratio: 1 / 1; }
    @supports not (aspect-ratio: 1 / 1) {
        .tse-card__image { padding-bottom: 100%; }
    }
    .tse-card__name { font-size: 22px; }
    .tse-card__role { font-size: 14px; }
}

/* -------- RTL / Arabic support -------- */
/* When the page is RTL (Arabic, Hebrew, etc.), swap arrow positions and use a
   font stack that renders Arabic beautifully. Georgia italic doesn't support
   Arabic glyphs — fall back to system Arabic fonts. */
html[dir="rtl"] .tse-card__name,
.rtl .tse-card__name,
.tse-wrapper[dir="rtl"] .tse-card__name {
    font-family: "Cairo", "Tajawal", "Amiri", "Segoe UI", Tahoma, sans-serif;
    font-style: normal;      /* italic Arabic is unusual/hard to read */
    letter-spacing: 0;
}
html[dir="rtl"] .tse-card__role,
.rtl .tse-card__role,
.tse-wrapper[dir="rtl"] .tse-card__role {
    font-family: "Cairo", "Tajawal", "Segoe UI", Tahoma, sans-serif;
    letter-spacing: 0;
}

/* Arrow positioning in RTL */
html[dir="rtl"] .tse-slider .slick-prev,
.rtl .tse-slider .slick-prev,
.tse-wrapper[dir="rtl"] .tse-slider .slick-prev { left: auto; right: 10px; }
html[dir="rtl"] .tse-slider .slick-next,
.rtl .tse-slider .slick-next,
.tse-wrapper[dir="rtl"] .tse-slider .slick-next { right: auto; left: 10px; }
@media (max-width: 767px) {
    html[dir="rtl"] .tse-slider .slick-prev,
    .rtl .tse-slider .slick-prev,
    .tse-wrapper[dir="rtl"] .tse-slider .slick-prev { right: 6px; }
    html[dir="rtl"] .tse-slider .slick-next,
    .rtl .tse-slider .slick-next,
    .tse-wrapper[dir="rtl"] .tse-slider .slick-next { left: 6px; }
}

/* Reduced motion: disable Slick transitions where possible */
@media (prefers-reduced-motion: reduce) {
    .tse-slider * { transition: none !important; animation: none !important; }
}