@import "brand-palette.less";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');

// Homepage-only styling, loaded from index.html through the pagestyles block.
// Typography follows the brand kit: Poppins headlines, Montserrat eyebrows, Open Sans body.

@font-heading: 'Poppins', 'Montserrat', sans-serif;
@font-accent : 'Montserrat', sans-serif;
@font-body   : 'Open Sans', sans-serif;
@ink         : #4a5168;
@ink-muted   : #6b7280;
@tint        : #f5f8fd;
@radius      : 14px;
@shadow      : 0 10px 30px fade(@brand-deep-navy, 8%);
@shadow-hover: 0 18px 40px fade(@brand-deep-navy, 16%);
@ease        : cubic-bezier(.2, .7, .2, 1);

.home {
    font-family: @font-body;
    color      : @ink;
}

/* _________________________________ shared section pieces ______________________________*/

.home-section {
    padding: 4.5rem 0;

    @media (max-width: 767.98px) {
        padding: 3rem 0;
    }
}

.home-heading {
    margin-bottom: 2.5rem;

    &__eyebrow {
        font-family: @font-accent;
        font-size  : 0.8rem;
        display       : inline-block;
        margin-bottom : 0.6rem;
        font-weight   : 600;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color         : @brand-heritage-gold;
    }

    // .home prefix outranks older section rules such as .index9 h2
    .home &__title {
        margin     : 0;
        font-family: @font-heading;
        font-size  : 2.25rem;
        font-weight: 700;
        line-height: 1.2;
        text-align : inherit;
        color      : @brand-deep-navy;

        &::after {
            content      : '';
            display      : block;
            width        : 64px;
            height       : 3px;
            margin       : 1rem auto 0;
            border-radius: 3px;
            background   : @brand-classic-gold;
        }

        @media (max-width: 575.98px) {
            font-size: 1.7rem;
        }
    }

    &--split {
        display        : flex;
        flex-wrap      : wrap;
        align-items    : flex-end;
        justify-content: space-between;
        gap            : 1rem;

        .home-heading__title::after {
            margin-left: 0;
        }
    }
}

.home-link {
    font-family    : @font-accent;
    font-size      : 0.9rem;
    font-weight    : 600;
    color          : @brand-premium-navy;
    text-decoration: none;

    i {
        margin-left: 0.4rem;
        transition : transform 0.25s @ease;
    }

    &:hover {
        color          : @brand-heritage-gold;
        text-decoration: none;

        i {
            transform: translateX(4px);
        }
    }
}

/* _________________________________ hero side buttons ______________________________*/

// the Enquire button carries an inline background, hence !important
.home .slider-apply a {
    background: @brand-deep-navy !important;
    transition: background 0.25s @ease, color 0.25s @ease;

    &:hover {
        color     : @brand-deep-navy !important;
        background: @brand-mustard !important;
    }
}

/* _________________________________ news ticker ______________________________*/

.home section.announcement {
    background-color: @brand-deep-navy;

    h2 {
        font-family   : @font-accent;
        font-size     : 0.85rem;
        font-weight   : 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color         : @brand-mustard;
        border-right  : 1px solid fade(#fff, 25%);
    }

    .marquee a {
        font-size: 0.95rem;

        &:hover {
            color          : @brand-mustard;
            text-decoration: none;
        }
    }
}

/* _________________________________ quick link tiles ______________________________*/

// Each tile photo carries its own colour cast; blending against navy gives the four a single brand look.
.home section.academysec {
    .card {
        position             : relative;
        overflow             : hidden;
        min-height           : 230px;
        background-color     : @brand-deep-navy;
        background-size      : cover;
        background-blend-mode: luminosity;
        border-right         : 1px solid fade(#fff, 10%);

        &::before {
            content   : '';
            position  : absolute;
            inset     : 0;
            background: linear-gradient(180deg, fade(@brand-deep-navy, 30%) 0%, fade(@brand-deep-navy, 85%) 100%);
            transition: opacity 0.4s @ease;
        }

        &::after {
            content   : '';
            position  : absolute;
            left      : 0;
            bottom    : 0;
            width     : 100%;
            height    : 4px;
            background: @brand-mustard;
            transform : scaleX(0);
            transform-origin: left;
            transition: transform 0.45s @ease;
        }

        &:hover {
            &::before {
                opacity: 0.8;
            }

            &::after {
                transform: scaleX(1);
            }
        }

        .card-body {
            position       : relative;
            z-index        : 1;
            display        : flex;
            flex-direction : column;
            align-items    : center;
            justify-content: center;
        }

        .card-title {
            margin-bottom : 1rem !important;
            font-family   : @font-heading;
            font-size     : 1.75rem;
            font-weight   : 600;
            letter-spacing: 0.01em;

            @media (max-width: 575.98px) {
                font-size: 1.3rem;
            }
        }

        .mainbtn {
            padding       : 0.4rem 1.1rem;
            font-family   : @font-accent;
            font-size     : 0.75rem;
            font-weight   : 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color         : #fff;
            background    : transparent;
            border        : 1px solid fade(#fff, 70%);
            border-radius : 999px;
            transition    : all 0.25s @ease;

            img {
                width : 10px;
                filter: brightness(0) invert(1);
            }

            &:hover {
                left        : 0;
                color       : @brand-deep-navy;
                background  : @brand-mustard;
                border-color: @brand-mustard;

                img {
                    filter: none;
                }
            }
        }

        @media (max-width: 575.98px) {
            min-height: 180px;
        }
    }
}

/* _________________________________ welcome ______________________________*/

.home .index1-text {
    h4 {
        font-family: @font-accent;
        font-size  : 0.85rem;
        margin-bottom : 0.5rem;
        font-weight   : 600;
        letter-spacing: 0.22em;
        color         : @brand-heritage-gold;
    }

    h2 {
        margin-bottom: 1.5rem;
        font-family  : @font-heading;
        font-size    : 2.75rem;
        color        : @brand-deep-navy;

        &::after {
            content      : '';
            display      : block;
            width        : 64px;
            height       : 3px;
            margin       : 1rem auto 0;
            border-radius: 3px;
            background   : @brand-classic-gold;
        }

        @media (max-width: 575.98px) {
            font-size: 2rem;
        }
    }

    p {
        max-width  : 720px;
        margin     : 0 auto 1.75rem;
        font-size  : 1.05rem;
        line-height: 1.85;
        color      : @ink;
    }

    .btn {
        padding       : 0.65rem 1.8rem;
        font-family   : @font-accent;
        font-size     : 0.8rem;
        font-weight   : 600;
        letter-spacing: 0.1em;
        color         : #fff;
        background    : @brand-premium-navy;
        border-radius : 999px;
        box-shadow    : 0 8px 20px fade(@brand-premium-navy, 25%);
        transition    : all 0.25s @ease;

        &:hover {
            color     : @brand-deep-navy;
            background: @brand-mustard;
            transform : translateY(-2px);
            box-shadow: 0 10px 24px fade(@brand-heritage-gold, 30%);
        }
    }
}

/* _________________________________ accreditations ______________________________*/

.home .index3-part {
    padding   : 3rem 0 1.5rem;
    background: @brand-pale-blue;

    .row > [class*="col-"] {
        margin-bottom: 1.5rem;
    }

    .d-flex {
        height       : 100%;
        padding      : 1.1rem 1.25rem;
        background   : #fff;
        border       : 1px solid fade(@brand-premium-navy, 6%);
        border-radius: @radius;
        box-shadow   : @shadow;
        transition   : transform 0.3s @ease, box-shadow 0.3s @ease;

        &:hover {
            transform : translateY(-4px);
            box-shadow: @shadow-hover;
        }
    }

    img {
        flex-shrink  : 0;
        width        : 76px;
        height       : 76px;
        margin-bottom: 0;
        object-fit   : contain;
    }

    h2 {
        margin     : 0;
        font-family: @font-heading;
        font-size  : 1.02rem;
        font-weight: 600;
        line-height: 1.4;
        color      : @brand-deep-navy;
    }

    h2 > span {
        font-family: @font-body;
        font-size  : 0.85rem;
        font-weight: 600;
        color      : @brand-heritage-gold;

        a {
            font-family   : @font-accent;
            font-size     : 0.8rem;
            letter-spacing: 0.03em;
            color         : @brand-premium-navy;

            i {
                font-size : 0.7rem;
                transition: transform 0.25s @ease;
            }

            &:hover {
                color: @brand-heritage-gold;

                i {
                    transform: translateX(3px);
                }
            }
        }
    }
}

/* _________________________________ programs ______________________________*/

.home section.portfolio {
    .cont {
        position     : relative;
        display      : block;
        float        : none;
        height       : auto;
        overflow     : hidden;
        border-radius: @radius;
        box-shadow   : @shadow;
        transition   : transform 0.35s @ease, box-shadow 0.35s @ease;

        img {
            display   : block;
            width     : 100%;
            transition: transform 0.6s @ease;
        }

        &::after {
            content         : '';
            position        : absolute;
            left            : 0;
            right           : 0;
            bottom          : 0;
            height          : 4px;
            background      : @brand-mustard;
            transform       : scaleX(0);
            transform-origin: left;
            transition      : transform 0.45s @ease;
        }

        &:hover {
            transform : translateY(-6px);
            box-shadow: @shadow-hover;

            img {
                transform: scale(1.04);
            }

            &::after {
                transform: scaleX(1);
            }
        }
    }
}

/* _________________________________ discover ______________________________*/

.home .index6 {
    background: @brand-pale-blue;

    &-box {
        overflow: visible;

        img {
            width     : 170px;
            height    : 170px;
            padding   : 5px;
            object-fit: cover;
            background: linear-gradient(135deg, @brand-premium-navy, @brand-sky-blue);
            box-shadow: 0 12px 28px fade(@brand-deep-navy, 18%);

            @media (max-width: 568px) {
                width : 130px;
                height: 130px;
            }
        }

        a:hover img {
            background: linear-gradient(135deg, @brand-heritage-gold, @brand-mustard);
            transform : translateY(-4px) scale(1.03);
        }
    }

    &-box-text h4 {
        font-family: @font-accent;
        font-size  : 1rem;
        margin-top    : 0.4rem;
        margin-bottom : 0.5rem;
        font-weight   : 600;
        color         : @brand-deep-navy;
    }
}

/* _________________________________ leadership ______________________________*/

.leader-card {
    position     : relative;
    overflow     : hidden;
    padding      : 2rem;
    background   : #fff;
    border-top   : 4px solid @brand-heritage-gold;
    border-radius: 16px;
    box-shadow   : @shadow;

    &::before {
        content    : '\201C';
        position   : absolute;
        top        : -0.75rem;
        right      : 1.25rem;
        font-family: Georgia, serif;
        font-size  : 8rem;
        line-height: 1;
        color      : fade(@brand-premium-navy, 7%);
    }

    &__head {
        display       : flex;
        align-items   : center;
        gap           : 1.25rem;
        margin-bottom : 1.25rem;
        padding-bottom: 1.25rem;
        border-bottom : 1px solid fade(@brand-premium-navy, 10%);
    }

    &__photo {
        flex-shrink  : 0;
        width        : 110px;
        height       : 110px;
        object-fit   : cover;
        border       : 4px solid #fff;
        border-radius: 50%;
        box-shadow   : 0 0 0 3px @brand-classic-gold, 0 10px 24px fade(@brand-deep-navy, 15%);
    }

    &__title {
        margin     : 0 0 0.35rem;
        font-family: @font-heading;
        font-size  : 1.35rem;
        font-weight: 600;
        color      : @brand-deep-navy;
    }

    &__name {
        margin     : 0;
        font-family: @font-accent;
        font-size  : 0.95rem;
        font-weight: 700;
        color      : @brand-premium-navy;
    }

    &__role {
        margin        : 0.2rem 0 0;
        font-family   : @font-accent;
        font-size     : 0.72rem;
        font-weight   : 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color         : @brand-heritage-gold;
    }

    &__body p {
        margin-bottom: 1rem;
        font-size    : 0.97rem;
        line-height  : 1.8;
        color        : @ink;

        &:last-child {
            margin-bottom: 0;
        }
    }

    &__more {
        font-weight: 700;
        white-space: nowrap;
        color      : @brand-premium-navy;

        &:hover {
            color          : @brand-heritage-gold;
            text-decoration: none;
        }
    }

    @media (max-width: 575.98px) {
        padding: 1.5rem;

        &__head {
            flex-direction: column;
            text-align    : center;
        }
    }
}

/* _________________________________ testimonials ______________________________*/

.home-testimonials {
    background: @tint;

    &__label {
        display       : flex;
        align-items   : center;
        gap           : 0.75rem;
        margin        : 0 0.75rem 0.5rem;
        font-family   : @font-accent;
        font-size     : 0.8rem;
        font-weight   : 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color         : @brand-heritage-gold;

        &::after {
            content   : '';
            flex      : 1;
            height    : 1px;
            background: fade(@brand-premium-navy, 12%);
        }
    }

    // equal-height slides so the arrows don't jump between short and long quotes
    .owl-stage {
        display: flex;
    }

    .owl-item {
        display: flex;
    }

    .testimonial-item {
        display: flex;
        width  : 100%;
        padding: 0.75rem;
    }

    .testimonial-card {
        position       : relative;
        display        : flex;
        flex           : 1;
        flex-direction : column;
        justify-content: space-between;
        padding        : 1.75rem 2rem;
        background     : #fff;
        border-radius  : 16px;
        box-shadow     : @shadow;

        // both carousels sit side by side; a shared minimum keeps their arrows level
        @media (min-width: 992px) {
            min-height: 350px;
        }

        &::before {
            content    : '\201C';
            display    : block;
            height     : 2.4rem;
            font-family: Georgia, serif;
            font-size  : 4.5rem;
            line-height: 1;
            color      : @brand-classic-gold;
        }

        &__quote {
            margin-bottom: 1.5rem;
            font-size    : 0.97rem;
            line-height  : 1.8;
            color        : @ink;
        }

        &__person {
            display    : flex;
            align-items: center;
            gap        : 1rem;
            padding-top: 1.25rem;
            border-top : 1px solid fade(@brand-premium-navy, 10%);
        }

        &__name {
            margin     : 0;
            font-family: @font-heading;
            font-size  : 1rem;
            font-weight: 600;
            color      : @brand-deep-navy;
        }

        &__meta {
            font-family: @font-accent;
            font-size  : 0.78rem;
            font-weight   : 600;
            letter-spacing: 0.03em;
            color         : @brand-heritage-gold;
        }
    }

    // owl forces carousel images to full width
    .owl-carousel .owl-item img.testimonial-card__photo {
        flex-shrink  : 0;
        width        : 64px;
        height       : 64px;
        object-fit   : cover;
        border-radius: 50%;
        box-shadow   : 0 0 0 3px #fff, 0 0 0 5px fade(@brand-classic-gold, 70%);
    }

    .owl-carousel .owl-nav {
        display        : flex;
        justify-content: flex-end;
        gap            : 0.5rem;
        margin         : 0.25rem 0.75rem 0;

        button.owl-prev,
        button.owl-next {
            display        : inline-flex;
            align-items    : center;
            justify-content: center;
            width          : 42px;
            height         : 42px;
            background     : @brand-premium-navy;
            border-radius  : 50%;
            transition     : background 0.25s @ease, transform 0.25s @ease;

            img {
                width: 14px;
            }

            &:hover {
                background: @brand-mustard;
                transform : translateY(-2px);

                img {
                    filter: brightness(0);
                }
            }

            &:focus {
                outline: none;
            }

            &:focus-visible {
                box-shadow: 0 0 0 3px fade(@brand-mustard, 60%);
            }
        }
    }
}

/* _________________________________ news & events ______________________________*/

.home .home-news {
    .row > [class*="col-"] {
        margin-bottom: 1.5rem;
    }

    .index7-box {
        position      : relative;
        display       : flex;
        flex-direction: column;
        height        : 100%;
        overflow      : hidden;
        background    : #fff;
        border-radius : @radius;
        box-shadow    : @shadow;
        transition    : transform 0.3s @ease, box-shadow 0.3s @ease;

        &:hover {
            transform : translateY(-5px);
            box-shadow: @shadow-hover;

            .index7-media img {
                transform: scale(1.05);
            }
        }
    }

    .index7-media {
        height    : 190px;
        overflow  : hidden;
        background: @brand-pale-blue;

        img {
            width     : 100%;
            height    : 100%;
            object-fit: cover;
            color     : transparent; // hides alt text if an image fails to load
            transition: transform 0.6s @ease;
        }
    }

    .index7-date {
        position     : absolute;
        top          : 14px;
        left         : 14px !important;
        z-index      : 2;
        float        : none;
        padding      : 0.35rem 0.7rem;
        color        : @brand-deep-navy;
        background   : @brand-mustard;
        border-radius: 8px;
        box-shadow   : 0 6px 14px fade(@brand-deep-navy, 20%);

        h5 {
            font-family   : @font-accent;
            font-size     : 0.78rem;
            font-weight   : 700;
            letter-spacing: 0.02em;
        }
    }

    .index7-text {
        flex      : 1;
        min-height: 0;
        padding   : 1.25rem 1.25rem 1.4rem;
        box-shadow: none;

        h4 {
            font-family: @font-heading;
            font-size  : 1.02rem;
            margin-bottom: 0.6rem;
            font-weight  : 600;
            line-height  : 1.45;

            a {
                display           : -webkit-box;
                overflow          : hidden;
                line-height       : inherit;
                color             : @brand-deep-navy;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;

                &:hover {
                    color          : @brand-premium-navy;
                    text-decoration: none;
                }
            }
        }

        p {
            margin     : 0;
            font-size  : 0.9rem;
            line-height: 1.7;
            color      : @ink-muted;

            span {
                font-family: @font-accent;
                font-size  : 0.75rem;
                display      : inline-block;
                margin-top   : 0.6rem;
                padding      : 0.2rem 0.65rem;
                font-weight  : 600;
                color        : @brand-premium-navy !important;
                background   : @brand-pale-blue;
                border-radius: 999px;
            }
        }
    }
}