/* =========================================================
   LABELLE IMÓVEIS
   SOBRE NÓS
========================================================= */


/* =========================================================
   SEÇÃO PRINCIPAL
========================================================= */

.about {
    position: relative;

    width: 100%;

    padding: 47px 0 70px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf8f3 100%
        );

    overflow: hidden;
}


/* =========================================================
   DECORAÇÃO SUPERIOR
========================================================= */

.about::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -160px;

    width: 360px;
    height: 360px;

    border:
        1px solid
        rgba(191, 148, 70, 0.10);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   LABELLE AO FUNDO
========================================================= */

.about::after {
    content: "LABELLE";

    position: absolute;

    left: -20px;
    bottom: -15px;

    font-family: var(--font-title);

    font-size: 120px;

    font-weight: 500;

    line-height: 1;

    letter-spacing: 8px;

    color:
        rgba(6, 47, 37, 0.025);

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   CONTAINER
========================================================= */

.about-container {
    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(0, 1.05fr);

    align-items: center;

    gap: 64px;
}


/* =========================================================
   IMAGEM
========================================================= */

.about-image {
    position: relative;

    width: 100%;

    min-height: 470px;

    overflow: hidden;

    border-radius: 18px;

    background-color: #062f25;

    box-shadow:
        0 18px 45px
        rgba(16, 35, 28, 0.13);
}


/* =========================================================
   IMAGEM TEMPORÁRIA
========================================================= */

.about-image-placeholder {
    position: absolute;

    inset: 0;

    display: flex;

    align-items: flex-end;
    justify-content: flex-start;

    padding: 32px;

    background:
        linear-gradient(
            180deg,
            rgba(3, 30, 23, 0.02) 30%,
            rgba(3, 30, 23, 0.72) 100%
        ),
        url("../assets/images/hero/hero-labelle.png");

    background-position: center;

    background-repeat: no-repeat;

    background-size: cover;

    transition:
        transform 0.6s ease;
}


.about-image:hover
.about-image-placeholder {
    transform: scale(1.025);
}


/* =========================================================
   MARCA NA IMAGEM
========================================================= */

.about-image-placeholder span {
    position: relative;

    z-index: 5;

    display: inline-flex;

    align-items: center;

    gap: 10px;

    font-family: var(--font-primary);

    font-size: 11px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 3px;

    text-transform: uppercase;

    color: #d2ac61;
}


.about-image-placeholder span::before {
    content: "";

    width: 30px;
    height: 1px;

    background-color: #d2ac61;
}


/* =========================================================
   CONTEÚDO
========================================================= */

.about-content {
    position: relative;

    display: flex;

    flex-direction: column;

    align-items: flex-start;
}


/* =========================================================
   EYEBROW
========================================================= */

.about .section-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 14px;

    font-family: var(--font-primary);

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 2.4px;

    text-transform: uppercase;

    color: #a87d35;
}


.about .section-eyebrow::before {
    content: "";

    width: 30px;
    height: 1px;

    background-color: #c49b4f;
}


/* =========================================================
   TÍTULO
========================================================= */

.about .section-title {
    max-width: 650px;

    margin: 0 0 24px;

    font-family: var(--font-title);

    font-size:
        clamp(
            38px,
            4vw,
            58px
        );

    font-weight: 500;

    line-height: 1.02;

    letter-spacing: -1.3px;

    color: #16231f;
}


/* =========================================================
   TÍTULO DOURADO
========================================================= */

.about .section-title span {
    display: block;

    margin-top: 4px;

    color: #b78b3f;
}


/* =========================================================
   TEXTOS
========================================================= */

.about-content > p {
    max-width: 630px;

    margin: 0 0 15px;

    font-family: var(--font-primary);

    font-size: 13px;

    font-weight: 400;

    line-height: 1.75;

    color: #69716c;
}


/* =========================================================
   ÚLTIMO PARÁGRAFO
========================================================= */

.about-content > p:last-of-type {
    margin-bottom: 28px;
}


/* =========================================================
   BOTÃO
========================================================= */

.about .button-primary {
    min-width: 205px;
    min-height: 46px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 0 22px;

    border:
        1px solid #06382c;

    border-radius: 6px;

    background-color: #06382c;

    color: #ffffff;

    font-family: var(--font-primary);

    font-size: 10px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: 0.4px;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.about .button-primary svg {
    width: 15px;
    height: 15px;

    stroke-width: 1.7;

    transition:
        transform 0.25s ease;
}


/* =========================================================
   HOVER
========================================================= */

.about .button-primary:hover {
    background-color: #c49b4f;

    border-color: #c49b4f;

    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(183, 139, 63, 0.18);
}


.about .button-primary:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   NOTEBOOK
========================================================= */

@media (max-width: 1150px) {

    .about {
        padding:
            42px
            0
            64px;
    }


    .about-container {
        gap: 42px;
    }


    .about-image {
        min-height: 430px;
    }


    .about .section-title {
        font-size: 46px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .about {
        padding:
            38px
            0
            60px;
    }


    .about-container {
        grid-template-columns: 1fr;

        gap: 34px;
    }


    .about-image {
        min-height: 400px;

        order: 2;
    }


    .about-content {
        order: 1;
    }


    .about .section-title {
        max-width: 650px;

        font-size: 42px;
    }


    .about-content > p {
        max-width: 700px;
    }


    .about::after {
        font-size: 90px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

    .about {
        padding:
            32px
            0
            50px;
    }


    .about-container {
        gap: 28px;
    }


    .about .section-eyebrow {
        font-size: 9px;

        letter-spacing: 2px;
    }


    .about .section-title {
        margin-bottom: 20px;

        font-size: 34px;
    }


    .about-content > p {
        font-size: 12px;

        line-height: 1.7;
    }


    .about-content > p:last-of-type {
        margin-bottom: 22px;
    }


    .about-image {
        min-height: 300px;

        border-radius: 14px;
    }


    .about-image-placeholder {
        padding: 22px;
    }


    .about::after {
        display: none;
    }


    .about .button-primary {
        width: 100%;

        min-height: 46px;
    }

}