/* =========================================================
   EUROTEXTIL STYLE.CSS
   BASE DE CRIAÇÃO - EURO DS
   Complementa o global.css
   Breakpoints: mobile até 767px; tablet de 768px a 1279px; desktop a partir de 1280px
========================================================= */

/* =========================================================
   Estrutura geral
========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
}

body {
    background-color: var(--bg-light-institucional);
}

/* Menu, Hero, contatos e footer: podem crescer até 1920px */
.container-1920 {
    width: 100%;
    max-width: var(--largura-maxima-ampla);
    margin-inline: auto;
}

.container {
    width: calc(100% - 12.25rem);
    margin-inline: auto;
}

.section {
    padding-block: 5rem;
}


/* === HERO === */

/* =========================================================
   Institucional — desktop
========================================================= */

.contact-container {
    display: flex;
    align-items: stretch;

    width: 100%;
    background-color: var(--bg-light-institucional);
}

/* Coluna esquerda */

.banner-container {
    position: relative;
    flex: 0 0 50%;
    overflow: hidden;
}

.banner-container img {
   
    inset: 0;

    display: block;
    width: 100%;
    height: 100%;
    padding-left: 5rem;

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

/* Coluna direita */

.content-container {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 2.5rem 2rem 2.5rem;
}

.contact-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    

    padding: 0 0 2rem;
    color: #444155;
}

.contact-title h2 {
    font-size: 1.5rem;
    font-weight: 300;
    text-transform: uppercase;
}

.contact-form {
    display: flex;
    padding: 0;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
}

.textfield {
    display: flex;
    flex-direction: column;
    resize: none;
    gap: .5rem;
}

.textfield input,
.textfield textarea {
    width: 100%;

    border: 1px solid #BA98A2;
    border-radius: 4px;

    color: var(--text-darker-blue);
    background-color: var(--bg-full-white);

    font-family: inherit;
    font-size: 1rem;
}

.textfield input {
    height: 3rem;
    padding: 0 1rem;
}

.textfield textarea {
    min-height: 7rem;
    padding: 1rem;
    resize: none;
}

.textfield input::placeholder,
.textfield textarea::placeholder {
    color: var(--text-medium-blue);
}

.textfield input:focus,
.textfield textarea:focus {
    outline: none;
    border-color: var(--dark-red-euro);
}

.input-row {
    display: flex;
    width: 100%;
    gap: 1.5rem;
}

.input-row .textfield {
    flex: 1;
    min-width: 0;
    max-width: none;
}

.input-row .textfield input {
    width: 100%;
}

.aceite_termos {
    display: flex;
    align-items: start;
    font-size: var(--descritive-regular-14-size);
    max-width: 620px;
    gap: .875rem;
    
}

.aceite_termos input[type="checkbox"] {
    flex-shrink: 0;

    width: 1rem;
    height: 1rem;
    margin-top: .15rem;

    accent-color: var(--dark-red-euro);
    cursor: pointer;
}

.aceite_termos label {
    font-size: var(--details-regular-12-size);
    line-height: 1.6;
    padding-bottom: .25rem;

    cursor: pointer;
}

.button-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    gap: 3rem;
    width: 100%;
    background-color: transparent;
    border: 0;
}

.button-container button {
    width: auto;
}

.button-container .clear {
    color: var(--link);
    background-color: transparent;
    border: 0;
    
    font-size: var(--link-semibold-14-size);
    text-decoration: underline;

    cursor: pointer;
}

.button-container .submit {
    color: var(--bg-full-white);
    background-color: var(--dark-red-euro);
    border: 0;
    border-radius: 4px;

    padding: .5rem 1rem;
    
    font-size: var(--link-semibold-14-size);

    cursor: pointer;
}


/* =========================================================
   TABLET (768px a 1279px)
========================================================= */

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

    
}


/* =========================================================
   MOBILE — COMERCIAL
   até 767px
========================================================= */
@media (max-width: 767px) {

    /* =========================
       Estrutura geral
    ========================= */
    .container,
    .container-1920 {
        width: 100%;
        max-width: 100%;
    }

    body {
        overflow-x: hidden;
    }

    /* =========================
       Seção comercial
    ========================= */
    .contact-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        background-color: var(--bg-light-institucional);
    }

    .banner-container {
        flex: none;
        width: 100%;
        padding-left: 0;
        overflow: hidden;
        border-bottom: 1px solid var(--dark-red-euro);
    }

    .banner-container img {
        display: block;
        width: 100%;
        height: 22.5rem;
        padding-left: 0;
        object-fit: cover;
        object-position: center;
    }

    .content-container {
        width: 100%;
        padding: 3rem 1.5rem 3.5rem;
    }

    .contact-title {
        padding: 0 0 1rem;
        color: #5b556e;
    }

    .contact-title h2 {
        margin: 0 0 .75rem;
        font-size: 1.75rem;
        font-weight: 300;
        line-height: 1.1;
        text-transform: uppercase;
        color: #5b556e;
    }

    .contact-title p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.45;
        color: #5b556e;
    }

    /* =========================
       Formulário
    ========================= */
    .contact-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    /* coloca o bloco "Atenção" acima dos campos,
       mesmo sem mexer na ordem do HTML */
    .attention-subtitle {
        order: -1;
        max-width: 100%;
        margin: 0 0 .375rem;
        font-size: .875rem;
        line-height: 1.45;
        color: #5b556e;
    }

    .attention-subtitle h4 {
        margin: 0 0 .25rem;
        font-size: .875rem;
        font-weight: 700;
        color: #5b556e;
    }

    .attention-subtitle p {
        margin: 0;
    }

    .textfield {
        width: 100%;
        resize: none;
    }

    .input-row {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .input-row .textfield {
        width: 100%;
    }

    .textfield input,
    .textfield textarea {
        width: 100%;
        border: 1px solid #c9a6b1;
        border-radius: 10px;
        background-color: #fbf8f7;
        color: #6a6580;
        font-family: inherit;
        font-size: 1rem;
    }

    .textfield input {
        height: 3.5rem;
        padding: 0 1rem;
    }

    .textfield textarea {
        min-height: 7rem;
        padding: 1rem;
        resize: none;
    }

    .textfield input::placeholder,
    .textfield textarea::placeholder {
        color: #6a6580;
    }

    .textfield input:focus,
    .textfield textarea:focus {
        outline: none;
        border-color: var(--dark-red-euro);
    }

    /* =========================
       Botões
    ========================= */
    .button-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: .875rem;
        width: 100%;
        margin-top: .125rem;
    }

    .button-container .submit {
        order: 1;
        width: 100%;
        height: 2.875rem;
        border: 0;
        border-radius: 8px;
        padding: 0;
        background-color: #c30042;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 400;
    }

    .button-container .clear {
        order: 2;
        align-self: center;
        border: 0;
        padding: 0;
        background-color: transparent;
        color: var(--link);
        font-size: .875rem;
        text-decoration: underline;
    }
}