/* ==========================================================================
   6.1 PROJECTS PAGE (Template: page-projects.php)
   ========================================================================== */

/* --- A. CONTAINER UTAMA --- */
.cont-projects {
    width: 100%;
    min-height: calc(100vh - 67px); 
    background-color: #F2F0EB;
    color: #1A1A1A;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 25px 40px 50px; 
    box-sizing: border-box;
}

/* --- B. JUDUL HALAMAN [NILAI TERBAIK: TEGAS & ELEGAN] --- */
.font-gede-projects {
    font-family: 'Hubballi', sans-serif !important;
    font-size: 42px !important;
    font-weight: 600 !important;
    color: #1A1A1A !important;
    text-transform: uppercase;
    text-align: center !important; /* Paksa Center */
    
    /* Konsistensi Layout */
    display: block !important;
    width: 100% !important;
    margin: 0 auto 32px auto !important; /* Center via margin auto */
    
    line-height: 1.1;
    letter-spacing: 1px;
    -webkit-font-smoothing: antialiased;
}

/* --- C. FILTER / SORTING PROJECT [EDIT NILAI DI SINI] --- */
.inner-cont-projects {
    display: flex;
    justify-content: center;
    gap: 0; 
    padding: 0 0 50px;
    box-sizing: border-box;
    margin-bottom: 40px; /* Memberi ruang sebelum grid dimulai */
}

.inner-cont-projects .filter-link {
    display: inline-block !important;
    font-family: 'Hubballi', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: rgb(102, 102, 102) !important;
    padding: 0 10px 4px 10px !important; /* Tambah padding bawah 4px untuk ruang garis */
    height: auto !important; /* Biarkan auto agar padding bawah terbaca */
    line-height: 1 !important;
    cursor: pointer;
    text-decoration: none;
    text-transform: lowercase;
    -webkit-font-smoothing: antialiased;
    
    /* Efek Garis Bawah */
    transition: all 0.4s ease;
    border-bottom: 2px solid transparent; /* Garis awal tidak terlihat */
}

/* Penanda Menu Aktif (Sangat Tipis & Samar) */
.inner-cont-projects .filter-link.active {
    color: #1A1A1A !important;
    /* Gunakan 1px dan warna dengan opacity rendah (0.3) */
    border-bottom: 1px solid rgba(26, 26, 26, 0.3) !important;
    font-weight: 700 !important;
}

/* Hover juga disesuaikan agar tetap halus */
.inner-cont-projects .filter-link:hover {
    color: #1A1A1A !important;
    border-bottom: 1px solid rgba(166, 166, 166, 0.5) !important;
}

/* --- D. GRID LAYOUT (ALL & GROUPING) --- */
.playground-cont-projects {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

/* Menyatukan All Grid dan Group Grid agar konsisten 5 jajar */
.project-grid, .group-grid {
    display: grid !important;
    /* 1fr memastikan 5 kotak selalu masuk (Zoom Out otomatis mengikuti layar) */
    grid-template-columns: repeat(5, 1fr) !important; 
    gap: 20px !important;
    width: 100% !important;
    max-width: 1400px; /* Batas maksimal agar tidak melar raksasa di monitor besar */
    margin: 0 auto 80px !important;
}

/* --- E. PROJECT BOX & HOVER --- */
.box-projects {
    width: 100% !important; /* Mengikuti lebar kolom grid (fleksibel) */
    aspect-ratio: 1 / 1 !important; /* Kunci bentuk kotak sempurna */
    height: auto !important; /* Cabut nilai mati agar tidak zoom/crop */
    position: relative;
    overflow: hidden;
    
    /* TAMBAHKAN NILAI INI: 12px adalah angka paling manis */
    border-radius: 0px; 
    transition: border-radius 0.4s ease-in-out;
} 

.box-projects:hover {
    border-radius: 12px; 
    /* Efek enlarge-on-hover dari desain React asli (Projects.scss baris 12-19):
       box membesar 1.5x dan naik z-index, menutupi box tetangga. Hanya aktif
       di layar >= 450px, mengikuti breakpoint asli. */
}
@media only screen and (min-width: 450px) {
    .box-projects:hover {
        transform: scale(1.5);
        transition: transform 0.5s, border-radius 0.4s ease-in-out;
        position: relative;
        z-index: 7 !important;
    }
}

/* Gradient overlay penuh (dari React asli Projects.scss .box-gradient-layer):
   menggelapkan foto secara halus, makin gelap ke bawah, HILANG saat hover
   supaya foto terlihat clear. Elemen ::before, tidak menyentuh struktur HTML. */
.box-projects::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.29) 67%, rgba(0,0,0,0.72) 100%);
    z-index: 4;
    pointer-events: none;
    transition: background 0.4s ease-in-out;
}
.box-projects:hover::before {
    background: none;
}

.box-projects a {
    display: block;
    width: 100%;
    height: 100%;
}

.box-projects .img-wrapper {
    width: 100%;
    height: 100%;
}

.box-projects img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    
    /* Kondisi Awal Gambar */
    border-radius: 0;
    transform: scale(1); /* Skala Normal */
    
    /* Transisi Gabungan: Sudut + Zoom */
    transition: border-radius 0.4s ease-in-out, transform 0.6s ease-out;
}

/* Efek Saat Hover: Bulat (zoom gambar dihapus -- diganti box-level scale
   di atas, sesuai desain React asli, supaya tidak double-scale) */
.box-projects:hover img {
    border-radius: 12px;
}

/* --- F. NAMA PROJECT DI FEATURED IMAGE [EDIT NILAI DI SINI] --- */
.project-excerpt-box {
    position: absolute;
    bottom: 0; 
    left: 0;
    width: 100%;
    padding: 12px 10px 8px; 
    background: rgba(0, 0, 0, 0.2) !important; /* Sangat tipis di awal */
    transition: background 0.4s ease-in-out;
    
    /* DITIPISKAN: Dari 0.65 menjadi 0.35 agar sangat transparan */
    /*background: rgba(0, 0, 0, 0.35);*/ 
    
    /* RAHASIA TERBACA: Memberi efek kaca buram di belakang teks */
    /*backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);*/

    box-sizing: border-box;
    z-index: 5;
    pointer-events: none;

    /* Rounding atas tetap dipertahankan */
    border-top-left-radius: 12px;
    /*border-top-right-radius: 12px;*/
}

.box-projects:hover .project-excerpt-box {
    background: rgba(0, 0, 0, 0.5) !important; /* Menggelap saat hover */
}

.project-excerpt-box .project-title {
    font-family: 'Hubballi', sans-serif !important;
    font-size: 13px !important;         /* Dikecilkan 1px agar lebih manis */
    font-weight: 400 !important;
    /* GANTI: Dari #ffffff ke Off-white/Ivory agar tidak terlalu tajam */
    color: #F2F0EB !important;          
    line-height: 1.2 !important;        /* Beri sedikit ruang antar baris */
    text-align: center;
    text-transform: none !important;
    letter-spacing: 1px;                /* Tambahkan spasi agar lebih elegan */
    margin: 0 !important;
    
    /* Opsional: Tambahkan sedikit shadow halus agar terbaca di atas gambar terang */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2); 
}

/* --- G. GROUPING TITLE (Status, Year, Location, dll) --- */
.group-title {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 699px !important;
    
    /* Jarak atas dikurangi sedikit agar tidak terlalu jauh melayang */
    margin-top: 60px !important; 
    margin-bottom: 24px !important;
    margin-left: auto !important; 
    margin-right: auto !important;

    /* Tipografi: Dikecilkan agar judul utama tetap dominan */
    font-family: 'Hubballi', sans-serif !important;
    font-size: 16px !important;      /* Nilai manis untuk sub-judul */
    font-weight: 500 !important;      /* Medium: tegas tapi tidak seberat judul utama */
    letter-spacing: 2px !important;   /* Spasi lebar memberikan kesan mewah/arsitektur */
    text-transform: lowercase !important;
    text-align: center !important;
    color: #1A1A1A !important;
    
    /* Tambahan aksen: Garis tipis di bawah agar lebih rapi sebagai pemisah */
    border-bottom: 1px solid #D1CDC7;
    padding-bottom: 12px;
}

/* ==========================================================================
   6.1.1 SINGLE PROJECT – single-project.php
   ========================================================================== */

/* --- A. Layout & Scroll Engine --- */

/* Aturan ini HANYA aktif di halaman Detail Proyek */
body.single-project, 
body.single-project html {
    height: 100%;
    margin: 0;
    overflow: hidden; 
}

body.single-project .main-content {
    height: 100vh;
    overflow: hidden; 
    background-color: #F2F0EB;
    display: block;
}

body.single-project .project-single {
    max-width: 1400px;
    margin: 0 auto;
    height: 100vh;
    /* PADDING ATAS DIRAPATKAN dari 40px menjadi 15px */
    padding: 25px 40px 40px 40px; 
    box-sizing: border-box;
}

/* --- B. Grid Layout --- */
.project-layout {
    display: grid !important;
    grid-template-columns: 350px 1fr !important;
    gap: 80px;
    /* TINGGI DISESUAIKAN (15px top + 40px bottom = 55px) */
    height: calc(100vh - 55px); 
    align-items: start;
}

/* Memastikan elemen pertama di kolom kiri dan kanan menempel ke atas */
.single-project .project-title,
.single-project .project-media figure:first-child,
.single-project .project-media img:first-child {
    margin-top: 0 !important;
}

/* --- C. Typography & Content (SISI KIRI - COMPACT & ELEGAN) --- */
.project-info {
    /* Tinggi tetap terkunci pada layar agar tombol back tidak hilang */
    height: calc(100vh - 80px); 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 10;
    position: relative;
}

.project-title {
    font-family: 'Oswald', sans-serif;
    font-size: 18px; /* Padat: turun dari 22px */
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: capitalize;
    color: #1A1A1A;
    margin: 0 0 15px 0; /* Jarak dikurangi */
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding-bottom: 10px;
    flex-shrink: 0;
}

.project-description {
    flex-grow: 1; 
    overflow: hidden; /* Teks tetap diam di tempat */
    margin-bottom: 15px;
}

.project-description p {
    font-family: 'Hubballi', sans-serif;
    font-size: 14px; /* Padat: turun dari 16px agar lebih banyak teks muat */
    line-height: 1.5; /* Lebih rapat: turun dari 1.7 */
    font-weight: 400;
    color: #4A4A4A;
    margin-bottom: 12px; /* Jarak antar paragraf dirapatkan */
    text-align: justify;
}

.project-description p:last-child {
    margin-bottom: 15px !important; /* Jarak ke Metadata tetap dijaga sedikit */
}

.project-meta {
    font-family: 'Fira Sans', sans-serif;
    font-size: 10px; /* Lebih kecil & manis */
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888;
    margin-top: 5px;
    flex-shrink: 0;
}

.project-meta p {
    margin: 0 0 3px 0; /* Jarak antar baris metadata sangat rapat */
    line-height: 1.2; /* Tambahkan ini agar benar-benar rapat & anti-crop */
}

/* Tombol Back - Versi Compact */
.project-back {
    margin-top: auto; 
    display: flex; 
    align-items: center;
    gap: 10px; 
    width: fit-content;
    padding: 15px 0 5px 0; /* Padding dirapatkan */
    flex-shrink: 0;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.project-back img {
    width: 20px; /* Lebih kecil agar seimbang dengan font 14px */
    height: auto;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.project-back::after {
    content: "BACK";
    font-family: 'Fira Sans', sans-serif;
    font-size: 9px; /* Ukuran teks sangat minimalis */
    font-weight: 400;
    letter-spacing: 0.3em;
    color: #888;
    transition: all 0.4s ease;
}

/* --- Efek Hover --- */
.project-back:hover img {
    transform: translateX(-5px);
}

.project-back:hover::after {
    color: #1A1A1A;
    letter-spacing: 0.4em;
}

/* --- D. Media Display (SISI KANAN - AKTIF SCROLL) --- */
.project-media {
    height: 100%;
    overflow-y: auto; /* Area media satu-satunya yang boleh scroll */
    padding-right: 20px; /* Ruang agar scrollbar tidak menempel ke gambar */
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Sembunyikan scrollbar agar estetika tetap clean (Opsional) */
.project-media::-webkit-scrollbar { width: 4px; }
.project-media::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.1); }

/* Pembersihan residu Gutenberg pada media */
.project-media img,
.project-media video,
.project-media figure {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 2px;
    box-shadow: 0 4px 30px rgba(0,0,0,0.03);
    /* Gunakan background transparan atau Ivory agar tidak ada 'flash' hitam saat load */
    background-color: #F2F0EB; 
}

/* Khusus Video: Mengunci aspek rasio agar tidak melompat saat autoplay mulai */
.project-media video {
    object-fit: cover;
    background-color: #F2F0EB;
    /* Mencegah video terlihat kaku sebelum diputar */
    outline: none;
    border: none;
}

/* Menghilangkan margin bawaan figure Gutenberg yang sering tersisa */
.project-media figure {
    max-width: 100% !important;
}

/* --- E. Smooth Entrance Animation --- */
@keyframes fadeInEntrance {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-media img,
.project-media video,
.project-media figure {
    /* ... kode sebelumnya tetap ada ... */
    
    /* Tambahkan ini */
    animation: fadeInEntrance 0.8s ease-out forwards;
    will-change: opacity, transform;
}

/* Memberikan jeda (stagger) agar gambar muncul bergantian, bukan berbarengan */
.project-media div:nth-child(2) { animation-delay: 0.2s; }
.project-media div:nth-child(3) { animation-delay: 0.4s; }
.project-media div:nth-child(4) { animation-delay: 0.6s; }