/* =========================================================
   COMPREHENSIVE RESPONSIVE CSS
   Covers: Desktop, Laptop, Tablet, Mobile, Small Mobile
   Breakpoints: 1199px | 1050px | 991px | 767px | 575px | 480px | 375px
========================================================= */

/* =========================================================
   1. MOBILE NAV TOGGLE BUTTON (HAMBURGER)
========================================================= */

#mobile-nav-toggle {
    display: none;
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    border: none;
    background: none;
    cursor: pointer;
    padding: 8px;
}

#mobile-nav-toggle i {
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

/* =========================================================
   2. HEADER RESPONSIVE
   Glass nav collapses on tablet/mobile
========================================================= */

/* Desktop: everything inline */
@media (min-width: 992px) {
    #mobile-nav-toggle {
        display: none !important;
    }
}

/* Tablet: show hamburger, hide desktop menu + search */
@media (max-width: 991px) {
    /* Show hamburger button */
    #mobile-nav-toggle {
        display: block !important;
    }

    /* Hide desktop navigation */
    #nav-menu-container,
    .cj-header-menu {
        display: none !important;
    }

    /* Hide desktop search from glass-nav */
    .cj-header-search {
        display: none !important;
    }

    /* Glass nav becomes simple bar with logo + hamburger */
    .glass-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 72px !important;
        padding: 10px 18px !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
        grid-template-columns: auto !important;
        column-gap: 0 !important;
    }

    /* Logo takes available space */
    #logo,
    .cj-header-logo {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 200px !important;
    }

    #logo img,
    .cj-header-logo img {
        height: 48px !important;
        max-height: 48px !important;
        width: auto !important;
        max-width: 160px !important;
    }
}

/* Mobile: smaller header */
@media (max-width: 575px) {
    .glass-nav {
        min-height: 62px !important;
        padding: 8px 14px !important;
    }

    #logo,
    .cj-header-logo {
        max-width: 140px !important;
    }

    #logo img,
    .cj-header-logo img {
        height: 40px !important;
        max-height: 40px !important;
        max-width: 130px !important;
    }

    #mobile-nav-toggle i {
        font-size: 24px !important;
    }
}

/* =========================================================
   3. HEADER TOP BAR RESPONSIVE
========================================================= */

@media (max-width: 767px) {
    .header-top {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .header-top .container {
        padding: 0 12px;
    }
    .header-top a {
        font-size: 13px;
    }
    .header-top .top-head-btn {
        padding: 6px 14px;
        font-size: 12px;
    }
}

/* =========================================================
   4. CONTAINER FLUID RESPONSIVE
========================================================= */

@media (max-width: 991px) {
    .container {
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 575px) {
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* =========================================================
   5. HOME PAGE - VIDEO BANNER
========================================================= */

@media (max-width: 991px) {
    .video-banner-area {
        min-height: 70vh !important;
    }

    .video-banner-area h1 {
        font-size: 36px !important;
        line-height: 1.4 !important;
    }

    .video-banner-area h6 {
        font-size: 15px !important;
    }

    .video-banner-area p {
        font-size: 14px !important;
        line-height: 1.9 !important;
    }
}

@media (max-width: 767px) {
    .video-banner-area {
        min-height: 60vh !important;
    }

    .video-banner-area h1 {
        font-size: 28px !important;
        line-height: 1.5 !important;
    }

    .video-banner-area h6 {
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }

    .video-banner-area p {
        font-size: 13px !important;
        line-height: 1.8 !important;
        max-width: 100% !important;
    }

    .video-banner-area .container {
        padding: 0 16px !important;
    }
}

@media (max-width: 480px) {
    .video-banner-area {
        min-height: 55vh !important;
    }

    .video-banner-area h1 {
        font-size: 24px !important;
    }

    .video-banner-area h6 {
        font-size: 12px !important;
    }

    .video-banner-area p {
        font-size: 12px !important;
    }
}

/* =========================================================
   6. HOME PAGE - SECTION HEADERS
========================================================= */

@media (max-width: 991px) {
    .cj-section {
        padding: 60px 0 !important;
    }

    .cj-section-head {
        padding: 32px 24px !important;
        margin-bottom: 42px !important;
    }

    .cj-section-head h2 {
        font-size: 28px !important;
    }

    .cj-section-head p {
        font-size: 14px !important;
    }
}

@media (max-width: 575px) {
    .cj-section {
        padding: 48px 0 !important;
    }

    .cj-section-head {
        padding: 24px 18px !important;
        margin-bottom: 32px !important;
        border-radius: 20px !important;
    }

    .cj-section-head h2 {
        font-size: 22px !important;
    }

    .cj-section-head p {
        font-size: 13px !important;
        line-height: 1.85 !important;
    }

    .cj-section-kicker {
        font-size: 11px !important;
        padding: 5px 14px !important;
    }
}

/* =========================================================
   7. HOME PAGE - POST CARDS SLIDER
========================================================= */

@media (max-width: 1199px) {
    .cj-slider > *,
    .cj-category-post-slider > * {
        flex: 0 0 calc(33.333% - 16px) !important;
    }

    .cj-loop-slider > .cj-post-card {
        flex-basis: calc((100% - 56px) / 3) !important;
        max-width: calc((100% - 56px) / 3) !important;
    }
}

@media (max-width: 991px) {
    .cj-slider > *,
    .cj-category-post-slider > * {
        flex: 0 0 calc(50% - 12px) !important;
    }

    .cj-loop-slider > .cj-post-card {
        flex-basis: calc((100% - 28px) / 2) !important;
        max-width: calc((100% - 28px) / 2) !important;
    }

    .cj-post-card {
        min-height: auto !important;
    }

    .cj-post-image {
        height: 180px !important;
    }

    .cj-post-body h3 {
        font-size: 17px !important;
    }

    .cj-post-body p {
        font-size: 13px !important;
        line-height: 1.9 !important;
    }
}

@media (max-width: 767px) {
    .cj-slider {
        gap: 14px !important;
        padding: 10px 6px 28px !important;
    }

    .cj-slider > *,
    .cj-category-post-slider > * {
        flex: 0 0 85% !important;
    }

    .cj-loop-slider > .cj-post-card {
        flex-basis: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
    }

    .cj-post-card {
        border-radius: 20px !important;
    }

    .cj-post-image {
        height: 180px !important;
    }

    .cj-post-body {
        padding: 18px !important;
    }

    .cj-post-body h3 {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .cj-post-body p {
        font-size: 13px !important;
        line-height: 1.85 !important;
        margin-bottom: 12px !important;
    }

    .cj-post-meta {
        font-size: 12px !important;
        margin-bottom: 14px !important;
    }

    .cj-read-more {
        font-size: 12px !important;
        padding: 7px 14px !important;
        min-height: 34px !important;
    }

    /* Hide slider arrows on mobile - swipe instead */
    .cj-slider-btn,
    .cj-mini-btn {
        display: none !important;
    }

    .cj-prev,
    .cj-next,
    .cj-mini-prev,
    .cj-mini-next {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .cj-slider > * {
        flex: 0 0 92% !important;
    }

    .cj-post-image {
        height: 160px !important;
    }

    .cj-post-body h3 {
        font-size: 15px !important;
    }

    .cj-post-title-row {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .cj-post-title-category {
        max-width: 100% !important;
    }
}

/* =========================================================
   8. HOME PAGE - FEATURE / SCIENTIFIC SERVICES CARDS
========================================================= */

@media (max-width: 1199px) {
    .cj-feature-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 22px !important;
    }

    .cj-feature-card,
    .feature-card {
        flex-basis: calc((100% - 30px) / 2) !important;
        min-height: 460px !important;
    }
}

@media (max-width: 991px) {
    .cj-info-section,
    .home-feature-section {
        padding: 60px 0 !important;
    }

    .cj-feature-card,
    .feature-card {
        flex-basis: calc((100% - 18px) / 2) !important;
        min-height: 440px !important;
    }

    .cj-feature-body h3,
    .feature-card-body h3 {
        font-size: 18px !important;
    }

    .cj-feature-body p,
    .feature-card-body p {
        font-size: 13px !important;
        line-height: 1.95 !important;
    }
}

@media (max-width: 767px) {
    .cj-feature-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    .cj-feature-slider-track,
    .feature-slider-track {
        gap: 14px !important;
    }

    .cj-feature-card,
    .feature-card {
        flex-basis: 100% !important;
        min-height: auto !important;
    }

    .cj-feature-image,
    .feature-card-image {
        height: 200px !important;
    }

    .cj-feature-image img,
    .feature-card-image img {
        height: 200px !important;
    }

    .cj-feature-body,
    .feature-card-body {
        padding: 24px 20px 28px !important;
    }

    .cj-feature-body h3,
    .feature-card-body h3 {
        font-size: 18px !important;
    }

    .cj-feature-body p,
    .feature-card-body p {
        font-size: 13px !important;
    }

    .cj-feature-icon,
    .feature-icon {
        width: 56px !important;
        height: 56px !important;
        font-size: 22px !important;
        right: 18px !important;
        bottom: -28px !important;
    }
}

@media (max-width: 480px) {
    .cj-feature-card,
    .feature-card {
        border-radius: 18px !important;
    }

    .cj-feature-image,
    .feature-card-image {
        height: 180px !important;
    }
}

/* =========================================================
   9. HOME PAGE - CATEGORY BLOCKS
========================================================= */

@media (max-width: 991px) {
    .cj-category-banner {
        height: 200px !important;
    }

    .cj-category-content h3 {
        font-size: 26px !important;
    }

    .cj-category-content span {
        font-size: 12px !important;
    }
}

@media (max-width: 767px) {
    .cj-category-grid {
        gap: 24px !important;
    }

    .cj-category-block {
        border-radius: 22px !important;
        padding: 16px !important;
    }

    .cj-category-banner {
        height: 180px !important;
        border-radius: 18px !important;
    }

    .cj-category-content {
        right: 18px !important;
        bottom: 18px !important;
    }

    .cj-category-content h3 {
        font-size: 22px !important;
    }

    .cj-category-content span {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
}

@media (max-width: 480px) {
    .cj-category-banner {
        height: 160px !important;
    }

    .cj-category-content h3 {
        font-size: 20px !important;
    }
}

/* =========================================================
   10. HOME PAGE - MAIN SITE CTA SECTION
========================================================= */

@media (max-width: 991px) {
    .cj-main-site-box {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .cj-main-site-content {
        padding: 50px 0 !important;
    }

    .cj-main-site-content h2 {
        font-size: 30px !important;
    }

    .cj-main-site-image {
        min-height: 350px !important;
    }

    .cj-main-site-image img {
        min-height: 350px !important;
    }
}

@media (max-width: 767px) {
    .cj-main-site-section {
        padding: 60px 0 !important;
    }

    .cj-main-site-content {
        padding: 30px 20px !important;
    }

    .cj-main-site-content h2 {
        font-size: 24px !important;
        line-height: 1.6 !important;
    }

    .cj-main-site-content p {
        font-size: 14px !important;
        line-height: 2 !important;
    }

    .cj-main-site-badge {
        font-size: 12px !important;
        padding: 6px 16px !important;
    }

    .cj-main-site-image {
        min-height: 280px !important;
    }

    .cj-main-site-image img {
        min-height: 280px !important;
    }

    .cj-cta-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .cj-primary-btn,
    .cj-secondary-btn {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
}

/* =========================================================
   11. BLOG HOME PAGE BANNER
========================================================= */

@media (max-width: 991px) {
    .blog-home-banner.video-blog-banner .hero-heading h1 {
        font-size: 34px !important;
    }

    .blog-home-banner.video-blog-banner .hero-heading p {
        font-size: 15px !important;
    }
}

@media (max-width: 767px) {
    .blog-home-banner.video-blog-banner {
        min-height: 350px !important;
    }

    .blog-home-banner.video-blog-banner .hero-heading h1 {
        font-size: 26px !important;
        margin-bottom: 12px !important;
    }

    .blog-home-banner.video-blog-banner .hero-heading p {
        font-size: 13px !important;
        line-height: 1.85 !important;
    }
}

/* =========================================================
   12. BLOG GRID (blog-home.html)
========================================================= */

@media (max-width: 991px) {
    .blog-grid-3col {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 767px) {
    .blog-grid-3col {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .blog-grid-3col .cj-post-card {
        min-height: auto !important;
    }
}

/* =========================================================
   13. SINGLE BLOG PAGE (blog-single.html)
========================================================= */

@media (max-width: 991px) {
    .single-blog-banner {
        min-height: 340px !important;
    }

    .single-blog-banner__content h1 {
        font-size: 34px !important;
    }

    .single-blog-content {
        font-size: 17px !important;
    }

    .single-blog-content p,
    .single-blog-content li {
        font-size: 17px !important;
        line-height: 2.15 !important;
    }

    .single-blog-content h1 {
        font-size: 26px !important;
    }

    .single-blog-content h2 {
        font-size: 22px !important;
    }

    .single-blog-content h3 {
        font-size: 20px !important;
    }
}

@media (max-width: 767px) {
    .single-blog-banner {
        min-height: 280px !important;
    }

    .single-blog-banner__content h1 {
        font-size: 24px !important;
        margin-bottom: 12px !important;
    }

    .single-blog-banner__breadcrumb {
        font-size: 12px !important;
        gap: 4px !important;
    }

    .single-blog-content {
        font-size: 15px !important;
        line-height: 2.1 !important;
    }

    .single-blog-content p,
    .single-blog-content li {
        font-size: 15px !important;
        line-height: 2.1 !important;
        margin-bottom: 16px !important;
    }

    .single-blog-content h1 {
        font-size: 22px !important;
    }

    .single-blog-content h2 {
        font-size: 20px !important;
    }

    .single-blog-content h3 {
        font-size: 18px !important;
    }

    .single-blog-content h4 {
        font-size: 17px !important;
    }

    .single-blog-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Sidebar below content on mobile */
    .single-sidebar-column {
        margin-top: 30px !important;
    }

    .single-sidebar-column .single-sidebar-widget,
    .single-sidebar-column .single-sidebar-widget * {
        font-size: 14px !important;
        line-height: 1.85 !important;
    }
}

/* =========================================================
   14. CATEGORY PAGE BANNER
========================================================= */

@media (max-width: 991px) {
    .category-page-banner {
        min-height: 360px !important;
    }

    .category-banner-content h1 {
        font-size: 32px !important;
    }
}

@media (max-width: 767px) {
    .category-page-banner {
        min-height: 280px !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        width: calc(100% + 32px) !important;
    }

    .category-banner-content h1 {
        font-size: 24px !important;
    }

    .category-banner-content p {
        font-size: 13px !important;
        line-height: 1.85 !important;
    }
}

/* =========================================================
   15. ABOUT PAGE
========================================================= */

@media (max-width: 991px) {
    .citra-about-page {
        padding-top: 140px !important;
    }

    .about-hero {
        grid-template-columns: 1fr !important;
    }

    .about-hero-content {
        min-height: auto !important;
        padding: 36px !important;
    }

    .about-hero-card {
        min-height: auto !important;
        padding: 24px !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    .mission-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .about-cta {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .about-container {
        width: min(100%, 94vw) !important;
    }
}

@media (max-width: 767px) {
    .citra-about-page {
        padding: 110px 14px 50px !important;
    }

    .about-hero-content,
    .about-hero-card,
    .about-section,
    .about-cta {
        padding: 22px !important;
        border-radius: 22px !important;
    }

    .about-title {
        font-size: 32px !important;
    }

    .about-lead {
        font-size: 14px !important;
        line-height: 2 !important;
    }

    .about-actions {
        flex-direction: column !important;
    }

    .citra-btn {
        width: 100% !important;
        text-align: center !important;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .stat-card {
        padding: 18px 14px !important;
    }

    .stat-number {
        font-size: 26px !important;
    }

    .stat-label {
        font-size: 12px !important;
    }

    .timeline-item {
        grid-template-columns: 1fr !important;
    }

    .timeline-year {
        min-height: auto !important;
        padding: 14px !important;
    }

    .section-title {
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {
    .citra-about-page {
        padding: 100px 10px 40px !important;
    }

    .about-title {
        font-size: 28px !important;
    }

    .about-hero-content {
        padding: 18px !important;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   16. CONTACT PAGE
========================================================= */

@media (max-width: 991px) {
    .citra-contact-page {
        padding-top: 140px !important;
    }

    .contact-container {
        width: min(100%, 94vw) !important;
    }

    .contact-hero {
        padding: 32px !important;
    }
}

@media (max-width: 767px) {
    .citra-contact-page {
        padding: 110px 14px 50px !important;
    }

    .contact-hero {
        padding: 22px !important;
        border-radius: 22px !important;
    }

    .glass-panel {
        border-radius: 18px !important;
    }

    .contact-form-grid,
    .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    .citra-contact-page {
        padding: 100px 10px 40px !important;
    }
}

/* =========================================================
   17. SEARCH RESULTS PAGE
========================================================= */

@media (max-width: 991px) {
    .cj-search-page {
        padding: 140px 20px 70px !important;
    }

    .cj-search-results-list {
        gap: 16px !important;
    }
}

@media (max-width: 767px) {
    .cj-search-page {
        padding: 110px 14px 50px !important;
    }

    .cj-search-head h1 {
        font-size: 22px !important;
    }

    .cj-search-page-form {
        padding: 8px !important;
        border-radius: 16px !important;
    }

    .cj-search-page-form input {
        height: 46px !important;
        font-size: 14px !important;
    }

    .cj-search-page-form button {
        height: 46px !important;
        padding: 0 20px !important;
        font-size: 13px !important;
    }

    .cj-search-result-card {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .cj-search-result-card h2 {
        font-size: 18px !important;
    }

    .cj-search-result-card p {
        font-size: 13px !important;
        line-height: 1.85 !important;
    }

    .cj-search-result-meta span {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }

    .cj-pagination {
        gap: 10px !important;
    }

    .cj-pagination a,
    .cj-pagination span {
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   18. WORKSHOP LIST PAGE
========================================================= */

@media (max-width: 991px) {
    .ws-hero {
        min-height: 300px !important;
    }

    .ws-hero-content {
        padding: 120px 20px 60px !important;
    }

    .ws-section {
        padding: 50px 0 !important;
    }

    .ws-section-head h2 {
        font-size: 28px !important;
    }

    .ws-grid-upcoming {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .ws-hero {
        min-height: 260px !important;
    }

    .ws-hero-content {
        padding: 100px 16px 50px !important;
    }

    .ws-hero-title {
        font-size: 28px !important;
        line-height: 1.4 !important;
    }

    .ws-hero-desc {
        font-size: 14px !important;
    }

    .ws-hero-badge {
        font-size: 12px !important;
        padding: 6px 14px !important;
    }

    .ws-section {
        padding: 40px 0 !important;
    }

    .ws-section-head {
        margin-bottom: 30px !important;
    }

    .ws-section-head h2 {
        font-size: 24px !important;
    }

    .ws-section-head p {
        font-size: 14px !important;
    }

    .ws-grid-upcoming,
    .ws-grid-completed {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }

    .ws-card {
        border-radius: 16px !important;
    }

    .ws-card-body {
        padding: 16px 18px 18px !important;
    }

    .ws-card-body h3 {
        font-size: 18px !important;
    }

    .ws-card-excerpt {
        font-size: 13px !important;
    }

    .ws-card-meta {
        font-size: 12px !important;
        gap: 10px !important;
    }

    .ws-card-footer {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .ws-card-btn {
        padding: 7px 14px !important;
        font-size: 12px !important;
    }

    /* Slider cards */
    .ws-slider .ws-card {
        flex: 0 0 calc(100% - 12px) !important;
        min-width: 0 !important;
    }

    .ws-slider-btn {
        display: none !important;
    }

    .ws-slider-wrap {
        gap: 0 !important;
    }
}

@media (max-width: 480px) {
    .ws-hero-title {
        font-size: 24px !important;
    }

    .ws-hero-desc {
        font-size: 13px !important;
    }

    .ws-card-price {
        font-size: 13px !important;
    }
}

/* =========================================================
   19. WORKSHOP DETAIL PAGE
========================================================= */

@media (max-width: 991px) {
    .ws-detail-layout {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .ws-reg-card {
        position: static !important;
    }

    .ws-detail-banner {
        min-height: 300px !important;
    }

    .ws-detail-banner-content {
        padding: 40px 0 30px !important;
    }
}

@media (max-width: 767px) {
    .ws-detail-banner {
        min-height: 260px !important;
    }

    .ws-detail-banner-content {
        padding: 30px 0 24px !important;
    }

    .ws-detail-banner-content h1 {
        font-size: 24px !important;
        line-height: 1.4 !important;
    }

    .ws-detail-banner-meta {
        font-size: 12px !important;
        gap: 12px !important;
    }

    .ws-detail-main {
        padding: 30px 0 50px !important;
    }

    .ws-detail-description h2 {
        font-size: 20px !important;
    }

    .ws-detail-content-body {
        font-size: 14px !important;
        line-height: 2 !important;
    }

    .ws-info-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .ws-info-item {
        padding: 14px 16px !important;
    }

    .ws-instructor-box {
        flex-direction: column !important;
        text-align: center !important;
        gap: 14px !important;
    }

    .ws-instructor-avatar {
        margin: 0 auto !important;
    }

    .ws-reg-card {
        border-radius: 16px !important;
    }

    .ws-reg-header {
        padding: 18px 20px !important;
    }

    .ws-reg-form {
        padding: 18px 20px !important;
    }

    .ws-form-control {
        padding: 10px 14px !important;
        font-size: 13px !important;
    }

    .ws-stats-card {
        flex-wrap: wrap !important;
    }

    .ws-stat {
        min-width: calc(50% - 1px) !important;
    }
}

/* =========================================================
   20. ARTICLES / PROTOCOLS COMING SOON PAGES
========================================================= */

@media (max-width: 767px) {
    .articles-page {
        padding: 120px 14px 50px !important;
    }

    .articles-card {
        padding: 28px 20px !important;
        border-radius: 24px !important;
    }

    .articles-title {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .articles-lead {
        font-size: 14px !important;
        line-height: 1.9 !important;
    }

    .articles-features {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .articles-feature {
        padding: 16px !important;
    }

    .articles-feature h3 {
        font-size: 15px !important;
    }

    .articles-feature p {
        font-size: 13px !important;
    }

    .articles-actions {
        flex-direction: column !important;
    }

    .articles-btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Same for protocols page */
    .protocols-page {
        padding: 120px 14px 50px !important;
    }

    .protocols-card {
        padding: 28px 20px !important;
        border-radius: 24px !important;
    }

    .protocols-title {
        font-size: 28px !important;
    }
}

/* =========================================================
   21. ELEMENTS PAGE
========================================================= */

@media (max-width: 991px) {
    .generic-banner .height {
        height: 400px !important;
    }
}

@media (max-width: 767px) {
    .generic-banner .height {
        height: 300px !important;
    }

    .generic-banner .generic-banner-content h2 {
        font-size: 26px !important;
    }

    .section-half {
        padding: 50px 0 !important;
    }

    .section-full {
        padding: 60px 0 !important;
    }

    .progress-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =========================================================
   22. FOOTER RESPONSIVE (enhancement over existing)
========================================================= */

@media (max-width: 991px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 50px 40px !important;
        padding: 60px 30px 50px !important;
    }

    .brand-col {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 767px) {
    .footer-container {
        grid-template-columns: 1fr !important;
        gap: 36px !important;
        padding: 44px 20px 36px !important;
    }

    .footer-col,
    .brand-col {
        text-align: center !important;
        align-items: center !important;
    }

    .footer-col h3 {
        font-size: 20px !important;
        margin-bottom: 20px !important;
    }

    .footer-about-col p,
    .quick-links a,
    .contact-info li,
    .brand-desc {
        font-size: 15px !important;
    }

    .contact-info li {
        justify-content: center !important;
    }

    .quick-links li {
        margin-bottom: 16px !important;
    }

    .footer-bottom {
        padding: 20px 16px !important;
    }

    .footer-bottom p {
        font-size: 13px !important;
    }

    .social-links {
        gap: 16px !important;
    }

    .social-links a {
        width: 40px !important;
        height: 40px !important;
    }

    .social-links img {
        width: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 480px) {
    .footer-container {
        padding: 36px 14px 28px !important;
        gap: 28px !important;
    }

    .footer-col h3 {
        font-size: 18px !important;
    }

    .contact-info li {
        flex-direction: column !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .phone-container {
        align-items: center !important;
    }
}

/* =========================================================
   23. GENERAL TYPOGRAPHY RESPONSIVE
========================================================= */

@media (max-width: 991px) {
    h1, .h1 {
        font-size: 30px !important;
    }

    h2, .h2 {
        font-size: 26px !important;
    }

    h3, .h3 {
        font-size: 22px !important;
    }

    .section-title {
        margin-bottom: 40px !important;
    }
}

@media (max-width: 767px) {
    h1, .h1 {
        font-size: 26px !important;
    }

    h2, .h2 {
        font-size: 22px !important;
    }

    h3, .h3 {
        font-size: 20px !important;
    }

    .section-half {
        padding: 40px 0 !important;
    }

    .section-full {
        padding: 50px 0 !important;
    }

    .section-title {
        margin-bottom: 30px !important;
    }

    .section-title h1 {
        font-size: 24px !important;
    }
}

/* =========================================================
   24. TOUCH-FRIENDLY IMPROVEMENTS
========================================================= */

@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .nav-menu > li > a {
        padding: 12px 14px !important;
        min-height: 44px;
        display: inline-flex !important;
        align-items: center !important;
    }

    .cj-read-more {
        min-height: 44px !important;
        padding: 10px 20px !important;
    }

    .cj-header-search-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .ws-card-btn {
        min-height: 44px !important;
        padding: 10px 20px !important;
    }

    .cj-primary-btn,
    .cj-secondary-btn {
        min-height: 48px !important;
    }

    .citra-btn {
        min-height: 50px !important;
    }

    .articles-btn {
        min-height: 50px !important;
    }

    .ws-btn-primary {
        min-height: 50px !important;
    }

    /* Disable hover transforms on touch */
    .cj-post-card:hover,
    .cj-feature-card:hover,
    .feature-card:hover,
    .ws-card:hover,
    .stat-card:hover,
    .mission-card:hover {
        transform: none !important;
    }

    .cj-post-card:active,
    .cj-feature-card:active,
    .ws-card:active {
        transform: scale(0.98) !important;
    }

    /* Links are easier to tap */
    a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* =========================================================
   25. SAFE AREA (notch phones)
========================================================= */

@supports (padding: max(0px)) {
    .glass-nav {
        padding-left: max(18px, env(safe-area-inset-left)) !important;
        padding-right: max(18px, env(safe-area-inset-right)) !important;
    }

    .footer-bottom {
        padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
    }
}

/* =========================================================
   26. PRINT STYLES
========================================================= */

@media print {
    #header,
    .custom-footer,
    #mobile-nav,
    #mobile-nav-toggle,
    .cj-slider-btn,
    .cj-mini-btn {
        display: none !important;
    }

    .video-banner-area,
    .blog-home-banner {
        min-height: auto !important;
    }

    body {
        color: #000 !important;
        background: #fff !important;
    }
}

/* =========================================================
   27. ULTRA-WIDE MONITORS (> 1600px)
========================================================= */

@media (min-width: 1600px) {
    .container {
        max-width: 1400px !important;
    }

    .cj-section > .container,
    .cj-slider-wrap,
    .cj-mini-slider-wrap {
        max-width: 1500px !important;
    }
}