/* =========================================================
   FEATURED PROGRAMS SECTION
   Selected CodNesta programs and initiatives
   ========================================================= */


/*--------------------------------------------------
Section Container
--------------------------------------------------*/

.featured-programs {
    background: var(--color-background-soft);
}


/*--------------------------------------------------
Section Header
--------------------------------------------------*/

.featured-programs__header {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 0.65fr);

    align-items: end;
    gap: clamp(2rem, 7vw, 6rem);

    margin-bottom: var(--space-8);
}

.featured-programs__header .section__text {
    margin: 0;
}


/*--------------------------------------------------
Programs List
--------------------------------------------------*/

.featured-programs__list {
    display: grid;
    gap: var(--space-8);
}


/*--------------------------------------------------
Program Layout
--------------------------------------------------*/

.featured-program {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, 0.9fr);

    align-items: center;
    gap: clamp(2.5rem, 7vw, 6rem);
}


/*--------------------------------------------------
Alternating Program Layout
--------------------------------------------------*/

.featured-program--reverse .featured-program__image {
    order: 2;
}

.featured-program--reverse .featured-program__content {
    order: 1;
}


/*--------------------------------------------------
Program Image
--------------------------------------------------*/

.featured-program__image {
    height: 460px;

    overflow: hidden;

    border-radius: var(--radius-xl);

    background: var(--color-background-soft);
    box-shadow: var(--shadow-sm);
}

.featured-program__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}


/*--------------------------------------------------
Program Content
--------------------------------------------------*/

.featured-program__content {
    max-width: 520px;
}

.featured-program__number {
    display: block;

    margin-bottom: var(--space-4);

    color: var(--color-gold-dark);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.featured-program__category {
    display: inline-block;

    margin-bottom: var(--space-3);

    color: var(--color-navy);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.featured-program h3 {
    margin-bottom: var(--space-4);

    color: var(--color-navy);
    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.featured-program p {
    margin-bottom: var(--space-5);

    font-size: var(--font-size-md);
}


/* IMAGE REVEAL */
.reveal.is-visible .image-reveal img,
.image-reveal.is-visible img {
    transform: scale(1);
}


/*--------------------------------------------------
Program Link
--------------------------------------------------*/

.featured-program__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);

    color: var(--color-navy);
    font-weight: var(--font-weight-semibold);
}

.featured-program__link span {
    transition:
        transform var(--transition-fast);
}


/*--------------------------------------------------
Interactive States
--------------------------------------------------*/

.featured-program:hover .featured-program__image img {
    transform: scale(1.04);
}

.featured-program__link:hover span {
    transform: translateX(6px);
}

.featured-program__link:focus-visible {
    border-radius: 0.25rem;

    outline: 3px solid rgba(244, 180, 0, 0.45);
    outline-offset: 5px;
}


/*--------------------------------------------------
Tablet — 900px and Below
--------------------------------------------------*/

@media (max-width: 900px) {
    .featured-programs__header,
    .featured-program {
        grid-template-columns: 1fr;
    }

    .featured-program--reverse .featured-program__image,
    .featured-program--reverse .featured-program__content {
        order: initial;
    }

    .featured-program__content {
        max-width: 700px;
    }
}


/*--------------------------------------------------
Mobile — 600px and Below
--------------------------------------------------*/

@media (max-width: 600px) {
    .featured-programs__list {
        gap: var(--space-7);
    }

    .featured-program__image {
        height: 320px;

        border-radius: var(--radius-lg);
    }
}


/*--------------------------------------------------
Reduced Motion
--------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    .featured-program__image img,
    .featured-program__link span {
        transition: none;
    }

    .featured-program:hover .featured-program__image img,
    .featured-program__link:hover span {
        transform: none;
    }
}