/* =========================
   RESPONSIVE
   ========================= */

/* =========================
   TABLET / LAPTOP KECIL
   ========================= */

@media (max-width: 1100px) {

    .nav-inner {
        min-height: 64px;
    }

    .nav-toggle {
        display: flex;
        position: relative;
        z-index: 102;
    }

    .nav-links {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;

        z-index: 101;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        background: var(--krem);
        border-bottom: 1px solid var(--garis);

        box-shadow: 0 10px 25px rgba(23, 59, 47, 0.08);
    }

    .nav-links.show {
        display: flex;
    }

    .nav-links a {
        display: block;

        padding: 14px 24px;

        border-bottom: 1px solid var(--garis);
    }

    .nav-links a:last-child {
        border-bottom: none;
    }

    .nav-links a::after {
        display: none;
    }

    .hero {
        min-height: 580px;
    }

    .hero-inner {
        min-height: 580px;

        padding-top: 60px;
        padding-bottom: 60px;
    }

    .hero h1 {
        font-size: clamp(44px, 7vw, 68px);
    }

    .about-grid,
    .kontak-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .visimisi {
        border-left: none;
        border-top: 1px solid var(--garis);

        padding-left: 0;
        padding-top: 30px;
    }

    .petak-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .potensi-grid,
    .wisata-grid,
    .layanan-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .galeri-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .berita-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .struktur-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .statistik-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .statistik-item:nth-child(2) {
        border-right: none;
    }

    .desa-detail {
        grid-template-columns: 1fr;
    }
}


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

@media (max-width: 700px) {

    section {
        padding: 64px 0;
    }

    .wrap {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* NAVBAR */

    .nav-inner {
        min-height: 60px;
        padding: 0 18px;
    }

    .nav-links {
        top: 60px;
    }

    .brand {
        font-size: 16px;
    }

    .brand-logo {
        width: 30px;
        height: 30px;

        flex: 0 0 30px;
    }

    /* HERO */

    .hero {
        min-height: 680px;
    }

    .hero-inner {
        min-height: 680px;

        padding-top: 50px;
        padding-bottom: 45px;
    }

    .hero h1 {
        font-size: 42px;
        line-height: 1;
    }

    .hero p.lede {
        font-size: 15px;
        line-height: 1.65;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);

        gap: 0;

        margin-top: 38px;
    }

    .hero-stats div {
        min-width: 0;

        padding: 18px 14px;
        margin: 0;

        border-right: 1px solid rgba(247, 244, 236, 0.15);
        border-bottom: 1px solid rgba(247, 244, 236, 0.15);
    }

    .hero-stats div:nth-child(2n) {
        border-right: none;
    }

    .hero-stats div:nth-last-child(-n + 2) {
        border-bottom: none;
    }

    .hero-stats .num {
        font-size: 24px;
    }

    /* SECTION */

    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .section-head h2 {
        font-size: 34px;
    }

    /* WILAYAH */

    .petak-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .petak {
        min-height: 150px;
    }

    .petak .nama {
        font-size: 17px;
    }

    /* CONTENT GRID */

    .potensi-grid,
    .wisata-grid,
    .layanan-grid,
    .berita-grid {
        grid-template-columns: 1fr;
    }

    .galeri-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .struktur-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* STATISTIK */

    .statistik-grid {
        grid-template-columns: 1fr;
    }

    .statistik-item {
        border-right: none;
        border-bottom: 1px solid rgba(247, 244, 236, 0.12);
    }

    .statistik-item:last-child {
        border-bottom: none;
    }

    /* DETAIL WILAYAH */

    .desa-detail {
        grid-template-columns: 1fr;
        padding: 18px;
    }

    .desa-detail img {
        min-height: 220px;
    }

    .desa-detail .d-stats {
        grid-template-columns: 1fr;
    }

    .desa-detail .d-item {
        border-bottom: 1px solid var(--garis);
    }

    .desa-detail .d-item:last-child {
        border-bottom: none;
    }

    /* PENGUMUMAN */

    .p-row {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .p-row .tag {
        justify-self: flex-start;
    }

    /* KONTAK */

    .kontak-form {
        padding: 22px;
    }

    /* STRUKTUR */

    .t-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    /* LIGHTBOX */

    .lightbox {
        padding: 25px 12px;
    }

    .lightbox img {
        max-width: 96vw;
        max-height: 75vh;
    }

    .lightbox .lb-prev {
        left: 8px;
    }

    .lightbox .lb-next {
        right: 8px;
    }

    /* BERITA MODAL */

    .bm-body {
        padding: 24px;
    }

    .berita-modal {
        padding: 25px 12px;
    }
}