/*
 * v1.4 Phase 16-06 HELP-MEDIA-03 + HELP-ART-04 — Responsive video + lazy images.
 *
 * Responsive 16:9 video wrapper using aspect-ratio (modern browsers) + fallback
 * padding-bottom:56.25% for legacy browsers (<Safari 15, <Chrome 88).
 * Inline images via MD ![alt](path) receive max-width:100% + height:auto via
 * .help-article-body img selector (replaces inline style= injection from 16-03).
 */

/* HELP-MEDIA-03 — 16:9 wrapper with aspect-ratio + legacy fallback */
.help-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 720px;
    margin: 1rem auto;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

/* Fallback для browsers without aspect-ratio support (<Safari 15, <Chrome 88) */
@supports not (aspect-ratio: 16 / 9) {
    .help-video-wrapper {
        padding-bottom: 56.25%;  /* 9/16 = 0.5625 */
        height: 0;
    }
    .help-video-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

.help-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* HELP-ART-04 — inline images CSS class (replacing inline post-process from 16-03) */
.help-article-body img,
.help-image-lazy {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1rem auto;
    border-radius: 4px;
}

/* Videos block heading spacing */
.help-videos {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #dee2e6;
}

.help-videos h3 {
    margin-bottom: 1rem;
}

/* Mobile: shrink max-width gutter */
@media (max-width: 576px) {
    .help-video-wrapper {
        max-width: 100%;
        border-radius: 0;
    }
}