/* Vlozena media ve clancich. Nezasahuje do ostatnich stranek webu. */
.blog-article-content .article-embed {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 1.75rem 0;
}
.blog-article-content .article-embed__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #111;
}
.blog-article-content .article-embed__video iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.blog-article-content .article-embed--spotify iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
    border-radius: 12px;
}
.blog-article-content .article-embed--audio audio,
.blog-article-content .wp-block-audio audio {
    display: block;
    width: 100%;
    max-width: 100%;
}
.blog-article-content .article-embed--x,
.blog-article-content .article-embed--threads {
    max-width: 550px;
}
.blog-article-content .article-embed figcaption {
    margin-top: .5rem;
    font-size: .9rem;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   WordPress / Gutenberg: zarovnavani obrazku uvnitr clanku.
   Zamerně pouze pro .blog-article-content.
   Klasicke HTML WP: figure.wp-block-image.alignright
   Starsi WP: <div class="wp-block-image"><figure class="alignright">
   ------------------------------------------------------------ */

/* Nadrazene prostredi obklopi plovouci obrazky; nepretečou do paticky clanku. */
.blog-article-content {
    display: flow-root;
}

.blog-article-content .wp-block-image img {
    max-width: 100%;
    height: auto;
}

/* Obe strany: zachovat prirozenou velikost maleho obrazku, omezit velky. */
.blog-article-content figure.wp-block-image.alignright,
.blog-article-content figure.wp-block-image.alignleft,
.blog-article-content div.wp-block-image:has(> figure.alignright),
.blog-article-content div.wp-block-image:has(> figure.alignleft),
.blog-article-content img.alignright,
.blog-article-content img.alignleft {
    width: auto;
    max-width: 45%;
    margin-top: .3rem;
    margin-bottom: 1rem;
}

.blog-article-content figure.wp-block-image.alignright,
.blog-article-content div.wp-block-image:has(> figure.alignright),
.blog-article-content img.alignright {
    float: right;
    margin-right: 0;
    margin-left: 1.25rem;
}

.blog-article-content figure.wp-block-image.alignleft,
.blog-article-content div.wp-block-image:has(> figure.alignleft),
.blog-article-content img.alignleft {
    float: left;
    margin-left: 0;
    margin-right: 1.25rem;
}

/* Pokud je zarovnani na figure VNITRNIHO wrapperu ze starsi verze WP,
   plave wrapper, nikoli vnitrni figure. */
.blog-article-content div.wp-block-image:has(> figure.alignright) > figure.alignright,
.blog-article-content div.wp-block-image:has(> figure.alignleft) > figure.alignleft {
    float: none;
    width: auto;
    max-width: 100%;
    margin: 0;
}

/* Centrovani obrazku bez obtékání textem. */
.blog-article-content figure.wp-block-image.aligncenter,
.blog-article-content div.wp-block-image:has(> figure.aligncenter) {
    float: none;
    display: table;
    width: auto;
    max-width: 100%;
    margin: 1.5rem auto;
    text-align: center;
}

.blog-article-content div.wp-block-image:has(> figure.aligncenter) > figure.aligncenter {
    display: table;
    margin: 0 auto;
}

.blog-article-content img.aligncenter {
    display: block;
    float: none;
    max-width: 100%;
    margin: 1.5rem auto;
}

/* Popisek zustava pod obrazkem i u plovouci figure. */
.blog-article-content figure.wp-block-image.alignright,
.blog-article-content figure.wp-block-image.alignleft {
    display: table;
}

/* Popisky bezne vlozenych obrazku ponechavame ve stylu puvodniho webu.
   display: table-caption bez tabulkoveho rodice zpusobovalo sloupec siroky par px.
   Jen zarovnane figure maji display: table, proto lze table-caption pouzit pouze na ne. */
.blog-article-content figure.wp-block-image.alignright > figcaption,
.blog-article-content figure.wp-block-image.alignleft > figcaption,
.blog-article-content figure.wp-block-image.aligncenter > figcaption {
    display: table-caption;
    caption-side: bottom;
}

/* Na mobilu nebude obrazek zmensovat text do uzkeho sloupce. */
@media (max-width: 640px) {
    .blog-article-content figure.wp-block-image.alignright,
    .blog-article-content figure.wp-block-image.alignleft,
    .blog-article-content div.wp-block-image:has(> figure.alignright),
    .blog-article-content div.wp-block-image:has(> figure.alignleft),
    .blog-article-content img.alignright,
    .blog-article-content img.alignleft {
        float: none;
        clear: both;
        max-width: 100%;
        margin: 1.25rem auto;
    }
}