/* ============================================================
   TENIS ARENA — GALLERY REDESIGN
   ============================================================ */

.ta-gallery-new {
    width: 100%;
    overflow: hidden;

    background:
        var(--ta-ivory-soft);

    color:
        var(--ta-ink);
}

.ta-gallery-new,
.ta-gallery-new * {
    box-sizing:
        border-box;

    font-family:
        "Cormorant Garamond",
        Georgia,
        serif !important;
}

.ta-gallery-new-container {
    width:
        min(
            calc(100% - 96px),
            1280px
        );

    margin-inline:
        auto;
}


/* ============================================================
   COMMON
   ============================================================ */

.ta-gallery-new-eyebrow {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    color:
        var(--ta-gold);

    text-transform:
        uppercase;

    letter-spacing:
        .15em;

    font-size:
        .61rem;

    line-height:
        1;

    font-weight:
        600;
}

.ta-gallery-new-eyebrow::before {
    content:
        "";

    width:
        34px;

    height:
        1px;

    flex:
        0 0 34px;

    background:
        currentColor;
}


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

.ta-gallery-new-hero {
    position:
        relative;

    min-height:
        420px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--ta-forest-deep)
        var(--ta-gallery-hero)
        center
        center
        /
        cover
        no-repeat;

    color:
        var(--ta-ivory);
}

.ta-gallery-new-hero-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(3,35,27,.98) 0%,
            rgba(3,35,27,.88) 40%,
            rgba(3,35,27,.40) 70%,
            rgba(3,35,27,.08) 100%
        );
}

.ta-gallery-new-hero-inner {
    position:
        relative;

    z-index:
        2;
}

.ta-gallery-new-hero-copy {
    max-width:
        720px;
}

.ta-gallery-new-hero h1 {
    margin:
        20px
        0
        0;

    color:
        var(--ta-ivory)
        !important;

    font-size:
        clamp(
            4.25rem,
            5.5vw,
            6.1rem
        )
        !important;

    line-height:
        .84
        !important;

    letter-spacing:
        -.055em
        !important;

    font-weight:
        500
        !important;
}

.ta-gallery-new-hero-copy > p {
    max-width:
        590px;

    margin:
        21px
        0
        0;

    color:
        rgba(
            246,
            240,
            228,
            .83
        );

    font-size:
        .98rem;

    line-height:
        1.48;
}

.ta-gallery-new-hero-meta {
    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        22px;
}

.ta-gallery-new-hero-meta strong {
    color:
        var(--ta-gold);

    font-size:
        2rem;

    line-height:
        1;

    font-weight:
        500;
}

.ta-gallery-new-hero-meta span {
    max-width:
        95px;

    color:
        rgba(
            246,
            240,
            228,
            .65
        );

    text-transform:
        uppercase;

    letter-spacing:
        .10em;

    font-size:
        .5rem;

    line-height:
        1.25;
}


/* ============================================================
   FILTERS
   ============================================================ */

.ta-gallery-new-filters {
    padding:
        27px
        0
        0;
}

.ta-gallery-new-filter-grid {
    display:
        grid;

    grid-template-columns:
        repeat(
            5,
            minmax(0,1fr)
        );

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

.ta-gallery-new-filter-grid button {
    min-height:
        64px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    padding:
        0
        18px;

    border:
        0;

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

    background:
        transparent;

    color:
        var(--ta-forest);

    cursor:
        pointer;
}

.ta-gallery-new-filter-grid button:last-child {
    border-right:
        0;
}

.ta-gallery-new-filter-grid button span {
    color:
        var(--ta-gold);

    font-size:
        .95rem;
}

.ta-gallery-new-filter-grid button strong {
    font-size:
        .72rem;

    font-weight:
        500;
}

.ta-gallery-new-filter-grid button.is-active {
    background:
        var(--ta-forest);

    color:
        var(--ta-ivory);
}

.ta-gallery-new-filter-grid button.is-active span {
    color:
        var(--ta-gold);
}


/* ============================================================
   SECTION
   ============================================================ */

.ta-gallery-new-section {
    padding:
        42px
        0
        64px;
}

.ta-gallery-new-heading {
    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(300px,.72fr);

    gap:
        70px;

    align-items:
        end;

    margin-bottom:
        28px;
}

.ta-gallery-new-heading h2 {
    margin:
        13px
        0
        0;

    color:
        var(--ta-forest);

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

    line-height:
        .89;

    letter-spacing:
        -.045em;

    font-weight:
        500;
}

.ta-gallery-new-heading > p {
    max-width:
        520px;

    margin:
        0;

    color:
        var(--ta-muted);

    font-size:
        .85rem;

    line-height:
        1.5;
}


/* ============================================================
   MASONRY
   ============================================================ */

.ta-gallery-new-masonry {
    display:
        grid;

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

    grid-auto-rows:
        145px;

    grid-auto-flow:
        dense;

    gap:
        12px;
}

.ta-gallery-new-item {
    min-width:
        0;

    margin:
        0;

    overflow:
        hidden;

    background:
        var(--ta-forest);
}

.ta-gallery-new-item.is-standard {
    grid-column:
        span 1;

    grid-row:
        span 2;
}

.ta-gallery-new-item.is-tall {
    grid-column:
        span 1;

    grid-row:
        span 3;
}

.ta-gallery-new-item.is-wide {
    grid-column:
        span 2;

    grid-row:
        span 2;
}

.ta-gallery-new-item[hidden] {
    display:
        none
        !important;
}

.ta-gallery-new-open {
    position:
        relative;

    width:
        100%;

    height:
        100%;

    display:
        block;

    padding:
        0;

    border:
        0;

    overflow:
        hidden;

    background:
        var(--ta-forest);

    cursor:
        pointer;

    text-align:
        left;
}

.ta-gallery-new-open img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform
        .55s
        cubic-bezier(
            .2,
            .7,
            .2,
            1
        );
}

.ta-gallery-new-shade {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            transparent 44%,
            rgba(3,35,27,.20) 62%,
            rgba(3,35,27,.91) 100%
        );
}

.ta-gallery-new-item-copy {
    position:
        absolute;

    z-index:
        2;

    left:
        18px;

    right:
        65px;

    bottom:
        17px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;
}

.ta-gallery-new-category {
    margin-bottom:
        7px;

    color:
        var(--ta-gold);

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

    font-size:
        .51rem;

    font-weight:
        600;
}

.ta-gallery-new-item-copy strong {
    color:
        var(--ta-ivory);

    font-size:
        1.35rem;

    line-height:
        1;

    font-weight:
        500;
}

.ta-gallery-new-item-copy small {
    display:
        -webkit-box;

    margin-top:
        6px;

    overflow:
        hidden;

    -webkit-line-clamp:
        2;

    -webkit-box-orient:
        vertical;

    color:
        rgba(
            246,
            240,
            228,
            .72
        );

    font-size:
        .7rem;

    line-height:
        1.35;
}

.ta-gallery-new-arrow {
    position:
        absolute;

    z-index:
        3;

    right:
        16px;

    bottom:
        16px;

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(
            246,
            240,
            228,
            .65
        );

    border-radius:
        50%;

    color:
        var(--ta-ivory);

    font-size:
        .8rem;
}


/* ============================================================
   EMPTY STATES
   ============================================================ */

.ta-gallery-new-empty,
.ta-gallery-new-no-results {
    padding:
        75px
        0;

    text-align:
        center;
}

.ta-gallery-new-empty > span,
.ta-gallery-new-no-results > span {
    color:
        var(--ta-clay);

    text-transform:
        uppercase;

    letter-spacing:
        .14em;

    font-size:
        .57rem;
}

.ta-gallery-new-empty h2,
.ta-gallery-new-no-results h2 {
    max-width:
        700px;

    margin:
        13px
        auto
        0;

    color:
        var(--ta-forest);

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

    line-height:
        .9;

    letter-spacing:
        -.04em;

    font-weight:
        500;
}

.ta-gallery-new-empty p {
    max-width:
        560px;

    margin:
        15px
        auto
        0;

    color:
        var(--ta-muted);

    font-size:
        .86rem;

    line-height:
        1.5;
}

.ta-gallery-new-empty-actions {
    display:
        flex;

    justify-content:
        center;

    gap:
        22px;

    margin-top:
        25px;
}

.ta-gallery-new-empty-actions a,
.ta-gallery-new-no-results button {
    padding:
        11px
        18px;

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

    background:
        transparent;

    color:
        var(--ta-forest);

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    font-size:
        .57rem;
}

.ta-gallery-new-no-results button {
    margin-top:
        22px;

    cursor:
        pointer;
}


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

html.ta-gallery-lock,
html.ta-gallery-lock body {
    overflow:
        hidden;
}

.ta-gallery-lightbox {
    position:
        fixed;

    z-index:
        10000;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    padding:
        34px;
}

.ta-gallery-lightbox[hidden] {
    display:
        none
        !important;
}

.ta-gallery-lightbox-backdrop {
    position:
        absolute;

    inset:
        0;

    border:
        0;

    background:
        rgba(
            2,
            23,
            18,
            .94
        );

    cursor:
        zoom-out;
}

.ta-gallery-lightbox-panel {
    position:
        relative;

    z-index:
        2;

    width:
        min(
            1180px,
            100%
        );

    max-height:
        calc(
            100vh
            - 68px
        );

    display:
        grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(280px,.65fr);

    overflow:
        hidden;

    background:
        var(--ta-ivory-soft);
}

.ta-gallery-lightbox-media {
    min-height:
        620px;

    display:
        grid;

    place-items:
        center;

    overflow:
        hidden;

    background:
        #021b15;
}

.ta-gallery-lightbox-media img {
    width:
        100%;

    height:
        100%;

    max-height:
        calc(
            100vh
            - 68px
        );

    display:
        block;

    object-fit:
        contain;
}

.ta-gallery-lightbox-copy {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        42px;
}

.ta-gallery-lightbox-category {
    color:
        var(--ta-gold);

    text-transform:
        uppercase;

    letter-spacing:
        .13em;

    font-size:
        .56rem;
}

.ta-gallery-lightbox-copy h2 {
    margin:
        12px
        0
        0;

    color:
        var(--ta-forest);

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

    line-height:
        .92;

    letter-spacing:
        -.04em;

    font-weight:
        500;
}

.ta-gallery-lightbox-copy p {
    margin:
        14px
        0
        0;

    color:
        var(--ta-muted);

    font-size:
        .84rem;

    line-height:
        1.48;
}

.ta-gallery-lightbox-counter {
    display:
        flex;

    gap:
        8px;

    margin-top:
        27px;

    color:
        var(--ta-muted);

    font-size:
        .68rem;
}

.ta-gallery-lightbox-counter
[data-gallery-current] {
    color:
        var(--ta-clay);
}

.ta-gallery-lightbox-counter i {
    font-style:
        normal;
}

.ta-gallery-lightbox-close {
    position:
        absolute;

    z-index:
        4;

    top:
        15px;

    right:
        15px;

    width:
        42px;

    height:
        42px;

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

    background:
        var(--ta-ivory-soft);

    color:
        var(--ta-forest);

    cursor:
        pointer;

    font-size:
        1.3rem;
}

.ta-gallery-lightbox-nav {
    position:
        absolute;

    z-index:
        4;

    top:
        50%;

    width:
        45px;

    height:
        45px;

    transform:
        translateY(-50%);

    border:
        1px solid
        rgba(
            246,
            240,
            228,
            .55
        );

    border-radius:
        50%;

    background:
        rgba(
            4,
            43,
            33,
            .45
        );

    color:
        var(--ta-ivory);

    cursor:
        pointer;
}

.ta-gallery-lightbox-prev {
    left:
        15px;
}

.ta-gallery-lightbox-next {
    right:
        calc(
            35%
            + 15px
        );
}


/* ============================================================
   CLOSING
   ============================================================ */

.ta-gallery-new-closing {
    position:
        relative;

    min-height:
        300px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--ta-forest-deep)
        var(--ta-gallery-closing)
        right
        center
        /
        48%
        auto
        no-repeat;

    color:
        var(--ta-ivory);
}

.ta-gallery-new-closing-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(4,43,33,1) 0%,
            rgba(4,43,33,.99) 49%,
            rgba(4,43,33,.75) 68%,
            rgba(4,43,33,.15) 100%
        );
}

.ta-gallery-new-closing-inner {
    position:
        relative;

    z-index:
        2;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:
        80px;

    align-items:
        center;
}

.ta-gallery-new-closing h2 {
    max-width:
        720px;

    margin:
        15px
        0
        0;

    color:
        var(--ta-ivory);

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

    line-height:
        .88;

    letter-spacing:
        -.045em;

    font-weight:
        500;
}

.ta-gallery-new-closing p {
    max-width:
        590px;

    margin:
        14px
        0
        0;

    color:
        rgba(
            246,
            240,
            228,
            .76
        );

    font-size:
        .86rem;

    line-height:
        1.48;
}

.ta-gallery-new-closing-actions {
    min-width:
        220px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;
}

.ta-gallery-new-primary {
    min-height:
        46px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

    padding:
        0
        18px;

    background:
        var(--ta-gold);

    color:
        var(--ta-forest-deep);

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        .09em;

    font-size:
        .59rem;

    font-weight:
        700;
}

.ta-gallery-new-secondary {
    min-height:
        44px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        1px solid
        rgba(
            246,
            240,
            228,
            .46
        );

    color:
        var(--ta-ivory);

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        .09em;

    font-size:
        .57rem;
}


/* ============================================================
   HOVER
   ============================================================ */

@media (hover:hover) {

    .ta-gallery-new-open:hover img {
        transform:
            scale(1.035);
    }

    .ta-gallery-new-filter-grid button,
    .ta-gallery-new-primary,
    .ta-gallery-new-secondary,
    .ta-gallery-new-arrow {
        transition:
            background-color .25s ease,
            color .25s ease,
            transform .25s ease;
    }

    .ta-gallery-new-primary:hover {
        transform:
            translateY(-2px);
    }

    .ta-gallery-new-open:hover
    .ta-gallery-new-arrow {
        background:
            var(--ta-gold);

        border-color:
            var(--ta-gold);

        color:
            var(--ta-forest);
    }

}


/* ============================================================
   WIDE
   ============================================================ */

@media (min-width:1280px) {

    .ta-gallery-new-container {
        width:
            calc(
                100%
                - 96px
            );

        max-width:
            none;
    }

}


@media (min-width:1800px) {

    .ta-gallery-new-container {
        width:
            calc(
                100%
                - 128px
            );
    }

}


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

@media (max-width:1050px) {

    .ta-gallery-new-filter-grid {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .ta-gallery-new-filter-grid button {
        border-bottom:
            1px solid
            var(--ta-border);
    }

    .ta-gallery-new-masonry {
        grid-template-columns:
            repeat(
                3,
                minmax(0,1fr)
            );
    }

    .ta-gallery-lightbox-panel {
        grid-template-columns:
            minmax(0,1.2fr)
            minmax(250px,.8fr);
    }

    .ta-gallery-lightbox-next {
        right:
            calc(
                40%
                + 15px
            );
    }

}


@media (max-width:900px) {

    .ta-gallery-new-container {
        width:
            calc(
                100%
                - 64px
            );
    }

    .ta-gallery-new-heading {
        grid-template-columns:
            1fr;

        gap:
            15px;
    }

    .ta-gallery-new-closing-inner {
        grid-template-columns:
            1fr;

        gap:
            25px;
    }

}


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

@media (max-width:720px) {

    .ta-gallery-new-container {
        width:
            calc(
                100%
                - 40px
            );
    }

    .ta-gallery-new-hero {
        min-height:
            480px;

        background-position:
            63%
            center;
    }

    .ta-gallery-new-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3,35,27,.97),
                rgba(3,35,27,.79) 75%,
                rgba(3,35,27,.45)
            );
    }

    .ta-gallery-new-hero h1 {
        font-size:
            clamp(
                3.8rem,
                18vw,
                5rem
            )
            !important;
    }

    .ta-gallery-new-filter-grid {
        display:
            flex;

        overflow-x:
            auto;

        scrollbar-width:
            thin;
    }

    .ta-gallery-new-filter-grid button {
        min-width:
            145px;

        flex:
            0 0 auto;

        border-bottom:
            0;
    }

    .ta-gallery-new-masonry {
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        grid-auto-rows:
            125px;

        gap:
            9px;
    }

    .ta-gallery-new-item.is-standard,
    .ta-gallery-new-item.is-tall,
    .ta-gallery-new-item.is-wide {
        grid-column:
            span 1;

        grid-row:
            span 2;
    }

    .ta-gallery-new-item:nth-child(5n+1) {
        grid-column:
            span 2;

        grid-row:
            span 2;
    }

    .ta-gallery-new-item-copy {
        right:
            15px;

        left:
            13px;

        bottom:
            13px;
    }

    .ta-gallery-new-item-copy small {
        display:
            none;
    }

    .ta-gallery-new-arrow {
        display:
            none;
    }

    .ta-gallery-lightbox {
        padding:
            0;
    }

    .ta-gallery-lightbox-panel {
        width:
            100%;

        max-height:
            100vh;

        min-height:
            100vh;

        grid-template-columns:
            1fr;

        grid-template-rows:
            minmax(0,1fr)
            auto;
    }

    .ta-gallery-lightbox-media {
        min-height:
            0;
    }

    .ta-gallery-lightbox-media img {
        max-height:
            72vh;
    }

    .ta-gallery-lightbox-copy {
        padding:
            22px
            20px
            25px;
    }

    .ta-gallery-lightbox-nav {
        top:
            42%;
    }

    .ta-gallery-lightbox-prev {
        left:
            12px;
    }

    .ta-gallery-lightbox-next {
        right:
            12px;
    }

    .ta-gallery-new-empty-actions {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .ta-gallery-new-closing {
        min-height:
            460px;

        background-size:
            cover;

        background-position:
            65%
            center;
    }

    .ta-gallery-new-closing-overlay {
        background:
            rgba(
                4,
                43,
                33,
                .89
            );
    }

    .ta-gallery-new-closing-actions {
        width:
            100%;
    }

}


/* ============================================================
   SMALL PHONE
   ============================================================ */

@media (max-width:390px) {

    .ta-gallery-new-container {
        width:
            calc(
                100%
                - 32px
            );
    }

}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.ta-gallery-new a:focus-visible,
.ta-gallery-new button:focus-visible {
    outline:
        2px solid
        var(--ta-gold);

    outline-offset:
        3px;
}


@media (prefers-reduced-motion:reduce) {

    .ta-gallery-new *,
    .ta-gallery-new *::before,
    .ta-gallery-new *::after {
        transition:
            none
            !important;
    }

}