/* ============================================================
   TENIS ARENA — COURT DETAIL
   Teren 1 / Teren 2
   ============================================================ */

.ta-court-page {
    background:
        var(--ta-ivory-soft);

    color:
        var(--ta-ink);

    overflow:
        hidden;
}


.ta-court-page,
.ta-court-page *,
.ta-court-page button {
    font-family:
        "Cormorant Garamond",
        Georgia,
        serif !important;
}


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

    margin-inline:
        auto;
}



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

.ta-court-hero {
    display:
        grid;

    grid-template-columns:
        minmax(
            390px,
            38%
        )
        minmax(
            0,
            62%
        );

    min-height:
        420px;

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

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


.ta-court-hero-copy {
    position:
        relative;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

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


.ta-court-hero-copy-inner {
    width:
        100%;

    max-width:
        590px;

    margin-left:
        max(
            48px,
            calc(
                (
                    100vw
                    - 1280px
                )
                / 2
            )
        );

    padding:
        50px
        48px
        50px
        0;
}


.ta-court-breadcrumb {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    font-size:
        .61rem;

    line-height:
        1;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;
}


.ta-court-breadcrumb a {
    color:
        var(--ta-gold);

    text-decoration:
        none;
}


.ta-court-breadcrumb span,
.ta-court-breadcrumb strong {
    color:
        rgba(
            246,
            240,
            228,
            .76
        );

    font-weight:
        500;
}


.ta-court-hero-line {
    width:
        34px;

    height:
        1px;

    margin:
        16px
        0
        15px;

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


.ta-court-hero h1 {
    margin:
        0;

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

    line-height:
        .84;

    letter-spacing:
        -.052em;

    font-weight:
        500;

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


.ta-court-hero h2 {
    margin:
        18px
        0
        0;

    max-width:
        480px;

    font-size:
        clamp(
            1.45rem,
            1.8vw,
            1.95rem
        );

    line-height:
        1.08;

    letter-spacing:
        -.02em;

    font-weight:
        500;

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


.ta-court-hero-copy p {
    max-width:
        510px;

    margin:
        20px
        0
        0;

    font-size:
        .96rem;

    line-height:
        1.5;

    color:
        rgba(
            246,
            240,
            228,
            .75
        );
}


.ta-court-primary-action {
    width:
        fit-content;

    min-width:
        215px;

    min-height:
        46px;

    margin-top:
        28px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        28px;

    padding:
        0
        19px;

    background:
        var(--ta-gold);

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

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

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    font-size:
        .65rem;

    font-weight:
        700;

    transition:
        background-color
        300ms
        ease,
        color
        300ms
        ease;
}


.ta-court-primary-action:hover {
    background:
        transparent;

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


.ta-court-primary-action strong {
    font-size:
        1rem;

    font-weight:
        400;
}


.ta-court-hero-media {
    position:
        relative;

    min-width:
        0;

    overflow:
        hidden;
}


.ta-court-hero-media img {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center;
}


.ta-court-hero-media-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(
                4,
                43,
                33,
                .18
            ),
            transparent
            32%
        );

    pointer-events:
        none;
}



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

.ta-court-section-label {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-bottom:
        13px;

    font-size:
        .59rem;

    line-height:
        1;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

    font-weight:
        600;
}


.ta-court-section-label span {
    color:
        var(--ta-clay);
}


.ta-court-section-label strong {
    color:
        var(--ta-clay);

    font-weight:
        600;
}



/* ============================================================
   DETAILS
   ============================================================ */

.ta-court-details {
    padding:
        54px
        0
        48px;

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


.ta-court-detail-grid {
    display:
        grid;

    grid-template-columns:
        minmax(
            300px,
            .75fr
        )
        minmax(
            0,
            1.25fr
        );

    gap:
        clamp(
            55px,
            7vw,
            120px
        );

    align-items:
        center;
}


.ta-court-detail-intro h2 {
    margin:
        0;

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

    line-height:
        .92;

    letter-spacing:
        -.04em;

    font-weight:
        500;

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


.ta-court-detail-intro p {
    max-width:
        500px;

    margin:
        17px
        0
        0;

    font-size:
        .91rem;

    line-height:
        1.53;

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


.ta-court-spec-grid {
    display:
        grid;

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

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

    border-top:
        1px solid
        transparent;
}


.ta-court-spec {
    min-height:
        116px;

    display:
        grid;

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

    gap:
        16px;

    align-items:
        center;

    padding:
        22px
        25px;

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

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


.ta-court-spec:nth-child(-n+2) {
    border-top:
        1px solid
        var(--ta-border);
}


.ta-court-spec-icon {
    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    font-size:
        1rem;

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


.ta-court-spec strong {
    display:
        block;

    font-size:
        .95rem;

    line-height:
        1.1;

    font-weight:
        600;

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


.ta-court-spec p {
    margin:
        5px
        0
        0;

    font-size:
        .80rem;

    line-height:
        1.3;

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



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

.ta-court-gallery {
    padding:
        48px
        0
        54px;

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


.ta-court-gallery-heading {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;

    margin-bottom:
        23px;
}


.ta-court-gallery-heading h2 {
    margin:
        0;

    font-size:
        clamp(
            2.6rem,
            3.45vw,
            3.9rem
        );

    line-height:
        .92;

    letter-spacing:
        -.04em;

    font-weight:
        500;

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


.ta-court-gallery-heading p {
    margin:
        8px
        0
        0;

    font-size:
        .88rem;

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


.ta-court-gallery-controls {
    display:
        flex;

    gap:
        8px;

    flex:
        0
        0
        auto;
}


.ta-court-gallery-controls button {
    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        50%;

    background:
        transparent;

    color:
        var(--ta-forest);

    cursor:
        pointer;

    transition:
        background-color
        250ms
        ease,
        color
        250ms
        ease,
        border-color
        250ms
        ease,
        opacity
        250ms
        ease;
}


.ta-court-gallery-controls button:hover:not(:disabled) {
    border-color:
        var(--ta-forest);

    background:
        var(--ta-forest);

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


.ta-court-gallery-controls button:disabled {
    opacity:
        .28;

    cursor:
        default;
}


.ta-court-gallery-track {
    display:
        grid;

    grid-auto-flow:
        column;

    grid-auto-columns:
        minmax(
            330px,
            1fr
        );

    gap:
        13px;

    overflow-x:
        auto;

    scroll-behavior:
        smooth;

    overscroll-behavior-inline:
        contain;

    scrollbar-width:
        none;
}


.ta-court-gallery-track::-webkit-scrollbar {
    display:
        none;
}


.ta-court-gallery-item {
    height:
        235px;

    margin:
        0;

    overflow:
        hidden;

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


.ta-court-gallery-item img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform
        700ms
        cubic-bezier(
            .22,
            1,
            .36,
            1
        );
}


.ta-court-gallery-item:hover img {
    transform:
        scale(
            1.025
        );
}



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

.ta-court-closing {
    padding:
        35px
        0;

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


.ta-court-closing-inner {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        70px;
}


.ta-court-closing-copy h2 {
    margin:
        0;

    font-size:
        clamp(
            2.4rem,
            3.1vw,
            3.5rem
        );

    line-height:
        .92;

    letter-spacing:
        -.038em;

    font-weight:
        500;

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


.ta-court-closing-copy p {
    margin:
        8px
        0
        0;

    font-size:
        .83rem;

    line-height:
        1.4;

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


.ta-court-closing-action {
    width:
        min(
            260px,
            100%
        );

    min-height:
        48px;

    flex:
        0
        0
        auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0
        21px;

    background:
        var(--ta-forest);

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

    color:
        var(--ta-ivory);

    text-decoration:
        none;

    text-transform:
        uppercase;

    letter-spacing:
        .08em;

    font-size:
        .64rem;

    font-weight:
        600;

    transition:
        background-color
        300ms
        ease,
        color
        300ms
        ease;
}


.ta-court-closing-action:hover {
    background:
        transparent;

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


.ta-court-closing-action strong {
    font-size:
        1rem;

    font-weight:
        400;
}



/* ============================================================
   LARGE DESKTOP
   same fluid width as Home / Terenuri / Rezervari
   ============================================================ */

@media (min-width: 1280px) {

    .ta-court-container {
        width:
            calc(100% - 96px) !important;

        max-width:
            none !important;
    }


    .ta-court-hero-copy-inner {
        max-width:
            720px;

        margin-left:
            48px;

        padding-right:
            clamp(
                45px,
                4vw,
                85px
            );
    }


    .ta-court-detail-grid {
        grid-template-columns:
            minmax(
                360px,
                .72fr
            )
            minmax(
                0,
                1.28fr
            );
    }


    .ta-court-gallery-track {
        grid-auto-columns:
            calc(
                (
                    100%
                    - 26px
                )
                / 3
            );
    }

}


@media (min-width: 1800px) {

    .ta-court-container {
        width:
            calc(100% - 128px) !important;
    }


    .ta-court-hero-copy-inner {
        margin-left:
            64px;
    }

}



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

@media (max-width: 1023px) {

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


    .ta-court-hero {
        grid-template-columns:
            46%
            54%;

        min-height:
            390px;
    }


    .ta-court-hero-copy-inner {
        margin-left:
            32px;

        padding:
            40px
            30px
            40px
            0;
    }


    .ta-court-hero h1 {
        font-size:
            clamp(
                3.3rem,
                8vw,
                4.5rem
            );
    }


    .ta-court-detail-grid {
        grid-template-columns:
            .8fr
            1.2fr;

        gap:
            40px;
    }


    .ta-court-spec {
        grid-template-columns:
            36px
            1fr;

        gap:
            12px;

        padding:
            18px;
    }


    .ta-court-gallery-track {
        grid-auto-columns:
            minmax(
                300px,
                62vw
            );
    }

}



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

@media (max-width: 720px) {

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


    .ta-court-hero {
        display:
            flex;

        flex-direction:
            column;

        min-height:
            0;
    }


    .ta-court-hero-copy {
        order:
            2;
    }


    .ta-court-hero-media {
        order:
            1;

        min-height:
            250px;
    }


    .ta-court-hero-media img {
        position:
            absolute;
    }


    .ta-court-hero-media-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(
                    4,
                    43,
                    33,
                    .25
                ),
                transparent
            );
    }


    .ta-court-hero-copy-inner {
        max-width:
            none;

        margin:
            0;

        padding:
            30px
            20px
            34px;
    }


    .ta-court-hero h1 {
        font-size:
            clamp(
                3.4rem,
                16vw,
                4.8rem
            );
    }


    .ta-court-hero h2 {
        font-size:
            1.45rem;
    }


    .ta-court-primary-action {
        width:
            100%;
    }


    .ta-court-details {
        padding:
            40px
            0;
    }


    .ta-court-detail-grid {
        grid-template-columns:
            1fr;

        gap:
            30px;
    }


    .ta-court-spec-grid {
        grid-template-columns:
            1fr;
    }


    .ta-court-spec:nth-child(-n+2) {
        border-top:
            0;
    }


    .ta-court-spec:first-child {
        border-top:
            1px solid
            var(--ta-border);
    }


    .ta-court-gallery {
        padding:
            40px
            0;
    }


    .ta-court-gallery-heading {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            17px;
    }


    .ta-court-gallery-controls {
        align-self:
            flex-end;
    }


    .ta-court-gallery-track {
        width:
            100%;

        grid-auto-columns:
            86%;

        gap:
            10px;
    }


    .ta-court-gallery-item {
        height:
            210px;
    }


    .ta-court-closing {
        padding:
            32px
            0;
    }


    .ta-court-closing-inner {
        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            25px;
    }


    .ta-court-closing-action {
        width:
            100%;
    }

}



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

@media (max-width: 390px) {

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


    .ta-court-hero-copy-inner {
        padding-left:
            16px;

        padding-right:
            16px;
    }


    .ta-court-gallery-track {
        grid-auto-columns:
            90%;
    }

}



/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

    .ta-court-gallery-track {
        scroll-behavior:
            auto;
    }


    .ta-court-gallery-item img,
    .ta-court-primary-action,
    .ta-court-closing-action {
        transition:
            none !important;
    }

}