/**
 * Faculty Section Styles
 * 
 * Auto-moving slider layout for faculty team member cards
 * Features: 3-column desktop, 2-column tablet, 1-column mobile
 * Brand colors: Deep green background, lime title, lavender nav hover
 * Uses unified slider.js for touch/swipe and keyboard navigation
 */


/* Main section - deep green background with global padding */
.faculty {
    background-color: var(--ica-green-deep);
    padding: var(--global-padding-desktop) 0!important;
}

/* Inner container - constrained to content rails */
.faculty__inner {
    max-width: var(--wp--style--global--wide-size, 1280px);
    margin: 0 auto;
    position: relative;
    padding: 0 clamp(1rem, 4vw, 2rem);
    box-sizing: border-box;
}

/* Header with title and navigation controls - flex layout */
.faculty__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(30px, 6vw, 60px);
    gap: 20px;
}

.faculty__title {
    font-family: var(--font-ui, "Termina", "Arial Black", sans-serif) !important;
    color: var(--ica-lime) !important;
    text-transform: uppercase !important;

    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 500 !important;
    line-height: 1.2;
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* Navigation controls at top right */
.faculty__nav-controls {
    display: flex;
    gap: clamp(10px, 2vw, 15px);
    align-items: center;
}

.faculty__nav-btn {
    background: var(--ica-lime) !important;
    border: none;
    border-radius: 50%;
    width: clamp(40px, 8vw, 50px);
    height: clamp(40px, 8vw, 50px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ease);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 40px;
    min-height: 40px;
}

.faculty__nav-btn:hover {
    background: var(--ica-lavender) !important; /* Brand lavender on hover */
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.faculty__nav-btn:active {
    transform: scale(0.95);
}

.faculty__nav-btn:focus {
    outline: 2px solid var(--ica-lime);
    outline-offset: 2px;
}

.faculty__nav-icon {
    width: clamp(18px, 4vw, 24px);
    height: clamp(18px, 4vw, 24px);
    filter: brightness(0);
    transition: filter var(--ease);
}


/* Slider container */
.faculty__slider {
    width: 100%;
    overflow: hidden;
}

.faculty__slider-track {
    display: flex;
    gap: clamp(15px, 3vw, 30px);
    transition: transform 0.8s ease-in-out;
}


/* Faculty member cards - 3 slides on desktop, responsive layout */
.faculty__member {
    background: var(--ica-bg); /* Brand background color */
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform var(--ease), box-shadow var(--ease);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: calc((100% - 60px) / 3); /* 3 columns with 30px gaps */
}

.faculty__member:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Row 1: Image (1:1 aspect ratio) */
.faculty__member-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.faculty__member-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.faculty__member:hover .faculty__member-image {
    transform: scale(1.05);
}

/* Placeholder styles removed - not used in template */

/* Member info section - name, designation, roles */
.faculty__member-info {
    padding: 20px;
    background: var(--ica-bg); /* Brand background color */
    text-align: left;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Spacing between text elements */
}

.faculty__member-name {
    font-family: var(--font-ui);
    color: var(--ica-green-deep);
    font-size: clamp(18px, 3vw, 22px); /* Responsive font size - min < max */
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
    word-break: keep-all;
    line-height: 1.2;
}

.faculty__member-designation {
    font-family: var(--font-ui, "Termina", sans-serif) !important;
    color: var(--ica-green-deep);
    font-size: clamp(14px, 2vw, 16px);
    margin: 0;
    font-weight: 400;
    text-transform: uppercase;
}

/* Secondary Role Styling */
.faculty__member-secondary-role {
    font-family: var(--font-ui, "Termina", sans-serif) !important;
    font-weight: 400;
    font-size: 16px;
    font-style: italic;
    text-transform: uppercase;
    color: var(--ica-green-deep);
    margin: 0;
    line-height: 1.4;
}

/* External Affiliation Styling */
.faculty__member-external-affiliation {
    font-family: var(--font-ui, "Termina", sans-serif) !important;
    font-style: italic;
    font-weight: 300;
    font-size: 16px;
    text-transform: uppercase;
    color: var(--ica-green-deep);
    margin: 0;
    line-height: 1.4;
}


/* Row 3: CTA (Lime Background) */
/* CTA styles removed - CTA disabled in template */

/* Large Desktop (1200px+) - wider container */
@media (min-width: 1200px) {
    .faculty__inner {
        max-width: 1400px; /* Wider container for large screens */
    }
}

/* Tablet (800px and below) - 2 columns */
@media (max-width: 800px) {
    .faculty__member {
        width: calc((100% - 30px) / 2); /* 2 columns with 30px gap */
    }
    
    .faculty__slider-track {
        gap: clamp(15px, 4vw, 20px); /* Responsive gap */
    }
}

/* Mobile (500px and below) - 1 column */
@media (max-width: 500px) {
    .faculty__member {
        width: 100%; /* Single column on mobile */
    }
    
    .faculty__slider-track {
        gap: clamp(15px, 4vw, 20px); /* Responsive gap */
    }
    
    .faculty__member-name{
        font-size: 32px !important; /* Larger text on mobile */
    }
}

/* Small Mobile (480px and below) - stacked header */
@media (max-width: 480px) {
    .faculty {
        padding: var(--global-padding-mobile) !important; /* Mobile padding */
    }
    
    .faculty__header {
        flex-direction: column; /* Stack title and controls */
        align-items: flex-start;
        gap: clamp(15px, 4vw, 20px);
    }
    
    .faculty__nav-controls {
        align-self: flex-end; /* Align controls to right */
    }
}

/* Extra Small Mobile (360px and below) - compact layout */
@media (max-width: 360px) {
    .faculty__inner {
        padding: 0 0.75rem; /* Reduced padding */
    }
    
    .faculty__header {
        gap: 12px; /* Tighter spacing */
    }
    
    .faculty__nav-controls {
        gap: 8px; /* Smaller button gap */
    }
    
    .faculty__nav-btn {
        min-width: 36px; /* Smaller touch targets */
        min-height: 36px;
    }
}


/* Generic ICA Team Slider Classes - for JavaScript functionality */
.ica-team-slider-visible {
    /* Class added by JavaScript when slider is visible - used by slider.js */
    opacity: 1;
    transform: translateY(0);
}

/* Accessibility: Respect prefers-reduced-motion - disable animations */
@media (prefers-reduced-motion: reduce) {
    .faculty__member,
    .faculty__member-image,
    .faculty__slider-track {
        transition: none; /* Disable all transitions for accessibility */
    }
}