/* Portfolio Grid */
.portfolio-toolbar{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin: 20px 0; }
.portfolio-toolbar select{ padding:10px 12px; border-radius:10px; border:1px solid rgba(0,0,0,.1); }
.portfolio-grid{ display:grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap:28px; margin: 20px 0 60px; }
@media (max-width: 1000px){ .portfolio-grid{ grid-template-columns: repeat(2, minmax(250px, 1fr)); gap:20px; } }
@media (max-width: 640px){ .portfolio-grid{ grid-template-columns: 1fr; gap:16px; } }
.portfolio-card{ border-radius:16px; overflow:hidden; box-shadow: 0 4px 20px rgba(0,0,0,.08); background:#fff; display:flex; flex-direction:column; text-decoration: none; color: inherit; transition: transform 0.3s ease, box-shadow 0.3s ease; border: 1px solid rgba(0,0,0,.05); }
.portfolio-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.15); }
.portfolio-card img{ width:100%; height:200px; object-fit:cover; display:block; border-radius: 12px 12px 0 0; transition: transform 0.3s ease; }
.portfolio-card:hover img{ transform: scale(1.05); }
.portfolio-card .card-content{ padding:18px 18px 20px; display:flex; flex-direction:column; gap:8px; }
.portfolio-card .city-name{ font-weight:600; margin: 0; font-size: 1.1rem; color: #2d3748; }
.portfolio-card .count-wrapper{ display: flex; align-items: center; gap: 8px; color: #61739a; font-size: 0.9rem; background: rgba(97, 115, 154, 0.1); padding: 6px 12px; border-radius: 20px; position: relative; }
.portfolio-card .count{ font-weight: 600; color: #4a5568; }
.portfolio-card .meta{ padding:14px 14px 16px; display:flex; flex-direction:column; gap:6px; }
.portfolio-card .title{ font-weight:600; }
.portfolio-card .sub{ color:#555; font-size:.95rem; }
.portfolio-empty{ padding:40px 0; opacity:.8; }

/* Properties Section */
.properties-section{ margin: 40px 0; }
.section-header{ 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-bottom: 30px; 
  flex-wrap: wrap;
  gap: 16px;
}
.section-header h2{ 
  margin: 0; 
  color: #333; 
  flex: 1;
  min-width: 0; /* Allow text to wrap if needed */
}
.back-link{ 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  color: #61739a; 
  text-decoration: none; 
  font-weight: 500; 
  transition: color 0.2s ease; 
  white-space: nowrap; /* Prevent back link from wrapping */
  flex-shrink: 0; /* Prevent back link from shrinking */
}
.back-link:hover{ color: #333; }

/* Location Header with Province Info */
.location-header h2{ margin: 0 0 8px 0; color: #333; font-size: 1.5rem; }
.province-info{ color: #61739a; font-size: 0.95rem; font-weight: 500; background: rgba(97, 115, 154, 0.1); padding: 6px 12px; border-radius: 20px; display: inline-block; }

/* Properties Grid */
.properties-grid{ 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 28px; 
    align-items: start; 
}

/* Auto-adjust grid based on number of properties */
.properties-grid.single-property {
    grid-template-columns: minmax(500px, 800px);
    justify-content: center;
}

.properties-grid.two-properties {
    grid-template-columns: repeat(2, minmax(400px, 1fr));
    max-width: 1000px;
    margin: 0 auto;
}

.properties-grid.three-properties {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;
}

/* For locations with more than 3 properties, use 3-column grid */
.properties-grid.multiple-properties {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1200px;
    margin: 0 auto;
}

/* Larger cards for fewer properties */
.properties-grid.single-property .property-card {
    max-width: 800px;
}

.properties-grid.two-properties .property-card {
    max-width: 500px;
}

.properties-grid.single-property .property-image {
    aspect-ratio: 16/9;
}

.properties-grid.two-properties .property-image {
    aspect-ratio: 16/10;
}

.properties-grid.single-property .property-content {
    padding: 30px;
}

.properties-grid.two-properties .property-content {
    padding: 25px;
}

.properties-grid.single-property .property-title {
    font-size: 1.5rem;
}

.properties-grid.two-properties .property-title {
    font-size: 1.4rem;
}
@media (max-width: 768px){ 
    .properties-grid{ 
        grid-template-columns: 1fr; 
        gap: 20px; 
    } 
    
    .properties-grid.single-property {
        grid-template-columns: 1fr;
        max-width: none;
    }
    
    .properties-grid.two-properties {
        grid-template-columns: 1fr;
        max-width: none;
    }
    
    .properties-grid.three-properties {
        grid-template-columns: 1fr;
        max-width: none;
    }
    
    .properties-grid.multiple-properties {
        grid-template-columns: 1fr;
        max-width: none;
    }
    
    .properties-grid.single-property .property-content {
        padding: 20px;
    }
    
    .properties-grid.two-properties .property-content {
        padding: 20px;
    }
    
    .properties-grid.single-property .property-title {
        font-size: 1.3rem;
    }
    
    .properties-grid.two-properties .property-title {
        font-size: 1.3rem;
    }
    
    /* Mobile image adjustments */
    .properties-grid.single-property .property-image {
        aspect-ratio: 16/9;
        min-height: 200px;
    }
    
    .properties-grid.two-properties .property-image {
        aspect-ratio: 16/10;
        min-height: 180px;
    }
    
    .properties-grid.three-properties .property-image {
        aspect-ratio: 16/10;
        min-height: 160px;
    }
    
    .properties-grid.multiple-properties .property-image {
        aspect-ratio: 16/10;
        min-height: 160px;
    }
    
    /* Mobile section header improvements */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .section-header h2 {
        font-size: 1.4rem;
        line-height: 1.3;
    }
    
    .back-link {
        font-size: 0.9rem;
    }
}
@media (min-width: 769px) and (max-width: 1024px){ 
    .properties-grid{ 
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
        gap: 24px; 
    } 
    
    .properties-grid.multiple-properties {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    /* Tablet section header improvements */
    .section-header {
        gap: 20px;
    }
    
    .section-header h2 {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    /* Small mobile section header improvements */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 20px;
    }
    
    .section-header h2 {
        font-size: 1.3rem;
        line-height: 1.2;
    }
    
    .back-link {
        font-size: 0.85rem;
        padding: 8px 12px;
        background: rgba(97, 115, 154, 0.1);
        border-radius: 20px;
    }
    
    .back-link:hover {
        background: rgba(97, 115, 154, 0.2);
    }
}
@media (min-width: 1025px) and (max-width: 1400px){ 
    .properties-grid{ 
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); 
        gap: 28px; 
    } 
}
@media (min-width: 1401px){ 
    .properties-grid{ 
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
        gap: 32px; 
    } 
}
@media (min-width: 1800px){ 
    .properties-grid{ 
        grid-template-columns: repeat(3, 1fr); 
        gap: 36px; 
    } 
}

/* Property Cards */
.property-card{ background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,.08); transition: transform 0.2s ease, box-shadow 0.2s ease; width: 100%; display: flex; flex-direction: column; }
.property-card:hover{ transform: translateY(-3px); box-shadow: 0 15px 35px rgba(0,0,0,.12); }
.property-image{ position: relative; }
.property-image img{ width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px 12px 0 0; transition: transform 0.3s ease; }
.property-card:hover .property-image img{ transform: scale(1.05); }

/* Ensure proper aspect ratio for property images */
.property-image {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
}

.property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Enhanced image filling for different property counts */
.properties-grid.single-property .property-image {
    aspect-ratio: 21/9;
    min-height: 300px;
}

.properties-grid.two-properties .property-image {
    aspect-ratio: 16/9;
    min-height: 250px;
}

.properties-grid.three-properties .property-image {
    aspect-ratio: 16/10;
    min-height: 200px;
}

.properties-grid.multiple-properties .property-image {
    aspect-ratio: 16/10;
    min-height: 200px;
}

.properties-grid.single-property .property-image img,
.properties-grid.two-properties .property-image img,
.properties-grid.three-properties .property-image img,
.properties-grid.multiple-properties .property-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}
.property-content{ padding: 20px; flex: 1; display: flex; flex-direction: column; }
.property-title{ font-size: 1.3rem; font-weight: 600; margin: 0 0 12px 0; color: #333; }
.property-address{ display: flex; align-items: flex-start; gap: 8px; color: #666; margin: 0 0 16px 0; font-size: 0.95rem; }
.property-address i{ color: #61739a; margin-top: 2px; flex-shrink: 0; }
.address-lines{ display: flex; flex-direction: column; gap: 2px; }
.address-street{ line-height: 1.3; }
.address-city{ line-height: 1.3; color: #777; font-size: 0.9rem; }
.property-details{ display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; flex: 1; }
.property-type, .property-size, .property-website{ display: flex; align-items: center; gap: 6px; color: #61739a; font-size: 0.9rem; font-weight: 500; }
.property-type i, .property-size i, .property-website i{ font-size: 0.8rem; }
.property-website-btn{ 
    margin-top: auto; 
    font-size: 0.9rem; 
    padding: 0.6rem 1.2rem; 
    border-radius: 25px; 
    background: var(--brand-primary); 
    color: white; 
    border: 2px solid var(--brand-primary); 
    transition: all 0.3s ease; 
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    gap: 0.5rem; 
    font-weight: 500; 
    align-self: flex-start; 
}

.property-website-btn:hover{ 
    background: var(--brand-secondary); 
    border-color: var(--brand-secondary); 
    color: white; 
    transform: translateY(-1px); 
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); 
}
.property-description{ color: #666; line-height: 1.6; margin: 0; font-size: 0.95rem; }

/* No properties message */
.no-properties{ 
    text-align: center; 
    padding: 40px 20px; 
    color: #666; 
    font-size: 1.1rem; 
    background: #f8f9fa; 
    border-radius: 12px; 
    margin: 20px 0; 
}

/* Nav: prevent two-line menu items, auto width */
.site-nav{ flex-wrap: nowrap; }
.site-nav a{ white-space: nowrap; width:auto; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Image loading improvements */
.portfolio-card img, .property-image img {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.portfolio-card img[src], .property-image img[src] {
    animation: none;
    background: none;
}

.card-image, .property-image {
    position: relative;
    overflow: hidden;
    background: #f8f9fa;
}