/* ── Pagination ── */
.pagination .page-link {
    color: var(--red);
    border-radius: 0;
    font-size: 0.9rem;
    padding: 8px 16px;
    border-color: var(--border);
}
.pagination .page-item.active .page-link {
    background-color: var(--red);
    border-color: var(--red);
    color: var(--white);
}
.pagination .page-link:hover {
    background-color: var(--red-light);
    color: var(--red-dark);
}
.pagination .page-item.disabled .page-link {
    color: var(--muted);
    background-color: #f8f9fa;
}


/* ================================================
   site.css — Single stylesheet for ptjrgph.com
   Design: Flat, modern, minimal
   ================================================ */

/* ── Variables ── */
:root {
    --red:      #820e05;
    --red-dark: #6a0b04;
    --red-light:#fdf2f2;
    --blue:     #34568b;
    --text:     #222222;
    --muted:    #666666;
    --light-bg: #f5f5f5;
    --border:   #e0e0e0;
    --white:    #ffffff;
}

/* ── Reset / Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; overflow-x: hidden; }
body {
    margin: 0; padding: 0;
    overflow-x: hidden;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 1rem;
    color: var(--text);
    background: var(--white);
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }


/* ================================================
   HEADER
   ================================================ */
.site-header {
    background: var(--white);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    width: 100%;
}
.site-header .logo-left,
.site-header .logo-right { width: 56px; flex-shrink: 0; }
.site-header .logo-right  { margin-left: auto; }
.site-header .college-name { flex: 1; min-width: 0; padding: 0 10px; }
.site-header .college-name h1 {
    font-size: clamp(0.85rem, 2vw, 1.25rem);
    font-weight: 700;
    margin: 0 0 2px;
    line-height: 1.3;
    color: var(--text);
    word-break: break-word;
}
.site-header .college-name h2 {
    font-size: clamp(0.75rem, 1.7vw, 1.1rem);
    font-weight: 400;
    margin: 0;
    line-height: 1.3;
    color: var(--muted);
    word-break: break-word;
}


/* ================================================
   NAVBAR — flat solid red, no gradients
   ================================================ */
.site-nav { background: var(--red); width: 100%; }
.site-nav .navbar { background: var(--red) !important; padding: 0 16px; }
.site-nav .navbar-brand {
    color: var(--white) !important;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 10px 0;
    letter-spacing: 0.3px;
}
.site-nav .nav-link {
    color: var(--white) !important;
    font-size: 0.82rem;
    padding: 10px 8px !important;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus {
    background: var(--red-dark);
    border-radius: 0;
}
/* Remove dropdown arrow */
.site-nav .dropdown-toggle::after {
    display: none !important;
}
.site-nav .dropdown-menu {
    background: var(--red-dark);
    border: none;
    border-radius: 0;
    padding: 0;
    min-width: 190px;
}
.site-nav .dropdown-item {
    color: var(--white) !important;
    font-size: 0.82rem;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.site-nav .dropdown-item:last-child { border-bottom: none; }
.site-nav .dropdown-item:hover { background: rgba(0,0,0,0.2); }
.site-nav .navbar-toggler { border: 1px solid rgba(255,255,255,0.4); border-radius: 0; }
.site-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991px) {
    .site-nav .navbar-collapse { background: var(--red); padding: 4px 0 8px; }
    .site-nav .nav-link {
        padding: 10px 16px !important;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        white-space: normal;
    }
    .site-nav .dropdown-menu { margin-left: 16px; }
}


/* ================================================
   SLIDER SECTION
   ================================================ */
.slider-section {
    padding: 40px 0;
    background: linear-gradient(to bottom, #ffffff, var(--light-bg));
    border-bottom: 1px solid var(--border);
}

/* ================================================
   SLIDER
   ================================================ */
.slideshow-container { 
    position: relative; 
    width: 100%; 
    overflow: hidden; 
    background: #ccc; 
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.slide { display: none; width: 100%; }
.slide img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center top;
}
@media (max-width: 768px) { .slide img { height: 210px; } }
.slide-caption {
    position: absolute; bottom: 0; width: 100%;
    text-align: center; color: var(--white);
    background: rgba(0,0,0,0.45);
    padding: 10px 16px; font-size: 0.9rem;
}
.slide-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.35); color: var(--white);
    border: none; padding: 10px 14px; font-size: 1rem;
    cursor: pointer; z-index: 10; border-radius: 0;
}
.slide-btn:hover { background: rgba(0,0,0,0.7); }
.slide-prev { left: 0; }
.slide-next { right: 0; }
.dots-container { position: absolute; bottom: 8px; width: 100%; text-align: center; z-index: 10; }
.dot {
    display: inline-block; width: 8px; height: 8px; margin: 0 3px;
    background: rgba(255,255,255,0.5); border-radius: 50%; cursor: pointer;
    transition: background 0.3s;
}
.dot.active { background: var(--white); }
@keyframes fadeIn { from { opacity: 0.5; } to { opacity: 1; } }
.slider-fade { animation: fadeIn 0.6s ease; }


/* ================================================
   NEWS SECTION
   ================================================ */
.news-section { padding: 36px 0; background: var(--light-bg); }
.news-section h2 {
    text-align: center; font-size: 1.5rem;
    font-weight: 700; margin-bottom: 24px; color: var(--text);
}
.news-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    padding: 18px; height: 100%;
    border-left: 3px solid var(--red);
    transition: background 0.15s;
}
.news-card:hover { background: var(--red-light); }
.news-card h3 { font-size: 0.92rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }
.news-card p  { font-size: 0.85rem; color: var(--muted); margin-bottom: 12px; }
.news-card a  { color: var(--red); font-size: 0.85rem; font-weight: 600; }
.news-card a:hover { text-decoration: underline; }

/* ── Media Embeds ── */
.embed-responsive iframe {
    width: 100% !important;
    height: 200px !important;
}

/* ── Post Gallery ── */
.post-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    height: 200px;
    overflow: hidden;
}
.gallery-item { position: relative; height: 100px; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-more::after {
    content: attr(data-more);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); color: var(--white);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.2rem;
}


/* ================================================
   FOOTER — flat white, thin top border
   ================================================ */
.site-footer {
    background: var(--white);
    border-top: 2px solid var(--red);
    padding: 36px 0 16px;
    font-size: 0.88rem;
    color: var(--text);
}
.site-footer h6 {
    font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 12px; color: var(--text);
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { padding: 3px 0; }
.footer-links a { color: var(--muted); font-size: 0.85rem; }
.footer-links a:hover { color: var(--red); }
.footer-links i { width: 16px; margin-right: 5px; color: var(--red); }
.social-icons { margin-top: 12px; }
.social-icons a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 0;
    color: var(--white); font-size: 0.78rem; margin-right: 6px;
    transition: opacity 0.15s;
}
.social-icons a:hover { opacity: 0.8; }
.social-icons .facebook  { background: #3b5998; }
.social-icons .instagram { background: #e4405f; }
.social-icons .linkedin  { background: #0077b5; }
.footer-bottom {
    border-top: 1px solid var(--border);
    margin-top: 20px; padding-top: 12px;
    text-align: center; font-size: 0.78rem; color: #999;
}


/* ================================================
   BACK TO TOP
   ================================================ */
#back-to-top {
    position: fixed; bottom: 20px; right: 16px;
    display: none; width: 36px; height: 36px;
    background: var(--red); color: var(--white);
    border-radius: 0; font-size: 0.95rem;
    align-items: center; justify-content: center;
    z-index: 1100; cursor: pointer;
    transition: background 0.15s;
}
#back-to-top:hover { background: var(--red-dark); }


/* ================================================
   PAGE TITLE (shared across all pages)
   ================================================ */
.page-title {
    color: var(--red);
    font-size: clamp(1.2rem, 2.5vw, 1.7rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--red);
}


/* ================================================
   SECTION CARD (vision, mission, content blocks)
   ================================================ */
.section-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red);
    border-radius: 0;
    padding: 20px 24px;
    margin-bottom: 16px;
}
.section-card h3 {
    color: var(--red);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.section-card p, .section-card li { font-size: 0.92rem; line-height: 1.8; color: #444; }
.section-card ul { padding-left: 20px; }
.section-card li { margin-bottom: 8px; }


/* ================================================
   PRINCIPAL / HOD CARD
   ================================================ */
.principal-card {
    display: flex; gap: 24px; align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red);
    padding: 24px;
}
.principal-card img {
    width: 160px; height: 160px;
    object-fit: cover; object-position: top center;
    border-radius: 0; flex-shrink: 0;
    border: 1px solid var(--border);
}
.principal-info h3 { color: var(--red); font-size: 1.1rem; font-weight: 700; margin-bottom: 2px; }
.principal-info h4 { font-size: 0.88rem; color: var(--muted); font-style: italic; margin-bottom: 12px; }
.principal-info p  { font-size: 0.9rem; line-height: 1.8; text-align: justify; color: #444; }
@media (max-width: 600px) {
    .principal-card { flex-direction: column; align-items: center; text-align: center; }
    .principal-card img { width: 120px; height: 120px; }
    .principal-info p { text-align: left; }
}


/* ================================================
   DEPARTMENT LINKS (engineeringdepartments.php)
   ================================================ */
.dept-link {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 18px; margin-bottom: 8px;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red);
    border-radius: 0;
    color: var(--text); font-size: 0.92rem; font-weight: 500;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.dept-link i { font-size: 1rem; color: var(--red); flex-shrink: 0; }
.dept-link:hover { background: var(--red); color: var(--white); border-color: var(--red); }
.dept-link:hover i { color: var(--white); }


/* ================================================
   SUB-NAV TABS (pharmacy, supporting depts)
   ================================================ */
.dept-subnav { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 24px; border-bottom: 2px solid var(--red); }
.dept-subnav a {
    padding: 8px 18px;
    background: var(--white);
    border: 1px solid var(--border);
    border-bottom: none;
    color: var(--muted);
    font-size: 0.85rem; font-weight: 500;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    margin-right: 4px;
}
.dept-subnav a:hover { background: var(--light-bg); color: var(--text); }
.dept-subnav a.active { background: var(--red); color: var(--white); border-color: var(--red); }


/* ================================================
   SUPPORTING DEPT CARDS
   ================================================ */
.dept-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 0;
    overflow: hidden;
    transition: border-color 0.15s;
    text-decoration: none;
    color: var(--text);
    display: block; height: 100%;
}
.dept-card:hover { border-color: var(--red); color: var(--text); }
.dept-card img { width: 100%; height: 190px; object-fit: cover; object-position: center; display: block; }
.dept-card-body { padding: 14px 16px; }
.dept-card-body h4 { color: var(--red); font-size: 0.95rem; font-weight: 700; margin-bottom: 6px; }
.dept-card-body p  { font-size: 0.82rem; color: var(--muted); line-height: 1.6; margin: 0; }


/* ================================================
   STAFF CARDS (office staff, library, applied sci)
   ================================================ */
.staff-card {
    display: flex; gap: 20px; align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red);
    padding: 18px; margin-bottom: 12px;
    transition: background 0.15s;
}
.staff-card:hover { background: var(--red-light); }
.staff-card img {
    width: 100px; height: 100px;
    object-fit: cover; object-position: top center;
    border-radius: 50%; flex-shrink: 0;
    border: 2px solid var(--border);
    background: #eee;
}
.staff-info { flex: 1; min-width: 0; }
.staff-info p { margin: 3px 0; font-size: 0.86rem; line-height: 1.6; color: #444; }
.staff-info b { color: var(--red); min-width: 110px; display: inline-block; }
@media (max-width: 576px) {
    .staff-card { flex-direction: column; align-items: center; text-align: center; }
    .staff-info b { display: block; min-width: unset; }
}


/* ================================================
   FACULTY CARDS (pharmacy faculty)
   ================================================ */
.faculty-card {
    display: flex; gap: 20px; align-items: flex-start;
    background: var(--white);
    border: 1px solid var(--border);
    border-left: 3px solid var(--red);
    padding: 18px; margin-bottom: 12px;
    transition: background 0.15s;
}
.faculty-card:hover { background: var(--red-light); }
.faculty-card img {
    width: 110px; height: 110px;
    object-fit: cover; object-position: top center;
    border-radius: 0; flex-shrink: 0;
    border: 1px solid var(--border);
}
.faculty-info { flex: 1; min-width: 0; }
.faculty-info p { margin: 3px 0; font-size: 0.86rem; line-height: 1.6; color: #444; }
.faculty-info b { color: var(--red); min-width: 130px; display: inline-block; }
@media (max-width: 600px) {
    .faculty-card { flex-direction: column; align-items: center; text-align: center; }
    .faculty-card img { width: 100px; height: 100px; }
    .faculty-info b { display: block; min-width: unset; }
}


/* ================================================
   GALLERY / OUR STARS
   ================================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    background: transparent;
    margin-top: 30px;
}
.gallery-item {
    position: relative; 
    overflow: hidden;
    cursor: pointer; 
    background: #ddd;
    border: 1px solid var(--border);
    border-bottom: 4px solid var(--red);
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    transition: transform 0.3s, box-shadow 0.3s;
    padding-top: 75%; /* 4:3 landscape ratio — images fill the full cell */
}
.gallery-item:hover { 
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.13);
}
.gallery-item img { 
    position: absolute;
    inset: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block; 
}
.gallery-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: rgba(130,14,5,0.95);
    color: var(--white); padding: 14px 16px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    text-align: center;
    z-index: 10;
}
.gallery-item:hover .gallery-overlay { transform: translateY(0); }
.gallery-overlay h3 { margin: 0 0 4px; font-size: 0.95rem; font-weight: 700; }
.gallery-overlay p  { margin: 0; font-size: 0.82rem; opacity: 0.9; }
@media (max-width: 992px) {
    .gallery-grid { 
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 576px) {
    .gallery-grid { 
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* Stars modal */
.stars-modal {
    display: none; position: fixed; inset: 0;
    z-index: 2000; background: rgba(0,0,0,0.93);
    overflow: hidden; text-align: center;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.stars-modal.active { display: flex; }
.stars-modal-inner {
    position: relative;
    width: 100%; max-width: 640px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stars-modal img {
    max-width: 100%; max-height: 62vh;
    border-radius: 0; display: inline-block;
    object-fit: contain;
    transition: opacity 0.3s ease;
}
.stars-modal img.fade-out { opacity: 0; }
.stars-modal-caption { color: var(--white); margin-top: 12px; }
.stars-modal-caption h3 { font-size: 1.05rem; margin-bottom: 3px; font-weight: 700; }
.stars-modal-caption p  { font-size: 0.85rem; opacity: 0.75; margin: 0; }
.stars-modal-close {
    position: absolute; top: 14px; right: 20px;
    color: var(--white); font-size: 2rem;
    cursor: pointer; line-height: 1; opacity: 0.8;
    z-index: 10;
}
.stars-modal-close:hover { opacity: 1; }

/* Slideshow controls */
.stars-modal-controls {
    display: flex; align-items: center; gap: 16px;
    margin-top: 18px;
}
.ss-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: var(--white);
    width: 38px; height: 38px;
    border-radius: 50%;
    font-size: 1rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    flex-shrink: 0;
}
.ss-btn:hover { background: rgba(255,255,255,0.28); }
.ss-play-btn {
    width: 46px; height: 46px;
    background: var(--red);
    border: none; font-size: 1.1rem;
}
.ss-play-btn:hover { background: var(--red-dark); }
.ss-counter {
    color: rgba(255,255,255,0.65);
    font-size: 0.82rem;
    min-width: 54px;
    text-align: center;
}
.ss-dots {
    display: flex; gap: 6px; margin-top: 12px; justify-content: center; flex-wrap: wrap;
}
.ss-dot {
    width: 7px; height: 7px;
    background: rgba(255,255,255,0.3);
    border-radius: 50%; cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.ss-dot.active { background: var(--white); transform: scale(1.3); }


/* ================================================
   TABLE (laboratory staff)
   ================================================ */
.table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border);
}
.staff-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.88rem; min-width: 500px;
}
.staff-table th {
    background: var(--red); color: var(--white);
    padding: 10px 14px; text-align: left;
    font-weight: 600; white-space: nowrap;
    letter-spacing: 0.3px;
}
.staff-table td { padding: 9px 14px; border-bottom: 1px solid var(--border); color: #444; }
.staff-table tr:nth-child(even) td { background: var(--light-bg); }
.staff-table tr:hover td { background: var(--red-light); }