/**
 * Video Showcase Styles
 * Vimeo-Showcase-Style: dark background, large thumbnails, category filter.
 * Video playback via Ryhe's built-in PhotoSwipe lightbox.
 *
 * Thumbnail grid uses Ryhe-native hover-zoom / figure-image / lazy classes
 * (same as the Fotos gallery). Only layout, info text, filter & lightbox
 * overrides are custom.
 *
 * Uses !important where needed to override Ryhe's base styles.
 * Timing: Ryhe's cubic-bezier(0.785, 0.135, 0.15, 0.86) for consistency.
 */


/* ============================================
   HALFSCREEN HERO + GRADIENT OVERLAP
   ============================================ */

/* Hero at 85vh — large image area with gradient fading into content */
.section-masthead.section-halfheight {
    min-height: 85vh !important;
    max-height: 85vh !important;
    height: 85vh !important;
    overflow: hidden !important;
    position: relative !important;
}

.section-masthead.section-halfheight .section-fullheight__inner {
    min-height: 85vh !important;
}

/* Overlay wird jetzt per Panel gesteuert (section-masthead.php).
   Alte hardcoded ::before/::after Overlays entfernt. */

/* Video grid overlaps INTO the hero gradient.
   z-index must be > 50 to sit above .section-masthead__inner (z-index:50)
   so that cursor events reach the first row of cards in the overlap area. */
.section-masthead.section-halfheight + .section-content {
    position: relative;
    z-index: 51;
    margin-top: -6rem !important;
    padding-top: 0 !important;
    background: transparent !important;
}


/* ============================================
   VIDEO CARD — only layout & info text
   (thumbnail hover handled by Ryhe's hover-zoom)
   ============================================ */

.video-card {
    position: relative !important;
    transition: opacity 0.4s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* --- Video info (below thumbnail) --- */
.video-card__info {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.5rem 0 0 !important;
}

.video-card__title {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
}

.video-card__duration {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
    flex-shrink: 0;
}


/* ============================================
   FILTER BUTTONS (overlay on hero)
   ============================================ */

.section-masthead__extra {
    position: relative;
    z-index: 2;
}

.video-filter {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4em 1.2em;
}

.video-filter__btn {
    background: none !important;
    border: none !important;
    cursor: pointer;
    padding: 0.2em 0 !important;
    opacity: 0.85;
    transition: opacity 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    font-family: inherit;
    color: #ffffff !important;
    border-bottom: 1px solid transparent !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.7rem !important;
}

.video-filter__btn:hover {
    opacity: 1;
}

.video-filter__btn--active {
    opacity: 0.85;
    border-bottom-color: currentColor !important;
}


/* ============================================
   GRID
   ============================================ */

.video-grid {
    position: relative;
}

/* Grid columns: FLIP animation handles transitions via inline styles.
   will-change hints help GPU-accelerate the movement. */
.video-grid > [class*="col-"] {
    will-change: transform, opacity;
}


/* ============================================
   PHOTOSWIPE LIGHTBOX OVERRIDES
   Maximize player size, arrows flanking title
   at bottom of viewport.
   ============================================ */

/* --- Maximize embed area: minimal padding --- */
/* font-size:0 hides the 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. */
.pswp__wrapper-embed {
    padding: 40px 15px 60px !important;
    font-size: 0 !important;
    background-color: #000;
}

/* --- 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, system cursor --- */
.pswp__ui--idle .pswp__caption {
    opacity: 0 !important;
}

/* Hide system mouse cursor on the entire lightbox when idle */
.pswp__ui--idle,
.pswp__ui--idle ~ *,
.pswp__ui--idle * {
    cursor: none !important;
}

/* Show system cursor on lightbox controls when NOT idle.
   Ryhe sets cursor:none on <body> for its custom cursor circle,
   but we hide that circle in the lightbox. Without this override,
   hovering over close/arrows shows NO cursor at all. */
.pswp--open .pswp__button--close,
.pswp--open .pswp__button--arrow--left,
.pswp--open .pswp__button--arrow--right,
.pswp--open .pswp__button--fs {
    cursor: pointer !important;
}

.pswp--open .pswp__scroll-wrap {
    cursor: default !important;
}

/* Hide Ryhe custom cursor circle entirely when lightbox is open.
   The cursor circle gets stuck over the iframe (no mousemove events
   from cross-origin Vimeo iframe) and serves no purpose in the player. */
.cursor.cursor--pswp-hidden {
    display: none !important;
}

/* --- 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;
    }
}


/* ============================================
   VIDEO PLAYER (videoproject single page)
   Responsive 16:9 container for Vimeo iframe.
   ============================================ */

.video-player__wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.video-player__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}