/* ==========================================================================
   PROPERTIES PAGE
   ========================================================================== */

.properties-intro-section {
    position: relative;
    padding: clamp(64px, 8vw, 96px) 0 0 0;
}

.properties-header {
    margin-bottom: clamp(32px, 5vw, 56px);
    gap: 12px;
    display: grid;
}

.properties-header .section-eyebrow {
    display: block;
    font-family: var(--font-body);
    font-size: clamp(11px, 1.2vw, 14px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary-600);
}

.properties-header .page-title {
    font-family: var(--font-heading);
    font-size: clamp(32px, 4vw, 36px);
    font-weight: 600;
    color: var(--color-neutral-900);
    line-height: 1.2;
}

.properties-header .page-description {
    font-size: clamp(16px, 1.8vw, 20px);
    color: var(--color-neutral-700);
    margin: 0;
    font-weight: 400;
}

/* --- Botões de Filtro --- */
.properties-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.filter-btn {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    padding: 9px 15.96px;
    border-radius: 50px;
    border: 1px solid var(--color-neutral-300);
    cursor: pointer;
    background-color: #F5F4F4;
    color: var(--color-neutral-600, #4B5563);
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background-color: var(--color-neutral-200, #E5E7EB);
}

.filter-btn.is-active {
    background-color: var(--color-primary-700);
    color: #F5F4F4;
    /* border: none; */
}

/* --- Grelha de Propriedades --- */
.properties-grid-section {
    padding-bottom: clamp(80px, 10vw, 120px);
}

.properties-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 24px;
    align-items: start;
    /* PREVINE O ESTICAMENTO DOS CARTÕES */
}

/* ==========================================================================
   PROPERTIES PAGE - CONTAINER BACKGROUND & GLOWS
   ========================================================================== */

.properties-grid-section {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(80px, 10vw, 120px);
}

.properties-grid-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(#4F88CB1A 1.5px, transparent 2px);
    background-size: 24px 24px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);

    pointer-events: none;
    z-index: -2;
}

.properties-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px 24px;
    align-items: start;
}

@media (min-width: 640px) {
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .properties-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .properties-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 640px) {
    .properties-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .properties-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1280px) {
    .properties-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}