/**
 * Featured Homes CSS - v5.1 OVERLAY CARD REDESIGN + COMMUNITY HOVER
 * File: /assets/css/featured-homes-v5.css
 *
 * STANDALONE: Uses fhv5- prefix, does NOT conflict with legacy featured-homes CSS
 *
 * v5.0 DESIGN (unchanged):
 * ✅ Full-bleed image cards with gradient overlay (right-to-left)
 * ✅ Badges: top-right, white bg + 1px outline, uniform style for ALL badges
 * ✅ Under Construction + Estimated Completion: est shows on hover/touch only
 * ✅ Property info: bottom-left (address, price)
 * ✅ Specs: bottom-right (beds/baths + sqft for single/units, units + sqft for parent)
 * ✅ 2-column desktop grid (588px per card, 320px height)
 * ✅ Mobile: single card swipe carousel
 *
 * v5.1 ADDITIONS only:
 * ✅ .fhv5-card-community          — cursor default, no hover scale on raw :hover
 * ✅ .fhv5-community-hover-overlay  — #0000004D dark overlay, hidden by default (z:3)
 * ✅ .fhv5-hover-active             — JS class to show overlay + scale image
 * ✅ .fhv5-view-home-btn            — white pill CTA centered in overlay (z:4)
 * ✅ .fhv5-card-content             — pointer-events:none so overlay button is hittable
 *
 * MATCHES: /inc/featured-homes-v5-component.php v5.1
 */

/* ==========================================
   VARIABLES
========================================== */

:root {
    --fhv5-dark: #2A2A2A;
    --fhv5-light-text: #666666;
    --fhv5-border: #E8E5DF;
    --fhv5-white: #FFFFFF;
    --fhv5-bg: #F5F3F0;
    --fhv5-primary: #2A2A2A;
}

/* ==========================================
   SECTION & CONTAINER
========================================== */

.fhv5-section {
    width: 100%;
    padding: 60px 0 80px 0;
    background: var(--fhv5-white);
}

.fhv5-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================
   HEADER — matches Figma exactly
========================================== */

.fhv5-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    gap: 30px;
}

.fhv5-header-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.fhv5-title {
    color: var(--fhv5-dark);
    font-size: 36px;
    font-family: 'Sofia Sans', 'Sofia Pro', sans-serif;
    font-weight: 400;
    margin: 0;
    line-height: 1.2;
}

.fhv5-description {
    color: #7A7268;
    font-size: 18px;
    font-family: 'Afacad Flux', sans-serif;
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
    max-width: 600px;
}

.fhv5-header-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-top: 8px;
}

.fhv5-view-all {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.fhv5-view-all-text {
    color: var(--fhv5-primary);
    font-size: 18px;
    font-family: 'Afacad Flux', sans-serif;
    font-weight: 400;
    text-transform: capitalize;
    white-space: nowrap;
}

.fhv5-view-all-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.fhv5-view-all-arrow svg {
    display: block;
}

.fhv5-view-all:hover .fhv5-view-all-arrow {
    transform: translateX(4px);
}

/* ==========================================
   GRID LAYOUT
========================================== */

.fhv5-grid {
    display: grid;
    gap: 24px;
    margin-bottom: 0;
    align-items: stretch;
}

.fhv5-grid.fhv5-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.fhv5-grid.fhv5-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.fhv5-grid.fhv5-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* ==========================================
   CARD — Full-bleed overlay design
========================================== */

.fhv5-card {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    border-radius: 0;
    background: #1a1a1a;
}

.fhv5-card-link {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Background image */
.fhv5-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

/* Real img tag — object-fit cover guarantees fill */
.fhv5-card-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.5s ease;
    display: block;
}

/* v5.0: scale on hover for all cards */
.fhv5-card:hover .fhv5-card-bg,
.fhv5-card:hover .fhv5-card-img {
    transform: scale(1.04);
}

/* v5.1 PATCH: community cards must NOT scale on raw CSS :hover —
   scale is controlled by JS via .fhv5-hover-active only */
.fhv5-card-community:hover .fhv5-card-bg,
.fhv5-card-community:hover .fhv5-card-img {
    transform: none;
}

.fhv5-card-community.fhv5-hover-active .fhv5-card-bg,
.fhv5-card-community.fhv5-hover-active .fhv5-card-img {
    transform: scale(1.04);
}

.fhv5-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--fhv5-bg);
}

/* Gradient overlay — multi-stop for smooth coverage, solid dark at bottom */
.fhv5-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0)    0%,
        rgba(0, 0, 0, 0)    35%,
        rgba(0, 0, 0, 0.15) 55%,
        rgba(0, 0, 0, 0.50) 75%,
        rgba(0, 0, 0, 0.70) 100%
    );
    pointer-events: none;
    z-index: 1;
}

/* Content layer on top of overlay */
.fhv5-card-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
    box-sizing: border-box;
    /* v5.1: pass-through so .fhv5-community-hover-overlay button at z:3 is hittable.
       Single-lot cards are fine — their .fhv5-card-link re-captures pointer events. */
    pointer-events: none;
}

/* v5.1: restore pointer events on interactive children inside content */
.fhv5-card-content a,
.fhv5-card-content button {
    pointer-events: auto;
}

/* ==========================================
   TOP ROW — Badges (right-aligned)
========================================== */

.fhv5-card-top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.fhv5-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

/* ==========================================
   BADGE PILLS — v5 uniform white style
   ALL badges: white bg, 1px outline, dark text
========================================== */

.fhv5-badge-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    border-radius: 50px;
    background: var(--fhv5-white);
    outline: 1px solid var(--fhv5-border);
    outline-offset: -1px;
    font-family: 'Afacad Flux', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--fhv5-dark);
    white-space: nowrap;
    line-height: normal;
    text-transform: capitalize;
}

/* Under Construction group — estimated completion always visible */
.fhv5-badge-est {
    background: rgba(255, 255, 255, 0.50);
}

.fhv5-badge-est strong {
    font-weight: 500;
}

/* ==========================================
   BOTTOM ROW — Info left, Specs right
========================================== */

.fhv5-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
}

/* Left side: address + price */
.fhv5-card-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    max-width: 320px;
}

.fhv5-card-address {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--fhv5-white);
    text-transform: capitalize;
    line-height: 1.3;
}

.fhv5-card-price {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--fhv5-white);
    text-transform: capitalize;
    line-height: 1.3;
}

.fhv5-contact-price {
    font-size: 14px !important;
    font-weight: 400 !important;
    text-transform: none !important;
}

/* Right side: specs */
.fhv5-card-specs {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.fhv5-spec-line {
    font-family: 'Afacad Flux', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--fhv5-white);
    text-transform: capitalize;
    white-space: nowrap;
}

.fhv5-spec-right {
    text-align: right;
}

/* Beds + Baths: horizontal on desktop, stacked on mobile */
.fhv5-spec-beds-baths {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ==========================================
   PAGINATION DOTS
========================================== */

.fhv5-pagination {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.fhv5-dots {
    display: flex;
    align-items: center;
    gap: 14px;
}

.fhv5-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fhv5-border);
    cursor: pointer;
    transition: all 0.3s ease;
}

.fhv5-dot.active {
    background: var(--fhv5-primary);
}

.fhv5-dot:hover {
    background: var(--fhv5-light-text);
    transform: scale(1.3);
}

/* ==========================================
   MOBILE SWIPE ANIMATIONS
========================================== */

@keyframes fhv5SlideInLeft {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fhv5SlideInRight {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

.fhv5-card.fhv5-swipe-left {
    animation: fhv5SlideInLeft 0.3s ease forwards;
}

.fhv5-card.fhv5-swipe-right {
    animation: fhv5SlideInRight 0.3s ease forwards;
}

/* ==========================================
   v5.1 NEW — COMMUNITY CARD HOVER OVERLAY
========================================== */

/* Community card wrapper: not a full link, so default cursor */
.fhv5-card-community {
    cursor: default;
}

/* Dark overlay — #0000004D per Figma spec (~30% black).
   Hidden by default. z:3 sits above gradient (z:1) and content (z:2).
   Centered flex for the View Home button inside. */
.fhv5-community-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0000004D;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.25s ease;
}

/* Active — JS adds/removes this class on mouseenter/mouseleave (desktop)
   or touchend (mobile) */
.fhv5-card-community.fhv5-hover-active .fhv5-community-hover-overlay {
    opacity: 1;
    pointer-events: auto;
}

/* ==========================================
   v5.1 NEW — "VIEW HOME" BUTTON
   Figma: border-radius 50px, border 0.5px solid #2A2A2A,
   bg #FFF, padding 10px 25px, gap 10px,
   Afacad Flux 18px 400 capitalize.
   z:4 — above the overlay so it's always clickable.
========================================== */

.fhv5-view-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 25px;
    border-radius: 50px;
    border: 0.5px solid var(--fhv5-dark);
    background: var(--fhv5-white);
    color: var(--fhv5-dark);
    font-family: 'Afacad Flux', sans-serif;
    font-size: 18px;
    font-weight: 400;
    text-transform: capitalize;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    z-index: 4;
    transition: background 0.2s ease, color 0.2s ease;
}

.fhv5-view-home-btn:hover {
    background: #5A4F42;
    color: var(--fhv5-white);
}

/* ==========================================
   RESPONSIVE — DESKTOP 1200–1439
========================================== */

@media (max-width: 1439px) and (min-width: 1200px) {
    .fhv5-container {
        max-width: 1240px;
        padding: 0 40px;
    }
}

/* ==========================================
   RESPONSIVE — SMALL DESKTOP 1024–1199
========================================== */

@media (max-width: 1199px) and (min-width: 1024px) {
    .fhv5-container {
        padding: 0 40px;
    }

    .fhv5-card {
        height: 350px;
    }

    .fhv5-card-content {
        padding: 24px;
    }

    .fhv5-card-address {
        font-size: 16px;
    }

    .fhv5-card-price {
        font-size: 16px;
    }

    .fhv5-spec-line {
        font-size: 14px;
    }

    .fhv5-grid.fhv5-cols-3 {
        gap: 20px;
    }

    .fhv5-grid.fhv5-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* v5.1 */
    .fhv5-view-home-btn {
        font-size: 16px;
        padding: 9px 22px;
    }
}

/* ==========================================
   RESPONSIVE — TABLET 768–1023
========================================== */

@media (max-width: 1023px) and (min-width: 768px) {
    .fhv5-section {
        padding: 50px 0 60px 0;
    }

    .fhv5-container {
        padding: 0 30px;
    }

    .fhv5-header {
        flex-direction: column;
        gap: 15px;
        margin-bottom: 24px;
    }

    .fhv5-title {
        font-size: 30px;
    }

    .fhv5-header-right {
        padding-top: 0;
    }

    .fhv5-grid.fhv5-cols-2,
    .fhv5-grid.fhv5-cols-3,
    .fhv5-grid.fhv5-cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .fhv5-card {
        height: 350px;
    }

    .fhv5-card-content {
        padding: 24px;
    }

    .fhv5-card-address {
        font-size: 15px;
    }

    .fhv5-card-price {
        font-size: 15px;
    }

    .fhv5-spec-line {
        font-size: 13px;
    }

    .fhv5-card-info {
        max-width: 260px;
    }

    /* v5.1 */
    .fhv5-view-home-btn {
        font-size: 16px;
        padding: 9px 22px;
    }
}

/* ==========================================
   RESPONSIVE — MOBILE (<768px)
========================================== */

@media (max-width: 767px) {
    .fhv5-section {
        padding: 40px 0 50px 0;
    }

    .fhv5-container {
        padding: 0 20px;
    }

    .fhv5-header {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    .fhv5-title {
        font-size: 26px;
    }

    .fhv5-description {
        font-size: 15px;
    }

    .fhv5-header-right {
        padding-top: 0;
    }

    .fhv5-view-all-text {
        font-size: 15px;
    }

    .fhv5-view-all-arrow svg {
        width: 30px;
        height: 30px;
    }

    .fhv5-grid.fhv5-cols-2,
    .fhv5-grid.fhv5-cols-3,
    .fhv5-grid.fhv5-cols-4 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .fhv5-card {
        height: 350px;
    }

    .fhv5-card-content {
        padding: 30px 15px;
    }

    .fhv5-badges {
        flex-direction: column;
        align-items: flex-end;
        gap: 5px;
    }

    .fhv5-card-address {
        font-size: 16px;
    }

    .fhv5-card-price {
        font-size: 16px;
    }

    .fhv5-spec-line {
        font-size: 14px;
        white-space: normal;
    }

    .fhv5-spec-beds-baths {
        flex-direction: column;
        gap: 4px;
        align-items: flex-end;
    }

    .fhv5-card-info {
        max-width: 55%;
    }

    .fhv5-badge-pill {
        font-size: 12px;
        padding: 4px 10px;
    }

    .fhv5-pagination {
        margin-top: 20px;
    }

    .fhv5-dots {
        gap: 10px;
    }

    .fhv5-dot {
        width: 8px;
        height: 8px;
    }

    /* v5.1 */
    .fhv5-view-home-btn {
        font-size: 16px;
        padding: 9px 20px;
    }
}

/* ==========================================
   MOBILE — VERY SMALL (<480px)
========================================== */

@media (max-width: 479px) {
    .fhv5-card {
        height: 350px;
    }

    .fhv5-card-content {
        padding: 30px 15px;
    }

    .fhv5-card-info {
        max-width: 60%;
    }
}