/* =========================================================
   KLUB GOLF BOGOR RAYA - HOMEPAGE RESPONSIVE (FINAL)
   Semua aturan mobile, tablet, dan desktop ada di sini.
   Bebas dari konflik margin & ukuran.
   ========================================================= */

/* Prevent any section from creating horizontal scrolling */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

img, svg, video {
    max-width: 100%;
}

/* =====================================================
   TABLET: 768px - 991.98px
   ===================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {

    #kepala { height: 75vh !important; min-height: 520px; }
    #kepala > div { height: 75vh !important; min-height: 520px; background-attachment: scroll !important; }
    
    #story { margin-top: 2rem !important; }
    #story h1, #np h1, #award h1 { font-size: 2rem !important; }
    #story p { font-size: 13px !important; line-height: 1.6; }

    /* Our Course */
    #course .course-home-left { width: 42%; min-height: 160px; }
    #course .course-home-right { width: 58%; min-height: 160px; padding: 25px 25px 25px 125px; }
    #course .course-home-title { font-size: 2.2rem; }
    #course .course-home-swan { width: 220px; height: 220px; left: 100%; }
    #course .course-home-description { font-size: 13px; line-height: 1.55; }

    /* Facilities */
    #fasilitas .card-item { min-height: 260px; }
    #fasilitas .card-content h3 { font-size: 1.35rem; }

    /* Event & Promotion */
    #np { margin-top: 3rem !important; }
    #np .row { margin-left: 0; margin-right: 0; }

    /* Awards */
    #award img { width: 100% !important; height: auto !important; }

    /* Partners */
    #partners .slider-container { max-width: 100%; overflow: hidden; }
    #partners .slider-track { max-width: 100%; }

    /* Footer */
    #kaki .row { width: 90% !important; }
}

/* =====================================================
   MOBILE: <= 767.98px
   ===================================================== */
@media (max-width: 767.98px) {

    /* General */
    body { width: 100%; overflow-x: hidden; }
    #story, #course, #fasilitas, #np, #award, #partners, #kaki {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* HERO */
    #kepala { width: 100% !important; height: 72vh !important; min-height: 480px; margin-top: 0.5rem !important; margin-bottom: 1rem !important; }
    #kepala > div { width: 100% !important; height: 72vh !important; min-height: 480px; background-attachment: scroll !important; background-position: center center !important; }
    #kepala > div > .col-10 { width: 88% !important; max-width: 430px; }
    #kepala h1 { font-size: 2.7rem !important; line-height: 1.1; }
    #kepala img { width: 100% !important; height: auto !important; }

    /* WELCOME / STORY */
    #story { width: 100% !important; margin-top: 2rem !important; margin-bottom: 2rem !important; }
    #story h1 { padding-left: 15px; padding-right: 15px; font-size: 1.75rem !important; line-height: 1.2; }
    #story .col-12 { width: 100% !important; }
    #story p { padding-left: 15px; padding-right: 15px; font-size: 12px !important; line-height: 1.65; text-align: center; }

    /* OUR COURSE */
    #course { padding-left: 8px !important; padding-right: 8px !important; }
    #course .course-home-row { display: flex; flex-direction: column; width: 100%; position: relative; }
    #course .course-home-left { width: 100%; min-height: 155px; padding: 22px 25px; border-radius: 20px 20px 0 0; justify-content: flex-start; position: relative; z-index: 3; overflow: visible; }
    #course .course-home-title { font-size: 2rem; line-height: 1.05; position: relative; z-index: 5; }
    #course .course-home-swan { position: absolute; width: 180px; height: 180px; right: -3px; left: auto; top: 50%; transform: translateY(-50%); object-fit: contain; z-index: 20; pointer-events: none; }
    #course .course-home-right { width: 100%; min-height: 180px; padding: 25px; border-radius: 0 0 20px 20px; position: relative; z-index: 1; }
    #course .course-home-content { width: 100%; max-width: 100%; }
    #course .course-home-description { font-size: 13px; line-height: 1.6; margin-bottom: 18px; color: #23756b; }
    #course .course-home-button { padding: 8px 20px; font-size: 14px; }

    /* FACILITIES */
    #fasilitas { width: 100% !important; margin-top: 1rem !important; }
    #fasilitas > div, #fasilitas .row { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
    #fasilitas [class*="col-"] { width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
    #fasilitas .card-item { width: 100% !important; min-height: 230px; }
    #fasilitas .card-bg { width: 100%; min-height: 230px; }
    #fasilitas .card-content { padding: 20px; }
    #fasilitas .card-content h3 { font-size: 1.3rem; line-height: 1.25; }
    #fasilitas .card-content .btn { font-size: 13px; }

    /* EVENT & PROMOTION */
    #np { width: 100% !important; margin-top: 2.5rem !important; margin-bottom: 2rem !important; }
    #np h1 { padding-left: 15px; padding-right: 15px; font-size: 1.7rem !important; line-height: 1.2; letter-spacing: 2px !important; }
    #np > div:nth-child(2) p { padding-left: 15px; padding-right: 15px; font-size: 10px !important; line-height: 1.5; letter-spacing: 1px !important; }
    #np .row { width: 100%; margin-left: 0; margin-right: 0; }
    #np .row > [class*="col-"] { padding-left: 4px; padding-right: 4px; }
    #np img { max-width: 100%; height: auto; }
    #np .pure-css-lightbox .lightbox-content { max-width: 94vw; max-height: 90vh; }

    /* AWARDS */
    #award { width: 100% !important; margin-top: 2rem !important; margin-bottom: 2rem !important; }
    #award h1 { padding-left: 15px; padding-right: 15px; font-size: 1.7rem !important; line-height: 1.2; }
    #award p { padding-left: 15px; padding-right: 15px; font-size: 11px !important; line-height: 1.5; }
    #award img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; }

    /* PARTNERS - FIX FINAL (Hapus margin lama, perbaiki logo) */
    #partners { width: 100% !important; margin-top: 0 !important; padding-bottom: 15px !important; }
    #partners > div:first-child { width: 100% !important; padding-left: 20px; padding-right: 20px; }
    #partners > div:first-child img { width: 220px !important; height: auto !important; }
    #partners .slider-container { width: 100%; max-width: 100%; overflow: hidden; margin-bottom: 0 !important; }
    #partners .slider-track { max-width: none; width: max-content; }
    
    /* UKURAN LOGO DI MOBILE: Kecil agar rapi */
    #partners .slider-track img { height: 35px !important; width: auto !important; max-width: 70px; margin-left: 6px !important; margin-right: 6px !important; }

    /* FOOTER */
    #kaki { width: 100% !important; padding: 20px 15px !important; }
    #kaki > .d-flex { width: 100% !important; }
    #kaki > .d-flex > .row { width: 100% !important; margin-left: 0; margin-right: 0; }
    #kaki [class*="col-"] { width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; margin-bottom: 25px; }
    #kaki p { font-size: 12px !important; line-height: 1.6; }
    #kaki h4 { font-size: 16px !important; }
    #kaki ul { margin-bottom: 0; }
    #kaki .list-inline-item { margin-left: 8px !important; margin-right: 8px !important; }
    #kaki svg { max-width: none; }
}

/* =====================================================
   EXTRA SMALL PHONES: <= 380px
   ===================================================== */
@media (max-width: 380px) {
    #kepala { min-height: 440px; height: 68vh !important; }
    #kepala > div { min-height: 440px; height: 68vh !important; }
    #kepala h1 { font-size: 2.3rem !important; }
    #story h1, #np h1, #award h1 { font-size: 1.5rem !important; }
    #course .course-home-left { min-height: 145px; padding-left: 20px; }
    #course .course-home-title { font-size: 1.8rem; }
    #course .course-home-swan { width: 155px; height: 155px; right: 0; }
    #course .course-home-right { padding: 20px; }
    #course .course-home-description { font-size: 12px; }
    #fasilitas .card-item, #fasilitas .card-bg { min-height: 210px; }
    #np .row > [class*="col-"] { padding-left: 3px; padding-right: 3px; }
    #partners > div:first-child img { width: 190px !important; }
    
    /* Logo di HP super kecil */
    #partners .slider-track img { height: 30px !important; max-width: 60px !important; margin-left: 4px !important; margin-right: 4px !important; }
}

/* =========================================================
   FIX: KECEPATAN SLIDE (Samakan dengan Desktop)
   ========================================================= */
#partners .slider-track {
    animation-duration: 20s !important;
}

/* =========================================================
   FINAL FIX: JARAK DESKTOP, GAP MOBILE, UKURAN LOGO
   ========================================================= */

/* 1. Desktop: Beri jarak yang cukup dari logo ke footer */
#partners {
    padding-bottom: 80px !important;
    margin-bottom: 0 !important;
}

/* 2. Mobile: Hilangkan GAP besar, perbesar logo, dan atur jarak footer */
@media (max-width: 767.98px) {
    /* Hapus semua ruang di atas slider (ini penyebab GAP ke subjudul) */
    #partners {
        padding-top: 0 !important;
        margin-top: 0 !important;
        padding-bottom: 40px !important; /* Jarak pas ke footer, tidak terlalu rapat */
    }

    /* Hapus ruang dari elemen kosong di atasnya (logo BCA statis) */
    #partners > div {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Rapatkan subjudul ke logo */
    .section-heading {
        margin-bottom: 15px !important;
    }

    /* Perbesar logo mobile (dari 35px menjadi 50px agar terlihat jelas) */
    #partners .slider-track img {
        height: 50px !important;
        max-width: 110px !important;
        margin: 0 8px !important;
    }
}

/* 3. Tablet: Sedikit perbesar dari mobile agar tetap proporsional */
@media (min-width: 768px) and (max-width: 991.98px) {
    #partners .slider-track img {
        height: 65px !important;
        max-width: 130px !important;
        margin: 0 12px !important;
    }
    
}