/* ====== HERO SECTION ====== */
.custom-taxonomy-hero {
    background-color: #28373E; /* verde scuro elegante */
    width: 100%;
    max-width: 3000px;
    color: var(--e-global-color-aa5884c);
    padding: 70px 20px;
    text-align: center;
}

.custom-taxonomy-hero.compra-hero {
    background-color: #28373E;
    width: 100%;
    max-width: 3000px;
    margin: 0 auto;
    color: var(--e-global-color-aa5884c);
}

.custom-taxonomy-hero .custom-taxonomy-count {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1;
}

.custom-taxonomy-hero .custom-taxonomy-intro {
    font-size: 1.15rem;
    max-width: 800px;
    margin: 0 auto 30px;
    line-height: 1.7;
    opacity: 0.9;
}

/* ====== SEARCH FORM INSIDE HERO ====== */
.custom-search-hero .property-search-form {
    max-width: 1000px;
    margin: 0 auto;
    padding: 15px 20px;
    border-radius: 8px;
}

.custom-search-hero .property-search-form select,
.custom-search-hero .property-search-form input {
    border: 1px solid #ddd;
    border-radius: 50px;
    font-size: 0.95rem;
}

.custom-search-hero .property-search-form button {
    background: #b88a44; /* oro/marrone stile luxury */
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    color: var(--e-global-color-aa5884c);
    font-weight: normal;
    transition: background 0.3s ease;
}

.custom-search-hero .property-search-form button:hover {
    background: #966d33;
}

.custom-taxonomy-listing{
    padding: 40px 0;
}

/* ====== PAGINATION ====== */
.houzez-pagination {
    margin-top: 40px;
    text-align: center;
}

.houzez-pagination span {
    display: inline-block;
    padding: 10px 18px;
    margin: 0 5px;
    border-radius: 6px;
    background: #f5f5f5;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
}

.houzez-pagination .current {
    background: #b88a44;
    color: var(--e-global-color-aa5884c);
    font-weight: 600;
}

/* ====== CUSTOM PROPERTY ITEM ====== */
.custom-property-item {
    display: flex;
    flex-direction: row;
    height: 100%;
    max-height: 500px;
    overflow: hidden;
    margin-bottom: 0;
    transition: all 0.25s ease;
}

.custom-property-inner {
    display: flex;
    width: 100%;
}

.custom-property-image {
    flex: 1 1 50%;
    max-width: 50%;
    overflow: hidden;
    padding: 0 30px;
}

.custom-property-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-height: 500px;
}

.custom-property-content {
    flex: 1 1 50%;
    padding: 25px 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.custom-property-title, .custom-property-price {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: clamp(16px, 2vw + 1rem, 32px);
    font-weight: var(--e-global-typography-primary-font-weight);
    /* Override global text-transform which may force Capitalize */
    text-transform: none;
    line-height: var(--e-global-typography-primary-line-height);
    letter-spacing: var(--e-global-typography-primary-letter-spacing);
    line-height: 1.2;
}

.custom-property-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.custom-property-title a:hover {
    color: #b88a44;
}

.custom-property-excerpt {
  font-size: 1rem;
  color: #555;
  margin-bottom: 15px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
    -webkit-line-clamp: 2; /* default mobile */
    line-clamp: 2;
}

.custom-property-meta {
    font-size: 1rem;
    color: #444;
    margin-bottom: 20px;
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
}

.custom-property-price {
    font-size: 1.6rem;
    font-weight: 900;
    color: #b88a44;
    margin-top: auto;
}

.custom-property-location {
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-size: var(--e-global-typography-accent-font-size);
    font-weight: var(--e-global-typography-accent-font-weight);
    /* keep location natural case */
    text-transform: none;
    text-decoration: var(--e-global-typography-accent-text-decoration);
    margin-bottom: 20px;
}


.city-section-title {
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #2c3e50;
    text-align: center;
}

.city-title-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.city-title-link:hover {
    color: var(--e-global-color-primary);
}

.city-title-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    flex-shrink: 0;
   color: var(--e-global-color-primary);
}

.city-title-link:hover .city-title-arrow {
    transform: translateX(5px);
    
}

.properties-grid-wrapper {
    position: relative;
}

.properties-grid {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 15px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.properties-grid::-webkit-scrollbar {
    display: none;
}

/* Simple grid mode: force a 4-column layout. Cards occupy exactly one column. SOLO quando città selezionata dal form */
.city-selected-grid .properties-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Always 4 columns on desktop */
    gap: 25px;
    overflow-x: visible;
    padding: 15px 0;
}

/* Ensure cards occupy a single grid cell and don't attempt to span or keep flex sizing. SOLO quando città selezionata dal form */
.city-selected-grid .property-card {
    flex-direction: column !important;
    height: 100% !important; /* Cards must always be 100% height to fill grid cell */
}

/* Card nello slider (NON in grid) - larghezza gestita da responsive.css in base al breakpoint */


.property-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.property-image-wrapper {
    position: relative;
    height: 180px;
    overflow: hidden;
    width: 100%;
}

.property-images-track {
    display: flex;
    height: 100%;
    transition: transform 0.3s ease;
}

.property-image-slide {
    flex: 0 0 100%;
    height: 100%;
    display: block;
    overflow: hidden;
}

.property-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    display: block;
}

.property-card:hover .property-image {
    transform: scale(1.05);
}

/* Image navigation arrows */
.property-image-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    background: rgba(255,255,255,0.9) !important;
    border: none !important;
    cursor: pointer;
    padding: 8px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.property-image-nav.hidden {
    display: none !important;
}

.property-image-wrapper:hover .property-image-nav:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

.property-image-nav:hover {
    background: rgba(255,255,255,1) !important;
}

.property-image-nav svg {
    width: 18px !important;
    height: 18px !important;
    color: #333 !important;
}

.property-image-prev {
    left: 8px;
}

.property-image-next {
    right: 8px;
}

.property-info {
    padding: 20px;
    background: var(--e-global-color-aa5884c);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.property-zone {
    font-size: 12px;
    color: #8B4513;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.property-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
    text-align: left;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    min-height: 48px;
    display: flex;
    align-items: flex-start;
}

.property-title a {
    color: var(--e-global-color-primary);
    text-decoration: none;
}

.property-title a:hover {
    color: var(--e-global-color-secondary);
}

.property-price {
    font-size: 24px;
    font-weight: 700;
    color: var(--e-global-color-secondary);
    text-align: left;
    margin-bottom: 12px;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    margin-top: auto;
}

.property-meta {
    display: flex;
    gap: 15px;
    padding-top: 0;
    border-top: none;
}

.property-meta span {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #6c757d;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
}

.property-meta .icon-small {
    width: 16px;
    height: 16px;
    color: #8B4513;
}

/* Responsive */


/* Navigation arrows for carousel */
.city-properties-section {
    position: relative;
}

.properties-nav,
.properties-nav:hover,
.properties-nav:focus,
.properties-nav:active {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    z-index: 10;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    align-items: center;
    justify-content: center;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.3s ease;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    color: transparent !important;
}

.properties-nav.properties-nav-prev {
    left: 0px; /* Dentro il padding del wrapper */
}

.properties-nav.properties-nav-next {
    right: 0px; /* Dentro il padding del wrapper */
}

.properties-nav svg {
    width: 24px;
    height: 24px;
    color: #8B4513;
}

.properties-nav[style*="display: flex"] {
    display: flex !important;
}

/* Override global text-transform capitalize for compra page */
.city-properties-section h1,
.city-properties-section h2,
.city-properties-section h3,
.city-properties-section h4,
.city-properties-section h5,
.city-properties-section h6,
.city-properties-section .item-title,
.city-properties-section .property-title,
.city-properties-section .property-title a {
    text-transform: none !important;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}

/* Override global capitalization (e.g., h1..h6 { text-transform: capitalize; })
     Apply only to Compra page specific elements to avoid changing site-wide headings */
.custom-taxonomy-hero h1,
.custom-taxonomy-hero h2,
.custom-taxonomy-hero h3,
.custom-taxonomy-hero h4,
.custom-taxonomy-hero h5,
.custom-taxonomy-hero h6,
.custom-property-title,
.custom-property-title a,
.custom-property-location,
.custom-taxonomy-count {
    text-transform: none !important;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
}

/* Apply secondary font to property text elements */
.property-location,
.property-price,
.property-location-price,
.custom-taxonomy-intro  {
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
}

/* Responsive per griglia semplice */
/* Responsive adjustments: keep the intent of 'always 4 columns' on desktop, then step down */