/* =========================================================
   EUROTEXTIL — SOBRE.CSS
   Estilos específicos da página "Sobre nós".

   Breakpoints:
   - Mobile: até 767px
   - Tablet: 768px até 1279px
   - Desktop: a partir de 1280px

   Importar depois do global.css.
========================================================= */


/* =========================================================
   DESKTOP — A PARTIR DE 1280px
========================================================= */

/*
   Estrutura principal da seção:
   imagem à esquerda e conteúdo à direita.
*/
.institucional-container {
    display: flex;
    align-items: stretch;

    width: calc(100% - 10rem);
    max-width: 1760px;
    min-height: 42.5rem;
    margin-inline: auto;
}


/* =========================================================
   Imagem institucional
========================================================= */

.banner {
    position: relative;

    flex: 0 0 50%;

    overflow: hidden;
}

.banner img {
    position: absolute;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   Conteúdo institucional
========================================================= */

.conteudo-institucional {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
    padding: 3rem 4rem;

    color: var(--text-darker-blue);
}

.title-institucional,
.texto-institucional {
    width: 100%;
    max-width: 720px;
    margin: 0;
    padding: 0;
}

.title-institucional {
    color: var(--text-darker-blue);

    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.4;
}

.title-institucional p {
    margin: 0;
}

.title-institucional .highlight {
    color: var(--dark-red-euro);

    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.texto-institucional {
    margin-top: 1.25rem;
}

.texto-institucional p {
    margin: 0;

    color: var(--text-darker-blue);

    font-size: 1rem;
    font-weight: 300;
    line-height: 1.4;
}

.texto-institucional p + p {
    margin-top: 1.25rem;
}


/* =========================================================
   Missão, Visão e Valores
========================================================= */

.pilares {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;

    width: 100%;
    max-width: 600px;
    margin-top: 1.5rem;
    padding: 0;
}

.pilares .missao,
.pilares .visao,
.pilares .valores {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 3rem;
    padding-left: 4.5rem;
}

.pilares img {
    position: absolute;
    top: .25rem;
    left: 0;

    display: block;

    width: 3rem;
    height: 3rem;

    object-fit: contain;
}

.pilares h2 {
    margin: 0 0 .25rem;

    color: var(--text-darker-blue);

    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
}

.pilares p,
.pilares ul {
    width: 100%;
    margin: 0;

    color: var(--text-darker-blue);

    font-size: 1rem;
    font-weight: 300;
    line-height: 1.45;
}

.pilares ul {
    padding-left: 1rem;

    list-style-type: square;
}

.bold-text {
    font-weight: 600;
}


/* =========================================================
   TABLET — 768px ATÉ 1279px
========================================================= */

@media (min-width: 768px) and (max-width: 1279px) {

    /*
       Mantém imagem e conteúdo lado a lado, mas reduz
       margens, proporções e espaçamentos.
    */
    .institucional-container {
        width: calc(100% - 4rem);
        min-height: 40.625rem;
    }

    .banner {
        flex-basis: 46%;
        min-height: 40.625rem;
    }

    .conteudo-institucional {
        padding: 2.5rem 2rem;
    }

    .title-institucional {
        font-size: 1.25rem;
    }

    .texto-institucional p,
    .pilares p,
    .pilares ul {
        font-size: .9375rem;
    }

    .pilares {
        gap: 1.5rem;
    }

    .pilares .missao,
    .pilares .visao,
    .pilares .valores {
        padding-left: 3.5rem;
    }

    .pilares img {
        width: 2.5rem;
        height: 2.5rem;
    }

    .pilares h2 {
        font-size: 1rem;
    }
}


/* =========================================================
   MOBILE — ATÉ 767px
========================================================= */

@media (max-width: 767px) {

    /*
       Empilha a imagem e o conteúdo.
    */
    .institucional-container {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;

        overflow: visible;
    }

    /*
       Em uma viewport de 390px:
       390px - 24px = 366px para a imagem.
    */
    .institucional-container .banner {
        position: relative;

        flex: none;

        width: calc(100% - 1.5rem);
        height: auto;
        min-height: 0;
        aspect-ratio: 366 / 326;

        overflow: visible;
    }

    .institucional-container .banner img {
        position: absolute;
        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center;
    }

    /*
       Linha vermelha atravessando toda a largura da viewport.
    */
    .institucional-container .banner::after {
        content: "";

        position: absolute;
        left: 0;
        bottom: -1px;
        z-index: 2;

        width: 100vw;
        height: 1px;

        background-color: var(--dark-red-euro);
    }

    /*
       O texto começa aproximadamente em 29,23% da viewport,
       como no layout de referência de 390px.
    */
    .institucional-container .conteudo-institucional {
        display: block;

        width: 100%;
        margin: 0;
        padding:
            3rem
            1.5rem
            3rem
            29.23vw;

        color: var(--text-darker-blue);
    }

    /*
       Remove limites e recuos herdados do desktop/tablet.
    */
    .institucional-container .title-institucional,
    .institucional-container .texto-institucional {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    .institucional-container .title-institucional {
        font-size: 1rem;
    }

    .institucional-container .title-institucional p {
        margin: 0;

        color: var(--text-darker-blue);

        font-size: 1rem;
        font-weight: 300;
        line-height: 1.5;
    }

    .institucional-container .title-institucional .highlight {
        color: var(--dark-red-euro);

        font-size: inherit;
        font-weight: 400;
        line-height: inherit;
    }

    .institucional-container .texto-institucional {
        margin-top: 1.5rem;
    }

    .institucional-container .texto-institucional p {
        margin: 0;

        color: var(--text-darker-blue);

        font-size: .875rem;
        font-weight: 300;
        line-height: 1.43;
    }

    .institucional-container .texto-institucional p + p {
        margin-top: 1.5rem;
    }

    /*
       Os pilares ficam alinhados com a coluna de texto.
    */
    .institucional-container .pilares {
        gap: 2rem;

        width: 100%;
        max-width: none;
        margin-top: 3rem;
    }

    .institucional-container .pilares .missao,
    .institucional-container .pilares .visao,
    .institucional-container .pilares .valores {
        padding-left: 0;
    }

    /*
       Apenas os ícones avançam para a esquerda.
       O conteúdo permanece alinhado ao texto institucional.
    */
    .institucional-container .pilares img {
        top: 2px;
        left: -3.5rem;

        width: 2.5rem;
        height: 2.5rem;
    }

    .institucional-container .pilares h2 {
        font-size: 1rem;
    }

    .institucional-container .pilares p,
    .institucional-container .pilares ul {
        font-size: 1rem;
    }
}