/**
 * cTheme Banners — estilos do frontend.
 *
 * O HTML não duplica uma imagem/link quando a mesma peça atende a mais de uma
 * faixa. Banners variáveis usam as dimensões intrínsecas do <img>; propriedades
 * CSS inline só são necessárias em zonas fixas com dimensões configuráveis.
 */

/* Contêiner da zona ------------------------------------------------------- */
.ctad-zone {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Alinhamento configurado na zona. --------------------------------------- */
.ctad-zone--align-left .ctad-banner {
    margin-right: auto;
    margin-left: 0;
    text-align: left;
}

.ctad-zone--align-left .ctad-banner__image {
    margin-right: auto;
    margin-left: 0;
}

.ctad-zone--align-right .ctad-banner {
    margin-right: 0;
    margin-left: auto;
    text-align: right;
}

.ctad-zone--align-right .ctad-banner__image {
    margin-right: 0;
    margin-left: auto;
}

.ctad-zone--align-center .ctad-banner {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.ctad-zone--align-center .ctad-banner__image {
    margin-right: auto;
    margin-left: auto;
}

/* Banner base ------------------------------------------------------------- */
.ctad-banner {
    display: none;
    box-sizing: border-box;
    margin: 1.8em auto;
    padding: 0;
    line-height: 0 !important;
    text-align: center;
}

.ctad-banner__link {
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}

.ctad-banner__image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Zona fixa: usa apenas as dimensões dinâmicas realmente necessárias. ----- */
.ctad-banner--fixed {
    width: var(--ctad-w);
    height: var(--ctad-h);
    overflow: hidden;
}

.ctad-banner--fixed .ctad-banner__link {
    display: block;
    width: 100%;
    height: 100%;
}

.ctad-banner--fixed .ctad-banner__image {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: contain;
}

/* Desktop: 1025 px ou mais. ---------------------------------------------- */
.ctad-banner--desktop {
    display: block;
}

/* Tablet: 768–1024 px. ---------------------------------------------------- */
@media (max-width: 1024px) {
    .ctad-banner--desktop {
        display: none;
    }

    .ctad-banner--tablet {
        display: block;
    }

    .ctad-banner--fixed.ctad-banner--tablet {
        width: var(--ctad-tw, var(--ctad-w));
        height: var(--ctad-th, var(--ctad-h));
    }
}

/* Celular: até 767 px. ---------------------------------------------------- */
@media (max-width: 767px) {
    .ctad-banner--tablet {
        display: none;
    }

    .ctad-banner--mobile {
        display: block;
    }

    .ctad-banner--fixed.ctad-banner--mobile {
        width: var(--ctad-mw, var(--ctad-tw, var(--ctad-w)));
        height: var(--ctad-mh, var(--ctad-th, var(--ctad-h)));
    }
}