/* ── Credit programs page ──────────────────────────────────────────────── */

.credit {
    padding: 60px 0 80px;
}

.credit__header {
    text-align:    center;
    margin-bottom: 48px;
}

.credit__heading {
    color:          var(--color-primary);
    font-size:      42px;
    text-transform: uppercase;
    margin:         0 0 12px;
}

.credit__subtitle {
    color:     var(--color-muted);
    font-size: 16px;
    margin:    0;
}

.credit__empty {
    text-align: center;
    color:      var(--color-muted);
    font-size:  16px;
    padding:    60px 0;
}

.credit__list {
    display:        flex;
    flex-direction: column;
    gap:            40px;
}

/* ── Program card ──────────────────────────────────────────────────────── */

.credit-program {
    background:    #ffffff;
    border:        1px solid var(--color-border);
    border-radius: 20px;
    overflow:      hidden;
}

/* Cover — dark band with bank branding, visually distinct from the header */
.credit-program__cover {
    position:   relative;
    background:
        radial-gradient(circle at 15% 20%, rgba(177, 131, 94, 0.18) 0%, transparent 45%),
        linear-gradient(135deg, #0F3A2E 0%, var(--color-primary) 55%, #061A15 100%);
    border-top:    3px solid var(--color-secondary);
    padding:       36px 56px;
    text-align:    center;
    overflow:      hidden;
}
.credit-program__cover::after {
    content:    '';
    position:   absolute;
    inset:      0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.025) 0px,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px,
        transparent 14px
    );
    pointer-events: none;
}
.credit-program__cover > * {
    position:      relative;
    z-index:       1;
    margin-bottom: 0 !important;
}

.credit-program__logo {
    display:        inline-flex;
    align-items:    center;
    background:     #ffffff;
    padding:        12px 24px;
    border-radius:  12px;
    box-shadow:     0 4px 16px rgba(0, 0, 0, 0.2);
}
.credit-program__logo-img {
    display:    inline-block;
    max-height: 32px;
    width:      auto;
    height:     auto;
}

/* Body */
.credit-program__body {
    padding: 40px 56px 48px;
}

.credit-program__col-title {
    color:          var(--color-primary);
    font-size:      18px;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin:         0 0 16px;
    padding-bottom: 10px;
    border-bottom:  1px solid rgba(177, 131, 94, 0.25);
}

.credit-program__cols {
    display:       grid;
    grid-template-columns: 1fr 1fr;
    gap:           32px;
    margin-bottom: 40px;
}

.credit-program__col-list {
    margin:        0;
    padding:       18px 20px 18px 40px;
    background:    var(--color-bg-alt);
    border-left:   3px solid var(--color-secondary);
    border-radius: 0 12px 12px 0;
    list-style:    disc;
}
.credit-program__col-list li {
    font-size:     15px;
    line-height:   1.5;
    margin-bottom: 10px;
}
.credit-program__col-list li:last-child { margin-bottom: 0; }
.credit-program__col-list li::marker { color: var(--color-secondary); }

/* Steps — vertical stepper with a connecting line, reads as a sequence */
.credit-program__steps {
    position:   relative;
    display:    flex;
    flex-direction: column;
    gap:        32px;
    margin:     0;
    padding:    0;
    list-style: none;
}
.credit-program__steps::before {
    content:    '';
    position:   absolute;
    top:        20px;
    bottom:     20px;
    left:       19px;
    width:      2px;
    background: rgba(177, 131, 94, 0.3);
}

.credit-program__step {
    position:    relative;
    display:     flex;
    align-items: flex-start;
    gap:         20px;
}

.credit-program__step-num {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--color-primary);
    border:          2px solid rgba(177, 131, 94, 0.35);
    color:           #ffffff;
    font-size:       16px;
    font-weight:     800;
}

.credit-program__step-text {
    font-size:   15px;
    line-height: 1.5;
    color:       var(--color-text);
    max-width:   480px;
    padding-top: 8px;
    text-wrap:   pretty;
}

/* Desktop — steps lay out horizontally so the sequence fills the width */
@media (min-width: 1025px) {
    .credit-program__steps {
        flex-direction: row;
        align-items:    flex-start;
    }
    .credit-program__steps::before {
        top:    20px;
        bottom: auto;
        height: 2px;
        left:   calc(100% / (var(--steps-count, 5) * 2));
        right:  calc(100% / (var(--steps-count, 5) * 2));
    }
    .credit-program__step {
        flex:           1 1 0;
        flex-direction: column;
        align-items:    center;
        text-align:     center;
    }
    .credit-program__step-text {
        max-width:   220px;
        padding-top: 0;
        margin-top:  14px;
    }
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .credit__heading { font-size: 34px; }
    .credit-program__cover { padding: 32px; }
    .credit-program__body { padding: 32px; }
    .credit-program__cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .credit { padding: 40px 0 48px; }
    .credit__heading { font-size: 26px; }
    .credit__header { margin-bottom: 32px; }
    .credit__list { gap: 24px; }

    .credit-program__cover { padding: 28px 24px; }

    .credit-program__body { padding: 24px; }
    .credit-program__cols { margin-bottom: 28px; }
    .credit-program__col-list { padding: 14px 16px 14px 32px; }

    .credit-program__steps { gap: 24px; }
    .credit-program__steps::before { top: 16px; bottom: 16px; left: 15px; }
    .credit-program__step-num { width: 32px; height: 32px; font-size: 14px; }
    .credit-program__step-text { max-width: none; padding-top: 5px; font-size: 14px; }
}