/* /domains/gromadan.com/public_html/css/ads/real_estate.css
   Рекламний блок нерухомості в правій колонці (ads/real_estate/index.php).
   Змінні беремо з css/style.css — тема (рожева/синя) підхоплюється сама.
   Підключається з media="(min-width: 901px)": на мобільному права колонка
   прихована, тож файл там навіть не завантажується. */

.ads-re {
    display: block;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}
.ads-re:hover { transform: translateY(-2px); }

.ads-re-media {
    position: relative;
    height: 240px;
    background: var(--primary-light);
}
.ads-re-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ads-re-city {
    position: absolute;
    top: 14px;
    right: 14px;
    max-width: calc(100% - 28px);
    padding: 7px 16px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ads-re-body { padding: 18px 20px 20px; }

.ads-re-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ads-re-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.4;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ads-re-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ads-re-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    background: var(--primary-light);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}
.ads-re-chip .icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
    .ads-re { transition: none; }
    .ads-re:hover { transform: none; }
}