/* ==========================================================================
   COMPONENTS.CSS — Cards, Sidebar Filters, Forms, Stats, Pagination
   ========================================================================== */

/* --------------------------------------------------------------------------
   PROPERTY CARD
   -------------------------------------------------------------------------- */
.property-card {
	background:    var(--color-bg-white);
	border-radius: var(--radius-md);
	overflow:      hidden;
	box-shadow:    var(--shadow-sm);
	transition:    var(--transition);
	display:       flex;
	flex-direction: column;
}
.property-card:hover {
	box-shadow:  var(--shadow-md);
	transform:   translateY(-3px);
}

.property-card__thumb {
	position:    relative;
	overflow:    hidden;
	aspect-ratio: 16/10;
}
.property-card__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.property-card:hover .property-card__thumb img { transform: scale(1.05); }

.property-card__tags {
	position: absolute;
	top:      12px;
	left:     12px;
	display:  flex;
	gap:      6px;
}

.property-card__body {
	padding: 20px;
	flex:    1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.property-card__price {
	font-size:   1.25rem;
	font-weight: 700;
	color:       var(--color-primary);
}

.property-card__title {
	font-size:   1rem;
	font-weight: 600;
	line-height: 1.4;
	color:       var(--color-text-primary);
	display:     -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:    hidden;
}
.property-card__title a { color: inherit; }
.property-card__title a:hover { color: var(--color-primary); }

.property-card__address {
	display:     flex;
	align-items: center;
	gap:         5px;
	font-size:   .8125rem;
	color:       var(--color-text-muted);
}
.property-card__address svg { width: 13px; height: 13px; flex-shrink: 0; }

.property-card__specs {
	display:        flex;
	gap:            16px;
	padding-top:    10px;
	border-top:     1px solid var(--color-border);
	flex-wrap:      wrap;
}
.property-card__spec {
	display:     flex;
	align-items: center;
	gap:         5px;
	font-size:   .8125rem;
	color:       var(--color-text-secondary);
}
.property-card__spec svg { width: 14px; height: 14px; color: var(--color-primary); }

/* --------------------------------------------------------------------------
   PROJECT CARD
   -------------------------------------------------------------------------- */
.project-card {
	background:    var(--color-bg-white);
	border-radius: var(--radius-md);
	overflow:      hidden;
	box-shadow:    var(--shadow-sm);
	transition:    var(--transition);
}
.project-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }

.project-card__thumb {
	position:    relative;
	overflow:    hidden;
	aspect-ratio: 4/3;
}
.project-card__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.project-card:hover .project-card__thumb img { transform: scale(1.05); }

.project-card__tag {
	position:      absolute;
	top:           12px;
	left:          12px;
}

.project-card__body { padding: 20px; }

.project-card__title {
	font-size:   1.0625rem;
	font-weight: 700;
	margin-bottom: 8px;
	color:       var(--color-text-primary);
}
.project-card__title a { color: inherit; }
.project-card__title a:hover { color: var(--color-primary); }

.project-card__meta {
	display:     flex;
	align-items: center;
	gap:         5px;
	font-size:   .8125rem;
	color:       var(--color-text-muted);
	margin-bottom: 10px;
}
.project-card__meta svg { width: 13px; height: 13px; }

.project-card__price {
	font-size:   .9375rem;
	font-weight: 700;
	color:       var(--color-accent);
}

/* --------------------------------------------------------------------------
   NEWS CARD
   -------------------------------------------------------------------------- */
.news-card {
	background:    var(--color-bg-white);
	border-radius: var(--radius-md);
	overflow:      hidden;
	box-shadow:    var(--shadow-sm);
	transition:    var(--transition);
}
.news-card:hover { box-shadow: var(--shadow-md); }

.news-card__thumb {
	overflow:    hidden;
	aspect-ratio: 16/9;
}
.news-card__thumb img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.news-card:hover .news-card__thumb img { transform: scale(1.04); }

.news-card__body { padding: 20px; }

.news-card__cat {
	display:      inline-block;
	font-size:    .75rem;
	font-weight:  700;
	color:        var(--color-primary);
	text-transform: uppercase;
	letter-spacing: .5px;
	margin-bottom: 8px;
}

.news-card__title {
	font-size:    1rem;
	font-weight:  600;
	line-height:  1.45;
	margin-bottom: 10px;
	display:      -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow:     hidden;
}
.news-card__title a { color: var(--color-text-primary); }
.news-card__title a:hover { color: var(--color-primary); }

.news-card__meta {
	display:     flex;
	align-items: center;
	gap:         12px;
	font-size:   .8rem;
	color:       var(--color-text-muted);
}
.news-card__meta svg { width: 12px; height: 12px; }

/* --------------------------------------------------------------------------
   SIDEBAR FILTER BLOCK
   -------------------------------------------------------------------------- */
.filter-block {
	background:    var(--color-bg-white);
	border-radius: var(--radius-md);
	border:        1px solid var(--color-border);
	overflow:      hidden;
}

.filter-block__header {
	padding:       16px 20px;
	font-size:     .875rem;
	font-weight:   700;
	color:         var(--color-text-primary);
	border-bottom: 1px solid var(--color-border);
	display:       flex;
	align-items:   center;
	gap:           8px;
}
.filter-block__header svg { width: 16px; height: 16px; color: var(--color-primary); }

.filter-block__body { padding: 20px; display: flex; flex-direction: column; gap: 20px; }

.filter-group { display: flex; flex-direction: column; gap: 8px; }

.filter-group__label {
	font-size:  .8rem;
	font-weight: 600;
	color:      var(--color-text-secondary);
	text-transform: uppercase;
	letter-spacing: .5px;
}

.filter-group select,
.filter-group input[type="text"],
.filter-group input[type="number"] {
	width:         100%;
	padding:       10px 12px;
	border:        1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size:     .9rem;
	font-family:   var(--font-base);
	color:         var(--color-text-primary);
	background:    var(--color-bg);
	transition:    var(--transition);
	outline:       none;
}
.filter-group select:focus,
.filter-group input:focus {
	border-color: var(--color-primary);
	background:   #fff;
}

.filter-block__footer {
	padding:    0 20px 20px;
}
.filter-block__submit {
	width:      100%;
	padding:    12px;
	background: var(--color-primary);
	color:      #fff;
	border:     none;
	border-radius: var(--radius-sm);
	font-size:  .9375rem;
	font-weight: 700;
	cursor:     pointer;
	display:    flex;
	align-items: center;
	justify-content: center;
	gap:        8px;
	transition: var(--transition);
}
.filter-block__submit:hover { background: var(--color-primary-dark); }
.filter-block__submit svg { width: 16px; height: 16px; }

.filter-reset {
	display:   block;
	text-align: center;
	margin-top: 10px;
	font-size: .8125rem;
	color:     var(--color-text-muted);
}
.filter-reset:hover { color: var(--color-accent); }

/* --------------------------------------------------------------------------
   HORIZONTAL FILTER BAR (archives top bar)
   -------------------------------------------------------------------------- */
.filter-tabs {
	display:   flex;
	gap:       8px;
	padding:   16px 0;
	border-bottom: 1px solid var(--color-border);
	overflow-x: auto;
	scrollbar-width: none;
	flex-wrap: wrap;
}
.filter-tabs::-webkit-scrollbar { display: none; }

.filter-tab {
	padding:       8px 20px;
	border-radius: var(--radius-sm);
	font-size:     .875rem;
	font-weight:   600;
	border:        1.5px solid var(--color-border);
	background:    var(--color-surface);
	color:         var(--color-text-secondary);
	cursor:        pointer;
	transition:    var(--transition);
	white-space:   nowrap;
}
.filter-tab:hover,
.filter-tab.active {
	background:   var(--color-primary);
	border-color: var(--color-primary);
	color:        #fff;
}

/* --------------------------------------------------------------------------
   AGENT CARD (sidebar on single pages)
   -------------------------------------------------------------------------- */
.agent-card {
	background:    var(--color-bg-white);
	border-radius: var(--radius-md);
	border:        1px solid var(--color-border);
	padding:       24px;
	display:       flex;
	flex-direction: column;
	gap:           16px;
}

.agent-card__header {
	display:     flex;
	align-items: center;
	gap:         14px;
}

.agent-card__avatar {
	width:         60px;
	height:        60px;
	border-radius: 50%;
	object-fit:    cover;
	border:        3px solid var(--color-border);
}

.agent-card__name {
	font-size:   1rem;
	font-weight: 700;
}
.agent-card__role {
	font-size:   .8125rem;
	color:       var(--color-text-muted);
}

.agent-card__contacts { display: flex; flex-direction: column; gap: 10px; }
.agent-card__contact {
	display:     flex;
	align-items: center;
	gap:         10px;
	font-size:   .9rem;
}
.agent-card__contact svg { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }

.agent-card__cta { display: flex; gap: 8px; }
.agent-card__btn {
	flex:          1;
	padding:       10px;
	text-align:    center;
	border-radius: var(--radius-sm);
	font-weight:   600;
	font-size:     .875rem;
}

/* --------------------------------------------------------------------------
   LEAD / CONTACT FORM CARD
   -------------------------------------------------------------------------- */
.lead-form-card {
	background:    var(--color-bg-white);
	border-radius: var(--radius-md);
	border:        1px solid var(--color-border);
	padding:       28px;
}

.lead-form-card__title {
	font-size:    1.0625rem;
	font-weight:  700;
	margin-bottom: 20px;
	color:        var(--color-text-primary);
}

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: .8125rem; font-weight: 600; color: var(--color-text-secondary); }
.form-group input,
.form-group select,
.form-group textarea {
	padding:       10px 14px;
	border:        1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-size:     .9375rem;
	font-family:   var(--font-base);
	color:         var(--color-text-primary);
	background:    var(--color-bg);
	transition:    var(--transition);
	outline:       none;
	width:         100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	border-color: var(--color-primary);
	background:   #fff;
	box-shadow:   0 0 0 3px rgba(26,59,102,.08);
}
.form-group textarea { resize: vertical; min-height: 100px; }

.form-submit {
	width:         100%;
	padding:       14px;
	background:    var(--color-accent);
	color:         #fff;
	border:        none;
	border-radius: var(--radius-sm);
	font-size:     1rem;
	font-weight:   700;
	cursor:        pointer;
	transition:    var(--transition);
}
.form-submit:hover { background: var(--color-accent-light); }

/* --------------------------------------------------------------------------
   STATS BAR
   -------------------------------------------------------------------------- */
.stats-bar {
	display:         flex;
	align-items:     center;
	justify-content: space-around;
	padding:         48px 0;
	background:      var(--color-primary);
	gap:             0;
}
.stats-bar__item {
	text-align:  center;
	flex:        1;
	padding:     0 20px;
}
.stats-bar__num {
	font-size:   2.5rem;
	font-weight: 800;
	color:       #fff;
	line-height: 1;
}
.stats-bar__label {
	font-size:   .875rem;
	color:       rgba(255,255,255,.7);
	margin-top:  6px;
}
.stats-bar__divider {
	width:  1px;
	height: 60px;
	background: rgba(255,255,255,.2);
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   CTA BANNER
   -------------------------------------------------------------------------- */
.cta-banner {
	background:  #F4F1EA;
	padding:     80px 0;
}
.cta-banner__inner {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             40px;
	flex-wrap:       wrap;
}
.cta-banner__title {
	font-size:   2rem;
	font-weight: 800;
	line-height: 1.2;
	max-width:   560px;
}
.cta-banner__sub {
	font-size:   1.0625rem;
	color:       var(--color-text-secondary);
	margin-top:  10px;
}

/* --------------------------------------------------------------------------
   PAGINATION
   -------------------------------------------------------------------------- */
.pagination {
	display:     flex;
	justify-content: center;
	gap:         6px;
	margin-top:  48px;
}
.pagination a,
.pagination span {
	display:       flex;
	align-items:   center;
	justify-content: center;
	width:         40px;
	height:        40px;
	border-radius: var(--radius-sm);
	border:        1px solid var(--color-border);
	font-size:     .875rem;
	font-weight:   600;
	color:         var(--color-text-secondary);
	background:    var(--color-bg-white);
	transition:    var(--transition);
}
.pagination a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pagination .current {
	background:   var(--color-primary);
	border-color: var(--color-primary);
	color:        #fff;
}

/* --------------------------------------------------------------------------
   SECTION DIVIDER
   -------------------------------------------------------------------------- */
.section-divider {
	height: 1px;
	background: var(--color-border);
	margin: 0;
}

/* --------------------------------------------------------------------------
   EMPTY STATE
   -------------------------------------------------------------------------- */
.empty-state {
	text-align:  center;
	padding:     80px 20px;
	color:       var(--color-text-muted);
}
.empty-state svg {
	width:         64px;
	height:        64px;
	margin:        0 auto 16px;
	color:         var(--color-border);
}
.empty-state__title {
	font-size:   1.125rem;
	font-weight: 600;
	color:       var(--color-text-secondary);
	margin-bottom: 8px;
}
.empty-state__sub { font-size: .9rem; }