.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0 auto;
}

.property-card {
    position: relative;
    display: block;
    cursor: pointer;
    /* alguns cards são renderizados como <a> real (ex.: produto-nao-encontrado) */
    color: inherit;
    text-decoration: none;
}

.property-card:focus-visible {
    outline: 2px solid var(--brand-sage);
    outline-offset: 3px;
}

/* ============================================================
   Home — "Adicionados recentemente": linhas editoriais alternadas
   ============================================================ */
#latest-cards-container.container {
    display: block;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 4%;
    box-sizing: border-box;
}

#latest-cards-container .property-card {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-areas:
        "meta meta"
        "media content";
    column-gap: 56px;
    row-gap: 18px;
    align-items: center;
    padding: 44px 0;
    border-top: 1px solid rgba(55, 56, 38, 0.15);
}

#latest-cards-container .property-card:last-child {
    border-bottom: 1px solid rgba(55, 56, 38, 0.15);
}

#latest-cards-container .property-card:nth-child(even) {
    grid-template-areas:
        "meta meta"
        "content media";
}

#latest-cards-container .code-badge,
#latest-cards-container .finalidade-badge {
    position: static;
    grid-area: meta;
    background: none;
    padding: 0;
    border-radius: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

#latest-cards-container .code-badge {
    justify-self: start;
    color: var(--gray-secondary);
}

#latest-cards-container .finalidade-badge {
    justify-self: end;
    color: var(--brand-espresso);
}

#latest-cards-container .property-card img {
    grid-area: media;
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#latest-cards-container .property-card:hover img {
    transform: scale(1.025);
}

#latest-cards-container .card-content {
    grid-area: content;
}

#latest-cards-container .card-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

#latest-cards-container .card-header h3 {
    font-family: 'Houstiq 2', serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    margin: 0;
    color: var(--brand-charcoal);
}

#latest-cards-container .card-header .price {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--brand-espresso);
}

#latest-cards-container .location-text {
    color: var(--gray-secondary);
    font-size: 0.92rem;
    margin: 10px 0 18px;
}

#latest-cards-container .card-info {
    display: none;
}

#latest-cards-container .card-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(55, 56, 38, 0.12);
    font-size: 0.82rem;
    color: var(--gray-secondary);
}

#latest-cards-container .card-icons .metric {
    display: flex;
    align-items: center;
    gap: 6px;
}

#latest-cards-container .card-icons .metric i {
    color: var(--brand-sage);
}

@media (max-width: 860px) {
    #latest-cards-container .property-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "meta"
            "media"
            "content";
        row-gap: 14px;
        padding: 32px 0;
    }

    #latest-cards-container .property-card:nth-child(even) {
        grid-template-areas:
            "meta"
            "media"
            "content";
    }

    #latest-cards-container .property-card img {
        height: 280px;
    }
}

/* ============================================================
   Páginas de listagem — "pranchas de galeria"
   ============================================================ */
#product-container.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 32px;
    width: 100%;
    justify-content: normal;
    align-items: start;
}

#product-container .property-card {
    background: var(--brand-cream);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(35, 35, 31, 0.06);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

#product-container .property-card:hover,
#product-container .property-card:focus-visible {
    box-shadow: 0 18px 32px rgba(35, 35, 31, 0.16);
    transform: translateY(-3px);
}

#product-container .property-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: var(--brand-olive);
    transition: transform 0.5s ease, filter 0.5s ease;
}

#product-container .property-card:hover img {
    transform: scale(1.05);
    filter: brightness(1.03);
}

/* ── Selos sobre a foto — pequenos, nunca ocupam a largura toda ── */
#product-container .code-badge,
#product-container .finalidade-badge {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    width: max-content;
    max-width: calc(100% - 24px);
    box-sizing: border-box;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-family: 'Poppins', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.4;
    white-space: nowrap;
}

#product-container .code-badge {
    top: 12px;
    left: 12px;
    background: rgba(23, 23, 18, 0.55);
    color: var(--brand-cream);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    text-transform: none;
    letter-spacing: 0.02em;
}

#product-container .finalidade-badge {
    top: 12px;
    right: 12px;
    text-transform: uppercase;
}

#product-container .finalidade-venda {
    background: var(--brand-sage);
    color: var(--brand-olive);
}

#product-container .finalidade-aluguel {
    background: var(--brand-espresso);
    color: var(--brand-cream);
}

#product-container .card-content {
    padding: 16px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── Cabeçalho: tipo como rótulo pequeno, preço como destaque —
   empilhados verticalmente para nunca quebrar com valores altos ── */
#product-container .card-header {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

#product-container .card-header h3 {
    order: 1;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gray-secondary);
    margin: 0;
}

#product-container .card-header .price {
    order: 2;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: var(--brand-espresso);
    white-space: nowrap;
}

#product-container .location-text {
    color: var(--gray-secondary);
    font-size: 0.85rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#product-container .card-info {
    display: flex;
    gap: 14px;
    font-size: 0.75rem;
    color: var(--gray-secondary);
    background: none;
    padding: 0;
    border-radius: 0;
}

#product-container .card-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid rgba(55, 56, 38, 0.12);
    font-size: 0.78rem;
    color: var(--gray-secondary);
}

#product-container .card-icons .metric {
    display: flex;
    align-items: center;
    gap: 5px;
}

#product-container .card-icons .metric i {
    color: var(--brand-sage);
    width: 13px;
    text-align: center;
}

@media screen and (max-width: 1060px) {
    #product-container.container {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px 24px;
    }
}

@media screen and (max-width: 620px) {
    #product-container.container {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    #product-container .property-card img {
        aspect-ratio: 16 / 10;
    }

    #product-container .card-header .price {
        font-size: 1.5rem;
    }
}

/* ============================================================
   Paginação — compacta, com reticências para muitas páginas
   ============================================================ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    margin-top: 56px;
    flex-wrap: wrap;
}

.pagination a,
.pagination span.pagination-ellipsis {
    font-family: 'Poppins', sans-serif;
    font-size: 0.88rem;
}

.pagination a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 6px;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--gray-secondary);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.pagination a:hover {
    color: var(--brand-olive);
    background-color: rgba(179, 197, 137, 0.18);
}

.pagination a.active {
    color: var(--brand-cream);
    background-color: var(--brand-olive);
    cursor: default;
    font-weight: 600;
}

.pagination a.active:hover {
    background-color: var(--brand-olive);
}

.pagination a.pagination-arrow {
    font-size: 1rem;
    color: var(--brand-olive);
}

.pagination a.disabled {
    color: rgba(111, 108, 95, 0.35);
    pointer-events: none;
}

.pagination span.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 38px;
    color: rgba(111, 108, 95, 0.6);
}

.page-title {
    font-family: 'Houstiq 2', serif;
    font-weight: 400;
    color: var(--brand-olive);
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.page-title span {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: var(--gray-secondary);
}

.section-kicker {
    display: block;
    text-align: center;
    color: var(--brand-espresso);
    font-size: 0.85rem;
    margin-bottom: 8px;
}
