/* ==========================================

   CSS VARIABLES

   ========================================== */

:root {

    --primary:    #002472;

    --secondary:  #020c56;

    --gold:       #d4a574;

    --text-dark:  #333333;

    --text-light: #666666;

    --bg-light:   #f8f9fa;

    --white:      #ffffff;

    --shadow:     0 4px 20px rgba(0,0,0,0.10);

    --shadow-lg:  0 10px 40px rgba(0,0,0,0.15);

    --ease:       all 0.3s cubic-bezier(0.4,0,0.2,1);



    --topbar-h:  40px;

    --header-h:  110px;

    --nav-h:     50px;

    --fixed-top: calc(var(--topbar-h) + var(--header-h) + var(--nav-h));

}



/* ==========================================

   RESET & BASE

   ========================================== */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; }

body {

    font-family:'Poppins', sans-serif;

    color: var(--text-dark);

    line-height:1.6;

    overflow-x:hidden;

    padding-top: var(--fixed-top);

    background: var(--bg-light);

}

.container-fluid { width:100%; padding:0 2rem; max-width:1920px; margin:0 auto; }

.container       { max-width:1400px; margin:0 auto; padding:0 2rem; }



/* ==========================================

   TOP BAR

   ========================================== */

.top-bar {

    position:fixed; top:0; left:0; right:0;

    height: var(--topbar-h);

    background: var(--secondary);

    color: var(--white);

    display:flex; align-items:center;

    font-size:0.8rem;

    z-index:1003;

}

.top-bar-content {

    display:flex; justify-content:space-between;

    align-items:center; width:100%; height:100%;

}

.top-bar-left  { display:flex; align-items:center; gap:2rem; }

.top-bar-info  { display:flex; align-items:center; gap:0.4rem; }

.top-bar-info i{ color: var(--gold); font-size:0.72rem; }

.email-link    { color: var(--white); text-decoration:none; }

.top-bar-right { display:flex; align-items:center; gap:1.5rem; flex-shrink:0; }

.top-bar-right a{

    color: var(--white); text-decoration:none;

    transition: var(--ease);

    display:flex; align-items:center; gap:0.35rem; font-size:0.8rem;

}

.top-bar-right a:hover { color: var(--gold); }



/* ==========================================

   HEADER

   ========================================== */

.header {

    position:fixed;

    top: var(--topbar-h); left:0; right:0;

    height: var(--header-h);

    background: var(--white);

    /* border-bottom:3px solid var(--gold); */

    z-index:1002;

    display:flex; align-items:center;

}

.header-content {

    display:flex; align-items:center;

    gap:1.4rem; width:100%; height:100%;

}



/* Logo */

.header-logo {

    flex-shrink:0;

    display:flex; align-items:center; justify-content:center;

}

.header-logo img {

    height:82px; width:auto;

    object-fit:contain; border-radius:8px; display:block;

}

.header-logo-fallback {

    width:82px; height:82px;

    background: linear-gradient(135deg, var(--primary) 0%, #1a4db8 100%);

    border-radius:12px;

    display:flex; align-items:center; justify-content:center;

    font-size:1.7rem; font-weight:800; color:var(--white);

    letter-spacing:-1px; flex-shrink:0;

    box-shadow: 0 4px 16px rgba(0,36,114,0.4);

    user-select:none;

    border:2px solid rgba(212,165,116,0.5);

}



/* Divider */

.header-divider {

    width:2px; height:62px;

    background: linear-gradient(to bottom, transparent, var(--gold), transparent);

    flex-shrink:0; opacity:0.5;

}



/* Text */

.header-text    { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }

.header-text h1 { 

    font-family: 'Cooper Black','Georgia',serif; 

    font-size: clamp(1.08rem,1.9vw,1.45rem); 

    color: var(--blue); 

    font-weight: 900; 

    margin-bottom: 2px; 

    line-height: 1.2; 

    white-space: nowrap; 

    overflow: hidden; 

    text-overflow: ellipsis;  

    letter-spacing: 0.08em;

}



.header-subtitle { 

    font-size: clamp(.68rem,.9vw,.78rem); 

    color: var(--blue);        /* ← changed from --accent-copper to --blue */

    font-weight: 600; 

    margin-bottom: 1px; 

    font-style: italic; 

    line-height: 1.3;  

    letter-spacing: 0.05em;

}



.header-info { 

    font-size: clamp(.62rem,.8vw,.72rem); 

    color: var(--blue);        /* ← changed from --accent-copper to --blue */

    line-height: 1.3; 

    font-weight: 600;  

    letter-spacing: 0.05em;

}

/* Badges */

.header-badges { display:flex; gap:5px; flex-wrap:wrap; }

.h-badge {

    font-size:0.61rem; font-weight:700; letter-spacing:0.3px;

    padding:2px 8px; border-radius:20px; border:1px solid; line-height:1.6;

}

.h-badge-aicte { border-color:#0077cc; color:#0077cc; background:rgba(0,119,204,0.06); }

.h-badge-anna  { border-color:#cc5500; color:#cc5500; background:rgba(204,85,0,0.06); }

.h-badge-naac  { border-color:#009966; color:#009966; background:rgba(0,153,102,0.06); }



/* ==========================================

   NAVBAR





/* ── Body ── */

body {

    padding-top: calc(var(--topbar-h) + var(--header-h) + var(--nav-h));

}



/* ── Navbar ── */

.navbar {

    position: fixed;

    top: calc(var(--topbar-h) + var(--header-h));

    left: 0; right: 0;

    height: var(--nav-h);

    background: var(--primary);

    box-shadow: 0 3px 14px rgba(0,0,0,0.3);

    z-index: 1001;

}



/* ── Nav Container ── */

.nav-container {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 100%;

    width: 100%;

    max-width: 1920px;

    margin: 0 auto;

    padding: 0;

}



/* ── Nav Links ── */

.nav-links {

    display: flex;

    list-style: none;

    gap: 0;

    margin: 0;

    padding: 0;

    justify-content: center;

    align-items: stretch;      /* stretch items full height */

    height: 100%;

}



/* ── Nav Item ── */

.nav-item {

    position: relative;

    display: flex;

    align-items: stretch;      /* stretch anchor full height */

    height: 100%;

}



/* ── Nav Link ── */

.nav-item a {

    display: flex;

    align-items: center;       /* vertically center icon + text */

    justify-content: center;   /* horizontally center icon + text */

    gap: 0.42rem;

    height: 100%;

    padding: 0 1.3rem;

    text-decoration: none;

    color: rgba(255,255,255,0.88);

    font-weight: 500;

    font-size: 0.87rem;

    line-height: var(--nav-h); /* lock line-height to nav height */

    transition: var(--ease);

    border-right: 1px solid rgba(255,255,255,0.1);

    white-space: nowrap;

}



.nav-item:first-child a {

    border-left: 1px solid rgba(255,255,255,0.1);

}



.nav-item a:hover,

.nav-item a.active {

    background: rgba(255,255,255,0.13);

    color: var(--gold);

}



/* ── Nav Icon ── */

.nav-item a .nav-icon {

    font-size: 0.82rem;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    line-height: 1;            /* reset icon line-height */

}



/* ── Nav Text ── */

.nav-item a .nav-text {

    display: flex;

    align-items: center;

    line-height: 1;            /* reset text line-height */

}

/* Hamburger */

.hamburger {

    display: none;

    flex-direction: column;

    cursor: pointer;

    gap: 5px;

    padding: 0.6rem 0.75rem;

    position: absolute;

    right: 1rem;

    top: 50%;

    transform: translateY(-50%);

    background: var(--primary);       /* ← dark blue background */

    border: none;

    border-radius: 8px;               /* ← rounded corners */

    z-index: 10;

    box-shadow: 0 2px 10px rgba(0,36,114,0.35);

}

.hamburger span {

    display:block; width:23px; height:2.5px;

    background: var(--white); border-radius:3px; transition: var(--ease);

}

.hamburger.open span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }

.hamburger.open span:nth-child(2){ opacity:0; transform:scaleX(0); }

.hamburger.open span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }



.nav-overlay {

    display:none; position:fixed; inset:0;

    background:rgba(0,0,0,0.5); z-index:998;

}

.nav-overlay.active { display:block; }



/* ==========================================

   BREADCRUMB

   ========================================== */

.breadcrumb-section {

    background: var(--white); padding:1rem 0;

    box-shadow:0 2px 8px rgba(0,0,0,0.04);

    border-bottom:1px solid #eee;

}

.breadcrumb {

    display:flex; align-items:center;

    gap:0.6rem; font-size:0.87rem; flex-wrap:wrap;

}

.breadcrumb a {

    color: var(--text-light); text-decoration:none;

    transition: var(--ease); display:flex; align-items:center; gap:0.4rem;

}

.breadcrumb a:hover { color: var(--primary); }

.breadcrumb .separator { color:#ccc; font-size:0.7rem; }

.breadcrumb .current   { color: var(--primary); font-weight:600; }



/* ==========================================

   PAGE HEADER BANNER

   ========================================== */

.page-header {

    background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

    padding:3.5rem 0; color: var(--white); position:relative; overflow:hidden;

}

.page-header::before {

    content:''; position:absolute; inset:0;

    background:url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="g" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M40 0L0 0 0 40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23g)"/></svg>');

    opacity:.4;

}

.page-header-content { position:relative; z-index:1; text-align:center; }

.page-title { font-size:clamp(1.8rem,4vw,2.8rem); font-weight:800; margin-bottom:0.8rem; }

.page-subtitle { font-size:1rem; color: var(--gold); max-width:680px; margin:0 auto; line-height:1.8; }



/* ==========================================

   FILTER SECTION

   ========================================== */

.filter-section {

    background: var(--white); padding:1.5rem 0; margin-bottom:2.5rem;

    box-shadow:0 2px 15px rgba(0,0,0,0.07);

    position:sticky; top: var(--fixed-top); z-index:100;

}

.filter-bar {

    display:flex; justify-content:space-between;

    align-items:center; gap:1rem; flex-wrap:wrap;

}

.filter-group { display:flex; gap:0.6rem; flex-wrap:wrap; }

.filter-btn {

    display:flex; align-items:center; gap:0.45rem;

    padding:0.6rem 1.1rem; background: var(--bg-light);

    border:2px solid transparent; border-radius:50px;

    color: var(--text-dark); font-weight:600; font-size:0.83rem;

    cursor:pointer; transition: var(--ease); font-family:'Poppins',sans-serif;

}

.filter-btn:hover {

    background: var(--white); border-color: var(--gold);

    transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.08);

}

.filter-btn.active { background: var(--primary); color: var(--white); border-color: var(--primary); }

.search-box {

    display:flex; align-items:center; gap:0.6rem;

    background: var(--bg-light); padding:0.6rem 1.1rem;

    border-radius:50px; border:2px solid transparent;

    transition: var(--ease); min-width:260px; flex:1; max-width:360px;

}

.search-box:focus-within {

    background: var(--white); border-color: var(--primary);

    box-shadow:0 4px 12px rgba(0,0,0,0.08);

}

.search-box i     { color: var(--text-light); font-size:0.9rem; flex-shrink:0; }

.search-box input {

    border:none; background:transparent; outline:none;

    font-family:'Poppins',sans-serif; font-size:0.86rem;

    color: var(--text-dark); width:100%;

}

.search-box input::placeholder { color: var(--text-light); }



/* ==========================================

   FACULTY GRID

   ========================================== */

.faculty-grid-section { padding:2.5rem 0 5rem; }

.faculty-cards-grid {

    display:grid;

    grid-template-columns:repeat(auto-fill, minmax(320px,1fr));

    gap:2rem;

}

.faculty-card {

    background: var(--white); border-radius:18px; overflow:hidden;

    box-shadow:0 8px 28px rgba(0,0,0,0.07);

    transition: var(--ease); border:2px solid transparent;

    display:flex; flex-direction:column;

    animation:fadeInUp 0.4s ease both;

}

.faculty-card:hover {

    transform:translateY(-8px);

    box-shadow:0 18px 48px rgba(0,0,0,0.13);

    border-color: var(--gold);

}

.faculty-card-header {

    background:linear-gradient(135deg, #f0f4ff 0%, #e4e9f5 100%);

    padding:1.8rem; display:flex; flex-direction:column;

    align-items:center; gap:0.8rem;

}



/* ─── AVATAR: image + fallback ─── */

.faculty-avatar {

    width:110px; height:110px;

    border-radius:50%;

    overflow:hidden;

    border:3px solid rgba(0,36,114,0.15);

    box-shadow:0 6px 20px rgba(0,36,114,0.18);

    transition: var(--ease);

    position:relative;

    display:flex; align-items:center; justify-content:center;

    background:linear-gradient(135deg, var(--primary), var(--gold));

    flex-shrink:0;

}

.faculty-avatar img {

    width:100%; height:100%;

    object-fit:cover;

    object-position:center top;

    display:block;

    border-radius:50%;

}

.faculty-avatar .avatar-fallback {

    width:100%; height:100%;

    display:none;

    align-items:center; justify-content:center;

    font-size:2.6rem; color: var(--white);

}



.faculty-card:hover .faculty-avatar {

    transform:scale(1.06);

    border-color: var(--gold);

    box-shadow:0 8px 26px rgba(212,165,116,0.4);

}



.faculty-badge {

    display:inline-block; padding:0.35rem 0.95rem;

    border-radius:50px; font-size:0.72rem;

    font-weight:700; text-transform:uppercase; letter-spacing:0.4px;

}

.hod-badge       { background:linear-gradient(135deg,#f093fb,#f5576c); color:#fff; }

.professor-badge { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; }

.assistant-badge { background:linear-gradient(135deg,#4facfe,#00c6fb); color:#fff; }



.faculty-card-body { padding:1.5rem; flex:1; }

.faculty-name { font-size:1.1rem; color: var(--primary); margin-bottom:0.3rem; font-weight:700; text-align:center; }

.faculty-qualification { text-align:center; color: var(--gold); font-weight:600; margin-bottom:1.1rem; font-size:0.88rem; }

.faculty-specialization,

.faculty-experience,

.faculty-contact {

    display:flex; align-items:flex-start; gap:0.6rem;

    margin-bottom:0.7rem; padding:0.6rem 0.8rem;

    background: var(--bg-light); border-radius:9px;

}

.faculty-specialization i,

.faculty-experience i,

.faculty-contact i { color: var(--gold); font-size:0.9rem; margin-top:2px; flex-shrink:0; }

.faculty-specialization span,

.faculty-experience span { color: var(--text-dark); font-size:0.83rem; line-height:1.5; }

.faculty-contact a {

    color: var(--primary); text-decoration:none;

    font-size:0.83rem; word-break:break-word; transition: var(--ease);

}

.faculty-contact a:hover { color: var(--gold); }



.faculty-card-footer { padding:1.1rem 1.5rem 1.5rem; }

.view-profile-btn {

    width:100%; padding:0.78rem 1.2rem;

    background: var(--primary); color: var(--white);

    border:none; border-radius:50px;

    font-size:0.88rem; font-weight:600; cursor:pointer; transition: var(--ease);

    display:flex; align-items:center; justify-content:center; gap:0.6rem;

    font-family:'Poppins',sans-serif;

}

.view-profile-btn:hover {

    background: var(--secondary); transform:translateY(-2px);

    box-shadow:0 6px 18px rgba(0,36,114,0.3);

}

.view-profile-btn i { transition: var(--ease); }

.view-profile-btn:hover i { transform:translateX(4px); }



.no-results { text-align:center; padding:5rem 2rem; }

.no-results i  { font-size:4rem; color: var(--text-light); margin-bottom:1.2rem; display:block; }

.no-results h3 { font-size:1.5rem; color: var(--text-dark); margin-bottom:0.5rem; }

.no-results p  { color: var(--text-light); }



/* ==========================================

   FOOTER

   ========================================== */

.footer { background: var(--secondary); color: var(--white); padding:3.5rem 0 1rem; margin-top:4rem; }

.footer-grid {

    display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));

    gap:2.5rem; margin-bottom:2.5rem;

}

.footer-title  { color: var(--gold); font-size:1rem; margin-bottom:1.1rem; font-weight:600; }

.footer-contact, .footer-links { list-style:none; }

.footer-contact li { display:flex; gap:0.7rem; margin-bottom:0.8rem; color:#ccc; font-size:0.85rem; }

.footer-contact i  { color: var(--gold); width:15px; flex-shrink:0; margin-top:3px; }

.footer-links li   { margin-bottom:0.65rem; }

.footer-links a    { color:#ccc; text-decoration:none; transition: var(--ease); font-size:0.85rem; }

.footer-links a:hover { color: var(--gold); padding-left:0.4rem; }

.footer-bottom {

    border-top:1px solid rgba(255,255,255,0.1);

    padding-top:1.5rem; text-align:center; color:#999; font-size:0.82rem;

}

.footer-bottom p { margin-bottom:0.4rem; }

.footer-bottom a { color: var(--gold); text-decoration:none; }



.scroll-top {

    position:fixed; bottom:24px; right:24px;

    width:44px; height:44px; border-radius:50%;

    background: var(--primary); color: var(--white);

    border:none; font-size:1rem; cursor:pointer;

    opacity:0; visibility:hidden; transition: var(--ease);

    z-index:900; box-shadow:0 4px 16px rgba(0,0,0,0.25);

    display:flex; align-items:center; justify-content:center;

}

.scroll-top.show { opacity:1; visibility:visible; }

.scroll-top:hover { transform:translateY(-4px); }



/* ==========================================

   MODAL

   ========================================== */

.modal-backdrop {

    position:fixed; inset:0;

    background:rgba(2,12,86,0.72);

    backdrop-filter:blur(5px); z-index:2000;

    opacity:0; visibility:hidden; transition: var(--ease);

    overflow-y:auto; display:flex;

    align-items:flex-start; justify-content:center; padding:2rem 1rem;

}

.modal-backdrop.open { opacity:1; visibility:visible; }

.modal-box {

    background: var(--white); border-radius:20px; width:100%; max-width:820px;

    overflow:hidden; box-shadow:0 40px 100px rgba(2,12,86,0.35);

    transform:translateY(24px) scale(0.97); transition: var(--ease); margin:auto;

}

.modal-backdrop.open .modal-box { transform:none; }

.modal-hero {

    background:linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

    padding:2.2rem; display:grid; grid-template-columns:auto 1fr;

    gap:1.8rem; align-items:center; position:relative;

}

.modal-hero::after {

    content:''; position:absolute; bottom:0; left:0; right:0; height:3px;

    background:linear-gradient(90deg,transparent, var(--gold),transparent);

}

.modal-close {

    position:absolute; top:0.9rem; right:0.9rem;

    width:32px; height:32px; border-radius:50%;

    background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.22);

    color: var(--white); cursor:pointer;

    display:flex; align-items:center; justify-content:center;

    font-size:0.82rem; transition: var(--ease);

}

.modal-close:hover { background: var(--gold); border-color: var(--gold); }



/* ─── MODAL AVATAR: image or icon ─── */

.modal-avatar {

    width:110px; height:110px;

    border-radius:50%;

    overflow:hidden;

    border:3px solid rgba(212,165,116,0.5);

    box-shadow:0 6px 24px rgba(0,0,0,0.3);

    flex-shrink:0;

    background:linear-gradient(135deg, var(--primary), var(--gold));

    display:flex; align-items:center; justify-content:center;

    position:relative;

}

.modal-avatar img {

    width:100%; height:100%;

    object-fit:cover;

    object-position:center top;

    display:block;

    border-radius:50%;

}

.modal-avatar i {

    font-size:2.8rem;

    color: var(--white);

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%; height:100%;

    position:absolute;

    top:0; left:0;

}



.modal-badge-row {

    display:flex; align-items:center; gap:0.45rem;

    font-size:0.63rem; font-weight:700; text-transform:uppercase;

    letter-spacing:2px; color: var(--gold); margin-bottom:0.35rem;

}

.modal-badge-dot { width:5px; height:5px; border-radius:50%; background: var(--gold); }

.modal-name  { font-size:clamp(1.1rem,2.2vw,1.6rem); font-weight:800; color: var(--white); line-height:1.2; margin-bottom:0.25rem; }

.modal-dept  { font-size:0.76rem; color:rgba(255,255,255,0.5); margin-bottom:0.8rem; }

.modal-contacts { display:flex; flex-wrap:wrap; gap:0.8rem; }

.modal-contact-item { display:flex; align-items:center; gap:0.4rem; font-size:0.77rem; color:rgba(255,255,255,0.68); }

.modal-contact-item i { color: var(--gold); font-size:0.7rem; width:13px; }

.modal-contact-item a { color:rgba(255,255,255,0.68); text-decoration:none; transition: var(--ease); }

.modal-contact-item a:hover { color: var(--gold); }



.modal-body { padding:1.8rem 2.2rem; }

.modal-section { margin-bottom:1.6rem; }

.modal-section:last-child { margin-bottom:0; }

.modal-section-title {

    font-size:0.62rem; letter-spacing:2.5px; text-transform:uppercase;

    color: var(--primary); font-weight:700; margin-bottom:0.8rem;

    display:flex; align-items:center; gap:0.6rem;

}

.modal-section-title::after { content:''; flex:1; height:1px; background:#dee2e6; }

.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }

.detail-card {

    background: var(--bg-light); border-radius:10px;

    padding:0.85rem 1rem; border:1px solid #dee2e6;

}

.detail-card label {

    font-size:0.59rem; text-transform:uppercase; letter-spacing:1.4px;

    color: var(--text-light); font-weight:700; display:block; margin-bottom:0.22rem;

}

.detail-card p { font-size:0.84rem; color: var(--text-dark); font-weight:600; }

.qual-list { display:flex; flex-direction:column; gap:0.5rem; }

.qual-item {

    display:flex; align-items:center; gap:0.8rem; padding:0.7rem 1rem;

    background: var(--bg-light); border-radius:9px; border:1px solid #dee2e6;

}

.qual-degree { font-size:0.66rem; font-weight:800; color: var(--primary); text-transform:uppercase; letter-spacing:0.4px; min-width:50px; flex-shrink:0; }

.qual-divider { width:1px; height:16px; background:#dee2e6; flex-shrink:0; }

.qual-field   { font-size:0.82rem; color: var(--text-dark); font-weight:500; }

.spec-tags { display:flex; flex-wrap:wrap; gap:0.5rem; }

.spec-tag {

    padding:0.35rem 0.85rem; background:rgba(0,36,114,0.05);

    border:1px solid rgba(0,36,114,0.15); border-radius:50px;

    font-size:0.73rem; color: var(--primary); font-weight:600;

    transition: var(--ease); cursor:default;

}

.spec-tag:hover { background: var(--primary); color: var(--white); }

.modal-footer {

    padding:1rem 2.2rem; border-top:1px solid #dee2e6;

    display:flex; justify-content:flex-end; gap:0.65rem;

    background: var(--bg-light);

}

.btn-modal-close {

    padding:0.6rem 1.4rem; border:2px solid #dee2e6; border-radius:50px;

    font-size:0.82rem; font-weight:600; cursor:pointer;

    background:transparent; color: var(--text-light);

    transition: var(--ease); font-family:'Poppins',sans-serif;

}

.btn-modal-close:hover { border-color: var(--primary); color: var(--primary); }

.btn-modal-email {

    padding:0.6rem 1.6rem; background: var(--primary); border:2px solid var(--primary);

    border-radius:50px; font-size:0.82rem; font-weight:700; cursor:pointer;

    color: var(--white); transition: var(--ease); font-family:'Poppins',sans-serif;

    display:flex; align-items:center; gap:0.45rem;

}

.btn-modal-email:hover { background: var(--secondary); border-color: var(--secondary); }



/* ==========================================

   ANIMATIONS

   ========================================== */

@keyframes fadeInUp {

    from { opacity:0; transform:translateY(20px); }

    to   { opacity:1; transform:translateY(0); }

}



/* ==========================================

   RESPONSIVE ≤1024px

   ========================================== */

@media(max-width:1024px){

    .header-text h1 { font-size:clamp(0.9rem,1.5vw,1.3rem); }

    .faculty-cards-grid { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }

}



/* ==========================================

   RESPONSIVE ≤768px

   ========================================== */

@media(max-width:768px){

    :root {

        --topbar-h:  0px;

        --header-h:  80px;

        --nav-h:     50px;

    }

    .top-bar { display:none; }

    .header-logo img,

    .header-logo-fallback { height:56px; width:56px; font-size:1.2rem; border-radius:9px; }

    .header-divider { height:40px; }

    .header-badges  { display:none; }

    .header-info    { display:none; }

    .header-text h1 { font-size:clamp(0.82rem,3.5vw,1.1rem); white-space:normal; }

    .header-subtitle{ font-size:0.76rem; }



    .hamburger { display:flex; }

    .nav-links {

        position:fixed; top:0; right:-100%;

        width:min(72vw,280px); height:100vh;

        background: var(--primary); flex-direction:column;

        padding:4.5rem 0 2rem;

        box-shadow: var(--shadow-lg);

        transition: right 0.32s cubic-bezier(0.4,0,0.2,1);

        overflow-y:auto; z-index:999; gap:0;

    }

    .nav-links.active { right:0; }

    .nav-item { height:auto; }

    .nav-item a {

        height:auto; padding:0.9rem 1.5rem;

        border-right:none; border-bottom:1px solid rgba(255,255,255,0.08);

        font-size:0.92rem;

    }

    .nav-item:first-child a { border-left:none; }



    .filter-section { position:relative; top:auto; }

    .filter-bar     { flex-direction:column; align-items:stretch; }

    .search-box     { min-width:100%; max-width:100%; }

    .filter-group   { width:100%; }

    .filter-btn     { flex:1; justify-content:center; font-size:0.78rem; padding:0.55rem 0.7rem; }



    .faculty-cards-grid { grid-template-columns:1fr; gap:1.4rem; }

    .faculty-avatar     { width:90px; height:90px; }

    .page-title    { font-size:1.8rem; }

    .page-subtitle { font-size:0.9rem; }



    .modal-hero  { 

        grid-template-columns:1fr; 

        text-align:center;

         padding:1.8rem 1.4rem; 

         gap:0.9rem;

     }

    .modal-avatar{ margin:0 auto; width:90px; height:90px; }

    .modal-contacts { justify-content:center; }

    .modal-badge-row{ justify-content:center; }

    .modal-body  { padding:1.3rem; }

    .modal-footer{ padding:0.9rem 1.3rem; }

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

}



/* ==========================================

   RESPONSIVE ≤480px

   ========================================== */

@media(max-width:480px){

    .container { padding:0 0.9rem; }

    .header-content { gap:0.7rem; }

    .header-text h1 { font-size:0.8rem; }

    .header-subtitle{ font-size:0.7rem; }

    .page-title { font-size:1.5rem; }

    .faculty-card-body { padding:1.2rem; }

    .faculty-name { font-size:1rem; }

    .filter-btn { font-size:0.73rem; padding:0.5rem 0.6rem; }

}