/**
 * MLP Videoplayer Widget Styles
 *
 * Styles for the MLP Videoplayer Elementor Widget
 * Supports video embeds (YouTube, Vimeo, self-hosted) and images
 *
 * @package LandingPageAI_Child
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
    /* Placeholder colors */
    --mlp-videoplayer-placeholder-bg-start: #f5f5f5;
    --mlp-videoplayer-placeholder-bg-end: #e0e0e0;
    --mlp-videoplayer-placeholder-border: #ccc;
    --mlp-videoplayer-placeholder-icon: #999;
    --mlp-videoplayer-placeholder-title: #666;
    --mlp-videoplayer-placeholder-text: #888;

    /* Demo badge */
    --mlp-demo-badge-bg: rgba(255, 152, 0, 0.9);
    --mlp-demo-badge-color: #fff;
}

/* ==========================================================================
   Container Styles
   ========================================================================== */

.mlp-videoplayer-widget {
    /* Widget container - no specific styles needed, serves as namespace */
}

.mlp-videoplayer {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    /* Verhindert dass Elementor Flex-Layouts den Videoplayer zusammenstauchen */
    flex-shrink: 0;
}

.mlp-videoplayer--demo {
    /* Demo mode modifier */
}

.mlp-videoplayer-wrapper {
    position: relative;
    width: 100%;
}

/* ==========================================================================
   Video Wrapper
   ========================================================================== */

.mlp-video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Sicherstellen dass aspect-ratio in Flex-Layouts korrekt berechnet wird */
    flex-shrink: 0;
}

/* position:absolute entfernt - kollidiert mit aspect-ratio auf dem Wrapper.
   Der Container nutzt aspect-ratio (inline-style), iframes/videos fuellen ihn mit width/height: 100%.
   Siehe auch: css/video-page-widget.css fuer das gleiche Pattern. */
.mlp-video-wrapper iframe,
.mlp-video-wrapper video {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ==========================================================================
   Aspect Ratios
   ========================================================================== */

.mlp-video-wrapper[data-aspect="16-9"] {
    aspect-ratio: 16 / 9;
}

.mlp-video-wrapper[data-aspect="4-3"] {
    aspect-ratio: 4 / 3;
}

.mlp-video-wrapper[data-aspect="1-1"] {
    aspect-ratio: 1 / 1;
}

.mlp-video-wrapper[data-aspect="9-16"] {
    aspect-ratio: 9 / 16;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 16 / 9) {
    .mlp-video-wrapper[data-aspect="16-9"] {
        padding-bottom: 56.25%; /* 9/16 = 0.5625 */
    }

    .mlp-video-wrapper[data-aspect="4-3"] {
        padding-bottom: 75%; /* 3/4 = 0.75 */
    }

    .mlp-video-wrapper[data-aspect="1-1"] {
        padding-bottom: 100%;
    }

    .mlp-video-wrapper[data-aspect="9-16"] {
        padding-bottom: 177.78%; /* 16/9 = 1.7778 */
    }
}

/* ==========================================================================
   Image Wrapper
   ========================================================================== */

.mlp-image-wrapper {
    /* Container for image display mode */
}

.mlp-image-wrapper img,
.mlp-videoplayer-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Object-fit variants */
.mlp-image-wrapper[data-fit="cover"] img {
    object-fit: cover;
}

.mlp-image-wrapper[data-fit="contain"] img {
    object-fit: contain;
}

/* ==========================================================================
   Editor Placeholder
   ========================================================================== */

.mlp-videoplayer-placeholder {
    background: linear-gradient(
        135deg,
        var(--mlp-videoplayer-placeholder-bg-start) 0%,
        var(--mlp-videoplayer-placeholder-bg-end) 100%
    );
    border: 2px dashed var(--mlp-videoplayer-placeholder-border);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mlp-videoplayer-placeholder__icon {
    font-size: 48px;
    color: var(--mlp-videoplayer-placeholder-icon);
    margin-bottom: 15px;
    line-height: 1;
}

.mlp-videoplayer-placeholder__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mlp-videoplayer-placeholder-title);
    margin: 0 0 8px 0;
}

.mlp-videoplayer-placeholder__text {
    font-size: 13px;
    color: var(--mlp-videoplayer-placeholder-text);
    margin: 0;
}

/* ==========================================================================
   Demo Badge (for templates)
   ========================================================================== */

.mlp-demo-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--mlp-demo-badge-bg);
    color: var(--mlp-demo-badge-color);
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
    pointer-events: none;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
    .mlp-videoplayer {
        max-width: 100%;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .mlp-videoplayer {
        max-width: 100%;
        margin: 0 auto;
    }

    .mlp-videoplayer-placeholder {
        padding: 30px 15px;
        min-height: 150px;
    }

    .mlp-videoplayer-placeholder__icon {
        font-size: 36px;
        margin-bottom: 12px;
    }

    .mlp-videoplayer-placeholder__title {
        font-size: 14px;
    }

    .mlp-videoplayer-placeholder__text {
        font-size: 12px;
    }

    /* Video-Wrapper mobil nie über Container hinaus */
    .mlp-video-wrapper {
        max-width: 100%;
    }

    .mlp-video-wrapper iframe,
    .mlp-video-wrapper video {
        max-width: 100%;
    }
}

/* ==========================================================================
   Elementor Editor Specific
   ========================================================================== */

.elementor-editor-active .mlp-videoplayer-widget {
    /* Ensure widget is always visible in editor */
    min-height: 50px;
}

.elementor-editor-active .mlp-video-wrapper iframe,
.elementor-editor-active .mlp-video-wrapper video {
    /* Prevent interaction issues in editor */
    pointer-events: none;
}

/* Ensure mlp-videoplayer also gets editor treatment */
.elementor-editor-active .mlp-videoplayer {
    min-height: 50px;
}

/* ==========================================================================
   HLS Video Player
   ========================================================================== */

.mlp-hls-video {
    width: 100%;
    height: 100%;
    background: #000;
}

/* ==========================================================================
   Error States
   ========================================================================== */

.mlp-video-error {
    padding: 20px;
    text-align: center;
    color: #dc3545;
    background: #fff5f5;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
}

.mlp-video-error p {
    margin: 0;
}

/* ==========================================================================
   Inline Placeholder Styles (Widget render_placeholder)
   ========================================================================== */

.mlp-videoplayer--placeholder {
    background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%);
    border: 2px dashed #ccc;
    padding: 40px 20px;
    text-align: center;
}

.mlp-placeholder__icon {
    font-size: 48px;
    color: #999;
    margin-bottom: 16px;
}

.mlp-placeholder__title {
    font-size: 16px;
    font-weight: 600;
    color: #666;
    margin-bottom: 8px;
}

.mlp-placeholder__hint {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

.mlp-placeholder__slot-badge {
    display: inline-block;
    background: #0073aa;
    color: #fff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================================================
   Demo Placeholder
   ========================================================================== */

.mlp-video-wrapper--demo-placeholder {
    background: linear-gradient(135deg, #e8f4fc 0%, #d1e9f6 100%);
    border: 2px dashed #0073aa;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}