/* ======= */
.media-text-cta {}

.media-text-cta .columns {
    max-width: 1260px;
    margin: 0 auto;
    display: flex;
    gap: 3.5rem;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.media-text-cta.bg-logo-gray .columns,
.media-text-cta.bg-logo-transparent .columns {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.media-text-cta.bg-light-gray-gradient .columns {
    padding-top: 3rem;
}

.media-text-cta .columns.row {
    flex-direction: row;
}

.media-text-cta .columns.row-reverse {
    flex-direction: row-reverse;
}

.media-text-cta .columns.column {
    flex-direction: column;
}

.media-text-cta .columns.column-reverse {
    flex-direction: column-reverse;
}

.media-text-cta .text-column {
    /* design nema oba sloupce stejne siroke */
    flex: 0 1 45.2%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.media-text-cta .text-column .text-wrapper>div>*:first-child,
.media-text-cta .single-column .text-wrapper>div>*:first-child {
    /* prvni element textu (nejcasteji h2) nebude mit top margin */
    margin-top: 0;
}

.media-text-cta .media-column {
    flex: 1;
    display: flex;
    justify-content: center;
}

.media-text-cta .columns.column .text-column,
.media-text-cta .columns.column-reverse .text-column {
    max-width: 600px;
}

.media-text-cta .columns.column .media-column,
.media-text-cta .columns.column-reverse .media-column {
    width: 100%;
    max-width: 640px;
    flex: 0 0 auto;
}

.media-text-cta .media-column img {
    max-width: 100%;
    height: auto;
    display: block;
}

.media-text-cta .media-column .video-wrapper {
    position: relative;
    /* 
        CSS trik pro zachování poměru stran u responsivních prvků
        (fallback s padding-top hackem, protoze aspect-ratio pro iframe nefunguje. 16:9 poměr = 9/16 = 0.5625)
    */
    padding-top: 56.25%;
    width: 100%;
    overflow: hidden;
}

.media-text-cta .media-column .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.media-text-cta .media-column .video-wrapper .contextual-region {
    /* bez teto upravy se video prehravac nezobrazi v administraci, napr. nahled pri editaci */
    position: static;
}

.media-text-cta .single-column {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

.media-text-cta.bg-logo-gray .single-column,
.media-text-cta.bg-logo-transparent .single-column {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.media-text-cta.bg-light-gray-gradient .single-column {
    padding-top: 3rem;
}

@media (max-width: 768px) {

    .media-text-cta.bg-logo-gray .columns,
    .media-text-cta.bg-logo-transparent .columns {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .media-text-cta.bg-light-gray-gradient .columns {
        padding-top: 3rem;
    }

    .media-text-cta .columns.row {
        flex-direction: column !important;
        row-gap: 3rem;
    }

    .media-text-cta .columns.row-reverse {
        flex-direction: column-reverse !important;
        row-gap: 3rem;
    }

    .media-text-cta .columns.column,
    .media-text-cta .columns.column-reverse {
        row-gap: 3rem;
    }

    .media-text-cta .columns.row .media-column,
    .media-text-cta .columns.row-reverse .media-column {
        width: 100%;
        max-width: 640px;
        flex: 0 0 auto;
    }

    .media-text-cta.bg-logo-gray .single-column,
    .media-text-cta.bg-logo-transparent .single-column {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .media-text-cta.bg-light-gray-gradient .single-column {
        padding-top: 3rem;
    }
}

/* zarovnani textu - defaultne na stred
pri pouziti editoru se zarovnani - je default vlevo */
.media-text-cta .text-column,
.media-text-cta .single-column {
    text-align: center;
}
.media-text-cta .text-column .format-zakladni-html-se-zarovnanim, 
.media-text-cta .single-column .format-zakladni-html-se-zarovnanim, 
.media-text-cta .text-column .format-full-html, 
.media-text-cta .single-column .format-full-html {
    text-align: left;
}