/* ==========================================================================
   Property Cards - Modern Zillow-style card component
   Namespace: .tr-card (avoids collision with existing .propertycard)
   ========================================================================== */

/* Design Tokens */
:root {
    --tr-navy: #005279;
    --tr-navy-light: #03679F;
    --tr-blue-accent: #6BA2C9;
    --tr-beige: #D9B394;
    --tr-beige-dark: #caa27f;
    --tr-bg-light: #F4F4F4;
    --tr-text-primary: #222;
    --tr-text-secondary: #666;
    --tr-text-muted: #999;
    --tr-white: #fff;
    --tr-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
    --tr-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --tr-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    --tr-radius: 12px;
    --tr-radius-sm: 8px;
    --tr-transition: 0.25s ease;
}

/* Card Column */
.tr-card-col {
    padding: 0 12px;
    margin-bottom: 24px;
}

/* Card Container */
.tr-card {
    background: var(--tr-white);
    border-radius: var(--tr-radius);
    overflow: hidden;
    box-shadow: var(--tr-shadow-sm);
    transition: transform var(--tr-transition), box-shadow var(--tr-transition);
    position: relative;
}

.tr-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tr-shadow-hover);
}

/* ==========================================================================
   Image Area
   ========================================================================== */

.tr-card__image-wrap {
    position: relative;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    overflow: hidden;
    background: #e8e8e8;
    touch-action: pan-y pinch-zoom;
}

.tr-card__image-wrap a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

/* Gradient overlays — top & bottom vignette like Zillow */
.tr-card__image-wrap::before,
.tr-card__image-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
}
.tr-card__image-wrap::before {
    top: 0;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 100%);
}
.tr-card__image-wrap::after {
    bottom: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 100%);
}

/* Slides */
.tr-card__slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.tr-card__slide.active {
    opacity: 1;
    pointer-events: auto;
}

/* Navigation Arrows */
.tr-card__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    font-size: 12px;
    color: var(--tr-text-primary);
    padding: 0;
}

.tr-card__nav--prev {
    left: 8px;
}

.tr-card__nav--next {
    right: 8px;
}

.tr-card__image-wrap:hover .tr-card__nav {
    opacity: 1;
}

.tr-card__nav:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Navigation Dots */
.tr-card__dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s ease;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px 8px;
    border-radius: 10px;
}

.tr-card__image-wrap:hover .tr-card__dots {
    opacity: 1;
}

.tr-card__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: background 0.2s ease;
    border: none;
    padding: 0;
}

.tr-card__dot.active {
    background: #fff;
}

/* ==========================================================================
   Badges
   ========================================================================== */

.tr-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    font-family: 'montserratmed', 'Montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    color: #fff;
    z-index: 3;
    line-height: 1.3;
}

.tr-card__badge--reserved {
    background: #c0392b;
}

.tr-card__badge--presale {
    background: #d4850a;
}

.tr-card__badge--popular {
    background: #e67e22;
}

.tr-card__badge--new {
    background: var(--tr-navy);
}

/* Save / Heart Button */
.tr-card__save {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 34px;
    height: 34px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
    font-size: 15px;
    color: var(--tr-text-primary);
    padding: 0;
}

.tr-card__save:hover {
    transform: scale(1.1);
}

.tr-card__save.saved {
    color: #e74c3c;
}

/* Photo Count */
.tr-card__photo-count {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    font-family: 'montserrat', sans-serif;
    font-size: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tr-card__photo-count i {
    font-size: 11px;
}

/* ==========================================================================
   Card Body
   ========================================================================== */

.tr-card__body {
    padding: 14px 16px 16px;
}

.tr-card__link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.tr-card__link:hover,
.tr-card__link:focus {
    text-decoration: none;
    color: inherit;
}

/* Price */
.tr-card__price {
    font-family: 'judson', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--tr-navy);
    line-height: 1.2;
    margin-bottom: 6px;
}

.tr-card__currency {
    font-family: 'alexandria-tin', sans-serif;
    font-size: 15px;
    color: var(--tr-text-secondary);
}

.tr-card__price-suffix {
    font-family: 'montserrat', sans-serif;
    font-size: 13px;
    color: var(--tr-text-muted);
}

/* Stats Row */
.tr-card__stats {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.tr-card__stat {
    font-family: 'montserrat', sans-serif;
    font-size: 13px;
    color: var(--tr-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.tr-card__stat i {
    color: var(--tr-navy);
    font-size: 13px;
    width: 16px;
    text-align: center;
}

.tr-card__stat-sep {
    color: #ccc;
    font-size: 4px;
    margin: 0 2px;
}

/* Title */
.tr-card__title {
    font-family: 'montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--tr-text-primary);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Desarrollo card title - larger, bolder for building names */
.tr-card__title--desarrollo {
    font-family: 'judson', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--tr-navy);
    margin-bottom: 6px;
}

/* Operation Label */
.tr-card__operation {
    font-family: 'montserrat', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--tr-text-muted);
    margin-top: 4px;
}

/* ==========================================================================
   Actions
   ========================================================================== */

.tr-card__actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.tr-card__cta {
    flex: 1;
    display: inline-block;
    text-align: center;
    padding: 9px 16px;
    background: var(--tr-beige);
    color: #fff;
    font-family: 'montserratmed', 'Montserrat', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease;
}

.tr-card__cta:hover,
.tr-card__cta:focus {
    background: var(--tr-beige-dark);
    color: #fff;
    text-decoration: none;
}

.tr-card__contact {
    font-family: 'montserrat', sans-serif;
    font-size: 13px;
    color: var(--tr-navy);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.tr-card__contact:hover,
.tr-card__contact:focus {
    color: var(--tr-navy-light);
    text-decoration: underline;
}

.tr-card__wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.tr-card__wa:hover,
.tr-card__wa:focus {
    background: #1da851;
    color: #fff;
    text-decoration: none;
}

/* ==========================================================================
   No Results
   ========================================================================== */

.tr-no-results {
    text-align: center;
    padding: 60px 20px;
    font-family: 'montserrat', sans-serif;
    font-size: 16px;
    color: var(--tr-text-secondary);
    width: 100%;
}

/* ==========================================================================
   Results Count
   ========================================================================== */

.tr-results-count {
    font-family: 'montserrat', sans-serif;
    font-size: 14px;
    color: var(--tr-text-secondary);
    margin-bottom: 16px;
    padding-left: 12px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
    /* Override Bootstrap .row negative margins so cards center properly */
    .row.grid {
        margin-left: 0;
        margin-right: 0;
    }

    .tr-card-col {
        width: 100%;
        padding: 0 16px;
        margin-bottom: 16px;
    }

    .tr-card:hover {
        transform: none;
        box-shadow: var(--tr-shadow-sm);
    }

    /* On mobile, always show dots for multi-image cards */
    .tr-card__dots {
        opacity: 1;
    }

    /* Hide arrows on mobile — swipe is the interaction */
    .tr-card__nav {
        display: none;
    }

    .tr-card__price {
        font-size: 20px;
    }

    .tr-card__body {
        padding: 12px 14px 14px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tr-card-col {
        width: 50%;
    }
}

@media (min-width: 992px) {
    .tr-card-col {
        width: 33.333%;
    }
}

/* ==========================================================================
   Homepage horizontal scroll variant
   ========================================================================== */

.tr-card-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding: 4px 4px 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--tr-beige) transparent;
}

.tr-card-scroll::-webkit-scrollbar {
    height: 6px;
}

.tr-card-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.tr-card-scroll::-webkit-scrollbar-thumb {
    background: var(--tr-beige);
    border-radius: 3px;
}

.tr-card-scroll .tr-card-col {
    flex: 0 0 calc(25% - 12px);
    min-width: 280px;
    scroll-snap-align: start;
    margin-bottom: 0;
    padding: 0;
}

@media (max-width: 991px) {
    .tr-card-scroll .tr-card-col {
        flex: 0 0 calc(50% - 8px);
        min-width: 260px;
    }
}

@media (max-width: 767px) {
    .tr-card-scroll .tr-card-col {
        flex: 0 0 85%;
        min-width: 260px;
    }
}