/* ============================================================
   BNS Portfolio – Shared-Background Panels Slider
   One full-width image behind all 3 panels; swaps on hover
   ============================================================ */

/* ── Outer wrapper ───────────────────────────────────────── */
.bns-panels-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* height set inline */
}

/* ─────────────────────────────────────────────────────────
   BACKGROUND LAYER
   All bg panels are stacked, only the active one is visible
───────────────────────────────────────────────────────── */
.bns-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.bns-bg-panel {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.bns-bg-panel.is-active {
    opacity: 1;
}

/* Video background inside a bg panel */
.bns-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    display: block;
}

/* ─────────────────────────────────────────────────────────
   GLOBAL OVERLAY
   Sits on top of the background, below the panels
───────────────────────────────────────────────────────── */
.bns-global-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* background-color + opacity set inline */
    transition: opacity 0.35s;
    pointer-events: none;
}
/* When any panel is hovered, fade the global overlay out */
.bns-panels-wrapper.bns-hovering .bns-global-overlay {
    opacity: 0 !important;
}

/* ─────────────────────────────────────────────────────────
   SLIDER TRACK & SLIDES
───────────────────────────────────────────────────────── */
.bns-slider-track {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    will-change: transform;
    /* transition-duration injected inline */
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bns-slide {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    /* gap set inline */
}

/* ─────────────────────────────────────────────────────────
   INDIVIDUAL PANEL
   Transparent – background shows through from bg-layer
───────────────────────────────────────────────────────── */
.bns-panel {
    position: relative;
    flex: 1 1 0;
    height: 100%;
    overflow: hidden;
    cursor: pointer;

    /* Opacity transition for "dim other panels" effect */
    opacity: 1;
    transition: opacity 0.25s;
}

/* Dim non-hovered panels */
.bns-slide.bns-group-hover .bns-panel          { opacity: 0.6; }
.bns-slide.bns-group-hover .bns-panel.bns-active { opacity: 1; }

/* ── Mobile bg zoom layer ───────────────────────────────────
   Sits behind everything inside the panel; background-image
   set by JS on mobile. On desktop it stays empty/invisible.
───────────────────────────────────────────────────────── */
.bns-panel-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 0;
    transform: scale(1);
}

/* Per-panel overlay: starts at resting opacity, disappears on hover */
.bns-panel-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* background-color set inline */
    transition: opacity 0.35s;
    pointer-events: none;
}
.bns-panel.bns-active .bns-panel-overlay {
    opacity: 0 !important;
}

/* Vertical divider between panels */
.bns-panel-divider {
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: rgba(255,255,255,0.15);
    z-index: 6;
    pointer-events: none;
}

/* Full-panel link cover (sits above everything) */
.bns-panel-cover {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: block;
}

/* ─────────────────────────────────────────────────────────
   PANEL CONTENT (title, skills, button)
   Title + skills always visible; button appears on hover.
   Content block shifts up on hover so button has room.
───────────────────────────────────────────────────────── */
.bns-panel-content {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 5;
    padding: 18px 27px;
    pointer-events: none;
}

/* ── Bottom alignment (default) ── */
.bns-valign-bottom .bns-panel-content {
    bottom: 0;
    top: auto;
    padding-bottom: 27px;
    transition: padding-bottom 0.3s 0.15s;
}
.bns-valign-bottom.bns-active .bns-panel-content {
    padding-bottom: 81px;
    transition-delay: 0s;
}

/* ── Top alignment ── */
.bns-valign-top .bns-panel-content {
    top: 0;
    bottom: auto;
    padding-top: 27px;
    transition: padding-top 0.3s 0.15s;
}
.bns-valign-top.bns-active .bns-panel-content {
    padding-top: 45px;
    transition-delay: 0s;
}

/* ── Middle alignment ── */
.bns-valign-middle .bns-panel-content {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    transition: transform 0.3s 0.15s;
}
.bns-valign-middle.bns-active .bns-panel-content {
    transform: translateY(calc(-50% - 24px));
    transition-delay: 0s;
}

/* Title — always visible */
.bns-panel-title {
    margin: 0 0 4px;
    padding: 0;
    font-weight: normal;
    line-height: 1.25em;
    /* color + font-size set inline */
}

/* Skills / category — always visible */
.bns-panel-skills {
    margin-top: 2px;
    line-height: 1.1em;
    /* color + font-size set inline */
}

/* View button wrap — hidden by default, shown on hover */
.bns-panel-btn-wrap {
    margin-top: 12px;
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
}
.bns-panel.bns-active .bns-panel-btn-wrap {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.15s;
    pointer-events: auto;
}

/* ─────────────────────────────────────────────────────────
   PLAY / PAUSE BUTTON
   Circular icon centered at the bottom of video panels.
   Visible when that panel is active (hovered).
   pointer-events always on so click fires even if hover
   state briefly drops during the click gesture.
───────────────────────────────────────────────────────── */
.bns-panels-wrapper .bns-play-btn {
    position: absolute !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 25 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;   /* always on so click is never missed */
    opacity: 0;
    transition: opacity 0.25s 0s !important;
    text-decoration: none !important;
}
.bns-panels-wrapper .bns-play-btn svg {
    width: 16px !important;
    height: 16px !important;
}
/* Default state: show play, hide pause */
.bns-panels-wrapper .bns-play-btn .bns-icon-play  { display: block !important; }
.bns-panels-wrapper .bns-play-btn .bns-icon-pause { display: none  !important; }
/* Playing state: hide play, show pause — toggled via .is-playing class in JS */
.bns-panels-wrapper .bns-play-btn.is-playing .bns-icon-play  { display: none  !important; }
.bns-panels-wrapper .bns-play-btn.is-playing .bns-icon-pause { display: block !important; }
.bns-panels-wrapper .bns-panel.bns-active .bns-play-btn {
    opacity: 1;
    transition-delay: 0.15s;
}
.bns-panels-wrapper .bns-play-btn:hover,
.bns-panels-wrapper .bns-play-btn:focus {
    background: rgba(0, 0, 0, 0.75) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.75) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* View button */
.bns-panel-btn {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid currentColor;
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.3s;
}
.bns-panel-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: var(--bns-fill, #ffffff);
    transition: top 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
}
.bns-panel-btn:hover::before  { top: 0; }
.bns-panel-btn:hover          { color: var(--bns-fill-txt, #000000) !important; }

/* ─────────────────────────────────────────────────────────
   NAVIGATION ARROWS
───────────────────────────────────────────────────────── */
.bns-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 44px;
    height: 44px;
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s;
    outline: none;
    padding: 0;
    /* color + background set inline */
}
.bns-slider-arrow:hover { opacity: 0.85; }
.bns-arrow-prev { left: 0; }
.bns-arrow-next { right: 0; }

/* ─────────────────────────────────────────────────────────
   MISC
───────────────────────────────────────────────────────── */
.bns-no-items {
    padding: 20px;
    text-align: center;
    color: #999;
}

/* ─────────────────────────────────────────────────────────
   MOBILE  (≤ 640 px)
   All panels stack vertically; no slider, no arrows,
   no play button. Tap once to zoom + reveal content;
   tap again to follow the link.
───────────────────────────────────────────────────────── */
@media (max-width: 640px) {

    /* ── Layout ── */
    .bns-panels-wrapper { height: auto !important; }

    .bns-slider-track {
        flex-direction: column;
        transform: none !important;
        transition: none !important;
    }
    .bns-slide {
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 0 !important;
    }
    .bns-panel {
        height: 280px;
        flex: none;
        /* bg shown via .bns-panel-img set by JS */
    }

    /* ── Hide desktop-only UI ── */
    .bns-slider-arrow,
    .bns-slider-dots                   { display: none !important; }
    .bns-bg-layer, .bns-global-overlay { display: none !important; }

    /* ── Play button: hidden until panel is tapped ── */
    .bns-panels-wrapper .bns-play-btn {
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.25s !important;
    }
    .bns-panels-wrapper .bns-panel.bns-tapped .bns-play-btn {
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* ── Panel image zoom layer ── */
    .bns-panel-img {
        transition: transform 0.5s ease;
    }
    .bns-panel.bns-tapped .bns-panel-img {
        transform: scale(1.07);
    }

    /* ── Overlay: always visible on mobile ── */
    .bns-panel-overlay { opacity: 1 !important; }

    /* ── Content: always shown, centered ── */
    .bns-panel-content {
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        text-align: center !important;
        padding: 18px !important;
    }

    /* ── No buttons on mobile ── */
    .bns-panel-btn-wrap { display: none !important; }

    /* ── No whole-panel dimming on mobile (avoids white bleed-through) ── */
    .bns-slide.bns-group-hover .bns-panel,
    .bns-slide.bns-group-hover .bns-panel.bns-tapped { opacity: 1 !important; }

    /* ── Dim only title/description of non-tapped tiles ── */
    .bns-panel .bns-panel-content { transition: opacity 0.3s; }
    .bns-panels-wrapper.bns-has-tapped .bns-panel:not(.bns-tapped) .bns-panel-content { opacity: 0.8; }
    .bns-panels-wrapper.bns-has-tapped .bns-panel.bns-tapped .bns-panel-content       { opacity: 1; }

    /* ── Video rendered inside .bns-panel-img on mobile ── */
    .bns-panel-img video.bns-video-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}