/* Public programme listing: consistent palette and compact mobile cards. */
.program-page { background: #fafafa; padding-bottom: 44px; }
.program-page .program-filter { margin-top: 20px; }
.program-page .program-filter-inner { justify-content: center; flex-wrap: wrap; overflow: visible; padding: 0; gap: 10px; background: transparent; border-radius: 0; box-shadow: none; }
.program-page .program-filter button { min-height: 44px; padding: 10px 18px; border-radius: 9px; color: #555; border-color: #e5e5e5; }
.program-page .program-filter button.active { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.program-page .program-filter button:hover { background: #fff1e5; color: #91420c; border-color: #ffc89b; }
.program-page .program-list { padding-top: 28px !important; }
.program-page .public-program-card { display: flex; flex-direction: column; border-color: #e8e8e8; border-radius: 16px; box-shadow: none; }
.program-page .public-program-card:hover { transform: translateY(-3px); box-shadow: 0 10px 25px #0000000d; }
.program-page .program-poster { display: block; object-fit: contain; background: #f1ede8; }
.program-page .meeting-poster { background: #fff1e5; color: #e67316; font-size: 3rem; }
.program-page .program-card-body { flex: 1; min-height: 0; padding: 20px; }
.program-page .program-status { border-radius: 6px; line-height: 1.5; }
.program-page .meeting-poster + .program-card-body .program-status { background: #1a1a1a !important; }
.program-page .program-title { font-size: 1.05rem; margin: 12px 0; letter-spacing: -.02em; }
.program-page .program-meta { gap: 8px; font-size: .8rem; }
.program-page .program-meta span { display: flex; align-items: baseline; gap: 6px; overflow-wrap: anywhere; }
.program-page .program-meta i { flex-shrink: 0; color: #e67316; }
.program-page .program-summary { font-size: .82rem; line-height: 1.7; }
.program-page .program-detail-btn { min-height: 44px; display: flex; justify-content: center; align-items: center; background: #FF8218; color: #1a1a1a; }
.program-page .program-detail-btn:hover { background: #e67316; color: #1a1a1a; }
.program-filter-empty { padding: 28px 18px; margin: 0; text-align: center; color: #666; background: #fff; border: 1px dashed #ddd; border-radius: 12px; }
.program-page a:focus-visible, .program-page button:focus-visible { outline: 3px solid #FF8218; outline-offset: 3px; }
@media (max-width: 575.98px) {
    .program-page { padding-bottom: 22px; }
    .program-page .container { padding-left: 16px; padding-right: 16px; }
    .program-page .program-filter { margin-top: 12px; }
    .program-page .program-filter-inner { gap: 6px; }
    .program-page .program-filter button { flex: 1 1 0; font-size: .7rem; padding: 8px 5px; }
    .program-page .program-list { padding-top: 16px !important; }
    .program-page #publicProgramGrid { --bs-gutter-y: 12px; --bs-gutter-x: 10px; }
    .program-page .public-program-item { width: 50%; }
    .program-page .public-program-card { border-radius: 12px; }
    /* .program-poster sengaja tidak diberi height tetap di sini - biar ia
       kekal height:100% (peraturan asas) dan isi penuh .program-poster-wrap
       yang bersaiz ikut aspect-ratio:4/5. Cubaan awal kunci height:110px
       punca gambar nampak kecil terapung dalam kotak kelabu kosong, sebab
       wrap tetap tinggi ikut lebar lajur (~200px pada lajur 50%) manakala
       gambar dipaksa cuma 110px. */
    .program-page .meeting-poster { height: 62px; aspect-ratio: auto; font-size: 1.6rem; }
    .program-page .program-card-body { padding: 10px; }
    .program-page .program-status { font-size: .55rem; padding: 3px 6px; }
    .program-page .program-title {
        display: -webkit-box;
        overflow: hidden;
        font-size: .82rem;
        line-height: 1.35;
        margin: 8px 0;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }
    /* Padat untuk 2 lajur: meta (tarikh/masa/lokasi) dan ringkasan
       disembunyikan - kad sesempit ~160px tak muat semua itu tanpa nampak
       sesak. Butang "Lihat Program" bawa pelawat terus ke butiran penuh. */
    .program-page .program-meta,
    .program-page .program-summary { display: none; }
    .program-page .program-detail-btn { font-size: .68rem; padding: 7px 8px; }
    .program-page .program-list > .p-5 { padding: 22px 16px !important; }
    .program-page .program-list > .p-5 p { font-size: .8rem; }
    .program-filter-empty { padding: 20px 14px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .program-page *, .program-page *::before, .program-page *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}