/* ==========================================================================
   Global media sizing (images, videos, PDFs, iframes)
   Loaded last in public/index.html so it applies to every page.

   The baseline rules use :where() (zero specificity), so any page-specific
   rule (.video_boxs_sec video, .video-container video, slider images ...)
   still wins. Only content media (rich text, chat, preview modals) gets
   stronger, scoped sizes below.
   ========================================================================== */

/* ---------- 1. Baseline: no media ever overflows its column ---------- */
:where(img, video, iframe, embed, object, canvas, audio) {
    max-width: 100%;
}

:where(img) {
    height: auto;
}

/* Videos keep one 16:9 frame whatever the source is (portrait phone clips are
   letterboxed instead of becoming very tall). Videos sized with height="100%"
   fill a parent box on purpose and the Agora call tiles are sized by the SDK. */
:where(video:not([height$="%"]):not(.agora_video_player)) {
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 80vh;
}

:where(video) {
    object-fit: contain;
    background-color: #000;
}

/* Embedded players (YouTube / Vimeo etc.) - same 16:9 frame as videos */
:where(iframe[src*="youtube"], iframe[src*="youtu.be"], iframe[src*="vimeo"], iframe[src*="player"]) {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* PDF / document embeds */
:where(embed[type="application/pdf"], object[type="application/pdf"], iframe[src$=".pdf" i], iframe[src*="gview"]) {
    width: 100%;
    height: 70vh;
    min-height: 400px;
    border: 0;
}

/* ---------- 2. Rich text content (lesson / class / blog descriptions) ---------- */
.lesson-details img,
.video-desc-content img,
.faq-desc-content img,
.blog-detail-text img,
.inline-editor-images img {
    max-width: 100%;
    max-height: 480px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.lesson-details video,
.video-desc-content video,
.faq-desc-content video,
.blog-detail-text video {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: 480px;
    margin: 0 auto;
}

.lesson-details iframe,
.video-desc-content iframe,
.faq-desc-content iframe,
.blog-detail-text iframe {
    width: 100%;
    max-width: 800px;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
}

/* ---------- 3. Chat messages: photos and videos share one bubble size ---------- */
.msg-body video,
.msg-body img[alt="chat"],
.msg-body li img:not([alt]) {
    width: 220px;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.msg-body video {
    aspect-ratio: 16 / 9;
}

/* ---------- 4. Preview modals (FileModal, chat media modal) ---------- */
.modal-body > img,
.modal-body > video {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    margin: 0 auto;
    object-fit: contain;
}

.modal-body > img {
    width: auto;
    height: auto;
}

/* react-pdf sets fixed inline canvas sizes - scale pages down with the screen */
.react-pdf__Page,
.react-pdf__Page canvas {
    max-width: 100% !important;
}

.react-pdf__Page canvas {
    height: auto !important;
    margin: 0 auto;
}

/* ---------- 5. Smaller screens ---------- */
@media (max-width: 767px) {
    .lesson-details img,
    .video-desc-content img,
    .faq-desc-content img,
    .blog-detail-text img,
    .inline-editor-images img,
    .lesson-details video,
    .video-desc-content video,
    .faq-desc-content video,
    .blog-detail-text video {
        max-height: 300px;
    }

    .msg-body video,
    .msg-body img[alt="chat"],
    .msg-body li img:not([alt]) {
        width: 180px;
    }

    :where(embed[type="application/pdf"], object[type="application/pdf"], iframe[src$=".pdf" i], iframe[src*="gview"]) {
        height: 60vh;
        min-height: 300px;
    }
}

/* ---------- 6. Reusable classes for uploaded media in JSX ---------- */
/* Detail pages (newsletter, quiz, lesson attachments ...): fits the column
   width but never taller than 450px, keeps its proportions, centred. */
.media-fit {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 450px;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 8px;
}

video.media-fit {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 16 / 9;
    background-color: #000;
}

/* Gallery thumbnails: same square tile for every picture, cropped to fill */
.media-thumb {
    display: inline-block;
    width: 100%;
    max-width: 290px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .media-fit {
        max-height: 280px;
    }

    .media-thumb {
        max-width: calc(50% - 8px);
    }
}