/* ============================================================
   LYKA LABS BOARD OF DIRECTORS - FIGMA EXACT SPECIFICATIONS
   ============================================================ */

.lyka-directors-section {
    width: 100%;
    /* Removed max-width to allow full-width extension */
    margin: 0 auto !important; /* Removed vertical margins */
    font-family: 'Sora', sans-serif;
    box-sizing: border-box;
    position: relative;
    background-color: transparent;
}

.lyka-directors-section * {
    box-sizing: border-box;
}

/* Optional section title styling */
.lyka-directors-title-wrapper {
    margin-bottom: 30px;
    padding-left: 70px; /* Align title with first card offset */
}

.lyka-directors-section-title {
    font-family: "STIX Two Text", Georgia, serif;
    font-size: 34px;
    font-weight: 500;
    line-height: 120%;
    color: #0A2C72;
    margin: 0;
}

/* Carousel Wrapper */
.lyka-directors-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: visible;
}

/* Slider Track Container (CSS Scroll Snap) */
.lyka-directors-slider-track {
    display: flex;
    flex-direction: row;
    gap: 30px !important; /* Changed from 24px to 30px */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    
    /* Gutter alignment: 70px padding & scroll-padding to snap cleanly to offset */
    padding: 0 70px !important;
    scroll-padding: 0 70px !important;
    
    scrollbar-width: none; /* Hide default scrollbars */
}

.lyka-directors-slider-track::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Chrome/Safari */
}

/* Hide Navigation Arrow Controls completely */
.lyka-directors-nav {
    display: none !important;
}

/* Individual Director Card (Figma EXACT specifications) */
.lyka-director-card {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 422.36px !important; /* Figma exact width */
    height: 318px !important;    /* Figma exact height */
    background: #FFF !important;
    border-radius: 24px !important; /* Changed from 20px to 24px */
    padding: 40px !important;    /* 40px padding on all sides */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.03) !important;
    
    /* Disable all hover animations and translation styles */
    transition: none !important;
    transform: none !important;

    /* Prevent text selection when dragging the card */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Ensure card states remain completely flat on hover (no shadow expansion or movement) */
.lyka-director-card:hover {
    transform: none !important;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.03) !important;
}

/* Card Header */
.lyka-director-card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px !important; /* Exact gap 16px between Name and Designation */
    width: 100%;
}

/* Director Name (STIX Two Text) */
.lyka-director-name {
    font-family: "STIX Two Text", Georgia, serif !important;
    font-size: 34px !important;   /* Exact size 34px */
    color: #0A2C72 !important;    /* Exact color code */
    font-style: normal;
    font-weight: 500;
    line-height: 100% !important; /* Exact line-height 100% (34px) */
    margin: 0;
}

/* Designation (Sora uppercase) */
.lyka-director-designation {
    font-family: 'Sora', sans-serif !important;
    font-size: 14px !important;   /* Exact size 14px */
    color: #1E1D19 !important;    /* Exact color code */
    font-style: normal;
    font-weight: 500;
    line-height: 100% !important; /* Exact line-height 100% (14px) */
    letter-spacing: 0.7px !important; /* Exact spacing 0.7px */
    text-transform: uppercase !important;
    margin: 0px !important;      /* Enforced 0px margin */
}

/* Central Divider style */
.lyka-director-divider {
    width: 100% !important;        /* Auto-spans the remaining available card width */
    height: 1px !important;
    opacity: 0.1 !important;
    background: #1E1D19 !important;
    margin: 21px 0 !important;    /* Exact spacing 21px above/below divider */
}

/* Card Body */
.lyka-director-card-body {
    width: 100%;
    flex-grow: 1;
}

/* Bio Content (Sora) */
.lyka-director-description {
    font-family: 'Sora', sans-serif !important;
    font-size: 18px !important;   /* Exact size 18px */
    color: #1E1D19 !important;    /* Exact color code */
    font-style: normal;
    font-weight: 400;
    line-height: 120% !important; /* Exact line-height 120% (21.6px) */
    opacity: 0.8 !important;      /* Exact opacity 0.8 */
    margin: 0;
}

.lyka-director-description p {
    margin: 0;
}

/* ============================================================
   RESPONSIVE DESIGN & TYPOGRAPHY SCALING (Matches FAQ rules)
   ============================================================ */

/* Screens below 1780px */
@media (max-width: 1780px) {
    .lyka-directors-section {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Laptop Screens (max-width: 1440px) */
@media (max-width: 1440px) {
    /* Responsive gutter adjustment: 30px offset from 1440px to 1280px */
    .lyka-directors-slider-track {
        padding: 0 30px !important;
        scroll-padding: 0 30px !important;
    }

    .lyka-directors-title-wrapper {
        padding-left: 30px !important;
    }

    /* Scale Card Padding down to 30px (1440px to 1025px) */
    .lyka-director-card {
        padding: 30px !important;
    }

    /* Scale Bio Description down to 17px (1440px to 1025px) */
    .lyka-director-description {
        font-size: 17px !important;
    }

    /* Scale Designation down to 13px */
    .lyka-director-designation {
        font-size: 13px !important;
    }
}

/* Laptop Screens (max-width: 1280px) */
@media (max-width: 1280px) {
    /* Responsive gutter adjustment: 20px offset from 1280px to end */
    .lyka-directors-slider-track {
        padding: 0 20px !important;
        scroll-padding: 0 20px !important;
    }

    .lyka-directors-title-wrapper {
        padding-left: 20px !important;
    }

    /* Scale Director Name down to 30px (1280px to 1025px) */
    .lyka-director-name {
        font-size: 30px !important;
    }
}

/* Tablet Screens (max-width: 1024px) */
@media (max-width: 1024px) {
    /* Set height to auto on tablets/mobile to avoid text overflow inside narrower cards */
    .lyka-director-card {
        width: 380px !important;
        height: auto !important;
        padding: 24px !important; /* Scale Card Padding down to 24px (1024px to 769px) */
    }

    .lyka-director-divider {
        width: 100% !important;
    }

    /* Scale Director Name down to 28px (1024px to 992px) */
    .lyka-director-name {
        font-size: 28px !important;
    }

    /* Scale Bio Description down to 16px (1024px to 991px) */
    .lyka-director-description {
        font-size: 16px !important;
    }

    /* Scale Designation down to 12px */
    .lyka-director-designation {
        font-size: 12px !important;
    }

    /* Responsive card gap on tablets */
    .lyka-directors-slider-track {
        gap: 24px !important;
    }
}

/* Tablet/Mobile View (max-width: 991px) */
@media (max-width: 991px) {
    /* Scale Director Name down to 26px (991px to 768px) */
    .lyka-director-name {
        font-size: 26px !important;
    }
}

/* Tablet Screens (max-width: 990px) */
@media (max-width: 990px) {
    /* Scale Bio Description down to 14px (below 991px) */
    .lyka-director-description {
        font-size: 14px !important;
    }
}

/* Tablet/Mobile Boundaries (max-width: 768px) */
@media (max-width: 768px) {
    .lyka-director-card {
        width: 340px !important;
        padding: 20px !important; /* Scale Card Padding down to 20px (768px to 481px) */
    }

    /* Scale Designation down to 11px */
    .lyka-director-designation {
        font-size: 11px !important;
    }

    /* Responsive card gap on mobiles */
    .lyka-directors-slider-track {
        gap: 16px !important;
    }
}

/* Mobile Screens (max-width: 767px) */
@media (max-width: 767px) {
    /* Scale Director Name down to 22px (below 768px) */
    .lyka-director-name {
        font-size: 22px !important;
    }
}

/* Small Mobile Screens (max-width: 480px) */
@media (max-width: 480px) {
    /* Responsive card gap on small mobiles */
    .lyka-directors-slider-track {
        gap: 12px !important;
    }

    .lyka-director-card {
        width: 260px !important; /* Narrower for small mobile screens */
        padding: 16px !important; /* Scale Card Padding down to 16px */
    }
}