/* ==========================================================
   P26 HERO STABILITY FIX 1.0.0

   Tujuan:
   - tinggi slide Hero konsisten
   - tidak ada vertical layout shift saat carousel berpindah
   - judul/excerpt menyesuaikan ruang
   - foto tidak dicrop
   ========================================================== */


/* ----------------------------------------------------------
   Semua slide memakai box-sizing yang sama
   ---------------------------------------------------------- */

.p26-hero [data-p26-slide],
.p26-hero [data-p26-slide] * {
    box-sizing: border-box;
}


/* ----------------------------------------------------------
   AREA SLIDE TETAP

   Tinggi dibuat sama untuk SEMUA slide desktop.
   Ini yang mencegah seluruh halaman naik/turun ketika
   artikel berikutnya memiliki judul/excerpt lebih panjang.
   ---------------------------------------------------------- */

.p26-hero [data-p26-slide] {
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;

    overflow: hidden !important;
}


/* ----------------------------------------------------------
   GAMBAR

   Jangan gunakan cover karena cover memotong foto.
   contain mempertahankan seluruh gambar di dalam kotak.
   ---------------------------------------------------------- */

.p26-hero [data-p26-slide] img {
    display: block !important;

    width: 100% !important;
    height: 270px !important;

    max-width: 100% !important;
    max-height: 270px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    object-fit: contain !important;
    object-position: center center !important;

    background:
        #f5faf9 !important;
}


/* ----------------------------------------------------------
   Bila gambar dibungkus figure / picture / media element,
   tinggi media juga dibuat konsisten.
   ---------------------------------------------------------- */

.p26-hero [data-p26-slide] figure,
.p26-hero [data-p26-slide] picture {
    display: flex !important;

    width: 100% !important;
    height: 270px !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;

    margin-top: 0 !important;
    margin-bottom: 18px !important;

    background:
        #f5faf9 !important;
}


/* ----------------------------------------------------------
   JUDUL

   Maksimal 3 baris.
   Tinggi disediakan sama walaupun judul hanya 1–2 baris.
   ---------------------------------------------------------- */

.p26-hero [data-p26-slide] h1,
.p26-hero [data-p26-slide] h2,
.p26-hero [data-p26-slide] h3,
.p26-hero [data-p26-slide] h4 {

    display: -webkit-box !important;

    min-height: 3.75em !important;
    max-height: 3.75em !important;

    margin-top: 0 !important;
    margin-bottom: 10px !important;

    overflow: hidden !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;

    line-clamp: 3;

    text-overflow: ellipsis !important;
}


/* ----------------------------------------------------------
   POTONGAN ARTIKEL / EXCERPT

   Maksimal 3 baris. Konten panjang tidak lagi memperbesar
   tinggi Hero.
   ---------------------------------------------------------- */

.p26-hero [data-p26-slide] p {

    display: -webkit-box !important;

    min-height: 4.8em !important;
    max-height: 4.8em !important;

    margin-top: 0 !important;
    margin-bottom: 12px !important;

    overflow: hidden !important;

    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;

    line-clamp: 3;

    text-overflow: ellipsis !important;
}


/* ----------------------------------------------------------
   Link/judul tidak boleh mengubah tinggi karena wrapping
   di luar area yang telah dikunci.
   ---------------------------------------------------------- */

.p26-hero [data-p26-slide] a {
    max-width: 100%;
}


/* ----------------------------------------------------------
   Konten paling bawah tetap berada di dalam card.
   ---------------------------------------------------------- */

.p26-hero [data-p26-slide] > * {
    max-width: 100%;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .p26-hero [data-p26-slide] {
        height: 540px !important;
        min-height: 540px !important;
        max-height: 540px !important;
    }

    .p26-hero [data-p26-slide] img,
    .p26-hero [data-p26-slide] figure,
    .p26-hero [data-p26-slide] picture {
        height: 250px !important;
        max-height: 250px !important;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    /*
     * Mobile diberi ruang sedikit lebih tinggi karena
     * layout umumnya bertumpuk.
     */
    .p26-hero [data-p26-slide] {
        height: 570px !important;
        min-height: 570px !important;
        max-height: 570px !important;
    }

    .p26-hero [data-p26-slide] img,
    .p26-hero [data-p26-slide] figure,
    .p26-hero [data-p26-slide] picture {
        height: 230px !important;
        max-height: 230px !important;
    }

    .p26-hero [data-p26-slide] h1,
    .p26-hero [data-p26-slide] h2,
    .p26-hero [data-p26-slide] h3,
    .p26-hero [data-p26-slide] h4 {
        min-height: 3.9em !important;
        max-height: 3.9em !important;

        -webkit-line-clamp: 3 !important;
        line-clamp: 3;
    }

    .p26-hero [data-p26-slide] p {
        min-height: 4.65em !important;
        max-height: 4.65em !important;

        -webkit-line-clamp: 3 !important;
        line-clamp: 3;
    }
}


/* ==========================================================
   MOBILE KECIL
   ========================================================== */

@media (max-width: 480px) {

    .p26-hero [data-p26-slide] {
        height: 550px !important;
        min-height: 550px !important;
        max-height: 550px !important;
    }

    .p26-hero [data-p26-slide] img,
    .p26-hero [data-p26-slide] figure,
    .p26-hero [data-p26-slide] picture {
        height: 210px !important;
        max-height: 210px !important;
    }
}


/* ==========================================================
   END P26 HERO STABILITY FIX
   ========================================================== */