/* Visual enhancements using the expanded SASA photography library. */
.hero-media {
    background-image: url('../images/IMG_2705.JPG');
    background-position: center center
}

.page-hero-programs {
    background-image: url('../images/IMG_6045.webp')
}

.page-hero-team {
    background-image: url('../images/IMG_7937.webp')
}

.page-hero-gallery {
    background-image: url('../images/IMG_8072.webp');
    background-position: center 45%
}

.page-hero-contact {
    background-image: url('../images/IMG_2978.webp');
    background-position: center 45%
}

.training-visual {
    background-image: linear-gradient(90deg,rgba(2,8,5,.96),rgba(2,8,5,.18)),url('../images/IMG_2978.webp');
    background-position: center 48%
}

.wide-photo {
    background-image: linear-gradient(90deg,rgba(3,11,7,.94),rgba(3,11,7,.18)),url('../images/IMG_7937.webp');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.leadership-grid article {
    min-height: 0;
    padding: 0;
    background: #fff;
    border-top: 4px solid var(--green);
    display: block;
    overflow: hidden;
    transition: background-color .3s ease,transform .3s ease,border-color .3s ease
}

.leadership-grid article:hover {
    background: var(--deep);
    border-color: var(--lime);
    transform: translateY(-6px)
}

.leadership-grid article:hover h3 {
    color: #fff
}

.leadership-grid article:hover .role {
    color: var(--lime)
}

.leadership-grid article a {
    color: var(--green);
    font-weight: 800
}

.leadership-grid article:hover a {
    color: var(--lime)
}

.official-copy {
    min-height: 150px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.official-photo {
    height: 245px;
    background-color: #e8ece9;
    background-repeat: no-repeat;
    filter: saturate(.88);
    transition: filter .3s ease,transform .4s ease
}

.leadership-grid article:hover .official-photo {
    filter: saturate(1.08);
    transform: scale(1.025)
}

.official-shoaib {
    background-image: url('../images/new/chairman.jpeg');
    background-size: cover;
    background-position: center 28%
}

.official-ghulam {
    background-image: url('../images/ghulam-sarwar-transparent.png');
    background-size: cover;
    background-position: center 18%
}

.official-faseeh {
    background-image: url('../images/faseeh-ullah-khan-transparent-ru8bmz88s84iuidh5b8pu2w3iqhv778zuuo6zdt0ks.png')
}

.official-shariq {
    background-image: url('../images/shariq-transparent-ru8bn21rcq8dtc9dougljk6haw3yuak6v8mnf7ou24.png')
}

.official-imran {
    background-image: url('../images/imran-mansoori-transparent-ru8bn5t442dj3s3x2w33tj8boflfp2z47r8lcbj9d8.png')
}

.official-hassan {
    background-image: url('../images/hassan-ahmed-transparent-ru8bn9kgveioe7yggxpm3ia61z2wjve1k9uj9fdooc.png')
}

.official-arham {
    background-image: url('../images/arham-transparent-ru8bndbtmqntonszuzc4dhc0fikdensywsgh6j83zg.png')
}

.official-faseeh,.official-shariq,.official-imran,.official-arham {
    background-size: contain;
    background-position: center bottom
}

.official-zeeshan {
    background-image: url('../images/new/zeeshan.jpeg');
    background-size: cover;
    background-position: center 22%
}

.official-hassan {
    background-image: url('../images/new/ChatGPT Image Oct 30, 2026, 02_48_11 AM.png');
    background-size: contain;
    background-position: center 18%;
    background-color: #FDFDFD;
}

.official-umer {
    background-image: url('../images/new/umer shafi.jpeg');
    background-size: cover;
    background-position: center 18%
}

.official-zaar {
    background-image: url('../images/new/zaarali.jpeg');
    background-size: cover;
    background-position: center 18%
}

.contact-honeypot {
    position: absolute!important;
    left: -10000px!important;
    width: 1px!important;
    height: 1px!important;
    overflow: hidden!important
}

.club-alert {
    border-radius: 0;
    border: 0;
    padding: 1rem 1.25rem
}

.club-alert.alert-success {
    background: #e5f8ed;
    color: #064523
}

.club-alert.alert-danger {
    background: #fff0ef;
    color: #7c1812
}

.masonry-gallery {
    display: block;
    columns: 3 300px;
    column-gap: 1rem
}

.gallery-item,.gallery-item.wide,.gallery-item.tall {
    display: inline-block;
    width: 100%;
    height: auto;
    grid-column: auto;
    grid-row: auto;
    margin: 0 0 1rem;
    break-inside: avoid;
    vertical-align: top
}

.gallery-item img {
    width: 100%;
    height: auto;
    object-fit: contain
}

.gallery-item.is-hidden {
    display: none
}

@media(max-width: 991.98px) {
    .club-navbar {
        position:sticky;
        top: 0;
        z-index: 1050
    }

    .club-navbar .navbar-collapse {
        position: fixed;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100dvh;
        padding: 7.25rem 1.5rem 2rem;
        background: var(--deep);
        display: block!important;
        visibility: hidden;
        opacity: 0;
        transform: translateX(-100%);
        transition: transform .42s cubic-bezier(.77,0,.18,1),opacity .25s ease,visibility 0s linear .42s;
        overflow-y: auto
    }

    .club-navbar .navbar-collapse.show,.club-navbar .navbar-collapse.collapsing {
        visibility: visible;
        opacity: 1;
        transform: translateX(0);
        transition-delay: 0s
    }

    .club-navbar .navbar-nav {
        min-height: calc(100dvh - 9.25rem);
        justify-content: center;
        align-items: stretch!important
    }

    .club-navbar .navbar-nav .nav-link {
        font: 800 1.35rem var(--heading);
        padding: 1rem .25rem;
        border-bottom: 1px solid rgba(255,255,255,.1)
    }

    .club-navbar .navbar-nav .nav-link:after {
        left: .25rem;
        bottom: 0
    }

    .club-navbar .navbar-nav .nav-link:hover:after,.club-navbar .navbar-nav .nav-link.active:after {
        right: .25rem
    }

    .club-navbar .navbar-nav .btn {
        margin-top: 1.25rem;
        font-size: .95rem;
        padding: 1.1rem 1.4rem
    }

    .navbar-toggler {
        z-index: 2
    }

    body.menu-open {
        overflow: hidden
    }
}

@media(max-width: 767.98px) {
    .gallery-item {
        height:auto;
        margin-bottom: 1rem
    }

    .official-photo {
        height: 300px
    }
}

/* Homepage multi-image carousel */
.club-slider {
    --gap: 1rem;
    position: relative
}

.club-slider-viewport {
    overflow: hidden
}

.club-slider-track {
    display: flex;
    gap: var(--gap);
    transition: transform .65s cubic-bezier(.22,.61,.36,1);
    will-change: transform
}

.club-slide {
    position: relative;
    height: 520px;
    margin: 0;
    overflow: hidden;
    background: var(--deep)
}

.club-slide:nth-child(3n+1) {
    flex: 0 0 calc(46% - .67rem)
}

.club-slide:nth-child(3n+2) {
    flex: 0 0 calc(24% - .67rem)
}

.club-slide:nth-child(3n+3) {
    flex: 0 0 calc(30% - .67rem)
}

.club-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .55s ease
}

.club-slide:hover img {
    transform: scale(1.035)
}

.club-slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem
}

.club-slider-nav {
    display: flex;
    gap: .5rem
}

.club-slider-nav button {
    width: 48px;
    height: 48px;
    border: 1px solid #bec9c1;
    background: transparent;
    color: var(--deep);
    transition: .25s
}

.club-slider-nav button:hover,.club-slider-nav button:focus-visible {
    background: var(--deep);
    border-color: var(--deep);
    color: var(--lime)
}

.club-slider-dots {
    display: flex;
    gap: .55rem
}

.club-slider-dots button {
    width: 28px;
    height: 4px;
    padding: 0;
    border: 0;
    background: #c8d0cb;
    transition: .3s
}

.club-slider-dots button.active {
    width: 50px;
    background: var(--green)
}

@media(max-width: 991.98px) {
    .club-slide,.club-slide:nth-child(3n+1),.club-slide:nth-child(3n+2),.club-slide:nth-child(3n+3) {
        flex:0 0 calc(50% - .5rem);
        height: 460px
    }
}

@media(max-width: 575.98px) {
    .club-slide,.club-slide:nth-child(3n+1),.club-slide:nth-child(3n+2),.club-slide:nth-child(3n+3) {
        flex:0 0 100%;
        height: 480px
    }

    .club-slider-controls {
        align-items: flex-end
    }

    .club-slider-dots button {
        width: 18px
    }

    .club-slider-dots button.active {
        width: 32px
    }
}

@media(prefers-reduced-motion:reduce) {
    .club-slider-track {
        transition: none
    }
}

/* Homepage match-result slider and tournament highlight */
.result-slider-viewport {
    overflow: hidden;
    min-width: 0
}

.result-slider-track {
    display: flex;
    transition: transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: transform
}

.result-slide {
    flex: 0 0 100%;
    margin: 0
}

.result-slide img {
    width: 100%;
    height: 470px;
    object-fit: cover;
    object-position: center 28%
}

.result-slider > .result-slider-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    gap: 12px;
}

.result-slider-controls>button {
    width: 48px;
    height: 48px;
    border: 1px solid #426056;
    background: transparent;
    color: var(--ink);
    transition: .25s
}

.result-slider-controls>button:hover,.result-slider-controls>button:focus-visible {
    background: var(--lime);
    border-color: var(--lime);
    color: var(--ink)
}

.tournament-section {
    background: #fff
}

.tournament-poster {
    width: 100%;
    max-height: 720px;
    object-fit: cover;
    object-position: center
}

.tournament-subtitle {
    font: 800 2rem var(--heading);
    text-transform: uppercase;
    margin: 2rem 0 1rem
}

.tournament-results {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #d6ded8
}

.tournament-results li {
    display: grid;
    grid-template-columns: 165px 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid #d6ded8
}

.tournament-results strong {
    font: 800 1rem var(--heading);
    text-transform: uppercase;
    color: var(--green);
    letter-spacing: .04em
}

.tournament-results span {
    font-weight: 700;
    color: var(--ink)
}

.tournament-results em {
    font-style: normal;
    color: #52635a
}

@media(max-width: 767.98px) {
    .result-slide img {
        height: 100%;
    }

    .tournament-results li {
        grid-template-columns: 1fr;
        gap: .2rem
    }
}

@media(prefers-reduced-motion:reduce) {
    .result-slider-track {
        transition: none
    }
}

/* Keep the tournament name together on its own line. */
.tournament-title-event {
    display: block;
    white-space: nowrap;
}
@media (max-width: 1199.98px) {
    .tournament-title-event { font-size: .88em; }
}
@media (max-width: 575.98px) {
    .tournament-title-event { font-size: .80em; }
}