/* ============================================================
   HALAMAN PROFIL DESA -- STYLESHEET KHUSUS
   ============================================================
   File TERPISAH dari public/css/public.css (dimuat HANYA di
   resources/views/public/profil.blade.php lewat @push('styles'),
   lihat layouts/public.blade.php @stack('styles')).

   Semua style di sini ter-scope di dalam ".pd-page" supaya TIDAK
   menimpa variabel :root global -- Navbar, Footer, Beranda, dan
   halaman publik lain TIDAK terpengaruh sama sekali oleh file ini.

   Palet di bawah ini adalah "Color System Resmi" khusus untuk
   halaman Profil Desa.
*/
.pd-page {
    --pd-primary: #075E3B;
    --pd-dark: #06452D;
    --pd-secondary: #0F7A4D;
    --pd-light: #E8F5EE;
    --pd-accent: #84CC16;
    --pd-gold: #D4A72C;
    --pd-bg: #F7FAF8;
    --pd-text: #18332A;
    --pd-muted: #66756D;
    --pd-border: #DDE8E1;

    background-color: var(--pd-bg);
    color: var(--pd-text);
}

.pd-page .pd-label {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pd-secondary);
}

.pd-page .pd-label::after {
    content: "";
    display: inline-block;
    width: 32px;
    height: 2px;
    background: var(--pd-accent);
    border-radius: 2px;
}

.pd-page .pd-section-title {
    color: var(--pd-dark);
    font-weight: 800;
}

.pd-page .pd-text-muted {
    color: var(--pd-muted);
}

/* ---------- HERO ---------- */
.pd-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    min-height: 480px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 4.5rem;
    background: linear-gradient(135deg, var(--pd-dark), var(--pd-primary) 60%, var(--pd-secondary));
}

.pd-hero-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* PERBAIKAN: foto latar sebelumnya diredupkan berat (opacity .35)
       -- sekarang ditampilkan jelas seperti referensi, kontras teks
       tetap aman lewat gradient overlay di bawah (bottom-heavy),
       bukan dengan meredupkan foto itu sendiri. */
}

.pd-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(6,69,45,.05) 0%, rgba(6,69,45,.15) 55%, rgba(6,69,45,.75) 100%);
}

.pd-hero-content {
    position: relative;
    z-index: 2;
}

.pd-hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.5);
}

.pd-hero-script {
    font-family: 'Caveat', cursive;
    font-size: 2rem;
    color: var(--pd-accent);
    line-height: 1;
}

.pd-hero-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 800;
    line-height: 1.1;
}

.pd-hero-subtitle {
    font-size: 1.1rem;
    max-width: 520px;
    opacity: .92;
}

.pd-hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    width: 100%;
    height: 60px;
    z-index: 2;
}

.pd-hero-wave path {
    fill: var(--pd-bg);
}

.pd-hero .btn-pd-light {
    background-color: #fff;
    color: var(--pd-dark);
    font-weight: 600;
    border: none;
}

.pd-hero .btn-pd-light:hover {
    background-color: var(--pd-light);
    color: var(--pd-dark);
}

@media (max-width: 767.98px) {
    .pd-hero {
        min-height: 400px;
        padding-bottom: 3.5rem;
    }
}

/* ---------- CARD & PHOTO ---------- */
.pd-card {
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: 1rem;
    box-shadow: 0 10px 30px -18px rgba(6,69,45,.25);
}

.pd-photo-frame {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid var(--pd-border);
    box-shadow: 0 18px 40px -20px rgba(6,69,45,.35);
}

.pd-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-photo-placeholder {
    background: linear-gradient(135deg, var(--pd-light), #fff);
    color: var(--pd-secondary);
    min-height: 280px;
}

.pd-btn-outline {
    border: 1px solid var(--pd-primary);
    color: var(--pd-primary);
    font-weight: 600;
    border-radius: .6rem;
    background: transparent;
}

.pd-btn-outline:hover {
    background: var(--pd-primary);
    color: #fff;
}

.pd-btn-solid {
    background: var(--pd-primary);
    border: 1px solid var(--pd-primary);
    color: #fff;
    font-weight: 600;
    border-radius: .6rem;
}

.pd-btn-solid:hover {
    background: var(--pd-dark);
    border-color: var(--pd-dark);
    color: #fff;
}

/* ---------- VISI & MISI ---------- */
.pd-vm-card {
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: 1rem;
    padding: 2rem;
}

.pd-vm-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--pd-light);
    color: var(--pd-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.pd-vm-card blockquote {
    font-weight: 600;
    color: var(--pd-dark);
    font-size: 1.05rem;
}

.pd-vm-card ul,
.pd-vm-card ol {
    padding-left: 0;
    list-style: none;
}

.pd-vm-card ul li,
.pd-vm-card ol li {
    position: relative;
    padding-left: 1.4rem;
}

.pd-vm-card ul li::before,
.pd-vm-card ol li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--pd-secondary);
}

/* ---------- STATISTIK ---------- */
.pd-stats {
    background: var(--pd-dark);
    border-radius: 1.25rem;
    color: #fff;
}

.pd-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    color: var(--pd-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin: 0 auto .6rem;
}

.pd-stat-value {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.1;
}

.pd-stat-label {
    font-size: .8rem;
    opacity: .85;
}

/* ---------- SEJARAH (editorial) ---------- */
.pd-sejarah {
    border-left: 3px solid var(--pd-accent);
    padding-left: 1.5rem;
}

.pd-sejarah p {
    color: var(--pd-text);
    line-height: 1.85;
}

/* ---------- INFO WILAYAH ---------- */
.pd-info-item {
    background: #fff;
    border: 1px solid var(--pd-border);
    border-radius: .85rem;
    padding: 1rem 1.1rem;
    height: 100%;
}

.pd-info-item .pd-info-label {
    font-size: .78rem;
    color: var(--pd-muted);
}

.pd-info-item .pd-info-value {
    font-weight: 700;
    color: var(--pd-dark);
}

/* ---------- CTA PENUTUP ---------- */
.pd-cta {
    background: var(--pd-light);
    border: 1px solid var(--pd-border);
    border-radius: 1.25rem;
}