/*=========================================
EDITORIAL BOARD
PART 1
=========================================*/

.editorial-board{

    padding:100px 0;
    background:#f8fafc;
    overflow:hidden;
    
    }
    
    .editorial-board .container{
    
    max-width:1400px;
    margin:auto;
    
    }
    
    /*=========================================
    SECTION TITLE
    =========================================*/
    
    .editorial-board .section-title{
    
    text-align:center;
    margin-bottom:60px;
    
    }
    
    .editorial-board .section-title span{
    
    display:inline-block;
    padding:12px 28px;
    background:linear-gradient(135deg,#c89b3c,#d7a846);
    color:#fff;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    box-shadow:0 12px 30px rgba(200,155,60,.25);
    
    }
    
    .editorial-board .section-title h2{
    
    margin-top:25px;
    font-size:52px;
    font-weight:800;
    color:#17365D;
    
    }
    
    .editorial-board .section-title p{
    
    margin-top:20px;
    font-size:18px;
    line-height:1.9;
    color:#6b7280;
    max-width:820px;
    margin-left:auto;
    margin-right:auto;
    
    }
    
    /*=========================================
    STATS
    =========================================*/
    
    .editorial-stats{
    
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
    margin:70px 0;
    
    }
    
    .stat-card{
    
    background:#fff;
    padding:35px;
    border-radius:22px;
    text-align:center;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    transition:.35s;
    
    }
    
    .stat-card:hover{
    
    transform:translateY(-10px);
    
    }
    
    .stat-card h3{
    
    font-size:48px;
    font-weight:800;
    color:#c89b3c;
    margin-bottom:12px;
    
    }
    
    .stat-card p{
    
    font-size:16px;
    font-weight:600;
    color:#17365D;
    margin:0;
    
    }
    
    /*=========================================
    CATEGORY FILTER
    =========================================*/
    
    .editorial-filter{
    
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:60px;
    
    }
    
    .editorial-filter button{
    
    border:none;
    outline:none;
    padding:12px 26px;
    background:#fff;
    border-radius:40px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.35s;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
    
    }
    
    .editorial-filter button:hover{
    
    background:#17365D;
    color:#fff;
    
    }
    
    .editorial-filter button.active{
    
    background:#c89b3c;
    color:#fff;
    
    }

    /*=========================================
EDITORIAL CARDS
PART 2
=========================================*/

.editorial-slider{

    position:relative;
    overflow:hidden;
    
    }
    
    .editorial-row{
    
    display:flex;
    gap:28px;
    margin-bottom:30px;
    user-select:none;
    
    }
    
    .editorial-card{

        display:flex;
        align-items:center;
        gap:18px;
        
        flex:0 0 520px;
        min-height:200px;
        
        padding:18px;
        
        background:#fff;
        border-radius:22px;
        
        box-shadow:0 15px 35px rgba(0,0,0,.08);
        
        transition:.35s;
        
        overflow:hidden;
        
        }
    
    .editorial-card:hover{
    
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,0,0,.15);
    
    }
    
    /*=========================================
    MEMBER IMAGE
    =========================================*/
    
    .editorial-image{

        width:155px;
        height:170px;
        
        flex-shrink:0;
        
        border-radius:18px;
        
        object-fit:contain;
        object-position:center;
        
        background:#f7f7f7;
        
        padding:8px;
        
        }

    /*=========================================
    CARD CONTENT
    =========================================*/
    
    .editorial-card h3{

        margin:0 0 10px;
        
        font-size:24px;
        
        font-weight:700;
        
        line-height:1.3;
        
        color:#17365D;
        
        }

    .editorial-role{

        display:inline-block;
        
        align-self:flex-start;
        
        margin:0 0 12px;
        
        padding:6px 16px;
        
        border-radius:30px;
        
        background:#eef4fb;
        
        color:#c89b3c;
        
        font-size:13px;
        
        font-weight:700;
        
        }
    
    .editorial-card p{

        margin:0 0 8px;
        
        font-size:14px;
        
        line-height:1.6;
        
        color:#6B7280;
        
        }
    
    .editorial-card p:last-of-type{
    
    margin-bottom:22px;
    
    }

    .editorial-content{

        flex:1;
        
        display:flex;
        flex-direction:column;
        justify-content:center;
        
        min-width:0;
        
        }
    
    /*=========================================
    VIEW PROFILE BUTTON
    =========================================*/
    
    .view-profile{

        margin-top:14px;
        
        width:170px;
        
        padding:12px 16px;
        
        border-radius:12px;
        
        font-size:14px;
        
        }

    .view-profile:hover{
    
    background:linear-gradient(135deg,#C89B3C,#D8AA46);
    transform:translateY(-2px);
    
    }
    
    /*=========================================
    CARD INFO ICONS (OPTIONAL)
    =========================================*/
    
    .editorial-card p::before{
    
    content:"• ";
    color:#C89B3C;
    font-weight:bold;
    
    }

    /*=========================================
EDITORIAL SLIDER
PART 3
=========================================*/

.editorial-slider{

    position:relative;
    overflow:hidden;
    width:100%;
    padding:15px 0;
    
    }
    
    .editorial-row{
    
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    width:max-content;
    will-change:transform;
    cursor:grab;
    
    }
    
    .editorial-row:active{
    
    cursor:grabbing;
    
    }
    
    .editorial-row-1{
    
    animation:editorialLeft 45s linear infinite;
    
    }
    
    .editorial-row-2{
    
    animation:editorialRight 45s linear infinite;
    margin-top:35px;
    
    }
    
    /* Pause on Hover */
    
    .editorial-slider:hover .editorial-row{
    
    animation-play-state:paused;
    
    }
    
    /*=========================================
    MARQUEE ANIMATION
    =========================================*/
    
    @keyframes editorialLeft{
    
    0%{
    
    transform:translateX(0);
    
    }
    
    100%{
    
    transform:translateX(-50%);
    
    }
    
    }
    
    @keyframes editorialRight{
    
    0%{
    
    transform:translateX(-50%);
    
    }
    
    100%{
    
    transform:translateX(0);
    
    }
    
    }
    
    /*=========================================
    SLIDER SPACING
    =========================================*/
    
    .editorial-row .editorial-card{
    
    margin-right:28px;
    
    }
    
    .editorial-row:last-child{
    
    margin-bottom:0;
    
    }
    
    /*=========================================
    RESPONSIVE
    =========================================*/
    
    @media(max-width:1200px){
    
    .editorial-card{
    
    flex:0 0 290px;
    
    }
    
    }
    
    @media(max-width:992px){
    
    .editorial-stats{
    
    grid-template-columns:repeat(2,1fr);
    
    }
    
    .editorial-card{
    
    flex:0 0 270px;
    
    }
    
    }
    
    @media(max-width:768px){

        .editorial-card{
        
        flex-direction:column;
        
        flex:0 0 300px;
        
        text-align:center;
        
        }
        
        .editorial-image{
        
        width:100%;
        
        height:250px;
        
        }
        
        .editorial-content{
        
        align-items:center;
        
        }
        
        .view-profile{
        
        width:100%;
        
        }
        
        }
    
    @media(max-width:576px){
    
    .editorial-card{
    
    flex:0 0 220px;
    
    }
    
    .editorial-image{
    
    height:250px;
    
    }
    
    }

    /*=========================================
EDITORIAL POPUP
PART 4
=========================================*/

.editorial-popup{

    position:fixed;
    inset:0;
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    
    }
    
    .editorial-popup.active{
    
    display:flex;
    
    }
    
    /*=========================================
    OVERLAY
    =========================================*/
    
    .editorial-popup-overlay{
    
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    
    }
    
    /*=========================================
    POPUP BOX
    =========================================*/
    
    .editorial-popup-content{
    
    position:relative;
    background:#fff;
    width:95%;
    max-width:1050px;
    max-height:90vh;
    overflow-y:auto;
    border-radius:26px;
    padding:40px;
    box-shadow:0 30px 70px rgba(0,0,0,.25);
    animation:editorialPopup .35s ease;
    z-index:2;
    
    }
    
    @keyframes editorialPopup{
    
    from{
    
    opacity:0;
    transform:translateY(30px) scale(.95);
    
    }
    
    to{
    
    opacity:1;
    transform:translateY(0) scale(1);
    
    }
    
    }
    
    /*=========================================
    CLOSE BUTTON
    =========================================*/
    
    .editorial-popup-close{
    
    position:absolute;
    top:20px;
    right:20px;
    width:46px;
    height:46px;
    border:none;
    border-radius:50%;
    background:#17365D;
    color:#fff;
    font-size:28px;
    cursor:pointer;
    transition:.3s;
    
    }
    
    .editorial-popup-close:hover{
    
    background:#C89B3C;
    transform:rotate(90deg);
    
    }
    
    /*=========================================
    POPUP BODY
    =========================================*/
    
    #editorial-popup-body{

        width:100%;
        
        }
        
        .editorial-popup-layout{
        
        display:grid;
        grid-template-columns:320px 1fr;
        gap:35px;
        align-items:start;
        
        }
        
        .editorial-popup-image{
        
        width:100%;
        
        }
        
        .editorial-popup-image img{
        
        width:100%;
        height:420px;
        object-fit:cover;
        border-radius:22px;
        box-shadow:0 20px 45px rgba(0,0,0,.12);
        
        }
        
        .editorial-popup-details{
        
        display:flex;
        flex-direction:column;
        
        }
        
        .editorial-popup-role{
        
        display:inline-block;
        align-self:flex-start;
        padding:8px 18px;
        background:linear-gradient(135deg,#c89b3c,#d8aa46);
        color:#fff;
        border-radius:30px;
        font-weight:700;
        margin-bottom:18px;
        
        }
        
        .editorial-popup-details h2{
        
        font-size:34px;
        font-weight:800;
        color:#17365D;
        margin-bottom:22px;
        
        }
        
        .editorial-popup-info{
        
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:15px;
        margin-bottom:25px;
        
        }
        
        .editorial-popup-info p{
        
        margin:0;
        padding:16px;
        background:#f8fafc;
        border-radius:14px;
        font-size:15px;
        line-height:1.6;
        
        }
        
        .editorial-popup-info strong{
        
        display:block;
        color:#17365D;
        margin-bottom:5px;
        
        }
        
        .editorial-popup-description{
        
        padding:22px;
        background:#f8fafc;
        border-radius:18px;
        
        }
        
        .editorial-popup-description h4{
        
        margin-bottom:12px;
        font-size:22px;
        color:#17365D;
        
        }
        
        #popup-description{
        
        line-height:1.9;
        text-align:justify;
        margin:0;
        
        }
    
    /*=========================================
    RESPONSIVE
    =========================================*/
    
    @media(max-width:768px){

        .editorial-popup-content{
        
        padding:22px;
        
        }
        
        .editorial-popup-layout{
        
        grid-template-columns:1fr;
        
        }
        
        .editorial-popup-image img{
        
        height:300px;
        
        }
        
        .editorial-popup-info{
        
        grid-template-columns:1fr;
        
        }
        
        .editorial-popup-details h2{
        
        font-size:28px;
        
        }
        
        }

        .editorial-grid{

            display:grid;
            
            grid-template-columns:repeat(5,1fr);
            
            gap:20px;
            
            }
            
            .editorial-grid-card{
            
            background:#fff;
            
            border-radius:16px;
            
            padding:18px;
            
            text-align:center;
            
            box-shadow:0 8px 20px rgba(0,0,0,.08);
            
            }
            
            .editorial-grid-card img{
            
            width:110px;
            
            height:110px;
            
            border-radius:12px;
            
            object-fit:cover;
            
            margin:0 auto 15px;
            
            display:block;
            
            }
            
            .editorial-grid-card h3{
            
            font-size:18px;
            
            margin:8px 0;
            
            color:#173d8f;
            
            }
            
            .editorial-grid-card span{
            
            display:block;
            
            font-size:14px;
            
            font-weight:600;
            
            color:#c59a38;
            
            margin-bottom:10px;
            
            }
            
            .editorial-grid-card p{
            
            font-size:13px;
            
            color:#666;
            
            line-height:1.5;
            
            min-height:40px;
            
            }
            
            .editorial-grid-card .view-profile{
            
            margin-top:15px;
            
            padding:8px 18px;
            
            border:none;
            
            border-radius:30px;
            
            background:#173d8f;
            
            color:#fff;
            
            cursor:pointer;
            
            }
            
            @media(max-width:1200px){
            
            .editorial-grid{
            
            grid-template-columns:repeat(4,1fr);
            
            }
            
            }
            
            @media(max-width:992px){
            
            .editorial-grid{
            
            grid-template-columns:repeat(3,1fr);
            
            }
            
            }
            
            @media(max-width:768px){
            
            .editorial-grid{
            
            grid-template-columns:repeat(2,1fr);
            
            }
            
            }
            
            @media(max-width:480px){
            
            .editorial-grid{
            
            grid-template-columns:1fr;
            
            }
            
            }