/* ============================================
   Nils Koenning — Custom Styles
   Extracted from functions.php 22 March 2026
   ============================================ */

/* ------------------------------------------
   Architecture Single Page
   ------------------------------------------ */

/* Scrollbar and fade for text column */
@media (min-width: 1025px) {
    .right-col {
        max-height: 600px;
        overflow-y: auto !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        position: relative;
    }
    .right-col::-webkit-scrollbar {
        display: none !important;
    }
    .right-col::after {
        content: '';
        position: sticky;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        min-height: 80px;
        display: block;
        background: linear-gradient(to bottom, transparent, #ffffff);
        pointer-events: none;
        margin-top: -80px;
    }
}

/* Post tags styling */
.nk-post-tags {
    font-family: Rubik, sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #808080;
    line-height: 18px;
    -webkit-font-smoothing: antialiased;
    margin-top: 20px;
    position: relative;
    z-index: 10;
    background: #ffffff;
    padding-bottom: 10px;
}
.nk-post-tags::before {
    content: 'Tags: ';
}
.nk-tag {
    display: inline;
    font-family: Rubik, sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #808080;
    line-height: 18px;
    -webkit-font-smoothing: antialiased;
    text-transform: none;
    letter-spacing: normal;
    border: none;
    padding: 0;
    margin: 0;
    background: none;
}
.nk-tag:not(:last-child)::after {
    content: ', ';
}

/* ------------------------------------------
   Landing Page — Viewport Constraint
   ------------------------------------------ */
.lp-section {
    height: calc(100vh - 63px - 40px) !important;
    height: calc(100dvh - 63px - 40px) !important;
    overflow: hidden !important;
}
.admin-bar .lp-section {
    height: calc(100vh - 63px - 40px - 46px) !important;
    height: calc(100dvh - 63px - 40px - 46px) !important;
}
@media (max-width: 782px) {
    .admin-bar .lp-section {
        height: calc(100vh - 63px - 40px - 32px) !important;
        height: calc(100dvh - 63px - 40px - 32px) !important;
    }
}
.lp-desktop-img a,
.lp-mobile-img a {
    display: block !important;
    height: calc(100vh - 63px - 40px) !important;
    height: calc(100dvh - 63px - 40px) !important;
}
.admin-bar .lp-desktop-img a,
.admin-bar .lp-mobile-img a {
    height: calc(100vh - 63px - 40px - 46px) !important;
    height: calc(100dvh - 63px - 40px - 46px) !important;
}
@media (max-width: 782px) {
    .admin-bar .lp-desktop-img a,
    .admin-bar .lp-mobile-img a {
        height: calc(100vh - 63px - 40px - 32px) !important;
        height: calc(100dvh - 63px - 40px - 32px) !important;
    }
}
.lp-desktop-img img,
.lp-mobile-img img {
    width: 100% !important;
    height: calc(100vh - 63px - 40px) !important;
    height: calc(100dvh - 63px - 40px) !important;
    object-fit: cover !important;
}
.admin-bar .lp-desktop-img img,
.admin-bar .lp-mobile-img img {
    height: calc(100vh - 63px - 40px - 46px) !important;
    height: calc(100dvh - 63px - 40px - 46px) !important;
}
@media (max-width: 782px) {
    .admin-bar .lp-desktop-img img,
    .admin-bar .lp-mobile-img img {
        height: calc(100vh - 63px - 40px - 32px) !important;
        height: calc(100dvh - 63px - 40px - 32px) !important;
    }
}

/* ------------------------------------------
   Conceptual Loop — Height Constraint + Arrows
   ------------------------------------------ */
.elementor-element-ce0194b {
    height: calc(100vh - 103px) !important;
    height: calc(100dvh - 103px) !important;
    overflow: hidden !important;
}
.elementor-element-ce0194b .e-loop-item img {
    max-height: calc(100vh - 103px - 100px) !important;
    max-height: calc(100dvh - 103px - 100px) !important;
    width: auto !important;
    object-fit: contain !important;
}
.admin-bar .elementor-element-ce0194b {
    height: calc(100vh - 103px - 46px) !important;
    height: calc(100dvh - 103px - 46px) !important;
}
.admin-bar .elementor-element-ce0194b .e-loop-item img {
    max-height: calc(100vh - 103px - 100px - 46px) !important;
    max-height: calc(100dvh - 103px - 100px - 46px) !important;
}
@media (max-width: 782px) {
    .admin-bar .elementor-element-ce0194b {
        height: calc(100vh - 103px - 32px) !important;
        height: calc(100dvh - 103px - 32px) !important;
    }
    .admin-bar .elementor-element-ce0194b .e-loop-item img {
        max-height: calc(100vh - 103px - 100px - 32px) !important;
        max-height: calc(100dvh - 103px - 100px - 32px) !important;
    }
}
@media (max-width: 767px) {
    .elementor-element-ce0194b .e-loop-item img {
        max-height: none !important;
        height: calc(100vh - 173px) !important;
        height: calc(100dvh - 173px) !important;
        width: 100% !important;
        object-fit: cover !important;
    }
    .admin-bar .elementor-element-ce0194b .e-loop-item img {
        height: calc(100vh - 173px - 32px) !important;
        height: calc(100dvh - 173px - 32px) !important;
    }
}

/* Conceptual arrows: fixed to viewport bottom-right, desktop only, NK custom SVGs */
@media (min-width: 768px) {
    .elementor-element-ce0194b .elementor-swiper-button {
        position: fixed !important;
        bottom: 40px !important;
        top: auto !important;
        transform: none !important;
        width: 20px !important;
        height: 20px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }
    .elementor-element-ce0194b .elementor-swiper-button i {
        display: none !important;
    }
    .elementor-element-ce0194b .elementor-swiper-button-prev {
        left: auto !important;
        right: 75px !important;
        background-image: url('https://nils.nilskoenning.com/wp-content/uploads/2026/04/prev-arrow_13pt_black_400x400_NK.svg') !important;
    }
    .elementor-element-ce0194b .elementor-swiper-button-next {
        left: auto !important;
        right: 40px !important;
        background-image: url('https://nils.nilskoenning.com/wp-content/uploads/2026/04/next-arrow_13pt_black_400x400_NK.svg') !important;
    }
}


/* ------------------------------------------
   Global — Off-Canvas & Search
   ------------------------------------------ */

/* Off-canvas search: align to start (desktop uses flex-end) */
.e-off-canvas .serch-col {
    justify-content: flex-start !important;
}
/* Collapse search input when closed, expand when active */
.serch-col:not(.active) .e-search-input {
    width: 0 !important;
    overflow: hidden !important;
}
.serch-col.active .e-search-input {
    width: 100% !important;
}
.serch-col.active .e-search-input-wrapper {
    width: 100% !important;
    flex: 1 !important;
}
/* Off-canvas search: flexible width instead of absolute positioning */
.e-off-canvas .serch-col.active .search-bar {
    position: relative !important;
    right: auto !important;
    left: auto !important;
    width: auto !important;
    flex: 1 1 0% !important;
    opacity: 1 !important;
    overflow: visible !important;
}
.e-off-canvas .serch-col .e-search-input {
    width: 100% !important;
    max-width: 100% !important;
}
.e-off-canvas .serch-col .e-search-input-wrapper {
    width: 100% !important;
    flex: 1 !important;
}
/* Active menu item: tight green background */
.e-off-canvas .current-menu-item > a {
    padding: 4px !important;
    width: fit-content !important;
    margin-left: 6px !important;
}
/* Fix WPML Language Switcher widget container spacing */
.elementor-widget-wpml-ls .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}
/* iOS search input styling fix */
.e-off-canvas .e-search-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #999999 !important;
    border-radius: 0 !important;
    font-family: Rubik, sans-serif !important;
    font-size: 14px !important;
    color: #333333 !important;
}

/* ── Architecture Gallery Grid (Option B) ── */
.nk-gallery-grid {
    position: relative;
}

.nk-gallery-item {
    overflow: hidden;
    cursor: pointer;
}

.nk-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.nk-gallery-item.nk-stretched img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nk-gallery-video video {
    width: 100%;
}

/* Mobile video swap */
.nk-vid-mobile { display: none; }
.nk-show-mobile { display: none; }


@media (max-width: 1024px) {
    .nk-gallery-grid {
        /* tablet: 2 columns — handled by JS */
    }
}

@media (max-width: 767px) {
    .nk-gallery-grid {
        /* mobile: 1 column — handled by JS */
    }
    .nk-vid-desktop { display: none; }
    .nk-vid-mobile { display: block; }
    .nk-show-desktop { display: none; }
    .nk-show-mobile { display: block; }
}

/* ── NK Custom Lightbox ── */
.nk-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: #fff;
    z-index: 100000;
    flex-direction: column;
}
.nk-lightbox.nk-lightbox-open {
    display: flex;
}

/* Header: fullscreen + close, top-right */
.nk-lightbox-header {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    gap: 16px;
    align-items: center;
}
.nk-lb-close,
.nk-lb-fullscreen,
.nk-lb-prev,
.nk-lb-next {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    border: none;
    cursor: pointer;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.nk-lb-close:hover,
.nk-lb-close:active,
.nk-lb-close:focus,
.nk-lb-fullscreen:hover,
.nk-lb-fullscreen:active,
.nk-lb-fullscreen:focus,
.nk-lb-prev:hover,
.nk-lb-prev:active,
.nk-lb-prev:focus,
.nk-lb-next:hover,
.nk-lb-next:active,
.nk-lb-next:focus {
    background-color: transparent;
    outline: none;
    box-shadow: none;
}
.nk-lb-close {
    width: 26px;
    height: 26px;
    background-image: url('https://nils.nilskoenning.com/wp-content/uploads/2025/12/X_20pt_999999_NK.svg');
}
.nk-lb-fullscreen {
    width: 26px;
    height: 26px;
    background-image: url('https://nils.nilskoenning.com/wp-content/uploads/2026/03/fullscreen_13pt_black_400x400_NK.svg');
}
.nk-lb-fullscreen.nk-lb-fs-active {
    background-image: url('https://nils.nilskoenning.com/wp-content/uploads/2026/03/smallscreen_13pt_black_400x400_NK.svg');
}

/* Content area — viewport for sliding track */
.nk-lightbox-content {
    flex: 1;
    position: relative;
    overflow: hidden;
}

/* Sliding track: 3 slides side by side (prev, current, next) */
.nk-lightbox-track {
    display: flex;
    height: 100%;
    will-change: transform;
}
.nk-lightbox-slide {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    box-sizing: border-box;
}
.nk-lightbox-slide img,
.nk-lightbox-slide video {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* Arrows: bottom-right, matching conceptual slider position */
.nk-lightbox-arrows {
    position: absolute;
    bottom: 20px;
    right: 40px;
    z-index: 10;
    display: flex;
    gap: 24px;
}
.nk-lb-prev,
.nk-lb-next {
    width: 16px;
    height: 16px;
    padding: 10px;
    margin: -10px;
}
.nk-lb-prev {
    background-image: url('https://nils.nilskoenning.com/wp-content/uploads/2026/04/prev-arrow_13pt_black_400x400_NK.svg');
    padding-right: 0;
    margin-right: 0;
}
.nk-lb-next {
    background-image: url('https://nils.nilskoenning.com/wp-content/uploads/2026/04/next-arrow_13pt_black_400x400_NK.svg');
    padding-left: 0;
    margin-left: 0;
}

/* Hide fullscreen on tablet/mobile */
@media (max-width: 1024px) {
    .nk-lb-fullscreen {
        display: none;
    }
}

/* Mobile lightbox padding */
@media (max-width: 767px) {
    .nk-lightbox-slide {
        padding: 60px 20px;
    }
}

/* CLS fix: reserve slick slider height before init (all breakpoints) */
.projects-gallery-carousel {
  height: 600px;
  overflow: hidden;
}

/* ============================================================
   CLS fix: Gallery grid reserves calculated aspect-ratio
   PHP Section 8 outputs --nk-aspect-desktop/tablet/mobile vars
   per post by simulating the masonry algorithm at render time.
   ============================================================ */

.nk-gallery-grid {
  position: relative;
  aspect-ratio: 1 / var(--nk-aspect-desktop, 1);
}
@media (max-width: 1024px) {
  .nk-gallery-grid {
    aspect-ratio: 1 / var(--nk-aspect-tablet, 1);
  }
}
@media (max-width: 767px) {
  .nk-gallery-grid {
    aspect-ratio: 1 / var(--nk-aspect-mobile, 1);
  }
}

/* Items start off-screen + hidden so the browser's lazy-loader
   correctly treats them as out-of-viewport.
   Masonry JS sets inline position:absolute + top/left, which
   overrides CSS and snaps each item into place. */
.nk-gallery-grid .nk-gallery-item {
  position: absolute;
  top: -9999px;
  left: -9999px;
  visibility: hidden;
}
.nk-gallery-grid .nk-gallery-item[style*="position: absolute"] {
  visibility: visible;
}