/* ============================================================
   Dibai NGO — Programs Module Stylesheet (programs.css)
   ============================================================ */

/* Shared Section Utilities */
.section-pad { padding-block: var(--sp-20); }

.section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .7rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--clr-primary);
    background: rgba(26,107,60,.08);
    border: 1px solid rgba(26,107,60,.18);
    border-radius: var(--radius-full);
    padding: 4px 14px;
    margin-bottom: .9rem;
}

.section-heading {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: var(--fw-bold);
    color: var(--clr-dark);
    line-height: var(--lh-tight);
    margin-bottom: .75rem;
}
.section-heading span { color: var(--clr-primary); }

.view-all-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--clr-primary);
    text-decoration: none;
    letter-spacing: .03em;
    transition: gap var(--transition-fast);
}
.view-all-link:hover { color: var(--clr-primary-dark); gap: .7rem; }

/* Filter & Search Bar Header */
.programs-filter-wrapper {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-2xl);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: 2rem;
}

.program-search-form {
    position: relative;
    display: flex;
    align-items: center;
}

.program-search-input {
    width: 100%;
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-full);
    padding: 11px 48px 11px 20px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    outline: none;
    transition: all var(--transition-fast);
    background: var(--clr-light);
}

.program-search-input:focus {
    border-color: var(--clr-primary);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(26,107,60, 0.12);
}

.program-search-btn {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background: var(--clr-primary);
    border: none;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.program-search-btn:hover {
    background: var(--clr-primary-dark);
    transform: translateY(-50%) scale(1.05);
}

/* Category Filter Pills */
.category-pills-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.category-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: 8px 18px;
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--clr-body);
    background: var(--clr-light);
    border: 1px solid var(--clr-border);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.category-pill-btn:hover {
    background: rgba(26,107,60, 0.08);
    color: var(--clr-primary);
    border-color: var(--clr-primary);
}

.category-pill-btn.active {
    background: var(--clr-primary);
    color: #fff;
    border-color: var(--clr-primary);
    box-shadow: 0 4px 14px rgba(26,107,60, 0.25);
}

/* Active Filter Notification Bar */
.active-filter-bar {
    background: rgba(26,107,60, 0.06);
    border: 1px solid rgba(26,107,60, 0.15);
    border-radius: var(--radius-lg);
    padding: .75rem 1.25rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-sm);
}

/* Program Card Styles */
.program-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-base);
    height: 100%;
    display: flex;
    flex-direction: column;
}
.program-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-xl); border-color: transparent; }

.program-card-thumb {
    height: 190px;
    position: relative;
    overflow: hidden;
}
.program-card-thumb-inner {
    width: 100%;
    height: 100%;
    transition: transform var(--transition-slow);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.8rem;
    color: rgba(255,255,255,.4);
}
.program-card:hover .program-card-thumb-inner { transform: scale(1.06); }
.program-card-thumb--education  { background: linear-gradient(135deg, #1a6b3c, #27a85f); }
.program-card-thumb--health     { background: linear-gradient(135deg, #1a4fa8, #3b82f6); }
.program-card-thumb--nutrition  { background: linear-gradient(135deg, #b81027, #f4a623); }
.program-card-thumb--livelihood { background: linear-gradient(135deg, #7c3aed, #a78bfa); }
.program-card-thumb--water      { background: linear-gradient(135deg, #0891b2, #22d3ee); }
.program-card-thumb--emergency  { background: linear-gradient(135deg, #be185d, #f43f5e); }

.program-card-tag {
    position: absolute;
    top: .9rem;
    left: .9rem;
    background: rgba(255,255,255,.94);
    border-radius: var(--radius-full);
    padding: 3px 10px;
    font-size: .65rem;
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--clr-dark);
}
.program-card-body { padding: 1.3rem; flex: 1; display: flex; flex-direction: column; }
.program-card-icon { font-size: 1.4rem; margin-bottom: .65rem; }
.program-card-title {
    font-size: .98rem;
    font-weight: var(--fw-bold);
    color: var(--clr-dark);
    margin-bottom: .5rem;
    line-height: var(--lh-tight);
}
.program-card-text { font-size: var(--fs-sm); color: var(--clr-muted); line-height: var(--lh-normal); flex: 1; margin-bottom: .9rem; }
.program-card-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--clr-border); padding-top: .85rem; margin-top: auto; }
.program-card-stat { font-size: .72rem; color: var(--clr-muted); }
.program-card-stat strong { font-weight: var(--fw-bold); color: var(--clr-primary); font-size: .85rem; display: block; }

/* Program Detail Styles */
.program-detail-hero {
    background: linear-gradient(135deg, var(--clr-dark) 0%, var(--clr-dark-2) 100%);
    border-radius: var(--radius-2xl);
    padding: 2.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
    margin-bottom: 2.5rem;
}

.program-detail-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--clr-accent);
    color: var(--clr-dark);
    font-weight: var(--fw-bold);
    font-size: .75rem;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1rem;
}

.program-detail-title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: #ffffff !important;
    line-height: 1.15;
    margin-bottom: 1rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

.program-detail-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255, 0.15);
}

.program-metric-box {
    background: rgba(255,255,255, 0.08);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-xl);
    padding: 1.25rem;
    border: 1px solid rgba(255,255,255, 0.12);
}

.program-metric-val {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--clr-accent);
    margin-bottom: .2rem;
}

.program-metric-lbl {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(255,255,255, 0.7);
}

/* Detail Content Section */
.program-content-body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--clr-body);
}

.program-sidebar-widget {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-2xl);
    padding: 1.75rem;
    margin-bottom: 1.75rem;
    box-shadow: var(--shadow-sm);
}

.program-sidebar-widget--donate {
    background: linear-gradient(135deg, var(--clr-primary-dark), var(--clr-dark));
    color: #fff;
    border: none;
}