/**
 * Foment — Contador (Números & Destaques)
 * Desktop: 4 colunas com divisória vertical sutil
 * Mobile: Grade 2x2 limpa sem divisória vertical
 * Família tipográfica: Suisse Int'l (300, 400, 500, 600, 700)
 */

@font-face {
    font-family: "Suisse Intl";
    src: url("../fonts/SuisseIntl-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Suisse Intl";
    src: url("../fonts/SuisseIntl-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Suisse Intl";
    src: url("../fonts/SuisseIntl-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Suisse Intl";
    src: url("../fonts/SuisseIntl-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Suisse Intl";
    src: url("../fonts/SuisseIntl-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.foment-contador-wrapper {
    --fc-cols-desktop: 4;
    --fc-cols-tablet: 2;
    --fc-cols-mobile: 2;
    --fc-col-gap: 64px;
    --fc-row-gap: 36px;
    --fc-number-color: #FFFFFF;
    --fc-label-color: #A3AEB9;
    --fc-number-spacing: 8px;
    --fc-divider-color: rgba(255, 255, 255, 0.16);
    --fc-divider-width: 1px;
    --fc-divider-height: 100%;

    display: grid;
    grid-template-columns: repeat(var(--fc-cols-desktop), minmax(0, 1fr));
    column-gap: var(--fc-col-gap);
    row-gap: var(--fc-row-gap);
    width: 100%;
    font-family: "Suisse Intl", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

.foment-contador-wrapper *,
.foment-contador-wrapper *::before,
.foment-contador-wrapper *::after {
    box-sizing: border-box;
    font-family: inherit;
}

.foment-contador-item {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    min-width: 0;
}

/* Alinhamentos opcionais */
.foment-contador-wrapper.align-left .foment-contador-item {
    align-items: flex-start;
    text-align: left;
}

.foment-contador-wrapper.align-center .foment-contador-item {
    align-items: center;
    text-align: center;
}

.foment-contador-wrapper.align-right .foment-contador-item {
    align-items: flex-end;
    text-align: right;
}

/* Linha divisória vertical entre as colunas no Desktop */
.foment-contador-wrapper.has-dividers .foment-contador-item:not(:first-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--fc-col-gap) / -2);
    top: 50%;
    transform: translateY(-50%);
    width: var(--fc-divider-width);
    height: var(--fc-divider-height);
    background-color: var(--fc-divider-color);
    pointer-events: none;
}

/* Campo 1: Número / Destaque Principal (ex: 5, 72.351 m², R$ 275 mi, Desde 2014) */
.foment-contador-wrapper .foment-contador-number {
    color: var(--fc-number-color) !important;
    font-size: 46px;
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin: 0 0 var(--fc-number-spacing) 0 !important;
    padding: 0 !important;
    word-break: keep-all;
}

/* Campo 2: Texto / Legenda Inferior (ex: Empreendimentos, De projetos e obras) */
.foment-contador-wrapper .foment-contador-label {
    color: var(--fc-label-color) !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   RESPONSIVO: TABLET E MOBILE (Grade 2x2 igual à referência)
   ========================================================================== */
@media (max-width: 1024px) {
    .foment-contador-wrapper {
        grid-template-columns: repeat(var(--fc-cols-tablet), minmax(0, 1fr));
        --fc-col-gap: 40px;
        --fc-row-gap: 36px;
    }

    .foment-contador-wrapper.hide-dividers-tablet .foment-contador-item::before {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .foment-contador-wrapper {
        grid-template-columns: repeat(var(--fc-cols-mobile), minmax(0, 1fr));
        --fc-col-gap: 28px;
        --fc-row-gap: 36px;
    }

    .foment-contador-wrapper .foment-contador-number {
        font-size: 34px;
    }

    .foment-contador-wrapper .foment-contador-label {
        font-size: 15px;
    }

    /* No mobile (2x2), oculta a linha divisória vertical como na imagem 2 */
    .foment-contador-wrapper.hide-dividers-mobile .foment-contador-item::before {
        display: none !important;
    }
}