/* Programs Page Styles */
.page-header { position: relative; height: 350px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(184,149,106,0.95), rgba(107,83,68,0.9)), url('https://images.unsplash.com/photo-1511632765486-a01980e01a18?w=1600&q=80') center/cover; margin-top: 78px; }
.page-header-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle, transparent 0%, rgba(0,0,0,0.2) 100%); }
.page-header-content { position: relative; z-index: 2; text-align: center; color: white; }
.page-header-content h1 { font-size: 48px; font-weight: 700; margin-bottom: 12px; }
.page-header-content > p { font-size: 18px; opacity: 0.9; }
.category-header { text-align: center; margin-bottom: var(--spacing-lg); }
.category-icon { font-size: 64px; margin-bottom: var(--spacing-sm); }
.category-header h2 { font-size: 36px; color: var(--text-dark); margin-bottom: var(--spacing-sm); }
.category-header p { color: var(--text-light); font-size: 18px; }
.programs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-md); }
.program-card { overflow: hidden; }
.program-card img { width: 100%; height: 220px; object-fit: cover; transition: transform 0.5s; }
.program-card:hover img { transform: scale(1.1); }
.program-content { padding: var(--spacing-md); }
.program-content h3 { font-size: 22px; color: var(--text-dark); margin-bottom: var(--spacing-sm); }
.program-content p { color: var(--text-light); margin-bottom: var(--spacing-sm); line-height: 1.7; }
.program-meta { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: var(--spacing-md); font-size: 14px; color: var(--text-light); }
.program-meta i { color: var(--primary-gold); margin-right: 5px; }
.modal { display: none; position: fixed; z-index: 10000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); }
.modal-content { background: white; margin: 5% auto; padding: var(--spacing-lg); border-radius: var(--radius-md); max-width: 500px; position: relative; animation: slideDown 0.3s; }
@keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-close { position: absolute; right: 20px; top: 20px; font-size: 32px; cursor: pointer; color: var(--text-light); transition: var(--transition-fast); }
.modal-close:hover { color: var(--primary-gold); }
.modal-content h2 { font-size: 28px; color: var(--text-dark); margin-bottom: var(--spacing-md); }
@media (max-width: 768px) { .page-header-content h1 { font-size: 36px; } .programs-grid { grid-template-columns: 1fr; } }