/* =========================================================
   VEIC 2027 — FACULTY SECTION (Carousels)
   File: assets/css/faculty.css
   ========================================================= */

.veic-faculty-outer{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 10px 20px 40px;
    box-sizing: border-box;
}

.veic-faculty-grid{
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    box-sizing: border-box;
}

.veic-faculty-col{
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.veic-faculty-col-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.veic-faculty-col-head h3{
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    color: var(--veic-primary);
    margin: 0;
}

.veic-faculty-viewall{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--veic-secondary);
    text-decoration: none;
}

.veic-faculty-viewall:hover{
    color: var(--veic-primary);
}

/* -------- "Coming soon" placeholder (used in place of a
   carousel when that faculty group isn't confirmed yet) -------- */
.veic-faculty-col-pending .veic-faculty-col-head{
    justify-content: flex-start;
}

.veic-faculty-pending{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    height: 260px;
    max-height: 260px;
    background: var(--veic-bg);
    border: 1px dashed rgba(10, 46, 115, 0.25);
    border-radius: 14px;
    padding: 30px 20px;
    box-sizing: border-box;
    overflow: hidden;
}

.veic-faculty-pending-icon{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    max-width: 46px;
    max-height: 46px;
    border-radius: 50%;
    background: rgba(0, 200, 255, 0.12);
    color: var(--veic-primary);
    flex: 0 0 auto;
}

.veic-faculty-pending-icon svg{
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    flex: 0 0 auto;
}

.veic-faculty-pending-text{
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--veic-text);
    margin: 0;
}

/* -------- Carousel shell -------- */
.veic-faculty-carousel{
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.veic-faculty-track-wrap{
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.veic-faculty-track{
    display: flex;
    width: 100%;
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: transform;
    backface-visibility: hidden;
    box-sizing: border-box;
}

/* Used by the JS to instantly snap the track back to the
   equivalent real position when it drifts into a cloned set —
   without this, that reset would show as a visible flash/jump. */
.veic-faculty-track.veic-no-transition{
    transition: none !important;
}

/* -------- Card -------- */
.veic-faculty-card{
    flex: 0 0 25%;
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    padding: 0 10px;
    text-align: center;
}

.veic-faculty-photo-wrap{
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #EAF2FF;
    box-sizing: border-box;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.veic-faculty-card:hover .veic-faculty-photo-wrap{
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(10, 46, 115, 0.18);
}

.veic-faculty-photo{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.veic-faculty-flag{
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 18px;
    background: var(--veic-white);
    border-radius: 4px;
    width: 26px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    line-height: 1;
}

.veic-faculty-name{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--veic-primary);
    line-height: 1.3;
    margin-bottom: 3px;
}

.veic-faculty-institution{
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #6b7280;
    line-height: 1.35;
}

/* -------- Arrows -------- */
.veic-faculty-arrow{
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #E7ECF5;
    background: var(--veic-white);
    color: var(--veic-primary);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(10,46,115,0.10);
    transition: background 0.2s ease, color 0.2s ease;
    z-index: 5;
}

.veic-faculty-arrow:hover{
    background: var(--veic-primary);
    color: var(--veic-white);
}

.veic-faculty-prev{ left: -17px; }
.veic-faculty-next{ right: -17px; }

.veic-faculty-arrow[disabled]{
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* -------- Dots -------- */
.veic-faculty-dots{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.veic-faculty-dot{
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D6E0F0;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, width 0.2s ease;
}

.veic-faculty-dot.is-active{
    background: var(--veic-secondary);
    width: 18px;
    border-radius: 4px;
}


/* =========================================================
   RESPONSIVE
   -----------------------------------------------------------
   Breakpoint strategy:
   - Desktop (>1200px):        2 columns side-by-side, 4 cards/view
   - Laptop (993–1200px):      2 columns side-by-side, 3 cards/view
   - Tablet landscape (768–992px): columns stack full-width, 3 cards/view
   - Tablet portrait (481–767px):  columns stack full-width, 2 cards/view
   - Mobile (≤480px):              columns stack full-width, 1 card/view
   ========================================================= */

@media (max-width: 1200px){
    .veic-faculty-grid{ gap: 30px; }
    .veic-faculty-card{ flex: 0 0 33.333%; }
}

/* Desktop tracks are much wider than mobile ones, so the same
   transition duration covers far more pixels and reads as
   "faster" even though the timing is identical. Slow it down
   here specifically for wide viewports. */
@media (min-width: 993px){
    .veic-faculty-track{
        transition: transform 1.4s cubic-bezier(0.45, 0, 0.2, 1);
    }
}

@media (max-width: 992px){
    .veic-faculty-outer{ padding: 10px 15px 35px; }
    .veic-faculty-grid{
        grid-template-columns: 1fr;
        gap: 45px;
    }
    .veic-faculty-card{ flex: 0 0 33.333%; }
    .veic-faculty-col-head h3{ font-size: 14px; }
}

@media (max-width: 767px){
    .veic-faculty-card{ flex: 0 0 50%; }
    .veic-faculty-photo-wrap{ border-radius: 10px; margin-bottom: 10px; }
    .veic-faculty-name{ font-size: 12.5px; }
    .veic-faculty-institution{ font-size: 10.5px; }

    /* Keep arrows fully inside the viewport on stacked full-width
       columns instead of overflowing past the card edges */
    .veic-faculty-arrow{
        width: 38px;
        height: 38px;
        font-size: 13px;
    }
    .veic-faculty-prev{ left: 0; }
    .veic-faculty-next{ right: 0; }
    .veic-faculty-track-wrap{
        padding: 0 44px;
        box-sizing: border-box;
    }
}

@media (max-width: 480px){
    .veic-faculty-outer{ padding: 5px 12px 30px; }
    .veic-faculty-grid{ gap: 36px; }
    .veic-faculty-card{ flex: 0 0 100%; padding: 0 4px; }
    .veic-faculty-photo-wrap{ max-width: 240px; margin: 0 auto 12px; }
    .veic-faculty-name{ font-size: 14px; }
    .veic-faculty-institution{ font-size: 12px; }
    .veic-faculty-col-head{ margin-bottom: 16px; }
    .veic-faculty-col-head h3{ font-size: 15px; }
    .veic-faculty-viewall{ font-size: 12px; }

    .veic-faculty-track-wrap{
        padding: 0 40px;
        box-sizing: border-box;
    }
    .veic-faculty-arrow{ width: 36px; height: 36px; }
    .veic-faculty-prev{ left: 0; }
    .veic-faculty-next{ right: 0; }

    .veic-faculty-dots{ margin-top: 16px; gap: 10px; }
    .veic-faculty-dot{ width: 9px; height: 9px; }
    .veic-faculty-dot.is-active{ width: 22px; }
}