/* ============================================
   KAF Design System — Components
   Started with the card family, since it's the
   biggest duplication in custom.css (see notes
   below). Add more shared components here as
   they're identified.
   ============================================ */

/*
 * AUDIT NOTE — Card duplication (corrected):
 * custom.css defines six card-shaped classes.
 * On close diff, only THREE are true byte-for-byte
 * duplicates:
 *
 *   .help-card, .campaign-card, .news-card
 *
 * These share identical base styles, identical
 * hover states, and identical .card-image handling.
 * Merged below via a grouped selector — this changes
 * NOTHING visually, it's the exact same CSS just
 * written once instead of three times.
 *
 * The other three were checked and NOT merged,
 * because each has a real, distinguishing property
 * that would change if flattened into one shared
 * class:
 *   - .pillar-card:    hover border-top uses
 *                       var(--kaf-accent) (orange),
 *                       not var(--kaf-blue) like the
 *                       trio above.
 *   - .stat-card:       has text-align:center and
 *                       position:relative that the
 *                       trio doesn't; its hover
 *                       shadow color rgba(2,102,80,..)
 *                       doesn't match any defined
 *                       variable — looks like a
 *                       leftover from before the
 *                       "Updated Color Palette" this
 *                       file's header comment
 *                       mentions, worth a design
 *                       review but left untouched
 *                       here to avoid guessing.
 *   - .outcome-card:    smaller border-radius (12px
 *                       vs 16px), a PERMANENT top
 *                       border rather than one that
 *                       only appears on hover, and a
 *                       different shadow opacity.
 *
 * Those three stay exactly as they are in custom.css.
 */

.help-card,
.campaign-card,
.news-card {
    background-color: var(--kaf-white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--kaf-light-gray);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.help-card:hover,
.campaign-card:hover,
.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(2, 102, 80, 0.12);
    border-color: var(--kaf-light-green);
    border-top: 3px solid var(--kaf-blue);
}

.help-card .card-image,
.campaign-card .card-image,
.news-card .card-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: var(--kaf-light-gray);
    position: relative;
}

.help-card .card-image::before,
.campaign-card .card-image::before,
.news-card .card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 100%);
    z-index: 1;
    transition: opacity 0.3s ease;
}

.help-card:hover .card-image::before,
.campaign-card:hover .card-image::before,
.news-card:hover .card-image::before {
    opacity: 0;
}

.help-card .card-image img,
.campaign-card .card-image img,
.news-card .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.help-card:hover .card-image img,
.campaign-card:hover .card-image img,
.news-card:hover .card-image img {
    transform: scale(1.05);
}

.help-card h3,
.campaign-card h3,
.news-card h3 {
    padding: 1.5rem 1.5rem 0.5rem;
    color: var(--kaf-dark-green);
    margin-bottom: 0.5rem;
}

/* Small remaining per-card differences — kept separate on purpose */
.help-card p {
    padding: 0 1.5rem 1.5rem;
    color: var(--kaf-text-dark);
    font-size: 0.95rem;
}

.campaign-card p {
    padding: 0 1.5rem 1rem;
    color: var(--kaf-text-dark);
    font-size: 0.95rem;
    flex-grow: 1;
}

.campaign-card .btn {
    margin: 0 1.5rem 1.5rem;
    text-align: center;
}

.news-card p {
    padding: 0 1.5rem 1rem;
    color: var(--kaf-text-dark);
    font-size: 0.95rem;
}

.news-date {
    padding: 0 1.5rem 1.5rem;
    color: var(--kaf-text-light);
    font-size: 0.9rem;
    font-weight: 600;
}