/* ============================================================
   Homepage "Últimas Casas" — coverflow-style carousel of the 10 most
   recently submitted decorated houses (GET /api/locations-2026/latest).
   Scroll-snap centers one item at a time; home-houses.js tracks which
   item sits at the viewport's center and scales it up as the highlight.
   Clicking any item goes to decoracoes.html.
   ============================================================ */

.home-houses-section {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-3) 0 0;
}

/* overflow-x:auto here forces the y-axis to clip too (mixed-axis CSS rule
   — "visible" can't pair with "auto"), so the active item's scale(1.3) —
   which grows it ~17-18px past its unscaled box on every side — needs real
   padding to grow into, top and bottom, or its border/glow gets cut off. */
.home-houses-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 22px 0 24px;
}

.home-houses-wrap::-webkit-scrollbar {
    display: none;
}

.home-houses-track {
    display: flex;
    align-items: center;
    gap: 22px;
    /* Left/right padding is set in JS to half the viewport width minus half
       an item's width, so the first and last items can be scrolled to dead
       center too, same as any item in the middle. */
}

.home-house-item {
    scroll-snap-align: center;
    flex-shrink: 0;
    width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.home-house-thumb {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.home-house-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-house-name {
    max-width: 100%;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The centered item — scaled up in place (transform doesn't affect layout
   flow, so neighbours don't get pushed around) and given the gold ring. */
.home-house-item.is-active {
    opacity: 1;
    transform: scale(1.3);
}

.home-house-item.is-active .home-house-thumb {
    border-color: var(--color-gold-bright);
    box-shadow: var(--glow-gold);
}

.home-house-item.is-active .home-house-name {
    color: var(--color-text);
}

.home-houses-empty {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    padding: var(--space-3) var(--space-3) 0;
}