/* ========================================
   RESPONSIVE GLOBAL CSS
   Untuk semua halaman agar responsif
   ======================================== */

/* ========================================
   0. HIDE ALL SCROLLBARS GLOBALLY
   ======================================== */
*, *::before, *::after {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

*::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* ========================================
   1. LAYOUT DASAR - TIDAK ADA HORIZONTAL SCROLL
   ======================================== */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.container, .container-fluid {
    max-width: 100%;
}

section, .section {
    overflow-x: hidden;
    overflow-y: visible;
}

/* Disable internal scroll on all main sections */
section .container,
.foto-kegiatan-home .container,
.surat-edaran-home .container,
.statistik-ppid .container,
.agenda-section .container,
.faq-section .container,
#foto-kegiatan .container,
#surat-rektor .container,
#agenda .container,
#faq .container,
#statistik .container,
#contact .container {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
}

/* Carousel and slider containers - no scroll */
.surat-carousel-3d-wrapper,
.surat-carousel-3d,
.surat-carousel-track,
.foto-gallery-container,
.foto-gallery-wrapper {
    overflow: visible !important;
}

/* ========================================
   2. SCROLLBAR - HILANGKAN SEMUA
   ======================================== */
.news-list {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.news-list::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Table responsive boleh horizontal scroll */
.table-responsive {
    overflow-x: auto;
}


.grid-auto-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); }
@media (max-width: 1199px) { .grid-auto-4 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) { .grid-auto-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .grid-auto-4 { grid-template-columns: 1fr; } }
@media (min-width: 1920px) { .grid-auto-4 { grid-template-columns: repeat(5, 1fr); } }

.grid-auto-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 2rem); }
@media (max-width: 991px) { .grid-auto-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .grid-auto-3 { grid-template-columns: 1fr; } }

.grid-auto-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 2rem); }
@media (max-width: 768px) { .grid-auto-2 { grid-template-columns: 1fr; } }

.grid-fluid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(1rem, 2vw, 2rem); }
@media (min-width: 1920px) { .grid-fluid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); } }

.profil-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 4vw, 4rem); }
@media (max-width: 991px) { .profil-grid { grid-template-columns: 1fr; } }

.regulasi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 2rem); }
@media (max-width: 1199px) { .regulasi-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px) { .regulasi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .regulasi-grid { grid-template-columns: 1fr; } }
@media (min-width: 1920px) { .regulasi-grid { grid-template-columns: repeat(5, 1fr); } }

.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
@media (max-width: 991px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; } }
@media (min-width: 1920px) { .footer-grid { gap: 4rem; } }

.py-responsive { padding-top: clamp(2rem, 5vw, 6rem); padding-bottom: clamp(2rem, 5vw, 6rem); }
.px-responsive { padding-left: clamp(1rem, 3vw, 3rem); padding-right: clamp(1rem, 3vw, 3rem); }
.mb-responsive { margin-bottom: clamp(1rem, 3vw, 3rem); }
.mt-responsive { margin-top: clamp(1rem, 3vw, 3rem); }
.content-text { max-width: 900px; margin: 0 auto; padding: 0 clamp(1rem, 3vw, 2rem); }
@media (min-width: 1920px) { .content-text { max-width: 1100px; } }

.btn-group { display: flex; gap: clamp(0.5rem, 1vw, 1rem); flex-wrap: wrap; }
@media (max-width: 576px) { .btn-group { flex-direction: column; } .btn-group .btn { width: 100%; } }

.video-container { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(0.5rem, 1vw, 1rem); }
.video-container iframe, .video-container video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-stacked thead { display: none; }
.table-stacked tr { display: block; margin-bottom: 1rem; border: 1px solid #ddd; }
.table-stacked td { display: block; text-align: right; padding: 0.75rem; border-bottom: 1px solid #eee; }
.table-stacked td::before { content: attr(data-label); float: left; font-weight: bold; }

/* ========================================
   MOBILE RESPONSIF GLOBAL
   Pastikan tidak ada gambar melebar/terpotong
   ======================================== */

/* Semua gambar responsif di mobile */
img {
    max-width: 100%;
    height: auto;
}

/* Container tidak overflow - KECUALI di navbar */
.container:not(.navbar-custom .container), 
.container-fluid:not(.navbar-custom .container-fluid) {
    overflow-x: hidden;
}

/* Navbar container harus visible untuk dropdown */
.navbar-custom .container,
.navbar-custom .container-fluid,
#navbar .container,
#navbar .container-fluid {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Body dan HTML tidak overflow */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Gambar dalam konten tidak melebar */
@media (max-width: 768px) {
    .prose img,
    .content img,
    article img,
    .card-body img,
    .section img:not(.logo):not(.icon) {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* Hero image dan banner responsif */
    .hero-image,
    .banner-image,
    .img-banner,
    [class*="hero"] img,
    [class*="banner"] img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }
    
    /* Card responsif */
    .card {
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Row tidak overflow */
    .row {
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Text tidak terlalu kecil */
    body {
        font-size: 16px;
    }
    
    /* Heading responsif */
    h1, .h1 { font-size: clamp(1.5rem, 5vw, 2.5rem); }
    h2, .h2 { font-size: clamp(1.25rem, 4vw, 2rem); }
    h3, .h3 { font-size: clamp(1.1rem, 3vw, 1.5rem); }
    
    /* Button full width di mobile */
    .btn-mobile-full {
        width: 100%;
        display: block;
    }
    
    /* Table responsif */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        max-width: 100%;
    }
    
    /* Sidebar di mobile */
    .sidebar, .col-lg-3, .col-lg-4 {
        margin-top: 2rem;
    }
    
    /* Padding konsisten */
    .section, section {
        padding: 2rem 0;
    }
    
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ========================================
   GAMBAR BANNER/HERO - TIDAK TERPOTONG
   ======================================== */
.img-responsive-banner {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
}

@media (max-width: 768px) {
    .img-responsive-banner {
        max-height: 250px;
    }
}

/* ========================================
   CAROUSEL BANNER - RESPONSIF SEMUA LAYAR
   GAMBAR TIDAK TERPOTONG
   ======================================== */
.carousel-image,
#ppidCarousel img,
.carousel-item img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: contain;
    object-position: center;
    background-color: #f8f9fa;
}

/* Desktop besar - banner full width, tidak terpotong */
@media (min-width: 1400px) {
    .carousel-image,
    #ppidCarousel img,
    .carousel-item img {
        max-height: 600px;
    }
}

/* Desktop standar */
@media (min-width: 992px) and (max-width: 1399px) {
    .carousel-image,
    #ppidCarousel img,
    .carousel-item img {
        max-height: 500px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .carousel-image,
    #ppidCarousel img,
    .carousel-item img {
        max-height: 400px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .carousel-image,
    #ppidCarousel img,
    .carousel-item img {
        max-height: 300px;
    }
}

/* ========================================
   NEWS/BERITA CARD IMAGES - TIDAK TERPOTONG
   ======================================== */
.news-card-image,
.article-card img,
.berita-image,
.news-image,
.card-news img,
.featured-news-image {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    object-position: center;
    border-radius: 8px;
    background-color: #f8f9fa;
}

/* Untuk news card dengan ukuran tetap - TIDAK TERPOTONG */
.news-card-fixed-height {
    width: 100%;
    max-height: 250px;
    height: auto;
    object-fit: contain;
    object-position: center;
    background-color: #f8f9fa;
}

@media (max-width: 991px) {
    .news-card-fixed-height {
        max-height: 200px;
    }
}

@media (max-width: 767px) {
    .news-card-fixed-height {
        max-height: 180px;
    }
    
    .news-card-image,
    .article-card img,
    .berita-image,
    .news-image {
        max-height: 250px;
    }
}

/* Featured/highlight news gambar lebih besar - TIDAK TERPOTONG */
.featured-news-image,
.news-highlight img {
    max-height: 400px;
    object-fit: contain;
    background-color: #f8f9fa;
}

@media (max-width: 767px) {
    .featured-news-image,
    .news-highlight img {
        max-height: 280px;
    }
}

/* ========================================
   GENERAL CARD IMAGES - TIDAK TERPOTONG
   ======================================== */
.card-img-top,
.card .card-image,
.card img:first-child {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* Ensure card images have consistent aspect ratio */
.card-img-aspect {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.card-img-square {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.card-img-portrait {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* ========================================
   GALERI GAMBAR RESPONSIF (3+ gambar)
   ======================================== */
.image-gallery-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: 1rem;
}

@media (max-width: 576px) {
    .image-gallery-responsive {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .image-gallery-responsive img {
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: 8px;
    }
}

/* ========================================
   SIDE-BY-SIDE (2 GAMBAR) RESPONSIF
   ======================================== */
.image-side-by-side {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.image-side-by-side img {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 200px;
    max-width: calc(50% - 0.5rem);
    height: auto;
    object-fit: cover;
    border-radius: 8px;
}

@media (max-width: 576px) {
    .image-side-by-side {
        flex-direction: column;
    }
    
    .image-side-by-side img {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: 100%;
    }
}