.department-page{
    --blue:#003fae;
    --blue2:#0057d9;
    --dark:#082b6f;
    --text:#27385f;
    --muted:#6d7fa2;
    --line:#dce7f8;
    --soft:#f5f9ff;
    color:var(--text);
}

.department-page .container{
    max-width:1180px;
    margin:0 auto;
    padding:0 20px;
}

/* HERO */
.dept-hero{
    position:relative;
    min-height:230px;
    display:flex;
    align-items:center;
    color:#fff;
    background:
            linear-gradient(90deg,rgba(0,46,130,.95),rgba(0,71,170,.72)),
            url("https://agsavvas-hosp.gr/wp-content/uploads/2021/10/antikarkinikogr.jpg") center/cover no-repeat;
}

.dept-hero h1{
    margin:22px 0 8px;
    font-size:38px;
    font-weight:800;
    letter-spacing:-.5px;
}

.dept-hero p{
    margin:0;
    font-size:18px;
    opacity:.95;
}

.breadcrumb{
    display:flex;
    gap:10px;
    align-items:center;
    font-size:14px;
}

.breadcrumb a,
.breadcrumb strong{
    color:#fff;
    text-decoration:none;
}

.breadcrumb span{
    opacity:.7;
}

/* CONTENT */
.dept-content{
    padding-top:28px !important;
    padding-bottom:50px !important;
}

.section-block{
    margin-bottom:26px;
}

.section-title h2{
    margin:0 0 22px;
    color:var(--blue);
    font-size:25px;
    font-weight:800;
    position:relative;
    display:inline-block;
}

.section-title h2:after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    background:var(--blue);
    border-radius:6px;
    margin-top:8px;
}

/* DOCTORS */
.doctor-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}

.doctor-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 8px 26px rgba(0,51,130,.06);
    transition:.2s ease;
}

.doctor-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 36px rgba(0,51,130,.13);
}

.doctor-card img{
    width:100%;
    height:175px;
    object-fit:cover;
    object-position:top center;
    background:#f1f5fb;
}

.doctor-card div{
    padding:16px 18px 15px;
}

.doctor-card h3{
    margin:0 0 6px;
    color:var(--blue);
    font-size:18px;
    font-weight:800;
}

.doctor-card p{
    margin:0 0 12px;
    line-height: 1.7;
    color:#607080;
    font-size:14px;
}

.doctor-card a{
    color:var(--blue);
    font-weight:800;
    text-decoration:none;
    font-size:15px;
}

.doctor-card a i{
    margin-left:8px;
}

/* TABS */
.dept-tabs-box{
    background:#fff;
    margin-top: 40px;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,51,130,.05);
    margin-bottom:28px;
}

.dept-tabs{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    border-bottom:1px solid var(--line);
}

.tabs-slide-btn{
    display:none;
    position:sticky;
    align-self:center;
    flex-shrink:0;
    width:32px;
    height:37px;
    border:1px solid var(--line);
    border-radius:50%;
    background:#fff;
    color:var(--blue);
    box-shadow:0 4px 14px rgba(13,58,130,.22);
    align-items:center;
    justify-content:center;
    cursor:pointer;
    z-index:5;
    font-size:12px;
}

.tabs-slide-btn.prev{
    left:0;
}

.tabs-slide-btn.next{
    right:0;
}

.dept-tabs .tabs-slide-btn{
    height:86px;
    border-radius:0;
}

.dept-tab{
    border:0;
    background:#fff;
    color:var(--blue);
    padding:15px 10px;
    min-height:86px;
    font-weight:800;
    font-size:12px;
    cursor:pointer;
    border-right:1px solid var(--line);
    position:relative;
}

.dept-tab:last-child{
    border-right:0;
}

.dept-tab i{
    display:block;
    font-size:22px;
    margin-bottom:8px;
}

.dept-tab.active{
    background:#f7fbff;
}

.dept-tab.active:after{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:0;
    height:4px;
    background:var(--blue);
    border-radius:5px 5px 0 0;
}

.dept-tab-content{
    padding:24px;
}

.dept-pane{
    display:none;
}

.dept-pane.active{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:28px;
    align-items:center;
}

.dept-pane.single.active{
    grid-template-columns:1fr;
}

.dept-text p{
    margin:0 0 16px;
    line-height:1.75;
    font-size:16px;
    font-weight:600;
    color:#23396c;
}

.dept-image img{
    width:100%;
    height:320px;
    object-fit:cover;
    border-radius:12px;
}

/* STAFF */
.staff-layout{
    display:block;
}

.staff-filters{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:14px;
}

.staff-filters button{
    border:1px solid var(--line);
    background:#fff;
    color:#365182;
    padding:10px 18px;
    border-radius:7px;
    cursor:pointer;
    font-weight:700;
}

.staff-filters button.active{
    background:var(--blue);
    color:#fff;
    border-color:var(--blue);
}

.staff-tables{
    width:100%;
}

.staff-table-wrap{
    width:100%;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:0 8px 24px rgba(0,51,130,.05);
}

.staff-table-title{
    padding:16px 18px;
    background:#f5f9ff;
    border-bottom:1px solid var(--line);
}

.staff-table-title h3{
    margin:0;
    color:var(--blue);
    font-size:18px;
    font-weight:800;
}

.staff-table{
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
}

.staff-table th{
    padding:13px 18px;
    background:#fff;
    border-bottom:1px solid var(--line);
    color:#365182;
    font-size:13px;
    font-weight:800;
    text-align:left;
}

.staff-table td{
    padding:14px 18px;
    border-bottom:1px solid var(--line);
    color:#273f6f;
    font-size:14px;
    line-height:1.45;
    vertical-align:middle;
    word-break:break-word;
}

.staff-table tbody tr:last-child td{
    border-bottom:0;
}

.staff-table tbody tr:hover{
    background:#f8fbff;
}

.staff-table th:nth-child(1),
.staff-table td:nth-child(1){
    width:30%;
}

.staff-table th:nth-child(2),
.staff-table td:nth-child(2){
    width:22%;
}

.staff-table th:nth-child(3),
.staff-table td:nth-child(3){
    width:15%;
}

.staff-table th:nth-child(4),
.staff-table td:nth-child(4){
    width:20%;
}

.staff-table th:nth-child(5),
.staff-table td:nth-child(5){
    width:13%;
    text-align:right;
}

.staff-table-person{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}

.staff-table-icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#eef5ff;
    color:var(--blue);
    display:grid;
    place-items:center;
    font-size:18px;
}

.staff-table .staff-name,
.staff-table-person strong{
    color:#162f65;
    font-size:14px;
    font-weight:800;
    line-height:1.35;
    text-decoration:none;
}

.staff-table .staff-name:hover{
    color:var(--blue2);
}

.staff-table-contact{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--blue);
    font-size:13px;
    font-weight:700;
    line-height:1.35;
    text-decoration:none;
}

.staff-table-contact:hover{
    color:var(--blue2);
}

.staff-table-profile{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:8px 12px;
    border:1px solid var(--line);
    border-radius:7px;
    color:var(--blue);
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

.staff-table-profile:hover{
    background:var(--blue);
    border-color:var(--blue);
    color:#fff;
}

.staff-table-empty{
    color:#8a9abb;
}

.staff-list{
    display:flex;
    flex-direction:column;
    gap:0;
}

.staff-columns{
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:14px;
}

.staff-column{
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 8px 24px rgba(0,51,130,.05);
}

.staff-column h3{
    margin:0;
    padding:14px 16px;
    background:#f5f9ff;
    color:var(--blue);
    font-size:16px;
    font-weight:800;
    border-bottom:1px solid var(--line);
}

.staff-person{
    display:grid;
    grid-template-columns:38px 1fr;
    gap:12px;
    align-items:start;
    padding:13px 14px;
    border-bottom:1px solid var(--line);
}

.staff-person:last-child{
    border-bottom:0;
}

.staff-person strong,
.staff-person .staff-name{
    display:block;
    color:#162f65;
    font-size:14px;
    font-weight:800;
    line-height:1.35;
    text-decoration:none;
}

.staff-person .staff-name:hover{
    color:var(--blue2);
}

.staff-person span{
    display:block;
    margin-top:4px;
    color:#40547d;
    font-size:12px;
    line-height:1.35;
}

.staff-contact{
    display:flex;
    flex-direction:column;
    gap:4px;
    margin-top:9px;
}

.staff-contact a{
    color:var(--blue);
    font-size:12px;
    font-weight:700;
    line-height:1.35;
    text-decoration:none;
    word-break:break-word;
}

.staff-contact a:hover{
    color:var(--blue2);
}

.staff-contact i{
    margin-right:6px;
}

.staff-row{
    display:grid;
    grid-template-columns:44px 1fr 160px 220px;
    gap:14px;
    align-items:center;
    background:#fff;
    border:1px solid var(--line);
    border-bottom:0;
    padding:14px 16px;
}

.staff-row:first-child{
    border-radius:10px 10px 0 0;
}

.staff-row:last-child{
    border-bottom:1px solid var(--line);
    border-radius:0 0 10px 10px;
}

.staff-icon{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#eef5ff;
    color:var(--blue);
    display:grid;
    place-items:center;
    font-size:18px;
}

.staff-row strong{
    display:block;
    color:#162f65;
    font-size:15px;
}

.staff-row span{
    display:block;
    color:#40547d;
    font-size:13px;
}

.staff-row a{
    color:var(--blue);
    text-decoration:none;
    font-weight:700;
    font-size:14px;
}

.staff-row a i{
    margin-right:8px;
}

/* SIDE */
.dept-side{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.side-card,
.contact-card{
    background:#f5f9ff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:24px;
}

.side-card h3{
    margin:0 0 18px;
    color:var(--blue);
    font-size:24px;
    font-weight:800;
}

.side-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.side-card li{
    position:relative;
    padding-left:26px;
    margin-bottom:13px;
    font-weight:600;
    color:#30466f;
}

.side-card li:before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:var(--blue);
    font-weight:900;
}

.contact-card{
    text-align:center;
    background:#fff;
}

.contact-card i{
    width:58px;
    height:58px;
    border-radius:50%;
    display:grid;
    place-items:center;
    margin:0 auto 12px;
    border:2px solid var(--blue);
    color:var(--blue);
    font-size:24px;
}

.contact-card p{
    color:#243b70;
    font-weight:800;
    margin:0 0 16px;
}

.contact-card a{
    display:block;
    background:linear-gradient(135deg,var(--blue),var(--blue2));
    color:#fff;
    padding:14px 16px;
    border-radius:7px;
    text-decoration:none;
    font-weight:800;
}


/* RESPONSIVE */
@media(max-width:1100px){
    .doctor-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .dept-tabs{
        grid-template-columns:repeat(3,1fr);
    }

    .staff-layout{
        grid-template-columns:1fr;
    }

    .staff-columns{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media(max-width:768px){
    .department-page .container{
        padding:0 16px;
    }

    .dept-hero{
        min-height:210px;
        padding:34px 0;
        background-position:center;
    }

    .breadcrumb{
        flex-wrap:wrap;
        gap:7px;
        font-size:13px;
        line-height:1.45;
    }

    .dept-hero h1{
        margin:18px 0 8px;
        font-size:clamp(26px, 8vw, 34px);
        line-height:1.12;
        letter-spacing:0;
        overflow-wrap:anywhere;
    }

    .dept-hero p{
        font-size:16px;
        line-height:1.55;
    }

    .dept-content{
        padding-top:22px !important;
        padding-bottom:36px !important;
    }

    .section-block,
    .staff-layout,
    .dept-tabs-box{
        margin-bottom:22px;
    }

    .section-title h2{
        margin-bottom:16px;
        font-size:22px;
    }

    .doctor-grid{
        grid-template-columns:1fr;
    }

    .dept-tabs{
        display:flex;
        flex-wrap:nowrap;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
    }

    .dept-tab{
        flex:0 0 168px;
        min-width:168px;
        min-height:76px;
        padding:13px 10px;
        font-size:12px;
        line-height:1.25;
    }

    .tabs-slide-btn{
        display:flex;
    }

    .dept-pane.active{
        grid-template-columns:1fr;
    }

    .dept-tab-content{
        padding:18px;
    }

    .dept-text p{
        font-size:15px;
        line-height:1.7;
    }

    .staff-table-wrap{
        overflow:visible;
        border:0;
        background:transparent;
        box-shadow:none;
    }

    .staff-table{
        min-width:0;
        border-collapse:separate;
        border-spacing:0 12px;
    }

    .staff-table thead{
        display:none;
    }

    .staff-table,
    .staff-table tbody,
    .staff-table tr,
    .staff-table td{
        display:block;
        width:100% !important;
    }

    .staff-table tr{
        background:#fff;
        border:1px solid var(--line);
        border-radius:10px;
        box-shadow:0 8px 22px rgba(0,51,130,.06);
        overflow:hidden;
    }

    .staff-table td{
        padding:11px 14px;
        border-bottom:1px solid var(--line);
        font-size:14px;
        text-align:left !important;
    }

    .staff-table td:last-child{
        border-bottom:0;
    }

    .staff-table td:not(:first-child){
        display:grid;
        grid-template-columns:92px 1fr;
        gap:12px;
        align-items:center;
    }

    .staff-table td:nth-child(2)::before{
        content:"Θέση";
    }

    .staff-table td:nth-child(3)::before{
        content:"Τηλέφωνο";
    }

    .staff-table td:nth-child(4)::before{
        content:"Email";
    }

    .staff-table td:not(:first-child)::before{
        color:#365182;
        font-size:12px;
        font-weight:800;
        text-transform:none;
    }

    .staff-table-person{
        align-items:flex-start;
    }

    .staff-table-icon{
        flex-basis:34px;
        width:34px;
        height:34px;
        font-size:16px;
    }

    .staff-table-contact{
        justify-content:flex-start;
        word-break:break-word;
    }

    .staff-columns{
        grid-template-columns:1fr;
    }
}

@media(max-width:480px){
    .department-page .container{
        padding:0 14px;
    }

    .dept-hero{
        min-height:190px;
        padding:28px 0;
    }

    .dept-hero h1{
        font-size:clamp(24px, 9vw, 30px);
    }

    .dept-tab{
        flex-basis:150px;
        min-width:150px;
    }

    .dept-tab-content{
        padding:15px;
    }

    .staff-table td:not(:first-child){
        grid-template-columns:1fr;
        gap:5px;
    }

    .staff-table td:not(:first-child)::before{
        font-size:11px;
    }
}