/* ============================================================
   HALAMAN AGENDA PUBLIK -- CSS KHUSUS HALAMAN
   ============================================================
   File ini HANYA dipakai oleh resources/views/public/agenda/index.blade.php
   (dimuat lewat @stack('styles'), bukan ditumpuk ke public.css --
   sesuai "Aturan Tetap Desain CSS Website Desa Buntu Pema v1.0").
   Semua warna memakai variabel Design System Global yang sudah
   didefinisikan di public/css/public.css (:root) -- tidak ada
   HEX baru di luar palet resmi, kecuali untuk beberapa varian
   warna badge kategori (tetap turunan/nuansa dari palet yang sama).
   Class-class di sini berprefix `agd-` supaya tidak bentrok dengan
   selector halaman lain maupun Navbar/Footer.
*/

/* ---------- HERO ---------- */
.agd-hero {
    position: relative;
    min-height: 460px;
    display: flex;
    align-items: flex-end;
    background-color: var(--color-dark, #06452D);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}

.agd-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    /* PERBAIKAN: overlay sebelumnya terlalu gelap (.80/.55/.92) sehingga
       foto asli nyaris tidak terlihat, berbeda dari referensi yang
       menampilkan foto pegunungan/desa dengan jelas. Overlay dibuat
       lebih tipis -- kontras teks tetap terjaga karena judul besar
       & bold, serta kartu statistik di bawah sudah punya latar semi-
       transparan sendiri. */
    background: linear-gradient(180deg,
        rgba(6, 69, 45, .45) 0%,
        rgba(6, 69, 45, .25) 45%,
        rgba(6, 69, 45, .6) 100%);
}

.agd-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 3rem;
    padding-bottom: 2.5rem;
}

.agd-badge-agenda {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background-color: var(--color-primary, #075E3B);
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
    padding: .4rem .9rem;
    border-radius: 999px;
}

.agd-hero h1 {
    font-weight: 800;
    letter-spacing: -.02em;
}

.agd-hero .agd-lead {
    color: rgba(255, 255, 255, .85);
    max-width: 640px;
}

/* ---------- STAT CARDS (di dalam hero) ---------- */
.agd-stat-card {
    background-color: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: .9rem;
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    backdrop-filter: blur(2px);
}

.agd-stat-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .65rem;
    background-color: rgba(255, 255, 255, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.agd-stat-icon.agd-icon-accent { color: var(--color-accent, #84CC16); }
.agd-stat-icon.agd-icon-gold { color: var(--color-gold, #D4A72C); }
.agd-stat-icon.agd-icon-light { color: var(--color-light, #E8F5EE); }

.agd-stat-number {
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
}

.agd-stat-label {
    font-size: .78rem;
    color: rgba(255, 255, 255, .8);
}

/* ---------- FILTER BAR ---------- */
.agd-filter-bar {
    position: relative;
    z-index: 2;
    background-color: var(--color-surface, #FFFFFF);
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(6, 69, 45, .12);
    padding: 1rem;
    margin-top: -2.75rem;
    margin-bottom: 2.5rem;
}

.agd-filter-bar .form-control,
.agd-filter-bar .form-select {
    border-color: var(--color-border, #DDE8E1);
    color: var(--color-text, #18332A);
}

.agd-filter-bar .form-control:focus,
.agd-filter-bar .form-select:focus {
    border-color: var(--color-primary, #075E3B);
    box-shadow: 0 0 0 .2rem rgba(7, 94, 59, .15);
}

.agd-btn-filter {
    border: 1px solid var(--color-primary, #075E3B);
    color: var(--color-primary, #075E3B);
    background-color: #fff;
    border-radius: .6rem;
    font-weight: 600;
    white-space: nowrap;
}

.agd-btn-filter:hover {
    background-color: var(--color-light, #E8F5EE);
    color: var(--color-primary, #075E3B);
}

.agd-btn-reset {
    background-color: var(--color-primary, #075E3B);
    border: 1px solid var(--color-primary, #075E3B);
    color: #fff;
    border-radius: .6rem;
    font-weight: 600;
    white-space: nowrap;
}

.agd-btn-reset:hover {
    background-color: var(--color-dark, #06452D);
    border-color: var(--color-dark, #06452D);
    color: #fff;
}

/* ---------- SECTION HEADER ---------- */
.agd-section-title {
    font-weight: 800;
    color: var(--color-text, #18332A);
    border-left: 4px solid var(--color-primary, #075E3B);
    padding-left: .65rem;
}

.agd-see-all {
    color: var(--color-primary, #075E3B);
    font-weight: 600;
    text-decoration: none;
    font-size: .9rem;
}

.agd-see-all:hover {
    color: var(--color-dark, #06452D);
}

/* ---------- AGENDA CARD ---------- */
.agd-card {
    background-color: var(--color-surface, #FFFFFF);
    border: 1px solid var(--color-border, #DDE8E1);
    border-radius: .9rem;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow .15s ease, transform .15s ease;
}

.agd-card:hover {
    box-shadow: 0 10px 24px rgba(6, 69, 45, .12);
    transform: translateY(-2px);
}

.agd-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--color-light, #E8F5EE);
}

.agd-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agd-date-badge {
    position: absolute;
    top: .65rem;
    left: .65rem;
    background-color: var(--color-surface, #FFFFFF);
    border-radius: .6rem;
    padding: .35rem .55rem;
    text-align: center;
    line-height: 1.1;
    box-shadow: 0 4px 10px rgba(6, 69, 45, .18);
    min-width: 3.1rem;
}

.agd-date-badge .agd-date-day {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--color-primary, #075E3B);
}

.agd-date-badge .agd-date-month {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-text, #18332A);
}

.agd-date-badge .agd-date-year {
    font-size: .6rem;
    color: var(--color-muted, #66756D);
}

.agd-card-body {
    padding: .9rem 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.agd-kategori-badge {
    display: inline-block;
    align-self: flex-start;
    font-size: .7rem;
    font-weight: 700;
    padding: .28rem .65rem;
    border-radius: 999px;
    margin-bottom: .55rem;
    color: #fff;
}

/* Varian warna badge kategori -- turunan dari palet resmi,
   dipakai bergiliran per jenis_kegiatan supaya kategori mudah
   dibedakan tanpa keluar dari nuansa warna website. */
.agd-badge-1 { background-color: var(--color-primary, #075E3B); }
.agd-badge-2 { background-color: #2563A8; }
.agd-badge-3 { background-color: var(--color-gold, #D4A72C); }
.agd-badge-4 { background-color: #C2547A; }
.agd-badge-5 { background-color: #7C4FD1; }
.agd-badge-6 { background-color: var(--color-dark, #06452D); }

.agd-card-title {
    font-size: .95rem;
    font-weight: 700;
    color: var(--color-text, #18332A);
    margin-bottom: .5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agd-card-meta {
    font-size: .8rem;
    color: var(--color-muted, #66756D);
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .25rem;
}

.agd-card-meta i {
    color: var(--color-primary, #075E3B);
}

.agd-card-link {
    margin-top: auto;
    padding-top: .75rem;
    font-size: .82rem;
    font-weight: 600;
    color: var(--color-primary, #075E3B);
    text-decoration: none;
}

.agd-card-link:hover {
    color: var(--color-dark, #06452D);
}

/* ---------- CTA "Punya Agenda Kegiatan?" ---------- */
.agd-cta {
    background-color: var(--color-light, #E8F5EE);
    border: 1px solid var(--color-border, #DDE8E1);
    border-radius: 1rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.agd-cta-icon {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background-color: var(--color-surface, #FFFFFF);
    color: var(--color-primary, #075E3B);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(6, 69, 45, .10);
}

.agd-cta-title {
    font-weight: 700;
    color: var(--color-text, #18332A);
    margin-bottom: .15rem;
}

.agd-cta-desc {
    font-size: .85rem;
    color: var(--color-muted, #66756D);
    margin-bottom: 0;
}

.agd-btn-cta {
    background-color: var(--color-primary, #075E3B);
    border: 1px solid var(--color-primary, #075E3B);
    color: #fff;
    font-weight: 600;
    border-radius: .6rem;
    padding: .6rem 1.3rem;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.agd-btn-cta:hover {
    background-color: var(--color-dark, #06452D);
    border-color: var(--color-dark, #06452D);
    color: #fff;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991.98px) {
    .agd-hero { min-height: auto; }
    .agd-filter-bar { margin-top: 1.25rem; }
}

@media (max-width: 767.98px) {
    .agd-hero-inner { padding-top: 2rem; }
    .agd-hero h1 { font-size: 1.75rem; }
    .agd-cta { flex-direction: column; align-items: flex-start; text-align: left; }
    .agd-btn-cta { width: 100%; justify-content: center; }

    /* Kartu Agenda dipadatkan untuk grid 3 kolom di layar HP. */
    .agd-date-badge {
        top: .3rem;
        left: .3rem;
        padding: .2rem .3rem;
        min-width: 2rem;
        border-radius: .4rem;
    }

    .agd-date-badge .agd-date-day {
        font-size: .68rem;
    }

    .agd-date-badge .agd-date-month,
    .agd-date-badge .agd-date-year {
        font-size: .42rem;
    }

    .agd-card-body {
        padding: .5rem .55rem .6rem;
    }

    .agd-kategori-badge {
        font-size: .5rem;
        padding: .15rem .4rem;
        margin-bottom: .3rem;
    }

    .agd-card-title {
        font-size: .68rem;
        margin-bottom: .25rem;
    }

    .agd-card-meta {
        display: none;
    }

    .agd-card-link {
        padding-top: .4rem;
        font-size: .6rem;
    }
}

@media (max-width: 575.98px) {
    .agd-filter-bar { margin-top: 1rem; padding: .85rem; }
}