/* ========================================================================
   Gallery modal + fullscreen lightbox.

   The home page and the services page each carried their own near-identical
   copy of these ~330 lines inside an inline <style> block, re-sent with every
   HTML response. One shared stylesheet now serves both, loaded only by the two
   pages that actually open a modal.
   ======================================================================== */

.category-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 10000;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    -webkit-tap-highlight-color: transparent;
    will-change: opacity;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.category-modal-backdrop.active {
    display: flex;
    opacity: 1;
}

.category-modal-box {
    background: #ffffff;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    border-radius: 32px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
    transform: scale(0.92) translate3d(0, 0, 0);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    border: 2px solid rgba(26, 66, 43, 0.15);
    will-change: transform;
    backface-visibility: hidden;
}

.category-modal-backdrop.active .category-modal-box {
    transform: scale(1) translate3d(0, 0, 0);
}

.modal-header {
    padding: 28px 40px;
    background: #ffffff;
    color: #111111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.modal-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: var(--secondary-color);
}

.modal-close-btn {
    background: rgba(26, 66, 43, 0.08);
    border: 1px solid rgba(26, 66, 43, 0.2);
    color: var(--secondary-color);
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
}

.modal-close-btn:hover,
.modal-close-btn:focus-visible {
    background: var(--secondary-color);
    color: #ffffff;
    transform: scale(1.08) rotate(90deg);
    box-shadow: 0 10px 25px rgba(26, 66, 43, 0.25);
    border-color: var(--secondary-color);
}

.modal-body {
    padding: 40px;
    overflow-y: auto;
    background: #f4f7f5;
    flex: 1;
}

.modal-gallery-grid {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 25px;
}

.modal-gallery-column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.modal-empty {
    text-align: center;
    color: #4b5563;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 50px 20px;
    width: 100%;
}

.modal-gal-item {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    background: #222;
    cursor: zoom-in;
    border: 2px solid #fff;
    -webkit-tap-highlight-color: transparent;
    display: block;
    width: 100%;
    padding: 0;
    transform: translateZ(0);
}

.modal-gal-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.modal-gal-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    padding: 35px 15px 15px;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    letter-spacing: 0.5px;
}

.modal-gal-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    z-index: 10;
    pointer-events: none;
}

.modal-gal-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.35);
}

@media (hover: hover) and (pointer: fine) {
    .modal-gal-item:hover img { transform: scale(1.12); }
}

/* ---------------------------------------------------------- lightbox ---- */

.jex-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.96);
    z-index: 20000;
    display: none;
    align-items: center;
    /*
       The photo is centred by the flex container itself, not by sitting between
       two arrows. It used to be `space-between` with prev/photo/next as three
       siblings: as soon as a gallery held a single photo the arrows were hidden,
       leaving one lone flex child, and `space-between` pushed it hard against
       the left edge — the "photo stuck in its corner" bug.
    */
    justify-content: center;
    padding: 20px 40px;
    cursor: zoom-out;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.jex-lightbox.active { display: flex; }

.lightbox-content-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 85%;
    max-height: 90vh;
    cursor: default;
    position: relative;
}

/*
   The badge is pinned to this box rather than to the column above it, so it
   always lands on the photo.

   The column is as wide as its widest child, which is usually the caption. A
   portrait photo or a long caption therefore left the badge floating in the
   black margin: measured before this fix, a 487px-wide photo under a 596px
   caption put the badge 39px past the right edge of the picture, and a long
   caption pushed it 238px out — the "logo in the corner, off the photo" bug.
*/
.lightbox-figure {
    position: relative;
    display: flex;
    max-width: 100%;
    max-height: 80vh;
    min-width: 0;
}

.jex-lightbox img#fullscreenImg {
    display: block;
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 0 50px rgba(26, 66, 43, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: opacity 0.2s ease;
}

/*
   While the next photo downloads, the one on screen stays put but dims, with a
   spinner over it. Swapping the src straight away left the previous picture
   sitting under the new caption for as long as the transfer took — on a phone,
   several seconds.
*/
.jex-lightbox.is-loading img#fullscreenImg {
    opacity: 0.3;
}

.jex-lightbox.is-loading .lightbox-figure::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: jex-lightbox-spin 0.8s linear infinite;
    pointer-events: none;
}

@keyframes jex-lightbox-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .jex-lightbox.is-loading .lightbox-figure::after { animation: none; }
}

.lightbox-caption {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 600;
    margin-top: 15px;
    text-align: center;
    background: rgba(26, 66, 43, 0.85);
    padding: 8px 25px;
    border-radius: 30px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.lightbox-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    z-index: 1005;
    pointer-events: none;
    display: none;
}

.lightbox-badge.is-visible { display: block; }

.lightbox-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.35);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 20001;
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
    background: #e63946;
    transform: scale(1.1);
}

/* Arrows are pinned to the edges rather than being flex siblings, so showing
   or hiding them can never shift the photo off centre. */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 55px;
    height: 55px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    z-index: 20001;
    flex-shrink: 0;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    /* translateY must be repeated: a bare scale() would drop the centring. */
    transform: translateY(-50%) scale(1.1);
}

.jex-lightbox[data-single="true"] .lightbox-nav { display: none; }

@media (max-width: 768px) {
    .category-modal-backdrop {
        padding: 15px 10px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(0, 0, 0, 0.9);
    }

    .category-modal-box {
        border-radius: 24px;
        max-height: 94vh;
    }

    .modal-header  { padding: 18px 22px; }
    .modal-header h2 { font-size: 1.35rem; }

    .modal-close-btn {
        width: 38px;
        height: 38px;
        border-radius: 12px;
    }

    .modal-body { padding: 20px 15px; }

    .modal-gallery-grid { flex-direction: column; }
    .modal-gal-item     { border-radius: 16px; }

    .jex-lightbox { padding: 10px; }

    /* Leave room for the pinned arrows so they sit beside the photo rather
       than on top of it. */
    .lightbox-content-wrap { max-width: calc(100% - 100px); }

    .jex-lightbox[data-single="true"] .lightbox-content-wrap { max-width: 100%; }

    .lightbox-nav {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .lightbox-prev { left: 6px; }
    .lightbox-next { right: 6px; }
}