/* ==========================================================================
   X_TN_Text_box_image – stejné styly jako v referencích + střídání (obrázek vlevo/vpravo)
   ========================================================================== */

/* Stejné fonty a rozměry jako na stránce reference */
flynt-component[name='X_TN_Text_box_image'] .text_box_title.text_box_image_title {
    font-size: 22px;
    font-weight: bold;
    margin: 0;
    margin-bottom: 1.5cqw;
    width: 100%;
}

flynt-component[name='X_TN_Text_box_image'] .text_box_image_list ul.xlist_item > li {
    font-size: 16px;
    font-weight: 500;
}

/* Výchozí: obrázek vlevo (pořadí v DOM: obrázek, text) */
flynt-component[name='X_TN_Text_box_image'] .text_box_image_image {
    order: 1;
    justify-content: flex-end;
}

flynt-component[name='X_TN_Text_box_image'] .text_box_image_case.text_box_image_info {
    order: 2;
}

/* Volba „Obrázek vpravo“ – střídání jako v referencích */
flynt-component[name='X_TN_Text_box_image'].--image-right .text_box_image_image {
    order: 2;
    justify-content: flex-start;
}

flynt-component[name='X_TN_Text_box_image'].--image-right .text_box_image_case.text_box_image_info {
    order: 1;
    align-items: flex-end;
}

@media only screen and (min-width: 740px) {
    flynt-component[name='X_TN_Text_box_image'].--image-right .text_box_image_case.text_box_image_info > .text_box_title.text_box_image_title {
        max-width: 40cqw;
    }

    flynt-component[name='X_TN_Text_box_image'].--image-right .text_box_image_list {
        justify-content: flex-start;
        max-width: 40cqw;
    }
}

/* Mobil: vždy text nahoře, obrázek dole + větší řádkování textu */
@media only screen and (max-width: 740px) {
    flynt-component[name='X_TN_Text_box_image'] .text_box_image_case.text_box_image_info {
        order: 1;
    }

    flynt-component[name='X_TN_Text_box_image'] .text_box_image_case.text_box_image_image {
        order: 2;
    }

    flynt-component[name='X_TN_Text_box_image'] .text_box_title.text_box_image_title {
        font-size: 5.7cqw;
        margin-bottom: 4cqw;
    }

    flynt-component[name='X_TN_Text_box_image'] .text_box_image_list > ul.xlist_item > li {
        font-size: 4.45cqw;
        line-height: 1.6;
        margin-bottom: 0.6em;
    }
}