/* =========================================================
   COMPONENTE NENO COMIC
   Desktop: exibe a imagem original inteira.
   Mobile: empilha janelas da mesma imagem, uma por quadro.
========================================================= */

.neno-comic {
    display: block;
    max-width: 100%;
}

.neno-comic__image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
}

/* Os quadros são gerados pelo neno-comic.js, mas ficam ocultos no desktop. */
.neno-comic__panels {
    display: none;
}

@media only screen and (max-width: 768px) {
    /*
       Quase toda a largura da tela, com 12 px de respiro em cada lado.
       A margem compensa o padding da coluna editorial do trek.css.
    */
    .neno-comic.neno-comic--ready {
        width: calc(100vw - 24px) !important;
        max-width: none !important;
        margin-left: calc(50% - 50vw + 12px) !important;
        margin-right: 0 !important;
    }

    /* A imagem completa permanece no DOM como fonte e fallback. */
    .neno-comic.neno-comic--ready > .neno-comic__image {
        display: none !important;
    }

    .neno-comic.neno-comic--ready > .neno-comic__panels {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        width: 100%;
    }

    .neno-comic__panel {
        width: 100%;
        aspect-ratio: var(--neno-panel-aspect);
        overflow: hidden;
        background-repeat: no-repeat;
        background-color: #f3f0e9;
    }
}