/**
 * Video Lightbox — PhotoSwipe Overrides for Vimeo Player
 *
 * Optimizes PhotoSwipe's default layout for fullscreen video playback:
 * minimal padding, arrows at bottom-right, dark background, cursor fixes.
 *
 * Uses !important where needed to override Ryhe's base PhotoSwipe styles.
 */

/* --- Maximize embed area: minimal padding ---
   font-size:0 hides stray URL text node left by Ryhe's
   partial Vimeo regex match on player.vimeo.com URLs.
   background-color prevents white flash during iframe load.
   align-items:stretch ensures iframe fills content area height. */
.pswp__wrapper-embed {
    padding: 40px 15px 60px !important;
    font-size: 0 !important;
    background-color: #000;
    align-items: stretch !important;
}

/* --- Top bar: compact --- */
.pswp__top-bar {
    padding: 8px 12px !important;
}

/* --- Arrows: fixed bottom-right, side by side --- */
.pswp__button--arrow--left,
.pswp__button--arrow--right {
    position: fixed !important;
    top: auto !important;
    bottom: 12px !important;
    margin-top: 0 !important;
    z-index: 1600 !important;
    width: 50px !important;
    height: 50px !important;
}

.pswp__button--arrow--left .arrow,
.pswp__button--arrow--right .arrow {
    width: 40px !important;
    height: 40px !important;
}

.pswp__button--arrow--left {
    left: auto !important;
    right: 80px !important;
    transform: none !important;
}

.pswp__button--arrow--right {
    left: auto !important;
    right: 20px !important;
    transform: none !important;
}

/* --- Caption: left-aligned at bottom --- */
.pswp__caption {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: auto !important;
    z-index: 1550 !important;
    transition: opacity 0.333s cubic-bezier(0.4, 0, 0.22, 1) !important;
}

.pswp__caption__center {
    max-width: none !important;
    font-size: 0.85rem !important;
    padding: 16px 24px !important;
    text-align: left !important;
}

/* --- Idle: hide caption + all cursors ---
   On idle: caption fades, system cursor + Ryhe custom cursor both hide.
   Over iframe: custom cursor hides (cross-origin blocks mousemove → sticks).
   :has() needed because .cursor is a sibling BEFORE .pswp in the DOM,
   and .pswp__scroll-wrap is a sibling BEFORE .pswp__ui. */
.pswp__ui--idle .pswp__caption {
    opacity: 0 !important;
}

.pswp:has(.pswp__ui--idle),
.pswp:has(.pswp__ui--idle) * {
    cursor: none !important;
}

body:has(.iframe-vimeo:hover) .cursor,
body:has(.pswp__ui--idle) .cursor {
    display: none !important;
}

/* --- Iframe: remove border + fill wrapper completely ---
   display:block eliminates inline baseline gap (poster peeking at bottom). */
.pswp__wrapper-embed iframe {
    border: 0;
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* --- Dezente Card-Beschriftung ---
   Heading + Category use the same font style as the filter bar:
   Raleway 16px / weight 500 / uppercase / normal spacing.
   No explicit colors — inherits from Ryhe's data-arts-theme-text
   so it works on both light and dark backgrounds. */
.section-grid .figure-project__heading {
    font-family: Raleway, var(--font-secondary, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    line-height: 1.8 !important;
}

.section-grid .figure-project__category .subheading {
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: normal !important;
    text-transform: uppercase !important;
    opacity: 0.5;
}

/* --- Counter: subtle --- */
.pswp__counter {
    font-size: 0.75rem !important;
    opacity: 0.5;
}

/* --- Tablet --- */
@media (max-width: 991px) {
    .pswp__wrapper-embed {
        padding: 45px 8px 60px !important;
    }

    .pswp__button--arrow--left {
        right: 70px !important;
    }

    .pswp__button--arrow--right {
        right: 15px !important;
    }
}

/* --- Mobile --- */
@media (max-width: 576px) {
    .pswp__wrapper-embed {
        padding: 45px 4px 55px !important;
    }

    .pswp__caption__center {
        padding: 12px 16px !important;
        font-size: 0.8rem !important;
    }

    .pswp__button--arrow--left {
        right: 60px !important;
    }

    .pswp__button--arrow--right {
        right: 10px !important;
    }
}