/* Mobile das sections novas do MBA (mentorias, + benefícios e ROI).
   Carregado por último em page-mec_MBA, page-mec_MBA_DA e page-mec_MBA_AI (o mobile_DA.css também é usado pelo page-especial_MBA_AI). */

@media(max-width:1024px){

    /* ===== Mentorias: carrossel de 1 card por vez, igual ao Change Career no mobile ===== */
    /* body ocupa a largura toda do box escuro (anula o padding de 24px) e corta os cards vizinhos na borda */
    .mentorias .body_mentoria.two_rows {
        width: calc(100% + 48px);
        margin: 0 -24px;
        overflow: hidden;
        gap: 24px;
    }
    .mentorias .body_mentoria.two_rows .top {
        width: 100%;
    }
    /* 80% de largura + overflow visível (mobile.css deixa o .glide__track visível): aparece um pedaço do card anterior/próximo */
    .mentorias .body_mentoria.two_rows .glide_mentorias {
        width: 80%;
        overflow: visible;
    }
    .mentorias .body_mentoria.two_rows .bottom {
        box-sizing: border-box;
        padding: 0 24px;
    }
    .mentorias .card_mentoria h3 {
        width: auto;
    }

    /* ===== + Benefícios: 1 card por vez, scroll lateral com snap (setas usam card_scroll do index.js) ===== */
    .container_cards_included .content_cards_included {
        width: calc(100vw - 32px);
        max-width: 360px;
    }
    .container_cards_included .cards_included {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        width: 100%;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .container_cards_included .cards_included::-webkit-scrollbar {
        display: none;
    }
    .container_cards_included .card_included {
        flex: 0 0 100%;
        width: 100%;
        scroll-snap-align: start;
    }
    .container_cards_included .card_included h1,
    .container_cards_included .top_card_included .width_adjust {
        width: auto;
    }
    .container_cards_included .top_card_included {
        align-self: stretch;
        padding: 0 24px;
    }
    .container_cards_included .background_image_card_included.six {
        width: auto;
    }
    /* popup volta ao comportamento do desktop: cobre o próprio card (o mobile.css jogava para 100vw / top 234px) */
    .container_cards_included .content_popup {
        width: 100%;
    }
    .container_cards_included .content_popup .card {
        width: 100%;
        top: auto;
        left: auto;
    }
    .container_cards_included .content_popup .card p {
        width: auto;
    }

    /* ===== ROI: imagens verticais; texto e balões em fluxo no topo, gráfico ancorado na base ===== */
    /* altura = conteúdo + padding-bottom. O padding-bottom (em % da largura) reserva a área da curva, então o conteúdo
       nunca desce até o gráfico; se o conteúdo crescer (balão aberto) o bloco cresce e o topo vazio da imagem acompanha.
       A imagem desce 30% da largura para cortar o vazio que ela tem abaixo do gráfico */
    .container_roi {
        padding: 0 16px;
    }
    .wrapper_roi {
        width: 100%;
        max-width: 480px;
        gap: 32px;
    }
    .content_roi_financeiro,
    .content_roi {
        display: flex;
        flex-direction: column;
        width: 100%;
        aspect-ratio: auto;
        box-sizing: border-box;
        background-color: #0d0d0d;
        background-size: 100% auto;
        background-position: center bottom calc(-0.3 * min(100vw - 32px, 480px));
        background-repeat: no-repeat;
    }
    .content_roi_financeiro {
        padding: 24px 16px 74%;
        background-image: url(../Imagens/Background_images/roi_financeiro_mobile_graph.png);
    }
    .content_roi {
        gap: 8px;
        padding: 24px 16px 54%;
        background-image: url(../Imagens/Background_images/roi_carreira_mobile_graph.png);
    }
    .content_roi_financeiro .head_roi {
        position: static;
        width: auto;
        padding: 0;
        gap: 12px;
    }
    .content_roi_financeiro .head_roi h1,
    .content_roi .career_roi h2 {
        font-size: 28px;
        line-height: 32px;
        letter-spacing: -0.56px;
    }
    .content_roi_financeiro .head_roi p,
    .content_roi_financeiro .head_roi span {
        font-size: 14px;
        line-height: 18px;
    }

    /* balões em escadinha: o "one" fica embaixo à esquerda e cada próximo sobe e anda para a direita, como a curva */
    .content_roi .career_roi {
        position: static;
        order: 0;
        margin-bottom: 8px;
    }
    .content_roi .balloon {
        position: relative;
        width: 78%;
        padding: 10px 12px;
        border-radius: 12px;
    }
    .content_roi .balloon.five {
        order: 1;
        margin-left: 22%;
    }
    .content_roi .balloon.four {
        order: 2;
        margin-left: 16.5%;
    }
    .content_roi .balloon.three {
        order: 3;
        margin-left: 11%;
    }
    .content_roi .balloon.two {
        order: 4;
        margin-left: 5.5%;
    }
    .content_roi .balloon.one {
        order: 5;
        margin-left: 0;
    }
    .content_roi .balloon.one,
    .content_roi .balloon.two,
    .content_roi .balloon.three,
    .content_roi .balloon.four,
    .content_roi .balloon.five {
        bottom: auto;
        left: auto;
    }
    .content_roi .balloon p {
        font-size: 13px;
        line-height: 16px;
    }
    .content_roi .balloon .balloon_toggle {
        width: 20px;
        height: 20px;
        margin-top: -2px;
    }
}