/* --- PROGRAMS LIST/SECTION PROGRAMS --- */

.section-programs {

    .page-button__contained,
    .page-button__outlined {
        justify-self: center;
    }
}

.programs-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(auto, max-content));
    justify-content: center;
    gap: 20px;

    margin-bottom: 50px;

    li {
        max-width: 388px;
    }
}

.programs-card {
    display: flex;
    row-gap: 24px;

    width: 100%;
    height: 100%;
    padding: 40px 32px;
    border: 1px solid var(--brand-border-color);
    border-radius: 8px;
    background-color: var(--bg-secondary);

    cursor: pointer;
    transition: border-color var(--transition-primary);
}

.programs-card:hover {
    border-color: var(--brand-color--accent);

    svg {
        fill: var(--brand-color--accent);
    }

    .programs-card__actions :is(a, p) {
        max-width: 100%;
        color: var(--brand-color--accent);
        background-image: url('../images/arrow-right-HOVER.svg');
    }
}

.programs-list.animated li {
    opacity: 0;
    transform: translateY(-10px);
    animation: fainInUp 450ms forwards;
}

@keyframes fainInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.programs-card__icon-thumb {
    align-self: start;
    border-radius: 20px;
    background: #f1f2ff;
    padding: 20px;

    svg {
        display: block;
        fill: var(--brand-text-color);

        transition: fill var(--transition-primary);
    }
}

.programs-card__body {
    display:flex;
    flex-direction: column;
    flex: 1;
}

.programs-card__content {
    flex: 1 1 auto;

    p:first-of-type {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.42;
        margin-bottom: 8px;
    }

    p {
        line-height: 1.67;
    }
}

.programs-card__actions {
    font-weight: 700;
    color: var(--brand-text-color);

    a, p {
        display: block;
        max-width: 200px;
        padding: 5px 0;

        background-image: url('../images/arrow-right.svg');
        background-position: right center;
        background-repeat: no-repeat;

        transition: color var(--transition-primary),
        max-width var(--transition-primary);
    }
}

/* --- SECTION ABOUT --- */

.about__container {
    display: flex;
    justify-content: space-between;
    column-gap: 100px;
}

.about__image-thumb {
    border-radius: 0 12px 12px 0;
    overflow: hidden;
}

.about__text-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 30px;
    max-width: 545px;

    h2 {
        font-size: clamp(1.75rem, 1.5739rem + 0.7512vw, 2.25rem);
        font-weight: 700;
        line-height: 1.28;
        margin-bottom: 12px;
    }

    p {
        line-height: 1.67;
    }
}

/* --- SECTION INVEST ADVANTAGES --- */

section:has(.invest-advantages__list) .section-title {
    margin-bottom: 55px;
}

.invest-advantages__list {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;

    counter-reset: advantage;
}

.invest-advantages__list li {
    font-size: clamp(0.875rem, 0.8218rem + 0.198vw, 1rem);
    line-height: 1.52;
    counter-increment: advantage;

    display: flex;
    flex-direction: column;
    row-gap: 16px;
}

.invest-advantages__image-thumb {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #f1f2ff;

    svg {
        fill: var(--brand-color--accent);
    }
}

.invest-advantages__title {
    font-size: 1.25em;
    font-weight: 600;

    &::before {
        content: counter(advantage) ". ";
    }
}


/* --- @MEDIA 1200px --- */

@media screen and (max-width: 1200px) {

    .programs-list {
        grid-template-columns: repeat(2, minmax(auto, max-content));
    }

    /* max 1200 and 768 min */
    @media screen and (min-width: 768px) {

        .about__container {
            gap: 50px;
        }

        .about__text-content,
        .about__image-thumb{
            flex: 1 1 50%;
        }
    }
}


@media screen and (max-width: 1024px) {
    .programs-card {
        padding: 40px 24px;
    }
}

/* --- @MEDIA 768 --- */

@media screen and (min-width: 768px) {
    .programs-card {
        flex-direction: column;
        min-height: 370px;
    }

    .invest-advantages__list li {
        max-width: calc((100% - 32px) / 2);
    }
}

@media screen and (max-width: 768px) {

    .programs-list {
        grid-template-columns: minmax(auto, max-content);
        margin-bottom: 32px;
    }

    .programs-card {
        column-gap: 12px;
        row-gap: 20px;
        padding: 20px 16px;
    }

    .programs-card__icon-thumb {
        padding: 12px;
        border-radius: 8px;

        svg {
            width: 24px;
            height: 24px;
        }
    }

    .programs-card__content {
        margin-bottom: 16px;

        p:first-of-type {
            font-size: 1.125rem;
            line-height: 1.7;
        }
    }

    .about__image-thumb {
        border-radius: 4px;
    }

    .about__container {
        flex-direction: column;
        align-items: center;
        row-gap: 24px;

        text-align: center;
    }

    .about__container {
        h2 {
            line-height: 1.36;
        }

        p {
            line-height: 1.75;
        }
    }

    .about__text-content {
        row-gap: 24px;
    }

    .invest-advantages__list {
        flex-direction: column;
        row-gap: 24px;
    }
}