/* ============================================================
   Visually-hidden utility (WCAG: content for screen readers only)
   ============================================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================================
   Golf Holes grid
   ============================================================ */
.golf-holes {
    padding: calc(41 / var(--root-font-size) * 1rem) calc(116 / var(--root-font-size) * 1rem) calc(66 / var(--root-font-size) * 1rem);
    display: flex;
    justify-content: center;
    @media screen and (max-width: 1024px) {
        padding: 39px 0 43px;
    }
    .golf-holes__container {
        flex: 0 1 1688px;
        text-align: center;
        @media screen and (max-width: 1024px) {
            flex: 0 0 100%;
        }
    }
    .golf-holes-subtitle {
        color: var(--golf-primary-colour);
    }
    .golf-holes-title {
        margin: calc(7 / var(--root-font-size) * 1rem) 0 0 0;
        color: var(--golf-primary-colour);
        @media screen and (max-width: 1024px) {
            margin: 11px 0 0 0;
        }
    }

    /* Reset list styles so <ul> looks like the original div-based grid */
    .golf-holes-items {
        margin: calc(69.5 / var(--root-font-size) * 1rem) 0 0 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: calc(20 / var(--root-font-size) * 1rem) calc(30 / var(--root-font-size) * 1rem);
        list-style: none;
        padding: 0;
        @media screen and (max-width: 1024px) {
            margin: 38.5px 0 0 0;
            gap: 6px;
        }
        li {
            flex: 0 0 calc((100% - (5 * calc(30 / var(--root-font-size) * 1rem))) / 6);
            @media screen and (max-width: 1024px) {
                flex: 0 0 calc((100% - (2 * calc(6 / var(--root-font-size) * 1rem))) / 3);
            }
        }
    }

    /* golf-hole-item is now a <button> — reset default button styles */
    .golf-hole-item {
        width: 100%;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: flex-end;
        text-align: left;
        aspect-ratio: 256/256;
        position: relative;
        background: none;
        border: none;
        padding: 0;
        font: inherit;
        color: inherit;
        @media screen and (max-width: 1024px) {
            aspect-ratio: 197.2/199.75;
        }
        /* Visible focus ring — meets WCAG 2.4.11 (Focus Appearance) */
        &:focus-visible {
            outline: 3px solid var(--golf-primary-colour, #866779);
            outline-offset: 3px;
        }
        /* &:before {
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            background: #000000 0% 0% no-repeat padding-box;
            opacity: 0.25;
        } */
        &:after {
            content: "";
            position: absolute;
            width: 100%;
            height: 45.83%;
            background: transparent linear-gradient(180deg, #00000000 0%, #000000 100%) 0% 0% no-repeat padding-box;
            opacity: 1;
        }
        .golf-hole-image__container {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            &:before {
                content: "";
                display: inline-block;
                position: absolute;
                top: calc(16.5 / var(--root-font-size) * 1rem);
                left: calc(16.5 / var(--root-font-size) * 1rem);
                vertical-align: middle;
                width: 1px;
                height: calc(100% - calc(100 / var(--root-font-size) * 1rem));
                border-left: 1px solid #fff;
                position: absolute;
                z-index: 1;
                @media screen and (max-width: 1024px) {
                    top: 6.5px;
                    left: 6.5px;
                    height: calc(100% - 50px);
                }
            }
            &:after {
                content: "";
                display: inline-block;
                position: absolute;
                top: calc(16.5 / var(--root-font-size) * 1rem);
                left: calc(16.5 / var(--root-font-size) * 1rem);
                vertical-align: middle;
                width: calc(100% - calc(33 / var(--root-font-size) * 1rem));
                height: calc(100% - calc(33 / var(--root-font-size) * 1rem));
                border-top: 1px solid #fff;
                position: absolute;
                border-right: 1px solid #fff;
                z-index: 1;
                @media screen and (max-width: 1024px) {
                    top: 6.5px;
                    left: 6.5px;
                    width: calc(100% - (6.5px * 2));
                    height: calc(100% - (11.5px * 2));
                }
            }
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all 300ms ease-out;
            }
        }
        .golf-hole-text__container {
            z-index: 1;
            width: 100%;
            padding: 0 calc(16.5 / var(--root-font-size) * 1rem) calc(14 / var(--root-font-size) * 1rem);
            color: #fff;
            @media screen and (max-width: 1024px) {
                padding: 0 6.5px 16.5px;
            }
            .golf-hole-subtitle {
                color: #fff;
                font: 500 calc(12 / var(--root-font-size) * 1rem)/calc(18 / var(--root-font-size) * 1rem) var(--font-family-sans-serif);
                letter-spacing: calc(0.48 / var(--root-font-size) * 1rem);
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;  
                overflow: hidden;
                &.golf-hole-yards {
                    position: absolute;
                    bottom: calc(16.5 / var(--root-font-size) * 1rem);
                    right: calc(30 / var(--root-font-size) * 1rem);
                }
            }
            .golf-hole-title {
                margin: calc(7 / var(--root-font-size) * 1rem) 0 0 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;  
                overflow: hidden;
                color: #fff;
                @media screen and (max-width: 1024px) {
                    text-align: left;
                }
            }
        }
    }
} 


/* ============================================================
   Modals — base
   ============================================================ */
.modal {
    font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif;
}


/* ============================================================
   MicroModal animation
   ============================================================ */
@keyframes mmfadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mmfadeOut {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes mmslideIn {
    from { transform: translateY(15%); }
    to   { transform: translateY(0); }
}

@keyframes mmslideOut {
    from { transform: translateY(0); }
    to   { transform: translateY(-10%); }
}

/* Respect users who prefer reduced motion (WCAG 2.3.3 / EAA) */
@media (prefers-reduced-motion: reduce) {
    @keyframes mmfadeIn  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes mmfadeOut { from { opacity: 1; } to { opacity: 0; } }
    @keyframes mmslideIn { from { transform: none; } to { transform: none; } }
    @keyframes mmslideOut{ from { transform: none; } to { transform: none; } }
}

.micromodal-slide {
    display: none;
}

.micromodal-slide.is-open {
    display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
    will-change: transform;
}


/* ============================================================
   Golf modal
   ============================================================ */
.golf-modal {
    .modal__overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 20;
    }

    .modal__container {
        background-color: #fff;
        padding: calc(78 / var(--root-font-size) * 1rem) calc(180 / var(--root-font-size) * 1rem) calc(79.5 / var(--root-font-size) * 1rem) calc(202 / var(--root-font-size) * 1rem);
        max-width: 90svw;
        max-height: 90svh;
        border-radius: 4px;
        overflow-y: auto;
        box-sizing: border-box;
        @media screen and (max-width: 1024px) {
            padding: 38px 0 40px;
        }

        /* REMOVED: * { outline: none } — that rule killed all focus rings inside
           the modal and is a hard WCAG 2.1 AA / EAA failure.
           Focus styles are defined per-element below instead.          */
    }

    .modal__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: calc(18 / var(--root-font-size) * 1rem);
        right: calc(24 / var(--root-font-size) * 1rem);
        @media screen and (max-width: 1024px) {
            top: 16px;
            right: 15px;
        }
    }

    .modal__close {
        background: transparent;
        border: 0;
        cursor: pointer;
        /* Visible focus ring */
        &:focus-visible {
            outline: 3px solid var(--golf-primary-colour, #866779);
            outline-offset: 4px;
            border-radius: 2px;
        }
    }

    .modal__header .modal__close:before {
        content: "\2715";
        color: var(--golf-primary-colour);
        font-size: calc(45 / var(--root-font-size) * 1rem);
        @media screen and (max-width: 1024px) {
            font-size: 27px;
        }
    }

    .modal__content {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        min-width: 0;
        min-height: 0;
        @media screen and (max-width: 1024px) {
            flex-wrap: wrap;
        }

        .modal__content-left {
            flex: 0 0 51.3654%;
            min-width: 0;
            min-height: 0;
            @media screen and (max-width: 1024px) {
                flex: 0 0 100%;
                order: 2;
            }

            .modal__content-main-carousel {
                width: 100%;
                .golf-media-gallery__slide--flyover {
                    img, video {
                        object-fit: contain !important;
                    }
                }
                img, video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    aspect-ratio: 790/757;
                    pointer-events: none;
                    @media screen and (max-width: 1024px) {
                        aspect-ratio: 360/237;
                    }
                }
                .golf-modal-video-wrapper {
                    position: relative;
                    width: 100%;
                    height: 100%;
                    aspect-ratio: 790 / 757;
                    @media screen and (max-width: 1024px) {
                        aspect-ratio: 360/237;
                    }
                }

                .golf-modal-media--video {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: cover;
                }

                .golf-modal-video-play {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    width: 64px;
                    height: 64px;
                    transform: translate(-50%, -50%);
                    border: 1px solid currentColor;
                    border-radius: 50%;
                    background: rgba(0, 0, 0, 0.35);
                    color: #fff;
                    cursor: pointer;
                    z-index: 2;
                    padding: 0;
                    appearance: none;
                    /* Visible focus ring */
                    &:focus-visible {
                        outline: 3px solid #fff;
                        outline-offset: 4px;
                    }
                }

                .golf-modal-video-play span {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-40%, -50%);
                    width: 0;
                    height: 0;
                    border-top: 12px solid transparent;
                    border-bottom: 12px solid transparent;
                    border-left: 18px solid currentColor;
                }

                .golf-modal-video-play.is-playing span {
                    width: 18px;
                    height: 24px;
                    transform: translate(-50%, -50%);
                    border-top: 0;
                    border-bottom: 0;
                    border-left: 6px solid currentColor;
                    border-right: 6px solid currentColor;
                }

                .golf-modal-flyover-link {
                    position: absolute;
                    bottom: calc(35 / var(--root-font-size) * 1rem);
                    right: calc(31 / var(--root-font-size) * 1rem);
                    text-decoration: underline;
                    font: calc(16 / var(--root-font-size) * 1rem)/calc(20 / var(--root-font-size) * 1rem) var(--font-family-serif);
                    color: #000;
                    /* Visible focus ring */
                    &:focus-visible {
                        outline: 3px solid var(--golf-primary-colour, #866779);
                        outline-offset: 3px;
                        border-radius: 2px;
                    }
                }
            }

            .modal__content-navigation {
                margin: calc(48 / var(--root-font-size) * 1rem) 0 0 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                min-width: 0;
                min-height: 0;
                @media screen and (max-width: 1024px) {
                    margin: 22px 0 0 0;
                    padding: 0 10px;
                    justify-content: center;
                    flex-wrap: wrap;
                }

                .modal__content-navigation-hole {
                    flex: 0 0 20%;
                    display: flex;
                    align-items: center;
                    @media screen and (max-width: 1024px) {
                        margin: 22.88px 0 0 0;
                    }
                    button {
                        background: none;
                        border: none;
                        font: calc(16 / var(--root-font-size) * 1rem)/calc(20 / var(--root-font-size) * 1rem) var(--font-family-serif);
                        text-transform: uppercase;
                        color: #000;
                        display: flex;
                        align-items: center;
                        cursor: pointer;
                        padding: 4px;
                        @media screen and (max-width: 1024px) {
                            font: 14px/18px var(--font-family-serif);
                        }
                        /* Visible focus ring */
                        &:focus-visible {
                            outline: 3px solid var(--golf-primary-colour, #866779);
                            outline-offset: 3px;
                            border-radius: 2px;
                        }
                    }
                    svg {
                        width: calc(18.75 / var(--root-font-size) * 1rem);
                        height: auto;
                        @media screen and (max-width: 1024px) {
                            width: 21.09px;
                        }
                        path {
                            fill: #000;
                        }
                    }
                }

                .modal__content-navigation-previous-hole {
                    justify-content: flex-start;
                    @media screen and (max-width: 1024px) {
                        flex: 0 0 50%;
                        order: 2;
                    }
                    svg {
                        margin: 0 calc(7.9 / var(--root-font-size) * 1rem);
                        @media screen and (max-width: 1024px) {
                            margin: 0 5.58px 0 0;
                        }
                    }
                }

                .modal__content-navigation-next-hole {
                    justify-content: flex-end;
                    @media screen and (max-width: 1024px) {
                        flex: 0 0 50%;
                        order: 3;
                    }
                    svg {
                        margin: 0 0 0 calc(7.9 / var(--root-font-size) * 1rem);
                        @media screen and (max-width: 1024px) {
                            margin: 0 0 0 5.58px;
                        }
                    }
                }

                .modal-content-navigation-carousel-container {
                    position: relative;
                    min-width: 0;
                    min-height: 0;
                    @media screen and (max-width: 1024px) {
                        flex: 0 0 100%;
                        padding: 0 28px;
                    }
                    align-items: center;
                }

                .modal__content-navigation-carousel {
                    position: relative;
                }
            }
        }

        .modal__content-right {
            flex: 0 0 48.6346%;
            padding: 0 0 0 calc(133 / var(--root-font-size) * 1rem);
            text-align: left;
            @media screen and (max-width: 1024px) {
                order: 1;
                flex: 0 0 100%;
                padding: 0 20px 29.34px;
                text-align: center;
            }

            .modal__content-title {
                color: var(--golf-primary-colour);
            }

            .modal__content-text {
                margin: calc(53.83 / var(--root-font-size) * 1rem) 0 0 0;
                @media screen and (max-width: 1024px) {
                    margin: 13px 0 0 0;
                }
            }

            .modal__content-icons {
                margin: calc(52.83 / var(--root-font-size) * 1rem) 0 0 0;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                gap: calc(20 / var(--root-font-size) * 1rem) calc(100 / var(--root-font-size) * 1rem);
                /* Reset list styles — icons section is now a <ul> */
                list-style: none;
                padding: 0;
                @media screen and (max-width: 1024px) {
                    margin: 17px 0 0 0;
                    gap: 15px 29px;
                }
            }

            .modal__content-icon {
                display: flex;
                align-items: center;
                svg, img {
                    margin: 0 calc(12.83 / var(--root-font-size) * 1rem) 0 0;
                    height: calc(28 / var(--root-font-size) * 1rem);
                    width: auto;
                    @media screen and (max-width: 1024px) {
                        margin: 0 8.45px 0 0;
                        height: 17.41px;
                    }
                    path {
                        fill: #000;
                    }
                }
                .modal__content-icon-title {
                    font: calc(15 / var(--root-font-size) * 1rem)/calc(19 / var(--root-font-size) * 1rem) var(--font-family-serif);
                    color: #000;
                    @media screen and (max-width: 1024px) {
                        font: 11px/14px var(--font-family-serif);
                    }
                }
            }
        }
    }
}


/* ============================================================
   Golf media gallery
   ============================================================ */
.golf-media-gallery__main {
    position: relative;
}

.golf-media-gallery__slide[hidden] {
    display: none;
}

.golf-media-gallery__slide.is-active {
    display: block;
}

.golf-media-gallery__thumbs-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.golf-media-gallery__thumbs {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.golf-media-gallery__thumbs::-webkit-scrollbar {
    display: none;
}

.golf-media-gallery__thumb {
    flex: 0 0 calc((100% - 24px) / 3);
    border: 0;
    padding: 0;
    background: none;
    cursor: pointer;
    /* Visible focus ring */
    &:focus-visible {
        outline: 3px solid var(--golf-primary-colour, #866779);
        outline-offset: 4px;
        border-radius: 2px;
    }
}

.golf-media-gallery__thumb.is-active .golf-modal-thumbnail {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.golf-media-gallery__arrow {
    border: 0;
    padding: 4px;
    background: none;
    cursor: pointer;
    /* Visible focus ring */
    &:focus-visible {
        outline: 3px solid var(--golf-primary-colour, #866779);
        outline-offset: 3px;
        border-radius: 2px;
    }
    svg {
        path {
            fill: var(--golf-primary-colour-lightest);
        }
    }
}

.golf-modal-media,
.golf-modal-thumbnail-image,
.golf-modal-thumbnail-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.js-golf-gallery-prev.is-hidden,
.js-golf-gallery-next.is-hidden {
    display: none;
}

.js-golf-gallery-prev.is-disabled,
.js-golf-gallery-next.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.js-golf-gallery-slide.is-active {
    display: block;
}

.js-golf-gallery-thumb.is-active {
    border: 1px solid #7E7A7A;
    padding: 3px;
}

.golf-media-gallery__arrow {
    &.golf-media-gallery__arrow--next {
        transform: rotate(180deg);
    }
}