:root{--blue:#123a72;--royal:#1f5fbf;--gold:#f2a51a;--ink:#172033;--muted:#667085;--bg:#f5f7fb;--line:#e5eaf1;--white:#fff;--radius:16px;--shadow:0 8px 30px rgba(18,58,114,.10)}*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}.container{width:min(1180px,92%);margin:auto}.site-header,.adminbar{background:var(--blue);color:white}.nav{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{color:white;text-decoration:none;font-size:1.3rem;font-weight:800}.brand span{color:#ffd77d}.nav nav{display:flex;gap:18px}.nav nav a{color:white;text-decoration:none;font-weight:700}.hero{padding:55px 0;background:linear-gradient(120deg,var(--blue),var(--royal));color:white;margin-bottom:30px}.hero h1{font-size:clamp(2rem,5vw,3.4rem);margin:.2rem 0}.hero p{margin:0;font-size:1.1rem}.crumb{font-size:.9rem;opacity:.85;margin-bottom:10px}.crumb a{color:inherit}.featured{display:grid;grid-template-columns:1.1fr 1fr;background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin:30px 0}.featured>img{width:100%;height:100%;min-height:330px;object-fit:cover}.featured>div{padding:35px}.featured h2{font-size:2rem;margin:12px 0}.badge{display:inline-block;background:#fff2d5;color:#8a5700;padding:4px 10px;border-radius:999px;font-size:.78rem;font-weight:800}.filters{display:flex;flex-wrap:wrap;gap:10px;background:white;padding:16px;border-radius:14px;box-shadow:var(--shadow);margin:25px 0}.filters input,.filters select,.admin-form input,.admin-form textarea,.admin-form select{border:1px solid #ccd5e2;border-radius:9px;padding:11px 12px;font:inherit;background:white}.filters input{flex:1;min-width:220px}.btn{display:inline-block;border:0;border-radius:9px;background:var(--royal);color:white;padding:10px 16px;text-decoration:none;font-weight:800;cursor:pointer}.secondary{background:#e9eef7;color:var(--blue)}.year-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:25px 0}.year-tabs a,.pagination a{background:white;color:var(--blue);padding:8px 14px;border-radius:9px;text-decoration:none;font-weight:800;border:1px solid var(--line)}.year-tabs a.active,.pagination a.active{background:var(--blue);color:white}.year-section{margin:35px 0}.year-section>h2{border-left:5px solid var(--gold);padding-left:12px}.news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.card{background:white;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:.25s}.card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(18,58,114,.17)}.image-button{border:0;padding:0;background:none;cursor:zoom-in;width:100%}.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.card-body{padding:22px}.card h3{font-size:1.25rem;margin:10px 0}.card p{color:var(--muted);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.meta{display:flex;gap:8px 16px;flex-wrap:wrap;color:var(--muted);font-size:.9rem;margin:14px 0}.meta span{display:block}.read{color:var(--royal);font-weight:800;text-decoration:none}.pagination{display:flex;justify-content:center;gap:7px;margin:35px 0}.footer{background:#0c2850;color:#dce7f8;padding:28px 0;margin-top:50px}.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:none;align-items:center;justify-content:center;z-index:9999;padding:40px}.lightbox.open{display:flex}.lightbox img{max-width:95vw;max-height:90vh;object-fit:contain}.close{position:absolute;right:25px;top:15px;color:white;background:none;border:0;font-size:42px;cursor:pointer}.detail{max-width:900px;padding:45px 0}.detail h1{font-size:clamp(2rem,5vw,3rem);line-height:1.15}.detail-image img{width:100%;max-height:650px;object-fit:contain;background:#eef1f5;border-radius:14px}.content{font-size:1.08rem;background:white;padding:30px;border-radius:14px;margin:25px 0;box-shadow:var(--shadow)}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px}.share{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:25px 0}.share a,.share button{border:1px solid var(--line);background:white;border-radius:8px;padding:8px 12px;color:var(--blue);text-decoration:none;cursor:pointer}.login-wrap{min-height:75vh;display:grid;place-items:center}.admin-main{padding:35px 0}.admin-title{display:flex;justify-content:space-between;align-items:center}.admin-form{background:white;padding:25px;border-radius:14px;box-shadow:var(--shadow);display:grid;gap:15px}.admin-form.login{width:min(440px,92%)}.admin-form label{display:grid;gap:6px;font-weight:700}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.actions{display:flex;gap:10px}.alert{padding:12px;background:#ffe7e7;color:#8b1b1b;border-radius:8px;margin-bottom:15px}.table-wrap{overflow:auto;background:white;border-radius:14px;box-shadow:var(--shadow)}table{border-collapse:collapse;width:100%}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left}th{background:#edf3fb}.thumb{width:80px;height:55px;object-fit:cover;border-radius:6px}.inline{display:inline}.link{border:0;background:none;padding:0;color:var(--royal);cursor:pointer}.danger{color:#b42318}.empty{text-align:center;background:white;padding:40px;border-radius:14px}@media(max-width:700px){.news-grid,.featured,.form-grid{grid-template-columns:1fr}.featured>img{min-height:220px}.gallery{grid-template-columns:repeat(2,1fr)}.nav{align-items:flex-start;padding:15px 0;flex-direction:column}.filters>*{width:100%}.admin-title{align-items:flex-start;gap:12px;flex-direction:column}}
/* =========================================================
   VPS Latur - News & Media
   News Page Layout
   ========================================================= */

:root {
    --vps-primary: #1f4e79;
    --vps-secondary: #f5a623;
    --vps-dark: #1f2937;
    --vps-text: #4b5563;
    --vps-light: #f7f9fc;
    --vps-border: #e5e7eb;
    --vps-white: #ffffff;
    --vps-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    --vps-radius: 12px;
}

/* ---------------------------------------------------------
   General
   --------------------------------------------------------- */

body {
    background: #ffffff;
    color: var(--vps-dark);
}

main {
    padding-top: 0;
}

.news-page {
    width: 100%;
    overflow: hidden;
}

.news-container {
    width: min(1180px, calc(100% - 30px));
    margin: 0 auto;
}

/* ---------------------------------------------------------
   Page Hero
   --------------------------------------------------------- */

.news-hero {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    background:
        linear-gradient(
            rgba(31, 78, 121, 0.88),
            rgba(31, 78, 121, 0.88)
        ),
        url("../assets/images/news-banner.jpg") center/cover no-repeat;

    margin-bottom: 55px;
}

.news-hero-content {
    width: min(850px, 90%);
    color: #ffffff;
}

.news-hero .breadcrumb {
    margin-bottom: 15px;
    font-size: 14px;
    opacity: 0.9;
}

.news-hero h1 {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: clamp(34px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.15;
}

.news-hero p {
    margin: 0;
    color: rgba(255,255,255,0.92);
    font-size: 17px;
}

/* ---------------------------------------------------------
   Main content
   --------------------------------------------------------- */

.news-content {
    padding-bottom: 70px;
}

/* ---------------------------------------------------------
   Section Heading
   --------------------------------------------------------- */

.news-section-heading {
    text-align: center;
    margin-bottom: 30px;
}

.news-section-heading .small-title {
    display: inline-block;
    margin-bottom: 8px;
    color: var(--vps-secondary);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.news-section-heading h2 {
    margin: 0;
    color: var(--vps-primary);
    font-size: 30px;
    font-weight: 700;
}

.news-section-heading p {
    max-width: 700px;
    margin: 10px auto 0;
    color: var(--vps-text);
}

/* ---------------------------------------------------------
   Featured News
   --------------------------------------------------------- */

.featured-news {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    background: var(--vps-white);
    border: 1px solid var(--vps-border);
    border-radius: var(--vps-radius);
    overflow: hidden;
    box-shadow: var(--vps-shadow);
    margin-bottom: 55px;
}

.featured-image {
    position: relative;
    min-height: 390px;
    overflow: hidden;
}

.featured-image img {
    width: 100%;
    height: 100%;
    min-height: 390px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.featured-news:hover .featured-image img {
    transform: scale(1.04);
}

.featured-body {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.news-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 6px 13px;
    margin-bottom: 15px;

    border-radius: 30px;
    background: rgba(31, 78, 121, 0.10);
    color: var(--vps-primary);

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

.featured-body h2 {
    margin: 0 0 15px;
    color: var(--vps-dark);
    font-size: 27px;
    line-height: 1.35;
    font-weight: 700;
}

.featured-description {
    color: var(--vps-text);
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 18px;
    margin-bottom: 22px;

    color: #6b7280;
    font-size: 13px;
}

.news-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.news-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;

    padding: 11px 22px;
    border-radius: 5px;

    background: var(--vps-primary);
    color: #ffffff !important;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
}

.news-btn:hover {
    background: var(--vps-secondary);
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* ---------------------------------------------------------
   Search / Filters
   --------------------------------------------------------- */

.news-filters {
    background: var(--vps-light);
    border: 1px solid var(--vps-border);
    border-radius: var(--vps-radius);
    padding: 20px;
    margin-bottom: 25px;
}

.news-filter-form {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 180px 200px auto auto;
    gap: 12px;
}

.news-filter-form input,
.news-filter-form select {
    width: 100%;
    min-height: 46px;

    border: 1px solid #d9dee7;
    border-radius: 6px;

    background: #ffffff;
    color: var(--vps-dark);

    padding: 0 14px;
    outline: none;

    font-family: inherit;
    font-size: 14px;
}

.news-filter-form input:focus,
.news-filter-form select:focus {
    border-color: var(--vps-primary);
    box-shadow: 0 0 0 3px rgba(31, 78, 121, 0.08);
}

.news-filter-button,
.news-reset-button {
    min-height: 46px;
    padding: 0 20px;

    border-radius: 6px;
    border: 1px solid var(--vps-primary);

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

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    cursor: pointer;
}

.news-filter-button {
    background: var(--vps-primary);
    color: #ffffff;
}

.news-reset-button {
    background: #ffffff;
    color: var(--vps-primary);
}

.news-filter-button:hover {
    background: var(--vps-secondary);
    border-color: var(--vps-secondary);
}

.news-reset-button:hover {
    background: var(--vps-primary);
    color: #ffffff;
}

/* ---------------------------------------------------------
   Year Tabs
   --------------------------------------------------------- */

.news-year-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 35px;
}

.news-year-tabs a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 75px;
    padding: 9px 18px;

    border: 1px solid var(--vps-border);
    border-radius: 30px;

    background: #ffffff;
    color: var(--vps-dark);

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: all 0.25s ease;
}

.news-year-tabs a:hover,
.news-year-tabs a.active {
    background: var(--vps-primary);
    border-color: var(--vps-primary);
    color: #ffffff;
}

/* ---------------------------------------------------------
   Year Section
   --------------------------------------------------------- */

.news-year-section {
    margin-bottom: 50px;
}

.news-year-title {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;

    margin: 0 0 25px;

    color: var(--vps-primary);
    font-size: 25px;
    font-weight: 700;
}

.news-year-title::after {
    content: "";
    height: 2px;
    flex: 1;

    background: linear-gradient(
        to right,
        var(--vps-secondary),
        transparent
    );
}

/* ---------------------------------------------------------
   News Grid
   --------------------------------------------------------- */

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}

.news-card {
    background: #ffffff;
    border: 1px solid var(--vps-border);
    border-radius: var(--vps-radius);
    overflow: hidden;

    box-shadow: 0 4px 18px rgba(0,0,0,0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--vps-shadow);
}

.news-card-image {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #f1f3f6;
}

.news-card-image button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;

    transition: transform 0.45s ease;
}

.news-card:hover .news-card-image img {
    transform: scale(1.06);
}

.news-card-body {
    padding: 22px;
}

.news-card-category {
    display: inline-block;
    margin-bottom: 11px;

    color: var(--vps-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.news-card h3 {
    margin: 0 0 12px;

    color: var(--vps-dark);
    font-size: 19px;
    line-height: 1.45;
    font-weight: 700;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-card-description {
    color: var(--vps-text);
    font-size: 14px;
    line-height: 1.7;

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;

    margin-bottom: 16px;
}

.news-card-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding-top: 14px;
    margin-bottom: 17px;

    border-top: 1px solid var(--vps-border);

    color: #6b7280;
    font-size: 12px;
}

.news-read-more {
    color: var(--vps-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.news-read-more:hover {
    color: var(--vps-secondary);
}

/* ---------------------------------------------------------
   Empty Result
   --------------------------------------------------------- */

.news-empty {
    padding: 60px 20px;
    margin-bottom: 40px;

    text-align: center;

    background: var(--vps-light);
    border: 1px dashed #cfd6df;
    border-radius: var(--vps-radius);

    color: var(--vps-text);
}

.news-empty i {
    font-size: 40px;
    color: var(--vps-secondary);
    margin-bottom: 15px;
}

.news-empty h3 {
    margin: 0 0 8px;
    color: var(--vps-primary);
}

/* ---------------------------------------------------------
   Pagination
   --------------------------------------------------------- */

.news-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 35px;
}

.news-pagination a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 40px;
    height: 40px;

    border: 1px solid var(--vps-border);
    border-radius: 5px;

    background: #ffffff;
    color: var(--vps-dark);

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.news-pagination a:hover,
.news-pagination a.active {
    background: var(--vps-primary);
    border-color: var(--vps-primary);
    color: #ffffff;
}

/* ---------------------------------------------------------
   Lightbox
   --------------------------------------------------------- */

.news-lightbox {
    position: fixed;
    inset: 0;

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

    padding: 30px;

    background: rgba(0,0,0,0.88);

    z-index: 99999;
}

.news-lightbox.open {
    display: flex;
}

.news-lightbox img {
    max-width: min(1100px, 95vw);
    max-height: 90vh;

    object-fit: contain;

    border-radius: 5px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.4);
}

.news-lightbox-close {
    position: fixed;
    top: 20px;
    right: 25px;

    width: 45px;
    height: 45px;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,0.12);
    color: #ffffff;

    font-size: 30px;
    line-height: 1;

    cursor: pointer;
}

.news-lightbox-close:hover {
    background: rgba(255,255,255,0.25);
}

/* ---------------------------------------------------------
   Responsive - Tablet
   --------------------------------------------------------- */

@media (max-width: 991px) {

    .featured-news {
        grid-template-columns: 1fr;
    }

    .featured-image,
    .featured-image img {
        min-height: 300px;
        height: 300px;
    }

    .featured-body {
        padding: 30px;
    }

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

    .news-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .news-filter-form input {
        grid-column: 1 / -1;
    }
}

/* ---------------------------------------------------------
   Responsive - Mobile
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .news-hero {
        min-height: 240px;
        margin-bottom: 35px;
    }

    .news-hero h1 {
        font-size: 32px;
    }

    .news-hero p {
        font-size: 14px;
    }

    .news-content {
        padding-bottom: 45px;
    }

    .featured-body {
        padding: 24px;
    }

    .featured-body h2 {
        font-size: 22px;
    }

    .featured-description {
        font-size: 14px;
    }

    .news-filter-form {
        grid-template-columns: 1fr;
    }

    .news-filter-form input {
        grid-column: auto;
    }

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

    .news-card-image {
        height: 230px;
    }

    .news-year-title {
        font-size: 22px;
    }

    .news-year-title::after {
        display: none;
    }

    .news-year-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 5px;
    }

    .news-year-tabs a {
        flex-shrink: 0;
    }
}

/* ---------------------------------------------------------
   Very Small Mobile
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .news-container {
        width: min(100% - 20px, 1180px);
    }

    .news-hero {
        min-height: 210px;
    }

    .featured-image,
    .featured-image img {
        min-height: 220px;
        height: 220px;
    }

    .featured-body {
        padding: 20px;
    }

    .news-card-body {
        padding: 18px;
    }

    .news-card h3 {
        font-size: 18px;
    }
}