/* =========================================================
   CAMPUS OVERVIEW
========================================================= */

.campus-overview{
    position:relative;
    overflow:hidden;
    background:linear-gradient(145deg,#f7f7fc,#fff 48%,#f3f2fa);
}

.campus-overview::before{
    position:absolute;
    top:-180px;
    left:-170px;
    width:420px;
    height:420px;
    border-radius:50%;
    content:"";
    background:radial-gradient(
        circle,
        rgba(98,102,234,.1),
        transparent 70%
    );
    pointer-events:none;
}

.campus-overview-heading{
    position:relative;
    z-index:1;
    max-width:850px;
    margin:0 auto 40px;
    text-align:center;
}

.campus-overview-heading .kicker{
    justify-content:center;
}

.campus-overview-heading .section-title{
    margin-top:12px;
}

.campus-overview-heading p{
    max-width:720px;
    margin:14px auto 0;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
}

.campus-overview-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

/* Institution Card */
.campus-overview-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--line);
    border-top:4px solid var(--rose);
    border-radius:14px;
    background:#fff;
    box-shadow:0 12px 32px rgba(33,34,84,.08);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.campus-overview-card:nth-child(2){
    border-top-color:var(--coral);
}

.campus-overview-card:nth-child(3){
    border-top-color:var(--orchid);
}

.campus-overview-card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 44px rgba(33,34,84,.15);
}

/* Institution Icon */
.campus-overview-icon{
    display:grid;
    width:58px;
    height:58px;
    margin:25px 25px 0;
    place-items:center;
    border-radius:14px;
    background:rgba(98,102,234,.11);
    color:var(--rose);
    font-size:23px;
}

.campus-overview-card:nth-child(2) .campus-overview-icon{
    background:rgba(238,118,71,.13);
    color:#c9572b;
}

.campus-overview-card:nth-child(3) .campus-overview-icon{
    background:rgba(144,82,168,.12);
    color:var(--orchid);
}

/* Institution Content */
.campus-overview-content{
    position:relative;
    flex:1;
    padding:22px 25px 25px;
}

/* Same number style as Schools and Programmes */
.campus-overview-number
{
    display:grid;
    width:36px;
    height:36px;
    place-items:center;
    border:1px solid rgba(98,102,234,.20);
    border-radius:50%;
    background:rgba(98,102,234,.09);
    color:var(--rose);
    font-size:12px;
    font-weight:800;
    line-height:1;
}

/* Institution number position */
.campus-overview-number{
    position:absolute;
    top:-48px;
    right:24px;
}



/* Responsive */
@media(max-width:767px){
    .campus-overview-number,
    .fee-card-number{
        width:34px;
        height:34px;
        font-size:11px;
    }

    .campus-overview-number{
        top:-42px;
    }
}
.campus-overview-content h3{
    margin:0;
    color:var(--plum);
    font-size:20px;
    font-weight:800;
    line-height:1.4;
}

.campus-overview-content p{
    display:inline-flex;
    margin:13px 0 0;
    padding:5px 11px;
    border:1px solid #b8e4ca;
    border-radius:20px;
    background:#e8f8ef;
    color:#08783f;
    font-size:12px;
    font-weight:800;
    line-height:1.2;
}

/* Action Buttons */
.campus-overview-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    border-top:1px solid var(--line);
}

.campus-action-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:0;
    min-height:55px;
    padding:13px 10px;
    border:0;
    border-radius:0;
    color:#fff;
    font-family:"Inter","Segoe UI",Arial,sans-serif;
    font-size:13px;
    font-weight:750;
    line-height:1.25;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:
        background .22s ease,
        color .22s ease,
        box-shadow .22s ease;
}

.campus-action-button span{
    min-width:0;
}

/* Website Button */
.campus-website-button{
    border-right:1px solid rgba(255,255,255,.28);
    background:linear-gradient(135deg,#08783f,#0ca65a);
    color:#fff;
}

.campus-website-button:hover{
    background:linear-gradient(135deg,#065d31,#087f45);
    color:#fff;
}

/* Video Button */
.campus-video-button{
    width:auto;
    background:linear-gradient(135deg,#6266ea,#4145bd);
    color:#fff;
}

.campus-video-button:hover{
    background:linear-gradient(135deg,#ee7647,#cf4c20);
    color:#fff;
}

/* Button Icons */
.campus-action-button i,
.campus-video-button i{
    flex:0 0 auto;
    color:#fff;
    font-size:16px;
}

.campus-action-button:hover i,
.campus-video-button:hover i{
    color:#fff;
}

.campus-action-button:focus-visible{
    position:relative;
    z-index:2;
    outline:3px solid #d7b875;
    outline-offset:-3px;
}

/* =========================================================
   CAMPUS OVERVIEW RESPONSIVE
========================================================= */

@media(max-width:991px){
    .campus-overview-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .campus-overview-card:last-child{
        grid-column:1/-1;
        width:calc(50% - 11px);
        margin:0 auto;
    }
}

@media(max-width:767px){
    .campus-overview-heading{
        margin-bottom:28px;
    }

    .campus-overview-heading p{
        font-size:14px;
    }

    .campus-overview-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .campus-overview-card:last-child{
        grid-column:auto;
        width:100%;
    }

    .campus-overview-icon{
        width:50px;
        height:50px;
        margin:20px 20px 0;
        font-size:20px;
    }

    .campus-overview-content{
        padding:18px 20px 22px;
    }

    .campus-overview-number{
        top:-43px;
        right:20px;
        font-size:23px;
    }

    .campus-overview-content h3{
        font-size:17px;
    }

    .campus-action-button{
        min-height:50px;
        padding:12px 8px;
        font-size:12px;
    }

    .campus-action-button i{
        font-size:15px;
    }
}

@media(max-width:380px){
    .campus-action-button{
        gap:5px;
        padding:11px 5px;
        font-size:11px;
    }
}

@media(prefers-reduced-motion:reduce){
    .campus-overview-card,
    .campus-action-button{
        transition:none;
    }

    .campus-overview-card:hover{
        transform:none;
    }
}