/* text-view-media.css — media layout for `.text-view` content. Covers raw
   <img>, CKEditor 5 <figure class="image image-style-*">, <figure class="media">
   oEmbed/iframe wrappers, plus responsive + dark + print overrides. Loaded
   after text-view.css in head.tpl. */

/* Plain images */
.text-view img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1em auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Legacy CKE4 / inline alignment classes */
.text-view img.align-left,
.text-view .image.align-left {
    float: left;
    margin: 0.4em 1.2em 0.8em 0;
    max-width: 50%;
    clear: left;
}
.text-view img.align-right,
.text-view .image.align-right {
    float: right;
    margin: 0.4em 0 0.8em 1.2em;
    max-width: 50%;
    clear: right;
}
.text-view img.align-center,
.text-view .image.align-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    float: none;
}

/* CKEditor 5 <figure> wrappers */
.text-view figure { margin: 1.2em auto; text-align: center; }

.text-view figure.image { display: table; max-width: 100%; }
.text-view figure.image img {
    margin: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}
.text-view figure.image.image_resized { max-width: 100%; }
.text-view figure.image.image_resized img { width: 100%; }

.text-view figure.image-style-align-left,
.text-view figure.image-style-side-left {
    float: left;
    clear: left;
    margin: 0.4em 1.2em 0.8em 0;
    max-width: 50%;
}
.text-view figure.image-style-align-right,
.text-view figure.image-style-side,
.text-view figure.image-style-side-right {
    float: right;
    clear: right;
    margin: 0.4em 0 0.8em 1.2em;
    max-width: 50%;
}
.text-view figure.image-style-align-center,
.text-view figure.image-style-block-align-center {
    margin-left: auto;
    margin-right: auto;
    float: none;
}
.text-view figure.image-style-block-align-left  { margin-left: 0;    margin-right: auto; }
.text-view figure.image-style-block-align-right { margin-left: auto; margin-right: 0; }

.text-view figcaption {
    display: table-caption;
    caption-side: bottom;
    padding: 8px 4px 0;
    font-size: 0.86em;
    color: #6b6878;
    font-style: italic;
    line-height: 1.45;
    text-align: center;
}

/* Embedded media (YouTube / Vimeo iframes, oembed) */
.text-view figure.media,
.text-view .media-embed {
    position: relative;
    width: 100%;
    margin: 1.6em 0;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.text-view figure.media iframe,
.text-view .media-embed iframe,
.text-view iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Standalone iframe without wrapper */
.text-view > iframe,
.text-view p > iframe {
    position: static;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 1.6em 0;
    border: 0;
    border-radius: 8px;
    background: #000;
}

/* HTML5 audio / video */
.text-view audio,
.text-view video {
    display: block;
    width: 100%;
    margin: 1em 0;
    border-radius: 6px;
}

/* Responsive — collapse side-floats to full-width below 768 */
@media (max-width: 768px) {
    .text-view { font-size: 16px; line-height: 1.65; padding: 0 14px; }
    .text-view img.align-left,
    .text-view img.align-right,
    .text-view .image.align-left,
    .text-view .image.align-right,
    .text-view figure.image-style-align-left,
    .text-view figure.image-style-align-right,
    .text-view figure.image-style-side,
    .text-view figure.image-style-side-left,
    .text-view figure.image-style-side-right {
        float: none;
        max-width: 100%;
        margin: 1.2em auto;
        clear: both;
    }
    .text-view table     { font-size: 0.88em; }
    .text-view blockquote { padding-left: 16px; padding-right: 14px; }
}

@media (max-width: 480px) {
    .text-view h1 { font-size: 22px; }
    .text-view h2 { font-size: 20px; }
    .text-view h3 { font-size: 18px; }
}

/* Dark-mode guard — only kicks in if a future skin sets body.is-dark */
body.is-dark .text-view { color: #e7e5f1; }
body.is-dark .text-view h1,
body.is-dark .text-view h2,
body.is-dark .text-view h3,
body.is-dark .text-view h4,
body.is-dark .text-view h5,
body.is-dark .text-view h6 { color: #ffffff; }
body.is-dark .text-view blockquote { background: #24202e; color: #d7d4e1; border-left-color: #ef4444; }
body.is-dark .text-view code       { background: #2a2634; color: #ffb4b4; border-color: #37333f; }
body.is-dark .text-view pre        { background: #14121b; }
body.is-dark .text-view table      { background: #1a1823; border-color: #2e2a36; }
body.is-dark .text-view table thead { background: #24202e; }
body.is-dark .text-view table th,
body.is-dark .text-view table td    { border-color: #2e2a36; }
body.is-dark .text-view table tbody tr:nth-child(even) { background: #1f1d28; }
body.is-dark .text-view hr {
    background: linear-gradient(90deg, transparent, #3a3645 20%, #3a3645 80%, transparent);
}

/* Print */
@media print {
    .text-view { max-width: none; font-size: 11pt; line-height: 1.55; color: #000; }
    .text-view a { color: #000; text-decoration: underline; }
    .text-view img, .text-view figure { break-inside: avoid; page-break-inside: avoid; }
    .text-view pre, .text-view blockquote { break-inside: avoid; page-break-inside: avoid; }
}