/*===================================================
    Leadership page
    (shared inner-hero styles live in common.css)
===================================================*/

/*===inner hero===*/
.innerHeroSec{
    .innerHeroCont{
        flex: 1;
        .innerHeroSub{
            max-width: 880px;
        }
    }
}

/*===bothra family - heading left, copy right===*/
.familySec{
    .headingWrap{
        align-items: center;
        .headingLeft{
            .tagHolder{
                max-width: 100%;
            }
        }
        .headingRight{
            p{
                margin: 0;
                color: #1d2a36;
                font-size: 15px;
                line-height: 1.75;
                letter-spacing: 0.2px;
            }
        }
    }
}
@media (max-width: 991px){
    .familySec{
        .headingWrap{
            .headingLeft,
            .headingRight{
                width: 100%;
            }
            .headingRight{
                padding-left: 0;
                p{
                    margin-top: 26px;
                }
            }
        }
    }
}

/*===leadership cards - photo grid with hover bios===*/
.leaderSec{
    .headingWrap{
        .tagHolder{
            max-width: 100%;
        }
    }
    .leaderGrid{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
    }
    .leaderCard{
        position: relative;
        .leaderImg{
            border-radius: 14px;
            overflow: hidden;
            img{
                display: block;
                width: 100%;
                object-fit: cover;
            }
        }
        .leaderMeta{
            text-align: center;
            padding-top: 18px;
            .leaderName{
                display: block;
                color: #85aacd;
                font-size: 20px;
                font-weight: 700;
                letter-spacing: 0.2px;
            }
            .leaderRole{
                display: block;
                margin-top: 4px;
                color: #1d2a36;
                font-size: 14px;
            }
        }
        /* blue bio panel revealed on hover / focus */
        .leaderBio{
            position: absolute;
            inset: 0;
            z-index: 2;
            display: flex;
            flex-direction: column;
            padding: 26px 18px;
            border-radius: 14px;
            background: #1667a6;
            text-align: center;
            overflow-y: auto;
            scrollbar-width: none;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
            &::-webkit-scrollbar{
                display: none;
            }
            .bioName{
                display: block;
                color: #ffffff;
                font-size: 30px;
                font-weight: 700;
                margin-bottom: 10px;
                line-height: 1;
            }
            .bioRole{
                display: block;
                color: #ffffffcc;
                font-size: 22px;
                margin-bottom: 14px;
            }
            p{
                margin: 0;
                color: #ffffffd9;
                font-size: 18px;
                line-height: 1.6;
                letter-spacing: 0.2px;
            }
        }
        &:hover .leaderBio,
        &:focus-within .leaderBio{
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
    }
}
@media (max-width: 1560px){
    .leaderSec {
        .leaderCard {
            .leaderBio {
                p {
                    font-size: 14px;
                }
                .bioRole {
                    font-size: 16px;
                }
                .bioName {
                    font-size: 20px;
                }
            }
        }
    }
}
@media (max-width: 991px){
    .leaderSec{
        .leaderGrid{
            grid-template-columns: repeat(3, 1fr);
        }
    }
}
@media (max-width: 767px){
    .leaderSec{
        .leaderGrid{
            grid-template-columns: repeat(2, 1fr);
        }
    }
}

/*===founder philosophy - blue panel with quote card===*/
.beliefSec{
    .beliefPanel{
        background-color: #1667a6;
    }
    .headingWrap{
        .tagHolder{
            max-width: 100%;
        }
    }
    .beliefCard{
        max-width: 1105px;
        margin: 0 auto;
        padding: 50px 60px;
        background-color: #fff;
        border-radius: 25px;
        box-shadow: 0 0 55px 13px rgb(0 0 0 / 13%);
        .beliefQuoteIcon{
            font-size: 46px;
            color: #b9cede;
            margin-bottom: 20px;
        }
        .beliefQuote{
            margin: 0 0 40px;
            padding-left: 40px;
            color: #7e7e7e;
            font-size: 30px;
            font-weight: 500;
            line-height: 1.45;
            letter-spacing: 0.2px;
        }
        .beliefAuthor{
            display: flex;
            align-items: center;
            gap: 22px;
            padding-left: 40px;
            .beliefImg{
                flex-shrink: 0;
                width: 90px;
                height: 90px;
                border-radius: 50%;
                overflow: hidden;
                border: 3px solid #e3eaf2;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    object-position: top center;
                }
            }
            .beliefMeta{
                .beliefName{
                    display: block;
                    font-size: 34px;
                    font-weight: 700;
                    color: var(--blue);
                    line-height: 1.1;
                }
                .beliefRole{
                    display: block;
                    margin-top: 6px;
                    font-size: 16px;
                    letter-spacing: 0.2px;
                    color: #1d2a36;
                }
            }
        }
    }
}
@media (max-width: 767px){
    .beliefSec{
        .beliefCard{
            padding: 30px 24px;
            .beliefQuote{
                padding-left: 0;
                font-size: 21px;
            }
            .beliefAuthor{
                padding-left: 0;
                .beliefImg{
                    width: 66px;
                    height: 66px;
                }
                .beliefMeta .beliefName{
                    font-size: 24px;
                }
            }
        }
    }
}