/* =========================================================
   NEW AFRICA INTERNATIONAL SCHOOL
   GALLERY PAGE
========================================================= */


/* =========================================================
   HERO
========================================================= */

.gallery-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: var(--navy-dark);

    color: white;
}


.gallery-hero-image {
    position: absolute;
    inset: 0;

    background:
        url("../assets/images/gallery-hero.jpg")
        center / cover
        no-repeat;
}


.gallery-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4,26,45,.96) 0%,
            rgba(4,26,45,.83) 43%,
            rgba(4,26,45,.34) 75%,
            rgba(4,26,45,.1) 100%
        );
}


.gallery-hero-inner {
    position: relative;
    z-index: 3;

    min-height: 720px;

    padding-bottom: 70px;

    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: 70px;
}


.gallery-hero-content {
    max-width: 900px;
}


.gallery-breadcrumb {
    display: flex;

    gap: 10px;

    margin-bottom: 46px;

    color: rgba(255,255,255,.44);

    font-size: .7rem;
}


.gallery-breadcrumb a {
    color: rgba(255,255,255,.84);
}


.gallery-eyebrow {
    margin-bottom: 15px;

    color: var(--gold);

    font-size: .73rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 2px;
}


.gallery-hero h1 {
    max-width: 900px;

    margin-bottom: 27px;

    font-size: clamp(4.6rem, 7vw, 7.3rem);

    line-height: .93;

    letter-spacing: -6px;
}


.gallery-hero h1 span {
    display: block;

    color: var(--gold);
}


.gallery-hero-description {
    max-width: 640px;

    color: rgba(255,255,255,.7);

    font-size: 1rem;

    line-height: 1.85;
}


.gallery-hero-button {
    min-height: 56px;

    margin-top: 35px;

    padding: 0 27px;

    border-radius: 8px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    background: var(--blue);

    color: white;

    font-size: .82rem;

    font-weight: 800;

    transition: .3s;
}


.gallery-hero-button:hover {
    transform: translateY(-3px);

    background: var(--blue-light);
}


.gallery-hero-note {
    width: 270px;

    flex: 0 0 270px;

    padding: 28px;

    border: 1px solid rgba(255,255,255,.15);

    border-radius: 15px;

    background: rgba(255,255,255,.08);

    backdrop-filter: blur(12px);
}


.gallery-hero-note span {
    display: block;

    margin-bottom: 12px;

    color: var(--gold);

    font-size: .61rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.3px;
}


.gallery-hero-note strong {
    font-size: 1.2rem;

    line-height: 1.5;
}



/* =========================================================
   INTRO
========================================================= */

.gallery-intro {
    padding: 80px 0;

    background: var(--gold);
}


.gallery-intro-grid {
    display: grid;

    grid-template-columns: 1fr .65fr;

    gap: 100px;

    align-items: center;
}


.gallery-intro-grid > div:first-child > p {
    margin-bottom: 9px;

    color: rgba(16,47,80,.65);

    font-size: .65rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.5px;
}


.gallery-intro h2 {
    color: var(--navy);

    font-size: clamp(2.7rem, 4vw, 4rem);

    line-height: 1.05;

    letter-spacing: -3px;
}


.gallery-intro-grid > div:last-child p {
    color: rgba(16,47,80,.7);

    font-size: .85rem;

    line-height: 1.8;
}



/* =========================================================
   FEATURED
========================================================= */

.featured-gallery {
    padding: 110px 0;

    background: #f6f9fc;
}


.featured-grid {
    display: grid;

    grid-template-columns: 1.35fr 1fr;

    grid-template-rows: 300px 300px;

    gap: 14px;
}


.featured-photo {
    position: relative;

    padding: 0;

    border: 0;

    border-radius: 15px;

    overflow: hidden;

    background: var(--navy);

    cursor: pointer;

    text-align: left;
}


.featured-large {
    grid-row: 1 / 3;
}


.featured-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s;
}


.featured-photo:hover img {
    transform: scale(1.055);
}


.featured-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(4,25,44,.9),
            rgba(4,25,44,.05) 65%
        );
}


.featured-content {
    position: absolute;

    z-index: 3;

    left: 30px;
    bottom: 28px;

    color: white;
}


.featured-content span {
    display: block;

    margin-bottom: 5px;

    color: var(--gold);

    font-size: .62rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.4px;
}


.featured-content h3 {
    font-size: 1.55rem;
}



/* =========================================================
   MAIN GALLERY
========================================================= */

.main-gallery {
    padding: 115px 0;

    background: white;
}


.gallery-heading {
    display: grid;

    grid-template-columns: 1.1fr .6fr;

    gap: 80px;

    align-items: flex-end;

    margin-bottom: 45px;
}


.gallery-label {
    margin-bottom: 15px;

    color: var(--blue);

    font-size: .72rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 2px;
}


.gallery-heading h2 {
    color: var(--navy);

    font-size: clamp(3rem, 5vw, 5rem);

    line-height: 1;

    letter-spacing: -4px;
}


.gallery-heading > p {
    color: var(--muted);

    font-size: .86rem;

    line-height: 1.8;
}



/* FILTERS */

.gallery-filters {
    margin-bottom: 40px;

    display: flex;

    flex-wrap: wrap;

    gap: 9px;
}


.gallery-filter {
    min-height: 42px;

    padding: 0 19px;

    border: 1px solid var(--border);

    border-radius: 30px;

    background: white;

    color: var(--muted);

    font: inherit;

    font-size: .7rem;

    font-weight: 700;

    cursor: pointer;

    transition: .3s;
}


.gallery-filter:hover {
    border-color: var(--blue);

    color: var(--blue);
}


.gallery-filter.active {
    border-color: var(--blue);

    background: var(--blue);

    color: white;
}



/* PHOTO GRID */

.photo-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    grid-auto-rows: 280px;

    gap: 12px;

    grid-auto-flow: dense;
}


.gallery-photo {
    position: relative;

    padding: 0;

    border: 0;

    border-radius: 12px;

    overflow: hidden;

    background: #dfe8ef;

    cursor: pointer;

    text-align: left;
}


.gallery-photo.tall {
    grid-row: span 2;
}


.gallery-photo.wide {
    grid-column: span 2;
}


.gallery-photo.hidden {
    display: none;
}


.gallery-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .55s ease;
}


.gallery-photo:hover img {
    transform: scale(1.06);
}


.photo-hover {
    position: absolute;

    inset: 0;

    padding: 25px;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    opacity: 0;

    color: white;

    background:
        linear-gradient(
            to top,
            rgba(4,25,44,.9),
            rgba(4,25,44,.08) 65%
        );

    transition: opacity .3s;
}


.gallery-photo:hover .photo-hover {
    opacity: 1;
}


.photo-hover span {
    margin-bottom: 4px;

    color: var(--gold);

    font-size: .6rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 1.3px;
}


.photo-hover h3 {
    max-width: 80%;

    font-size: 1.2rem;
}


.photo-hover b {
    position: absolute;

    right: 24px;
    bottom: 24px;

    width: 37px;
    height: 37px;

    border: 1px solid rgba(255,255,255,.4);

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-size: 1.1rem;
}



/* =========================================================
   MEMORY
========================================================= */

.gallery-memory {
    position: relative;

    min-height: 620px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: white;
}


.gallery-memory-image {
    position: absolute;

    inset: 0;

    background:
        url("../assets/images/gallery-memory.jpg")
        center / cover
        no-repeat;
}


.gallery-memory-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,28,48,.94),
            rgba(5,28,48,.7),
            rgba(5,28,48,.2)
        );
}


.gallery-memory-content {
    position: relative;

    z-index: 3;
}


.gallery-memory-content > span {
    display: block;

    margin-bottom: 16px;

    color: var(--gold);

    font-size: .7rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 2px;
}


.gallery-memory h2 {
    max-width: 900px;

    margin-bottom: 26px;

    font-size: clamp(3.6rem, 6vw, 6rem);

    line-height: .97;

    letter-spacing: -4.5px;
}


.gallery-memory p {
    max-width: 600px;

    color: rgba(255,255,255,.67);

    font-size: .91rem;

    line-height: 1.8;
}



/* =========================================================
   MORE MOMENTS
========================================================= */

.gallery-more {
    padding: 115px 0;

    background: #f6f9fc;
}


.gallery-more-heading {
    margin-bottom: 50px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: 40px;
}


.gallery-more-heading h2 {
    color: var(--navy);

    font-size: clamp(3rem, 4.8vw, 4.7rem);

    line-height: 1;

    letter-spacing: -4px;
}


.mini-gallery {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 12px;
}


.mini-photo {
    height: 350px;

    padding: 0;

    border: 0;

    border-radius: 12px;

    overflow: hidden;

    cursor: pointer;
}


.mini-photo:nth-child(2),
.mini-photo:nth-child(4) {
    margin-top: 40px;
}


.mini-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s;
}


.mini-photo:hover img {
    transform: scale(1.055);
}



/* =========================================================
   FINAL CTA
========================================================= */

.gallery-final-cta {
    position: relative;

    min-height: 550px;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: white;
}


.gallery-final-image {
    position: absolute;

    inset: 0;

    background:
        url("../assets/images/gallery-final.jpg")
        center / cover
        no-repeat;
}


.gallery-final-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5,28,48,.94),
            rgba(5,28,48,.72),
            rgba(5,28,48,.24)
        );
}


.gallery-final-content {
    position: relative;

    z-index: 3;
}


.gallery-final-content > p {
    margin-bottom: 15px;

    color: var(--gold);

    font-size: .7rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 2px;
}


.gallery-final-content h2 {
    max-width: 850px;

    margin-bottom: 18px;

    font-size: clamp(3.5rem, 5.5vw, 5.8rem);

    line-height: .98;

    letter-spacing: -4.5px;
}


.gallery-final-content > span {
    display: block;

    max-width: 570px;

    color: rgba(255,255,255,.67);

    font-size: .91rem;

    line-height: 1.8;
}


.gallery-final-buttons {
    margin-top: 32px;

    display: flex;

    flex-wrap: wrap;

    gap: 13px;
}


.gallery-final-buttons a {
    min-height: 55px;

    padding: 0 27px;

    border-radius: 8px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: var(--blue);

    color: white;

    font-size: .8rem;

    font-weight: 800;

    transition: .3s;
}


.gallery-final-buttons a:hover {
    transform: translateY(-3px);
}


.gallery-final-buttons .secondary {
    border: 1px solid rgba(255,255,255,.44);

    background: transparent;
}


.gallery-final-buttons .secondary:hover {
    background: white;

    color: var(--navy);
}



/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox {
    position: fixed;

    z-index: 99999;

    inset: 0;

    padding: 40px 90px;

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 0;

    visibility: hidden;

    background: rgba(2,14,25,.96);

    backdrop-filter: blur(8px);

    transition: .3s;
}


.gallery-lightbox.open {
    opacity: 1;

    visibility: visible;
}


.lightbox-content {
    position: relative;

    width: min(1050px, 85vw);

    max-height: 88vh;

    display: flex;

    align-items: center;
    justify-content: center;
}


.lightbox-content img {
    max-width: 100%;

    max-height: 78vh;

    object-fit: contain;

    border-radius: 8px;
}


.lightbox-caption {
    position: absolute;

    left: 0;
    bottom: -56px;

    color: white;
}


.lightbox-caption span {
    display: block;

    margin-bottom: 3px;

    color: rgba(255,255,255,.45);

    font-size: .6rem;

    text-transform: uppercase;

    letter-spacing: 1.3px;
}


.lightbox-caption h3 {
    font-size: .95rem;
}


.lightbox-close {
    position: absolute;

    right: 35px;
    top: 25px;

    width: 46px;
    height: 46px;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    background: transparent;

    color: white;

    font-size: 1.7rem;

    cursor: pointer;
}


.lightbox-arrow {
    position: absolute;

    top: 50%;

    width: 50px;
    height: 50px;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 50%;

    background: rgba(255,255,255,.04);

    color: white;

    cursor: pointer;

    font-size: 1rem;

    transform: translateY(-50%);

    transition: .3s;
}


.lightbox-arrow:hover,
.lightbox-close:hover {
    background: white;

    color: var(--navy);
}


.lightbox-prev {
    left: 30px;
}


.lightbox-next {
    right: 30px;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .gallery-hero-note {
        display: none;
    }


    .mini-gallery {
        grid-template-columns: 1fr 1fr;
    }


    .mini-photo:nth-child(n) {
        margin-top: 0;
    }

}



/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 850px) {

    .gallery-hero,
    .gallery-hero-inner {
        min-height: 640px;
    }


    .gallery-intro-grid,
    .gallery-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }


    .featured-grid {
        grid-template-columns: 1fr 1fr;

        grid-template-rows: 450px 300px;
    }


    .featured-large {
        grid-column: 1 / 3;

        grid-row: auto;
    }


    .photo-grid {
        grid-template-columns: 1fr 1fr;
    }


    .gallery-photo.wide {
        grid-column: span 2;
    }

}



/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .gallery-hero,
    .gallery-hero-inner {
        min-height: 620px;
    }


    .gallery-hero-inner {
        padding-bottom: 55px;
    }


    .gallery-hero-image {
        background-position: 60% center;
    }


    .gallery-hero-overlay {
        background: rgba(4,26,45,.83);
    }


    .gallery-breadcrumb {
        margin-bottom: 35px;
    }


    .gallery-hero h1 {
        font-size: 3.55rem;

        letter-spacing: -3.5px;
    }


    .gallery-hero-description {
        font-size: .9rem;
    }


    .gallery-hero-button {
        width: 100%;
    }


    .gallery-intro {
        padding: 65px 0;
    }


    .gallery-intro h2,
    .gallery-heading h2,
    .gallery-more-heading h2 {
        font-size: 2.55rem;

        letter-spacing: -2.4px;
    }


    .featured-gallery,
    .main-gallery,
    .gallery-more {
        padding: 90px 0;
    }


    .featured-grid {
        display: flex;

        flex-direction: column;
    }


    .featured-photo,
    .featured-large {
        height: 390px;
    }


    .gallery-filters {
        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 5px;
    }


    .gallery-filter {
        flex: 0 0 auto;
    }


    .photo-grid {
        display: flex;

        flex-direction: column;
    }


    .gallery-photo,
    .gallery-photo.tall,
    .gallery-photo.wide {
        height: 380px;
    }


    .photo-hover {
        opacity: 1;

        background:
            linear-gradient(
                to top,
                rgba(4,25,44,.8),
                transparent 60%
            );
    }


    .gallery-memory {
        min-height: 520px;
    }


    .gallery-memory-overlay {
        background: rgba(5,28,48,.78);
    }


    .gallery-memory h2 {
        font-size: 3rem;

        letter-spacing: -3px;
    }


    .gallery-more-heading {
        flex-direction: column;

        align-items: flex-start;
    }


    .mini-gallery {
        grid-template-columns: 1fr 1fr;
    }


    .mini-photo {
        height: 270px;
    }


    .gallery-final-cta {
        min-height: 500px;
    }


    .gallery-final-overlay {
        background: rgba(5,28,48,.79);
    }


    .gallery-final-content h2 {
        font-size: 3rem;

        letter-spacing: -3px;
    }


    .gallery-final-buttons {
        flex-direction: column;
    }


    .gallery-final-buttons a {
        width: 100%;
    }


    .gallery-lightbox {
        padding: 30px 15px 85px;
    }


    .lightbox-content {
        width: 100%;
    }


    .lightbox-arrow {
        top: auto;

        bottom: 18px;

        transform: none;
    }


    .lightbox-prev {
        left: calc(50% - 62px);
    }


    .lightbox-next {
        right: calc(50% - 62px);
    }


    .lightbox-close {
        right: 15px;

        top: 15px;
    }


    .lightbox-caption {
        bottom: -55px;
    }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .gallery-hero h1 {
        font-size: 3.05rem;
    }


    .gallery-intro h2,
    .gallery-heading h2,
    .gallery-more-heading h2 {
        font-size: 2.3rem;
    }


    .mini-gallery {
        grid-template-columns: 1fr;
    }


    .mini-photo {
        height: 330px;
    }


    .gallery-memory h2,
    .gallery-final-content h2 {
        font-size: 2.65rem;
    }

}