/* Explain: Styles for page layout, including hero background, process lines, and slideshows. */
/* Latar gradasi hero halaman Transparansi Desa.
   Perpaduan warna dibuat bertahap (multi-stop) agar titik peralihan
   antara warna biru desa dan putih terlihat halus, bukan bergaris kasar. */
.transparansi-hero-bg {
    background-image: linear-gradient(
        to bottom,
        var(--primary-color) 0%,
        var(--primary-color) 30%,
        color-mix(in srgb, var(--primary-color) 62%, var(--cream-color)) 54%,
        color-mix(in srgb, var(--primary-color) 28%, var(--cream-color)) 78%,
        var(--cream-color) 100%
    );
}

@media (min-width: 1024px) {
    .transparansi-hero-bg {
        background-image: linear-gradient(
            to right,
            var(--primary-color) 0%,
            var(--primary-color) 34%,
            color-mix(in srgb, var(--primary-color) 62%, var(--cream-color)) 58%,
            color-mix(in srgb, var(--primary-color) 28%, var(--cream-color)) 80%,
            var(--cream-color) 100%
        );
    }
}

.process-line {
    position: relative;
}

@media (min-width: 1024px) {
    .process-line::before {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        top: 3.5rem;
        height: 1px;
        background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary-color) 60%, transparent), transparent);
    }

    .process-line > article {
        position: relative;
        z-index: 1;
    }
}

@media (max-width: 640px) {
    .service-card,
    .news-card,
    .timeline-card {
        min-height: auto;
    }
}

/* Kemunculan kategori pengaduan tambahan dengan transisi lembut bertahap. */
.pengaduan-extra {
    opacity: 0;
    translate: 0 -0.75rem;
    transition: opacity 380ms ease, translate 380ms ease, transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.pengaduan-extra.is-shown {
    opacity: 1;
    translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .pengaduan-extra {
        transition: none;
    }
}

/* Kemunculan kartu layanan administrasi tambahan dengan transisi lembut bertahap. */
.layanan-extra {
    opacity: 0;
    translate: 0 -0.75rem;
    transition: opacity 380ms ease, translate 380ms ease, transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.layanan-extra.is-shown {
    opacity: 1;
    translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
    .layanan-extra {
        transition: none;
    }
}

/* Slideshow agenda kegiatan pada halaman agenda publik.
   Kartu agenda tampil satu per satu dengan penanda nomor slide, dan dapat
   ditampilkan sekaligus dalam bentuk kisi lewat tombol lihat semua. */
.agenda-track {
    display: flex;
    flex-direction: column;
}

.agenda-track.is-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.agenda-track.is-slideshow > .agenda-slide {
    display: none;
}

.agenda-track.is-slideshow > .agenda-slide.is-active {
    display: flex;
    min-height: 20rem;
}

.agenda-slide.is-filtered {
    display: none;
}

/* Efek geser saat kartu agenda berganti: maju masuk dari kanan ke kiri,
   mundur masuk dari kiri ke kanan. */
.agenda-track.is-slideshow > .agenda-slide.is-active.is-slide-next {
    animation: agendaSlideInRight 420ms ease both;
}

.agenda-track.is-slideshow > .agenda-slide.is-active.is-slide-prev {
    animation: agendaSlideInLeft 420ms ease both;
}

@keyframes agendaSlideInRight {
    from {
        opacity: 0;
        transform: translateX(2.75rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes agendaSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-2.75rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (min-width: 768px) {
    .agenda-track.is-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .agenda-track.is-slideshow > .agenda-slide.is-active {
        min-height: 22rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .agenda-track.is-slideshow > .agenda-slide.is-active.is-slide-next,
    .agenda-track.is-slideshow > .agenda-slide.is-active.is-slide-prev {
        animation: none;
    }
}

/* Slideshow dokumen desa pada halaman transparansi publik.
   Dokumen ditampilkan satu per satu dengan efek geser yang sama seperti
   slideshow agenda, serta dapat ditampilkan sekaligus dalam bentuk kisi. */
.dokumen-track {
    display: flex;
    flex-direction: column;
}

.dokumen-track.is-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.dokumen-track.is-slideshow > .dokumen-slide {
    display: none;
}

.dokumen-track.is-slideshow > .dokumen-slide.is-active {
    display: flex;
    min-height: 20rem;
}

.dokumen-slide.is-filtered {
    display: none;
}

.dokumen-track.is-slideshow > .dokumen-slide.is-active.is-slide-next {
    animation: dokumenSlideInRight 420ms ease both;
}

.dokumen-track.is-slideshow > .dokumen-slide.is-active.is-slide-prev {
    animation: dokumenSlideInLeft 420ms ease both;
}

@keyframes dokumenSlideInRight {
    from {
        opacity: 0;
        transform: translateX(2.75rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes dokumenSlideInLeft {
    from {
        opacity: 0;
        transform: translateX(-2.75rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (min-width: 768px) {
    .dokumen-track.is-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dokumen-track.is-slideshow > .dokumen-slide.is-active {
        min-height: 22rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dokumen-track.is-slideshow > .dokumen-slide.is-active.is-slide-next,
    .dokumen-track.is-slideshow > .dokumen-slide.is-active.is-slide-prev {
        animation: none;
    }
}

/* Keseragaman lebar area konten halaman publik.
   Semua halaman publik memakai lebar konten yang sama dengan beranda
   (max-w-7xl) agar tata letak terasa konsisten antar halaman.
   Aturan ini hanya mengenai pembungkus konten utama setiap bagian, yaitu
   elemen berkelas .mx-auto yang menjadi anak langsung dari <section>,
   sehingga blok teks judul yang lebih sempit tetap rapi dan tidak melebar. */
main > .mx-auto,
main section > .mx-auto {
    max-width: 80rem;
}

/* Halaman masuk dan pengaturan awal panel petugas tetap ringkas di tengah.
   Kartu masuk dan kartu pembuatan admin utama tidak ikut melebar seperti
   area konten halaman publik, sehingga formulir tetap nyaman dibaca. */
#adminLogin > .mx-auto,
#adminSetup > .mx-auto {
    max-width: 28rem;
}