/* ============================================
   DM Video Embed Styles
   Component-specific styles (shared styles in dm-video-shared.css)
   ============================================ */

/* Video Embed Wrapper */
.dm-video-embed-wrapper {
    position: relative;
    margin: 40px 0;
}

/* Alignment Classes */
.dm-video-embed-wrapper.align-left {
    text-align: left;
}

.dm-video-embed-wrapper.align-center {
    text-align: center;
}

.dm-video-embed-wrapper.align-right {
    text-align: right;
}

/* Video Embed Container */
.dm-video-embed-container {
    display: inline-block;
    width: 100%;
}

/* Thumbnail Size Classes */
.dm-video-embed-wrapper.size-small .dm-video-embed-container {
    max-width: 400px;
}

.dm-video-embed-wrapper.size-medium .dm-video-embed-container {
    max-width: 600px;
}

.dm-video-embed-wrapper.size-large .dm-video-embed-container {
    max-width: 800px;
}

.dm-video-embed-wrapper.size-full .dm-video-embed-container {
    max-width: 100%;
}

/* Video Item */
.dm-video-embed-item {
    display: inline-block;
    width: 100%;
    outline: none;
}

/* Aspect Ratio Classes */
.dm-video-embed .dm-video-thumbnail.aspect-16-9 {
    padding-bottom: 56.25%; /* 16:9 */
}

.dm-video-embed .dm-video-thumbnail.aspect-4-3 {
    padding-bottom: 75%; /* 4:3 */
}

.dm-video-embed .dm-video-thumbnail.aspect-1-1 {
    padding-bottom: 100%; /* 1:1 */
}

.dm-video-embed .dm-video-thumbnail.aspect-21-9 {
    padding-bottom: 42.857%; /* 21:9 */
}

/* Play Button Style Variations */
.dm-video-embed .dm-video-play-btn.play-button-default svg {
    width: 80px;
    height: 80px;
}

.dm-video-embed .dm-video-play-btn.play-button-large svg {
    width: 120px;
    height: 120px;
}

.dm-video-embed .dm-video-play-btn.play-button-minimal svg {
    width: 60px;
    height: 60px;
}

/* Text Alignment Classes */
.dm-video-embed .dm-video-info.text-align-left {
    text-align: left;
}

.dm-video-embed .dm-video-info.text-align-center {
    text-align: center;
}

.dm-video-embed .dm-video-info.text-align-right {
    text-align: right;
}

/* Error Message */
.dm-video-embed-error {
    padding: 20px;
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    text-align: center;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 768px) {
    .dm-video-embed-wrapper {
        margin: 30px 0;
    }

    .dm-video-embed-wrapper.size-small .dm-video-embed-container,
    .dm-video-embed-wrapper.size-medium .dm-video-embed-container,
    .dm-video-embed-wrapper.size-large .dm-video-embed-container {
        max-width: 100%;
    }

    .dm-video-embed .dm-video-play-btn.play-button-default svg {
        width: 60px;
        height: 60px;
    }

    .dm-video-embed .dm-video-play-btn.play-button-large svg {
        width: 80px;
        height: 80px;
    }

    .dm-video-embed .dm-video-play-btn.play-button-minimal svg {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 480px) {
    .dm-video-embed-wrapper {
        margin: 20px 0;
    }

    .dm-video-embed .dm-video-play-btn.play-button-default svg {
        width: 50px;
        height: 50px;
    }

    .dm-video-embed .dm-video-play-btn.play-button-large svg {
        width: 70px;
        height: 70px;
    }

    .dm-video-embed .dm-video-play-btn.play-button-minimal svg {
        width: 40px;
        height: 40px;
    }
}