/* ========================================================================
   SSI COURSES PAGE — CARD VISUAL SYSTEM
   Matches the homepage Courses card system.

   IMPORTANT:
   The Courses landing page uses .ssi-program-card, while the homepage
   uses .ssi-course-card. This file intentionally targets .ssi-program-card.
   ======================================================================== */

/* ------------------------------------------------------------------------
   BASE CARD
   ------------------------------------------------------------------------ */

.ssi-courses-page__grid .ssi-program-card {
    position: relative !important;
    overflow: hidden !important;

    border: 1px solid transparent !important;
    border-radius: 22px !important;

    color: #0b1f3a !important;

    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.045) !important;

    transition:
        transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1) !important,
        box-shadow 450ms ease !important,
        border-color 450ms ease !important,
        background 450ms ease !important,
        color 450ms ease !important;
}

/* Homepage-style decorative glow + bottom accent. */
.ssi-courses-page__grid .ssi-program-card::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(59, 130, 246, 0.09),
            transparent 34%
        ) !important;

    opacity: 0 !important;

    transition: opacity 450ms ease !important;

    pointer-events: none !important;
}

.ssi-courses-page__grid .ssi-program-card::after {
    content: "" !important;

    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 4px !important;

    background:
        linear-gradient(
            90deg,
            #dca238,
            #f4c766
        ) !important;

    transform: scaleX(0) !important;
    transform-origin: left center !important;

    transition: transform 450ms ease !important;
}

/* ------------------------------------------------------------------------
   DEFAULT PASTEL CARD COLORS
   Matches the homepage sequence.
   ------------------------------------------------------------------------ */

/* 01 — Foundation / featured: blue */
.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) {
    background:
        linear-gradient(
            145deg,
            #0b1f3a 0%,
            #102f55 100%
        ) !important;

    border-color: transparent !important;

    color: #ffffff !important;

    box-shadow:
        0 20px 50px rgba(11, 31, 58, 0.18) !important;
}

/* 02 — JEE / lavender */
.ssi-courses-page__grid .ssi-program-card:nth-of-type(2) {
    background:
        linear-gradient(
            135deg,
            #f0e9ff 0%,
            #e3d8ff 100%
        ) !important;

    border-color: #ddd0ff !important;
}

/* 03 — NEET / warm yellow */
.ssi-courses-page__grid .ssi-program-card:nth-of-type(3) {
    background:
        linear-gradient(
            135deg,
            #fff5dc 0%,
            #ffebbd 100%
        ) !important;

    border-color: #f4dfad !important;
}

/* 04 — Merchant Navy / light blue */
.ssi-courses-page__grid .ssi-program-card:nth-of-type(4) {
    background:
        linear-gradient(
            135deg,
            #eaf2ff 0%,
            #dbe9ff 100%
        ) !important;

    border-color: #cbdcff !important;
}

/* 05 — NDA / lavender */
.ssi-courses-page__grid .ssi-program-card:nth-of-type(5) {
    background:
        linear-gradient(
            135deg,
            #f0e9ff 0%,
            #e3d8ff 100%
        ) !important;

    border-color: #ddd0ff !important;
}

/* 06 — NEST / warm yellow */
.ssi-courses-page__grid .ssi-program-card:nth-of-type(6) {
    background:
        linear-gradient(
            135deg,
            #fff5dc 0%,
            #ffebbd 100%
        ) !important;

    border-color: #f4dfad !important;
}

/* 07 — CUET / light blue */
.ssi-courses-page__grid .ssi-program-card:nth-of-type(7) {
    background:
        linear-gradient(
            135deg,
            #eaf2ff 0%,
            #dbe9ff 100%
        ) !important;

    border-color: #cbdcff !important;
}

/* 08 — BITSAT / lavender */
.ssi-courses-page__grid .ssi-program-card:nth-of-type(8) {
    background:
        linear-gradient(
            135deg,
            #f0e9ff 0%,
            #e3d8ff 100%
        ) !important;

    border-color: #ddd0ff !important;
}

/* 09 — VITEEE / warm yellow */
.ssi-courses-page__grid .ssi-program-card:nth-of-type(9) {
    background:
        linear-gradient(
            135deg,
            #fff5dc 0%,
            #ffebbd 100%
        ) !important;

    border-color: #f4dfad !important;
}

/* 10 — IISER / light blue */
.ssi-courses-page__grid .ssi-program-card:nth-of-type(10) {
    background:
        linear-gradient(
            135deg,
            #eaf2ff 0%,
            #dbe9ff 100%
        ) !important;

    border-color: #cbdcff !important;
}

/* ------------------------------------------------------------------------
   CARD CONTENT — NORMAL STATE
   ------------------------------------------------------------------------ */

.ssi-courses-page__grid .ssi-program-card h3 {
    position: relative !important;
    z-index: 2 !important;

    color: #0b1f3a !important;

    transition: color 350ms ease !important;
}

.ssi-courses-page__grid .ssi-program-card p {
    position: relative !important;
    z-index: 2 !important;

    color: #627896 !important;

    transition: color 350ms ease !important;
}

.ssi-courses-page__grid .ssi-program-card__number {
    position: relative !important;
    z-index: 2 !important;

    color: #758ca8 !important;

    transition: color 350ms ease !important;
}

.ssi-courses-page__grid .ssi-program-card__tag {
    position: relative !important;
    z-index: 2 !important;

    background: rgba(255, 255, 255, 0.78) !important;
    color: #315fcf !important;

    transition:
        background-color 350ms ease,
        color 350ms ease,
        border-color 350ms ease !important;
}

.ssi-courses-page__grid .ssi-program-card__icon {
    position: relative !important;
    z-index: 2 !important;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.78),
            rgba(255, 255, 255, 0.58)
        ) !important;

    border-color: rgba(255, 255, 255, 0.62) !important;
    color: #315fcf !important;

    transition:
        transform 350ms ease,
        background 350ms ease,
        color 350ms ease,
        border-color 350ms ease !important;
}

.ssi-courses-page__grid .ssi-program-card__meta,
.ssi-courses-page__grid .ssi-program-card__link {
    position: relative !important;
    z-index: 2 !important;
}

.ssi-courses-page__grid .ssi-program-card__meta span {
    background: rgba(255, 255, 255, 0.62) !important;
    color: #627896 !important;

    transition:
        background-color 350ms ease,
        color 350ms ease !important;
}

.ssi-courses-page__grid .ssi-program-card__link {
    color: #0b1f3a !important;

    transition:
        color 220ms ease,
        gap 220ms ease !important;
}

/* ------------------------------------------------------------------------
   FEATURED FOUNDATION CARD
   ------------------------------------------------------------------------ */

.ssi-courses-page__grid .ssi-program-card:nth-of-type(1)::before {
    opacity: 1 !important;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(220, 162, 56, 0.22),
            transparent 34%
        ) !important;
}

.ssi-courses-page__grid .ssi-program-card:nth-of-type(1)::after {
    display: none !important;
}

.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) h3,
.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) p,
.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) a,
.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) .ssi-program-card__number {
    color: #ffffff !important;
}

.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) p {
    color: rgba(255, 255, 255, 0.62) !important;
}

.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) .ssi-program-card__number {
    color: rgba(255, 255, 255, 0.35) !important;
}

.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) .ssi-program-card__tag {
    background: rgba(255, 255, 255, 0.11) !important;
    color: #f4c766 !important;
}

.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) .ssi-program-card__icon {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #f4c766 !important;
}

.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) .ssi-program-card__meta span {
    background: rgba(255, 255, 255, 0.075) !important;
    color: rgba(255, 255, 255, 0.65) !important;
}

.ssi-courses-page__grid .ssi-program-card:nth-of-type(1) .ssi-program-card__link {
    color: #ffffff !important;
}

/* ------------------------------------------------------------------------
   HOVER — SAME DARK BLUE SYSTEM AS HOMEPAGE
   ------------------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) {

    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover {
        background:
            linear-gradient(
                145deg,
                #0b1f3a 0%,
                #102f55 100%
            ) !important;

        border-color: transparent !important;

        color: #ffffff !important;

        transform: translateY(-9px) !important;

        box-shadow:
            0 30px 70px rgba(11, 31, 58, 0.20) !important;
    }

    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover::before {
        opacity: 1 !important;

        background:
            radial-gradient(
                circle at 100% 0%,
                rgba(220, 162, 56, 0.20),
                transparent 34%
            ) !important;
    }

    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover::after {
        background:
            linear-gradient(
                90deg,
                #f4c766,
                #f8dc8d
            ) !important;

        transform: scaleX(1) !important;
    }

    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover h3,
    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover p,
    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover a,
    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover .ssi-program-card__number {
        color: #ffffff !important;
    }

    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover p {
        color: rgba(255, 255, 255, 0.62) !important;
    }

    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover .ssi-program-card__number {
        color: rgba(255, 255, 255, 0.36) !important;
    }

    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover .ssi-program-card__tag {
        background: rgba(255, 255, 255, 0.10) !important;
        color: #f4c766 !important;
    }

    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover .ssi-program-card__icon {
        transform: rotate(-6deg) scale(1.08) !important;

        background: rgba(255, 255, 255, 0.10) !important;
        border-color: rgba(255, 255, 255, 0.12) !important;
        color: #f4c766 !important;
    }

    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover .ssi-program-card__meta span {
        background: rgba(255, 255, 255, 0.075) !important;
        color: rgba(255, 255, 255, 0.65) !important;
    }

    .ssi-courses-page__grid .ssi-program-card:not(:nth-of-type(1)):hover .ssi-program-card__link {
        color: #ffffff !important;
    }

    .ssi-courses-page__grid .ssi-program-card:nth-of-type(1):hover {
        transform: translateY(-9px) !important;

        background:
            linear-gradient(
                145deg,
                #0b1f3a 0%,
                #102f55 100%
            ) !important;

        box-shadow:
            0 30px 70px rgba(11, 31, 58, 0.23) !important;
    }
}

/* ------------------------------------------------------------------------
   TOUCH DEVICES — keep cards stable; no sticky hover colors.
   ------------------------------------------------------------------------ */

@media (hover: none), (pointer: coarse) {

    .ssi-courses-page__grid .ssi-program-card:hover {
        transform: none !important;
    }
}