/* Featured Media Autoplay - Frontend Styles */

/* Link wrapper */
.fma-media-link {
    display: block;
    text-decoration: none;
    cursor: pointer;
    width: 100%;
    clear: both;
}

.fma-media-link:hover {
    opacity: 0.95;
}

/* Media container - no background, no aspect ratio padding */
.fma-featured-media-container {
    width: 100%;
    display: block;
    clear: both;
    position: relative;
    line-height: 0;
}

/* Video and Image elements */
.fma-featured-media {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}

/* Remove default video controls outline on focus */
.fma-featured-media:focus {
    outline: none;
}

/* Desktop: No aspect ratio padding, let video/image determine height naturally */
@media (min-width: 769px) {
    .fma-featured-media-container {
        position: relative;
        overflow: hidden;
    }

    .fma-featured-media {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
    }
}

/* Mobile: Complete reset - simple block display */
@media (max-width: 768px) {
    .fma-media-link {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    
    .fma-featured-media-container,
    .fma-featured-video-container,
    .fma-featured-image-container {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: visible !important;
        float: none !important;
        clear: both !important;
    }
    
    .fma-featured-media,
    .fma-featured-video,
    .fma-featured-image {
        display: block !important;
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        max-height: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        object-fit: contain !important;
        float: none !important;
        clear: both !important;
    }
    
    /* Extra specificity for video elements */
    video.fma-featured-video,
    video.fma-featured-media {
        display: block !important;
        position: relative !important;
    }
}

/* Image specific styles */
.fma-featured-image {
    object-fit: cover;
}

/* Video specific styles */
.fma-featured-video {
    object-fit: cover;
}

/* Prevent text selection on media link */
.fma-media-link {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Loading state */
.fma-featured-media-container.loading {
    background: #f0f0f0;
}

.fma-featured-media-container.loading::after {
    content: "Loading...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #666;
    font-size: 14px;
}

/* Fallback for older browsers */
.no-media .fma-featured-media-container {
    display: none;
}

/* Clear any float issues */
.fma-media-link::after,
.fma-featured-media-container::after {
    content: "";
    display: table;
    clear: both;
}