/**
 * Aqarsky Theme - Main Stylesheet
 * 
 * Architecture:
 * 1. Design Tokens
 * 2. Reset
 * 3. Base (elements + typography roles)
 * 4. Layout
 * 5. Components
 *
 * @package Aqarsky
 */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
	/* --- Colors --- */
	--color-primary: #2e518c;
	--color-primary-hover: #14263c;
	--color-primary-light: #e6f0fa;
	
	--color-white: #ffffff;
	--color-black: #000000;
	--color-gray-50: #f8f9fa;
	--color-gray-100: #f1f3f5;
	--color-gray-200: #e9ecef;
	--color-gray-300: #dee2e6;
	--color-gray-400: #ced4da;
	--color-gray-500: #adb5bd;
	--color-gray-600: #868e96;
	--color-gray-700: #495057;
	--color-gray-800: #343a40;
	--color-gray-900: #212529;
	
	--color-success: #28a745;
	--color-warning: #ffc107;
	--color-error: #dc3545;
	
	/* Surfaces */
	--color-surface: var(--color-white);
	--color-surface-alt: var(--color-gray-50);
	--color-surface-dark: #1a1a2e;
	--color-surface-dark-alt: #2d2d44;
	
	/* Text */
	--color-text: var(--color-gray-900);
	--color-text-muted: var(--color-gray-700); /* #495057 - WCAG AA compliant (6.0:1 on white) */
	--color-text-inverse: var(--color-white);
	--color-text-inverse-muted: #c8c8d8; /* Improved contrast on dark backgrounds */
	
	/* Borders */
	--color-border: var(--color-gray-200);
	--color-border-dark: var(--color-surface-dark-alt);
	
	/* --- Typography --- */
	--font-family: var(--font-primary), system-ui, -apple-system, sans-serif;
	
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-md: 1.125rem;
	--text-lg: 1.25rem;
	--text-xl: 1.5rem;
	--text-2xl: 1.875rem;
	--text-3xl: 2.25rem;
	--text-4xl: 3rem;
	
	--font-normal: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	
	--leading-tight: 1.25;
	--leading-normal: 1.5;
	--leading-relaxed: 1.75;
	
	/* --- Spacing --- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;
	
	/* --- Layout --- */
	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1400px;
	--container-padding: var(--space-5);
	--grid-gap: var(--space-6);
	
	/* --- Misc --- */
	--radius-sm: 4px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
	
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
	
	--transition-fast: 150ms ease;
	--transition-base: 200ms ease;
	
	--z-dropdown: 90;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal: 500;
}


/* ==========================================================================
   2. RESET
   ========================================================================== */

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	tab-size: 4;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	min-height: 100vh;
	text-rendering: optimizeSpeed;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	max-width: 100vw;
}

img, picture, video, canvas, svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: none;
}

a {
	color: inherit;
	text-decoration: none;
}

ul, ol {
	list-style: none;
}

table {
	border-collapse: collapse;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

/* --- Body --- */
body {
	font-family: var(--font-family);
	font-size: var(--text-base);
	font-weight: var(--font-normal);
	line-height: var(--leading-normal);
	color: var(--color-text);
	background-color: var(--color-surface);
}

/* --- Typography Roles ---
   .title-display  : Hero headlines, large page titles
   .title-section  : Section headings
   .title-block    : Block/card headings within sections
   .title-label    : Small labels, meta headings
   .text-body      : Standard body text (default)
   .text-meta      : Captions, timestamps, secondary info
*/

.title-display {
	font-size: var(--text-4xl);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
}

.title-section {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
}

.title-block {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
}

.title-label {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	line-height: var(--leading-normal);
}

.text-meta {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
}

/* --- Default Heading Sizes (semantic fallback) --- */
h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); font-weight: var(--font-bold); line-height: var(--leading-tight); }
h3 { font-size: var(--text-xl); font-weight: var(--font-bold); line-height: var(--leading-tight); }
h4 { font-size: var(--text-lg); font-weight: var(--font-bold); line-height: var(--leading-tight); }
h5 { font-size: var(--text-md); font-weight: var(--font-semibold); line-height: var(--leading-tight); }
h6 { font-size: var(--text-base); font-weight: var(--font-semibold); line-height: var(--leading-tight); }

/* --- Paragraphs --- */
p {
	margin-block-end: var(--space-4);
}

p:last-child {
	margin-block-end: 0;
}

/* --- Links --- */
a {
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-primary);
}

/* --- Lists --- */
ul, ol {
	padding-inline-start: var(--space-6);
}

li {
	margin-block-end: var(--space-2);
}

/* --- Images --- */
img {
	border-radius: var(--radius-sm);
}

figure {
	margin: 0;
}

figcaption {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block-start: var(--space-2);
}

/* --- Forms --- */
input, textarea, select {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-surface);
	transition: border-color var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

label {
	display: block;
	font-weight: var(--font-medium);
	margin-block-end: var(--space-2);
}

/* --- Buttons --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	line-height: 1;
	border-radius: var(--radius-md);
	transition: all var(--transition-base);
	cursor: pointer;
}

.btn--primary {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border: 2px solid var(--color-primary);
}

.btn--primary:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-text-inverse);
	border-color: var(--color-primary-hover);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(46, 81, 140, 0.3);
}

.btn--ghost {
	background-color: transparent;
	border: 1px solid var(--color-border);
	color: var(--color-text);
}

.btn--ghost:hover {
	background-color: var(--color-surface-alt);
}

.btn--outline {
	background-color: transparent;
	border: 2px solid var(--color-primary);
	color: var(--color-primary);
}

.btn--outline:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(46, 81, 140, 0.2);
}

.btn--sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-sm);
}

.btn--lg {
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-md);
}

/* --- Horizontal Rule --- */
hr {
	border: none;
	border-top: 1px solid var(--color-border);
	margin-block: var(--space-8);
}

/* --- Screen Reader Only --- */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */

/* --- RTL/LTR --- */
[dir="rtl"] { text-align: right; }
[dir="ltr"] { text-align: left; }

/* --- Container --- */
.container {
	width: 100%;
	max-width: var(--container-xl);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

.container--wide {
	max-width: 1400px;
}

/* --- Grid --- */
.grid {
	display: grid;
	gap: var(--grid-gap);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
	.grid--4, .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 576px) {
	.grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
}

/* --- Stack --- */
.stack > * + * { margin-block-start: var(--space-4); }
.stack--sm > * + * { margin-block-start: var(--space-2); }
.stack--lg > * + * { margin-block-start: var(--space-8); }

/* --- Section --- */
.section {
	padding-block: var(--space-16);
}

.section--sm { padding-block: var(--space-10); }
.section--lg { padding-block: var(--space-24); }

/* --- Site Main --- */
.site-main {
	min-height: 50vh;
}

/* -------------------------------------------------------------------------
   Site Header
   ------------------------------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-fixed);
	background-color: var(--color-surface);
	border-bottom: 1px solid var(--color-border);
	will-change: transform;
	backface-visibility: hidden;
	transform: translateZ(0);
}

.site-header .container {
	position: relative; /* For mobile nav positioning */
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 64px;
}

/* Logo */
.site-header__logo {
	flex-shrink: 0;
}

.site-header__logo a {
	display: block;
}

.site-header__logo img {
	height: 40px;
	width: auto;
	max-width: 160px;
}

/* Navigation */
.site-nav {
	flex: 1;
	display: flex;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list li {
	margin: 0;
	position: relative;
}

.site-nav__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text);
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
	line-height: 1.5;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a {
	color: var(--color-primary);
	background-color: var(--color-primary-light);
}


/* Dropdown */
.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 180px;
	padding: var(--space-2);
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
	z-index: var(--z-dropdown);
}

.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate3d(0, 0, 0);
}

.site-nav__list .sub-menu a {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	border-radius: var(--radius-sm);
}

/* Header Actions */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-shrink: 0;
}

/* Header CTA */
.header-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.header-cta__icon {
	flex-shrink: 0;
}

/* Mobile Toggle */
.site-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	padding: 4px;
}

.site-header__toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background-color: var(--color-text);
	border-radius: 1px;
	transition: all var(--transition-fast);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(2) {
	opacity: 0;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* Menu Icon Support */
.menu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-inline-end: var(--space-3);
	flex-shrink: 0;
}

.menu-icon img,
.menu-icon svg {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Mobile Responsive */
@media (max-width: 992px) {
	.site-header__inner {
		position: relative;
	}
	
	.site-header__toggle {
		display: flex;
		order: 0;
	}
	
	.site-nav--desktop {
		display: none;
	}
	
	.site-header__logo {
		order: 1;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.site-header__actions {
		order: 2;
	}
	
	.header-cta span {
		display: none;
	}
	
	.header-cta {
		padding: var(--space-2) var(--space-3);
		min-width: 40px;
		height: 40px;
		justify-content: center;
		border-radius: var(--radius-lg);
	}
}

@media (max-width: 576px) {
	.site-header__inner {
		min-height: 56px;
	}
	
	.site-header__logo img {
		height: 32px;
	}
}

/* -------------------------------------------------------------------------
   Mobile Navigation Sidebar
   ------------------------------------------------------------------------- */
.mobile-nav-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--transition-base), visibility var(--transition-base);
	z-index: calc(var(--z-modal) - 1);
}

.mobile-nav-overlay[aria-hidden="false"] {
	opacity: 1;
	visibility: visible;
	z-index: var(--z-fixed);
}

.mobile-nav {
	position: fixed;
	top: 0;
	width: 320px;
	max-width: 85vw;
	height: 100%;
	background-color: var(--color-surface);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	padding: var(--space-6);
	visibility: hidden;
	transition: transform var(--transition-base), visibility var(--transition-base);
	z-index: var(--z-modal);
}

/* RTL: Open from right */
[dir="rtl"] .mobile-nav {
	right: 0;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
	transform: translateX(100%);
}

/* LTR: Open from left */
[dir="ltr"] .mobile-nav {
	left: 0;
	box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
	transform: translateX(-100%);
}

.mobile-nav[aria-hidden="false"] {
	transform: translateX(0);
	visibility: visible;
	z-index: var(--z-modal);
}

/* Mobile Nav Logo */
.mobile-nav__logo {
	text-align: center;
	padding-block-end: var(--space-6);
	border-bottom: 1px solid var(--color-border);
	margin-block-end: var(--space-6);
}

.mobile-nav__logo img {
	height: 40px;
	width: auto;
	max-width: 140px;
	margin-inline: auto;
}

/* Mobile Nav Menu */
.mobile-nav__menu {
	flex: 1;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-nav__menu li {
	margin: 0;
}

.mobile-nav__menu > li {
	border-bottom: 1px solid var(--color-border);
}

.mobile-nav__menu a {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) 0;
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	color: var(--color-text);
	transition: color var(--transition-fast);
	line-height: 1.6;
	min-height: 48px;
}

.mobile-nav__menu a:hover,
.mobile-nav__menu .current-menu-item > a {
	color: var(--color-primary);
}

.mobile-nav__menu .sub-menu {
	list-style: none;
	margin: 0;
	padding: var(--space-2) 0 var(--space-2) var(--space-6);
}

.mobile-nav__menu .sub-menu a {
	font-size: var(--text-sm);
	padding: var(--space-2) 0;
	min-height: 40px;
}

.mobile-nav__menu .menu-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

/* Mobile Nav CTA */
.mobile-nav__cta {
	padding-block: var(--space-6);
}

.mobile-nav__cta .btn {
	width: 100%;
}

/* Mobile Nav Contact */
.mobile-nav__contact {
	padding-block-start: var(--space-4);
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.mobile-nav__contact-item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border-radius: var(--radius-md);
	background-color: var(--color-surface-alt);
	transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-nav__contact-item:hover {
	color: var(--color-primary);
	background-color: var(--color-primary-light);
}

.mobile-nav__contact-item svg {
	flex-shrink: 0;
}

/* Desktop: Hide mobile nav */
@media (min-width: 993px) {
	.mobile-nav,
	.mobile-nav-overlay {
		display: none;
	}
}


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* -------------------------------------------------------------------------
   Buttons
   Global button styles used across the entire site
   ------------------------------------------------------------------------- */
.aq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	line-height: 1.5;
}

.aq-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.aq-btn svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
	flex-shrink: 0;
}

/* Primary Button */
.aq-btn-primary {
	background: var(--color-primary);
	color: var(--color-white);
}

.aq-btn-primary:hover:not(:disabled) {
	background: var(--color-primary-hover);
}


/* Secondary Button */
.aq-btn-secondary {
	background: var(--color-gray-100);
	color: var(--color-text);
}

.aq-btn-secondary:hover:not(:disabled) {
	background: var(--color-gray-200);
}

/* Success Button */
.aq-btn-success {
	background: var(--color-success);
	color: var(--color-white);
}

.aq-btn-success:hover:not(:disabled) {
	background: #218838;
}

/* Danger Button */
.aq-btn-danger {
	background: var(--color-error);
	color: var(--color-white);
}

.aq-btn-danger:hover:not(:disabled) {
	background: #c82333;
}

/* Outline Buttons */
.aq-btn-outline {
	background: transparent;
	color: var(--color-text-muted);
	border: 2px solid var(--color-border);
}

.aq-btn-outline:hover:not(:disabled) {
	background: var(--color-gray-50);
	color: var(--color-text);
	border-color: var(--color-gray-400);
}

.aq-btn-outline-primary {
	background: transparent;
	color: var(--color-primary);
	border: 2px solid var(--color-primary);
}

.aq-btn-outline-primary:hover:not(:disabled) {
	background: var(--color-primary);
	color: var(--color-white);
}

.aq-btn-outline-danger {
	background: transparent;
	color: var(--color-error);
	border: 2px solid var(--color-border);
}

.aq-btn-outline-danger:hover:not(:disabled) {
	background: var(--color-gray-50);
	color: var(--color-error);
	border-color: var(--color-error);
}

/* Button Sizes */
.aq-btn-sm {
	padding: var(--space-2) var(--space-4);
	font-size: var(--text-xs);
}

.aq-btn-lg {
	padding: var(--space-4) var(--space-8);
	font-size: var(--text-base);
}

.aq-btn-full {
	width: 100%;
}

/* Icon Button */
.aq-btn-icon {
	width: 32px;
	height: 32px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	background: transparent;
	cursor: pointer;
}

.aq-btn-icon:hover {
	background: var(--color-gray-200);
}

.aq-btn-icon svg {
	width: 18px;
	height: 18px;
	fill: var(--color-gray-600);
}

/* -------------------------------------------------------------------------
   Hero Block
   Reusable hero/banner component for any page
   ------------------------------------------------------------------------- */
.hero {
	padding-block: var(--space-20);
	background-color: var(--color-surface-alt);
	text-align: center;
}

.hero__title {
	margin-block-end: var(--space-4);
}

.hero__subtitle {
	color: var(--color-text-muted);
	font-size: var(--text-lg);
	margin-block-end: var(--space-8);
}

/* -------------------------------------------------------------------------
   Section Header
   Title + optional description for content sections
   ------------------------------------------------------------------------- */
.section-header {
	margin-block-end: var(--space-8);
}

.section-header__desc {
	color: var(--color-text-muted);
	margin-block-start: var(--space-2);
}

/* -------------------------------------------------------------------------
   Card
   Generic content card pattern
   ------------------------------------------------------------------------- */
.card {
	background-color: var(--color-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--transition-base);
	display: flex;
	flex-direction: column;
	height: 100%;
	contain: layout style paint;
}

.card:hover {
	box-shadow: var(--shadow-md);
}

.card__image {
	aspect-ratio: 16 / 10;
	object-fit: cover;
	width: 100%;
	border-radius: 0;
}

.card__body {
	padding: var(--space-5);
}

.card__title {
	margin-block-end: var(--space-2);
}

/* -------------------------------------------------------------------------
   Icon Link
   Link with inline icon alignment
   ------------------------------------------------------------------------- */
.icon-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	transition: color var(--transition-fast);
}

.icon-link svg {
	flex-shrink: 0;
	opacity: 0.7;
}

/* -------------------------------------------------------------------------
   Entry (Single Post/Page)
   ------------------------------------------------------------------------- */
.entry-header {
	margin-block-end: var(--space-8);
}

.entry-content {
	line-height: var(--leading-relaxed);
}

/* -------------------------------------------------------------------------
   Archive Header
   ------------------------------------------------------------------------- */
.archive-header {
	margin-block-end: var(--space-10);
}

.archive-description {
	color: var(--color-text-muted);
	margin-block-start: var(--space-2);
}

/* -------------------------------------------------------------------------
   Error Page (404)
   ------------------------------------------------------------------------- */
.error-page {
	text-align: center;
	padding-block: var(--space-24);
}

.error-page__message {
	color: var(--color-text-muted);
	margin-block: var(--space-4) var(--space-8);
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--color-surface-dark);
	color: var(--color-text-inverse);
	content-visibility: auto;
	contain-intrinsic-size: auto 400px;
}

.footer__main {
	padding-block: var(--space-16) var(--space-10);
}

/* Footer grid: make search column wider */
.footer__main .grid--4 {
	grid-template-columns: 1fr 1fr 1.5fr 1fr;
}

@media (max-width: 992px) {
	.footer__main .grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.footer__main .grid--4 {
		grid-template-columns: 1fr;
	}
}

.footer__col {
	display: flex;
	flex-direction: column;
}

.footer__heading {
	color: var(--color-text-inverse);
	margin-block-end: var(--space-5);
}

.footer__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.footer__links a {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--color-text-inverse-muted);
	transition: color var(--transition-fast);
}

.footer__links a:hover {
	color: var(--color-text-inverse);
}

.footer__links svg {
	opacity: 0.7;
	flex-shrink: 0;
}

/* Footer: 2-column subsection grid */
.footer__links-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-5);
}

.footer__subsection-title {
	color: var(--color-text-inverse-muted);
	margin-block-end: var(--space-3);
}

/* Footer: Bottom bar */
.footer__bottom {
	border-top: 1px solid var(--color-border-dark);
	padding-block: var(--space-5);
}

.footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.footer__copyright {
	font-size: var(--text-sm);
	color: var(--color-text-inverse-muted);
}

.footer__social {
	display: flex;
	gap: var(--space-4);
}

.footer__social a {
	color: var(--color-text-inverse-muted);
	transition: color var(--transition-fast);
}

.footer__social a:hover {
	color: var(--color-text-inverse);
}

.footer__lang-switch {
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border-dark);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	color: var(--color-text-inverse-muted);
	transition: all var(--transition-base);
}

.footer__lang-switch:hover {
	background-color: var(--color-surface-dark-alt);
	color: var(--color-text-inverse);
}

/* Footer: Brand column */
.footer__brand-title {
	color: var(--color-text-inverse);
	margin-block-end: var(--space-4);
}

.footer__brand-desc {
	color: var(--color-text-inverse-muted);
	line-height: var(--leading-relaxed);
	margin-block-end: var(--space-5);
}

.footer__contact {
	font-style: normal;
}

.footer__contact p {
	margin-block-end: var(--space-2);
	color: var(--color-text-inverse-muted);
}

.footer__contact a {
	color: var(--color-text-inverse-muted);
	transition: color var(--transition-fast);
}

.footer__contact a:hover {
	color: var(--color-text-inverse);
}

/* Footer: Dark button variant */
.btn--dark {
	background-color: var(--color-surface-dark-alt);
	color: var(--color-text-inverse);
	margin-block-start: var(--space-4);
}

.btn--dark:hover {
	background-color: var(--color-border-dark);
	color: var(--color-text-inverse);
}

/* -------------------------------------------------------------------------
   Article Layout (Single Posts, Pages)
   ------------------------------------------------------------------------- */

/* Breadcrumb */
.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block-end: var(--space-4);
}

.breadcrumb a {
	color: var(--color-text-muted);
	transition: color var(--transition-fast);
}

.breadcrumb a:hover {
	color: var(--color-primary);
}

.breadcrumb__sep {
	color: var(--color-gray-400);
}

.breadcrumb__current {
	color: var(--color-text);
}

/* Article Hero - Premium Dark Style */
.article-hero--premium {
	position: relative;
	/* Responsive height: clamp(min, preferred, max) prevents CLS */
	min-height: clamp(280px, 40vh, 420px);
	padding-block: var(--space-16) var(--space-12);
	background-color: var(--color-surface-dark);
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	overflow: hidden;
	/* Flexbox centers content vertically within min-height */
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.article-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(26, 26, 46, 0.85) 0%,
		rgba(26, 26, 46, 0.92) 50%,
		rgba(26, 26, 46, 0.98) 100%
	);
	z-index: 1;
}

.article-hero__inner {
	position: relative;
	z-index: 2;
}

/* Category Badge */
.article-hero__category {
	display: inline-block;
	padding: var(--space-2) var(--space-4);
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	border-radius: var(--radius-sm);
	margin-block-end: var(--space-5);
	transition: background-color var(--transition-fast);
}

.article-hero__category:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-text-inverse);
}

/* Hero Title */
.article-hero--premium .article-hero__title {
	font-size: var(--text-4xl);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	color: var(--color-text-inverse);
	margin-block-end: var(--space-6);
	max-width: 52rem;
}

@media (max-width: 768px) {
	.article-hero--premium .article-hero__title {
		font-size: var(--text-2xl);
	}
	
	.article-hero--premium {
		padding-block: var(--space-10) var(--space-8);
	}
}

/* Hero Meta */
.article-hero--premium .article-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-5);
	margin-block-end: var(--space-6);
}

.article-hero--premium .article-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: var(--color-text-inverse-muted);
}

.article-hero--premium .article-hero__meta-item svg {
	opacity: 0.7;
}

/* Light Breadcrumb (for dark hero) */
.breadcrumb--light {
	margin-block-end: 0;
}

.breadcrumb--light,
.breadcrumb--light a {
	color: var(--color-text-inverse-muted);
}

.breadcrumb--light a:hover {
	color: var(--color-text-inverse);
}

.breadcrumb--light .breadcrumb__sep {
	color: rgba(255, 255, 255, 0.3);
}

.breadcrumb--light .breadcrumb__current {
	color: var(--color-text-inverse);
}

/* Article Body: 3-Column Grid */
.article-body {
	padding-block: var(--space-10);
}

.article-grid {
	display: grid;
	grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(200px, 280px);
	gap: var(--space-8);
	align-items: start;
}

/* RTL: Reverse column order visually */
[dir="rtl"] .article-grid {
	direction: rtl;
}

@media (max-width: 1200px) {
	.article-grid {
		grid-template-columns: 1fr minmax(0, 2fr);
		gap: var(--space-6);
	}
	
	.article-sidebar--toc {
		display: none;
	}
}

@media (max-width: 768px) {
	.article-grid {
		grid-template-columns: 1fr;
	}
	
	.article-sidebar--share {
		order: 1;
	}
}

/* Article Sidebars */
.article-sidebar {
	position: sticky;
	top: calc(var(--space-6) + 60px); /* Account for header */
}

@media (max-width: 768px) {
	.article-sidebar {
		position: static;
	}
}

.article-sidebar--share {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

/* Article Content */
.article-content {
	min-width: 0;
}

.entry-content {
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-gray-800);
}

.entry-content h2 {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	margin-block: var(--space-10) var(--space-4);
}

.entry-content h3 {
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	margin-block: var(--space-8) var(--space-3);
}

.entry-content h4 {
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	margin-block: var(--space-6) var(--space-3);
}

.entry-content p {
	margin-block-end: var(--space-5);
}

.entry-content img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	margin-block: var(--space-6);
	border-radius: var(--radius-lg);
}

.entry-content figure {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0;
	margin-inline: auto;
	margin-block: var(--space-6);
	overflow: hidden;
}

.entry-content figure img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-block: 0;
}

.entry-content figcaption {
	text-align: center;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block-start: var(--space-2);
}

.entry-content ul,
.entry-content ol {
	margin-block-end: var(--space-5);
	padding-inline-start: var(--space-6);
}

.entry-content ul {
	list-style: disc;
}

.entry-content ol {
	list-style: decimal;
}

.entry-content li {
	margin-block-end: var(--space-2);
}

.entry-content a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.entry-content a:hover {
	color: var(--color-primary-hover);
}

.entry-content blockquote {
	border-inline-start: 4px solid var(--color-primary);
	padding: var(--space-4) var(--space-6);
	margin-block: var(--space-6);
	background-color: var(--color-surface-alt);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	font-style: italic;
}

.entry-content table {
	width: 100%;
	margin-block: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.entry-content th,
.entry-content td {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	text-align: inherit;
}

.entry-content th {
	background-color: var(--color-surface-alt);
	font-weight: var(--font-semibold);
}

/* Page Links */
.page-links {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-start: var(--space-8);
	font-weight: var(--font-medium);
}

/* Article Tags */
.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.article-tag {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	transition: all var(--transition-fast);
}

.article-tag:hover {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
}

/* Article FAQ Section */
.article-faq {
	padding-block: var(--space-8);
	background-color: var(--color-surface-alt);
}

/* Article Author Section */
.article-author {
	padding-block: var(--space-10);
}

/* -------------------------------------------------------------------------
   Table of Contents
   ------------------------------------------------------------------------- */
.toc {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.toc__title {
	font-size: var(--text-base);
	font-weight: var(--font-bold);
	color: var(--color-text);
	margin-block-end: var(--space-4);
	padding-block-end: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.toc__item {
	margin-block-end: 0;
}

/* H3 items indented under H2 */
.toc__item--h3 {
	padding-inline-start: var(--space-4);
}

.toc__link {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-normal);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	transition: all var(--transition-fast);
}

.toc__link:hover {
	color: var(--color-primary);
	background-color: var(--color-surface-alt);
}

/* Active state */
.toc__item.is-active > .toc__link {
	color: var(--color-text);
	font-weight: var(--font-semibold);
	background-color: var(--color-primary-light);
}

.toc__item--h3.is-active > .toc__link {
	font-weight: var(--font-medium);
}

/* -------------------------------------------------------------------------
   Share Block
   ------------------------------------------------------------------------- */

/* Inline share (after content) */
.article-share-inline {
	margin-block-start: var(--space-8);
	padding-block-start: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.article-share-inline .share-block {
	background-color: transparent;
	border: none;
	padding: 0;
}

.article-share-inline .share-block__title {
	border-bottom: none;
	padding-block-end: 0;
}

/* Sidebar share */
.share-block {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.share-block__title {
	display: block;
	font-size: var(--text-base);
	font-weight: var(--font-bold);
	color: var(--color-text);
	margin-block-end: var(--space-4);
	padding-block-end: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.share-block__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.share-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--color-surface-alt);
	color: var(--color-text-muted);
	border: none;
	cursor: pointer;
	transition: all var(--transition-fast);
}

.share-link:hover {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	transform: translate3d(0, -2px, 0);
}

.share-link svg {
	width: 20px;
	height: 20px;
}

/* -------------------------------------------------------------------------
   Related Posts (Sidebar)
   ------------------------------------------------------------------------- */
.related-posts {
	background-color: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
}

.related-posts__title {
	font-size: var(--text-base);
	font-weight: var(--font-bold);
	color: var(--color-text);
	margin-block-end: var(--space-4);
	padding-block-end: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.related-posts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.related-posts__item {
	margin-block-end: var(--space-4);
}

.related-posts__item:last-child {
	margin-block-end: 0;
}

.related-posts__link {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-2);
	margin: calc(-1 * var(--space-2));
	border-radius: var(--radius-md);
	transition: background-color var(--transition-fast);
}

.related-posts__link:hover {
	background-color: var(--color-surface-alt);
}

.related-posts__thumb {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.related-posts__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.related-posts__info {
	flex: 1;
	min-width: 0;
}

.related-posts__post-title {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	line-height: var(--leading-tight);
	margin: 0 0 var(--space-1);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
}

.related-posts__date {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Author Card
   ------------------------------------------------------------------------- */
.author-card {
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
}

.author-card__title {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	margin-block-end: var(--space-5);
	padding-block-end: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.author-card__content {
	display: flex;
	gap: var(--space-5);
}

@media (max-width: 576px) {
	.author-card__content {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
}

.author-card__avatar {
	flex-shrink: 0;
}

.author-card__avatar img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--color-surface);
	box-shadow: var(--shadow-md);
}

.author-card__info {
	flex: 1;
	min-width: 0;
}

.author-card__name {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	margin: 0 0 var(--space-1);
}

.author-card__name a:hover {
	color: var(--color-primary);
}

.author-card__job {
	font-size: var(--text-sm);
	color: var(--color-primary);
	margin: 0 0 var(--space-3);
}

.author-card__stats {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-3);
}

.author-card__bio {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
	margin: 0 0 var(--space-4);
}

.author-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-primary);
	transition: gap var(--transition-fast);
}

.author-card__link:hover {
	gap: var(--space-3);
}

[dir="rtl"] .author-card__link svg {
	transform: scaleX(-1);
}

/* FAQ Section */
.faq-section {
	margin-block-start: var(--space-12);
	padding: var(--space-8);
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-xl);
	content-visibility: auto;
	contain-intrinsic-size: auto 500px;
}

.faq-section__title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	margin-block-end: var(--space-6);
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.faq-item {
	background-color: var(--color-surface);
	border-radius: var(--radius-md);
	border: 1px solid var(--color-border);
	overflow: hidden;
}

.faq-question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--space-4) var(--space-5);
	font-weight: var(--font-medium);
	text-align: inherit;
	cursor: pointer;
	transition: background-color var(--transition-fast);
}

.faq-question:hover {
	background-color: var(--color-surface-alt);
}

.faq-icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: var(--color-gray-500);
	transition: transform var(--transition-base);
}

.faq-question[aria-expanded="true"] .faq-icon {
	transform: rotate(180deg);
}

.faq-answer {
	display: none;
	padding: 0 var(--space-5) var(--space-5);
	color: var(--color-text-muted);
	line-height: var(--leading-relaxed);
}

.faq-question[aria-expanded="true"] + .faq-answer {
	display: block;
}


/* -------------------------------------------------------------------------
   Project Single Page
   ------------------------------------------------------------------------- */

/* Project Hero */
.project-hero {
	position: relative;
	min-height: clamp(320px, 50vh, 480px);
	padding-block: var(--space-16) var(--space-12);
	background-color: var(--color-surface-dark);
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}

.project-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0; /* Hidden visually, used for LCP */
}

.project-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(26, 26, 46, 0.7) 0%,
		rgba(26, 26, 46, 0.85) 50%,
		rgba(26, 26, 46, 0.95) 100%
	);
	z-index: 1;
}

.project-hero__inner {
	position: relative;
	z-index: 2;
}

.project-hero__title {
	font-size: var(--text-4xl);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	color: var(--color-text-inverse);
	margin-block-end: var(--space-5);
	max-width: 48rem;
}

.project-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-6);
	margin-block-end: var(--space-5);
}

.project-hero__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.9);
}

.project-hero__meta-item svg {
	opacity: 0.85;
	flex-shrink: 0;
}

.project-hero__meta-item--price {
	color: #fff;
	font-weight: var(--font-bold);
	font-size: var(--text-base);
}

.project-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.project-hero__chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-4);
	background-color: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-md);
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.85);
}

.project-hero__chip strong {
	color: #fff;
	font-weight: var(--font-semibold);
}

/* Trust Row - Mobile (stacked) */
.hero-trust-row {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--space-3);
	margin-block-start: var(--space-3);
}

/* Developer Badge - Mobile */
.hero-dev-badge {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        flex-direction: row-reverse;
}

.hero-dev-badge__logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
	background: #fff;
	border-radius: var(--radius-sm);
	padding: 2px;
}

.hero-dev-badge__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
}

.hero-dev-badge__developer {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: #fff;
}

.hero-dev-badge__region {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.8);
}

.hero-dev-badge__region svg {
	width: 12px;
	height: 12px;
	opacity: 0.7;
}

/* Snapshot Card - Mobile */
.hero-snapshot {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-2);
	margin-block-start: var(--space-4);
	padding: var(--space-3);
	background: rgba(0, 0, 0, 0.35);
	border-radius: var(--radius-md);
}

.hero-snapshot__item {
	padding: var(--space-1) 0;
}

.hero-snapshot__label {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.7);
	margin-block-end: 2px;
}

.hero-snapshot__label svg {
	width: 12px;
	height: 12px;
	opacity: 0.8;
}

.hero-snapshot__value {
	font-size: var(--text-sm);
	color: #fff;
}

.hero-snapshot__value--price {
	color: #F59E0B;
	font-size: var(--text-base);
}

/* Trust Ribbon - Mobile */
.hero-trust {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.hero-trust__update {
	order: -1;
	width: 100%;
	font-size: var(--text-xs);
	color: rgba(255, 255, 255, 0.7);
	margin-block-end: var(--space-1);
}

.hero-trust__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-2) var(--space-3);
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-sm);
	font-size: var(--text-xs);
	color: #fff;
	text-decoration: none;
}

.hero-trust__btn svg {
	width: 14px;
	height: 14px;
}

.hero-trust__btn--call {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.hero-trust__btn--wa {
	background: #25D366;
	border-color: #25D366;
}

@media (min-width: 1024px) {
	/* Trust Row - Desktop (side by side) */
	.hero-trust-row {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: var(--space-4);
        margin-block-start: var(--space-4);
        justify-content: flex-end;
	}
	
	/* Developer Badge */
	.hero-dev-badge {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}
	
	.hero-dev-badge__logo {
		width: 56px;
		height: 56px;
		object-fit: contain;
		background: #fff;
		border-radius: var(--radius-md);
		padding: var(--space-1);
	}
	
	.hero-dev-badge__info {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: var(--space-1);
		text-align: end;
	}
	
	.hero-dev-badge__developer {
		font-size: var(--text-base);
		font-weight: var(--font-semibold);
		color: #fff;
	}
	
	.hero-dev-badge__region {
		display: inline-flex;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--text-sm);
		color: rgba(255, 255, 255, 0.8);
	}
	
	.hero-dev-badge__region svg {
		width: 14px;
		height: 14px;
		opacity: 0.7;
	}
	
	/* Snapshot Card */
	.hero-snapshot {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-1);
		margin-block-start: var(--space-5);
		padding: var(--space-4);
		background: rgba(0, 0, 0, 0.4);
		backdrop-filter: blur(8px);
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: var(--radius-lg);
	}
	
	.hero-snapshot__item {
		flex: 1 1 auto;
		min-width: 120px;
		padding: var(--space-2) var(--space-4);
		border-inline-end: 1px solid rgba(255, 255, 255, 0.15);
	}
	
	.hero-snapshot__item:last-child {
		border-inline-end: none;
	}
	
	.hero-snapshot__label {
		display: flex;
		align-items: center;
		gap: var(--space-1);
		font-size: var(--text-xs);
		color: rgba(255, 255, 255, 0.7);
		margin-block-end: var(--space-1);
	}
	
	.hero-snapshot__label svg {
		width: 14px;
		height: 14px;
		opacity: 0.8;
		flex-shrink: 0;
	}
	
	.hero-snapshot__value {
		display: block;
		font-size: var(--text-base);
		color: #fff;
	}
	
	.hero-snapshot__value--price {
		color: #F59E0B;
		font-size: var(--text-lg);
	}
	
	/* Trust Ribbon */
	.hero-trust {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--space-3);
	}
	
	.hero-trust__update {
		order: 0;
		width: auto;
		font-size: var(--text-sm);
		color: rgba(255, 255, 255, 0.75);
		margin-block-end: 0;
		margin-inline-start: var(--space-2);
	}
	
	.hero-trust__btn {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		padding: var(--space-2) var(--space-4);
		background: rgba(255, 255, 255, 0.15);
		border: 1px solid rgba(255, 255, 255, 0.25);
		border-radius: var(--radius-md);
		font-size: var(--text-sm);
		color: #fff;
		text-decoration: none;
		transition: background var(--transition-fast);
	}
	
	.hero-trust__btn:hover {
		background: rgba(255, 255, 255, 0.25);
		color: #fff;
	}
	
	.hero-trust__btn svg {
		width: 16px;
		height: 16px;
	}
	
	.hero-trust__btn--call {
		background: var(--color-primary);
		border-color: var(--color-primary);
	}
	
	.hero-trust__btn--call:hover {
		background: var(--color-primary-dark);
	}
	
	.hero-trust__btn--wa {
		background: #25D366;
		border-color: #25D366;
	}
	
	.hero-trust__btn--wa:hover {
		background: #1da851;
	}
}

@media (max-width: 768px) {
	.project-hero {
		min-height: 280px;
		padding-block: var(--space-10) var(--space-8);
	}
	
	.project-hero__title {
		font-size: var(--text-2xl);
	}
	
	.project-hero__meta {
		gap: var(--space-3) var(--space-4);
	}
}

/* Project Body */
.project-body {
	padding-block: var(--space-10);
}

.project-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: var(--space-10);
	align-items: start;
}

@media (max-width: 992px) {
	.project-grid {
		grid-template-columns: 1fr;
	}
	
	.project-sidebar {
		order: -1;
	}
}

/* Project Content */
.project-content {
	min-width: 0;
}

.project-section {
	padding-block-end: var(--space-8);
	margin-block-end: var(--space-8);
	border-bottom: 1px solid var(--color-border);
}

.project-section:last-child {
	border-bottom: none;
	margin-block-end: 0;
	padding-block-end: 0;
}

.project-section__title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	margin-block-end: var(--space-4);
}

.project-section__text {
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
}


/* Button full width style */
.btn--block {
	display: flex;
	width: 100%;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
}

/* Project Specs (pricing table) */
.project-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--space-4);
}

.project-specs__item {
	padding: var(--space-4);
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-md);
	text-align: center;
}

.project-specs__label {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block-end: var(--space-2);
}

.project-specs__value {
	display: block;
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
}

.project-specs__value--highlight {
	color: var(--color-primary);
	font-size: var(--text-xl);
}

/* Project Details Grid */
.project-details-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

.project-details-grid__item {
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
}

.project-details-grid__item--full {
	grid-column: 1 / -1;
}

.project-details-grid__label {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block-end: var(--space-1);
}

.project-details-grid__value {
	font-weight: var(--font-medium);
}

.project-details-grid__value--link {
	color: var(--color-primary);
}

.project-details-grid__value--link:hover {
	text-decoration: underline;
}

@media (max-width: 576px) {
	.project-details-grid {
		grid-template-columns: 1fr;
	}
}

/* Project Location */
.project-location {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding: var(--space-4);
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-md);
}

.project-location__coords {
	font-family: monospace;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin: 0;
}

/* Project Sidebar */
.project-sidebar {
	position: sticky;
	top: calc(var(--space-6) + 64px);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
}

@media (max-width: 992px) {
	.project-sidebar {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.project-nav {
		flex: 1;
		min-width: 200px;
	}
	
	.sidebar-plans {
		order: -1;
		flex: 1 1 100%;
		margin-inline: calc(-1 * var(--space-4));
		width: calc(100% + var(--space-4) * 2);
		border-radius: 0;
	}
}

/* Project Nav (TOC) */
.project-nav {
	padding: var(--space-4);
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-lg);
}

.project-nav__title {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-text);
	margin-block-end: var(--space-3);
	padding-block-end: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.project-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.project-nav__list li {
	margin: 0;
}

.project-nav__link {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border-radius: var(--radius-sm);
	border-inline-start: 2px solid transparent;
	transition: all var(--transition-fast);
}

.project-nav__link:hover {
	color: var(--color-text);
	background-color: var(--color-surface);
}

.project-nav__link.is-active {
	color: var(--color-primary);
	font-weight: var(--font-semibold);
	background-color: var(--color-primary-light);
	border-inline-start-color: var(--color-primary);
}

/* Sidebar Payment Plans Card */
.sidebar-plans {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: var(--color-text-inverse);
}

.sidebar-plans__header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: rgba(0, 0, 0, 0.1);
	font-weight: var(--font-semibold);
	font-size: var(--text-sm);
}

.sidebar-plans__header svg {
	opacity: 0.9;
}

.sidebar-plans__body {
	display: flex;
	justify-content: space-around;
	padding: var(--space-4);
	gap: var(--space-4);
}

.sidebar-plans__item {
	text-align: center;
}

.sidebar-plans__number {
	display: block;
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	color: var(--color-primary);
}

.sidebar-plans__label {
	font-size: var(--text-xs);
	opacity: 0.9;
}

.sidebar-plans__price {
	padding: var(--space-3) var(--space-4);
	border-top: 1px solid var(--color-border);
	background: var(--color-surface-alt);
	text-align: center;
}

.sidebar-plans__price-label {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block-end: var(--space-1);
}

.sidebar-plans__price-value {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	color: var(--color-primary);
}

/* Project Sidebar PDF Button */
.project-sidebar__pdf {
	width: 100%;
	justify-content: center;
}

/* Project Related */
.project-related {
	padding: var(--space-4);
	background-color: var(--color-surface-alt);
	border-radius: var(--radius-lg);
}

.project-related__title {
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	margin-block-end: var(--space-4);
}

.project-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.project-related__item {
	margin: 0;
}

.project-related__link {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2);
	border-radius: var(--radius-md);
	transition: background-color var(--transition-fast);
}

.project-related__link:hover {
	background-color: var(--color-surface);
}

.project-related__thumb {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.project-related__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.project-related__info {
	flex: 1;
	min-width: 0;
}

.project-related__name {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.project-related__price {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-primary);
	margin-block-start: var(--space-1);
}

/* ==========================================================================
   PROJECT SPECS (Compound Specs Grid)
   ========================================================================== */

.project-specs-wrapper {
	margin-block: var(--space-8);
}

.compound-specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--space-3);
	margin-block-end: var(--space-6);
}

.spec-block {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-lg);
	background: var(--color-surface-alt);
	transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
	display: flex;
	flex-direction: column;
	height: 100%;
	contain: layout style paint;
}

.spec-block:hover {
	background: var(--color-surface);
	box-shadow: var(--shadow-sm);
}

.spec-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	color: var(--color-primary);
	background: var(--color-primary-light);
	border-radius: var(--radius-md);
}

.spec-icon svg {
	width: 22px;
	height: 22px;
}

.spec-content {
	flex: 1;
	min-width: 0;
}

.spec-label {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-text);
	margin-block-end: var(--space-1);
}

.spec-value {
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
}

.spec-link {
	color: var(--color-primary);
	font-weight: var(--font-medium);
	transition: color var(--transition-fast);
}

.spec-link:hover {
	color: var(--color-primary-hover);
}

/* Payment Plans Card */
.payment-plans {
	max-width: 500px;
}

.plans-card {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
	border-radius: var(--radius-lg);
	overflow: hidden;
	color: var(--color-text-inverse);
}

.plans-header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	background: rgba(0, 0, 0, 0.1);
	font-weight: var(--font-semibold);
	font-size: var(--text-sm);
}

.plans-header svg {
	opacity: 0.9;
}

.plans-body {
	display: flex;
	gap: var(--space-6);
	padding: var(--space-4) var(--space-5);
}

.plan-item {
	text-align: center;
}

.plan-number {
	display: block;
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	line-height: 1;
	margin-block-end: var(--space-1);
}

.plan-label {
	font-size: var(--text-xs);
	opacity: 0.9;
}

/* Responsive */
@media (max-width: 640px) {
	.compound-specs {
		grid-template-columns: 1fr;
	}
	
	.plans-body {
		flex-direction: column;
		gap: var(--space-4);
	}
	
	.plan-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: initial;
	}
	
	.plan-number {
		font-size: var(--text-xl);
		margin: 0;
	}
}


/* ==========================================================================
   PROPERTY CARDS
   ========================================================================== */

/* Grid is defined globally at the end of the file */

/* Card */
.prop-card {
	background: var(--color-surface);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	display: flex;
	flex-direction: column;
	height: 100%;
	contain: layout style paint;
}

/* Image */
.prop-card__img {
	display: block;
	aspect-ratio: 14 / 6;
	overflow: hidden;
	background: var(--color-surface-alt);
}

.prop-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.prop-card__no-img {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--color-gray-200);
}

/* Body */
.prop-card__body {
	padding: var(--space-4);
}

/* Region */
.prop-card__region {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block-end: var(--space-2);
}

.prop-card__region svg {
	color: var(--color-gray-500);
}

/* Title */
.prop-card__title {
    margin-block-end: var(--space-2);
    margin-bottom: 10px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.prop-card__title a {
	color: inherit;
}

/* Description Line */
.prop-card__desc {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block-end: var(--space-3);
}

/* Specs Row */
.prop-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-block-end: var(--space-4);
}

.prop-card__specs span {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.prop-card__specs span:not(:last-child)::after {
	content: '|';
	margin-inline-start: var(--space-3);
	color: var(--color-border);
}

.prop-card__specs svg {
	color: var(--color-gray-500);
}

/* Meta badges: type | category | status */
.prop-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-block-end: var(--space-3);
    top: 7px;
    position: unset;
    right: 7px;
}

.prop-card__meta-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.prop-card__meta-badge--category {
	background-color: var(--color-primary-light);
	color: var(--color-primary);
}

.prop-card__meta-badge--type {
	background-color: var(--color-gray-50);
	color: var(--color-gray-800);
}

.prop-card__meta-badge--status {
	background-color: var(--color-gray-100);
	color: var(--color-gray-700);
}

/* Footer */
.prop-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row-reverse;
}

/* Price */
.prop-card__price {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	color: var(--color-primary);
}

/* CTA Buttons */
.prop-card__ctas {
	display: flex;
	gap: var(--space-2);
}

.prop-card__wa,
.prop-card__tel {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	color: var(--color-white);
}

.prop-card__tel {
	background: var(--color-primary);
}

.prop-card__wa {
	background: #25D366;
}

/* --- Project Card Specific (extends prop-card) --- */
.prop-card__img {
	position: relative;
}

/* Featured Badge */
.prop-card__featured-badge {
	position: absolute;
	top: 12px;
	inset-inline-end: 12px;
	background: var(--color-success);
	color: #fff;
	padding: 6px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.prop-card__featured-badge svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.prop-card__price-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.6) 70%, transparent 100%);
	padding: 16px 12px 12px;
	color: #fff;
}

.prop-card__price-label {
	font-size: 11px;
	opacity: 0.9;
	margin-bottom: 4px;
	letter-spacing: 0.3px;
}

.prop-card__price-value {
	font-size: 22px;
	font-weight: 700;
	margin-bottom: 8px;
	line-height: 1;
}

.prop-card__price-currency {
	font-size: 13px;
	font-weight: 500;
	opacity: 0.9;
	margin-inline-start: 4px;
}

.prop-card__payment-terms {
	display: flex;
	gap: 12px;
	font-size: 11px;
	opacity: 0.95;
}

.prop-card__term-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: rgba(255,255,255,0.15);
	padding: 4px 8px;
	border-radius: 4px;
	backdrop-filter: blur(4px);
}

.prop-card__developer {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border-light, #f1f5f9);
}

.prop-card__developer-logo {
	width: 50px;
	height: 50px;
	object-fit: contain;
	border-radius: 6px;
	background: #fff;
	padding: 4px;
	border: 1px solid var(--color-border-light, #e2e8f0);
}

.prop-card__developer-info {
	flex: 1;
	min-width: 0;
}

.prop-card__developer-label {
	font-size: 11px;
	color: var(--color-text-muted, #94a3b8);
	margin-bottom: 2px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.prop-card__developer-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text, #1e293b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.prop-card__title--truncate {
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.4;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.prop-card__title--truncate a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.prop-card__location {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--color-text-muted, #64748b);
	margin-bottom: 12px;
}

.prop-card__unit-types {
	margin-bottom: 12px;
	font-size: 12px;
	color: var(--color-text-muted, #64748b);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.prop-card__unit-types-more {
	color: var(--color-primary, #667eea);
	font-weight: 600;
}

.prop-card__finishing {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: 6px;
	font-size: 12px;
	color: #166534;
}

/* Responsive grid styles are defined globally at the end of the file */

/* ==========================================================================
   PROPERTY SINGLE PAGE - 2 Column Layout
   ========================================================================== */

/* Property Top Section */
.property-top {
	padding-block: var(--space-6) var(--space-8);
	background: var(--color-surface);
}

.property-top__main {
	min-width: 0;
	overflow: hidden;
}

.property-top__title {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	line-height: var(--leading-tight);
	color: var(--color-text);
	margin-block: var(--space-3) var(--space-5);
}

.property-top__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
	gap: var(--space-6);
	align-items: start;
	max-width: 100%;
}

@media (max-width: 1200px) {
	.property-top__grid {
		grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
		gap: var(--space-4);
	}
	
	.sidebar-card {
		font-size: 14px;
	}
	
	.sidebar-contacts {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 992px) {
	.property-top__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

/* Property Hero Image */
.property-hero-img {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-surface-alt);
	max-width: 100%;
}

.property-hero-img__img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.property-hero-img__badges {
	position: absolute;
	bottom: var(--space-3);
	inset-inline-start: var(--space-3);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.property-hero-img__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.96);
	color: #374151;
	font-size: 13px;
	font-weight: 500;
	border-radius: 6px;
	text-decoration: none;
	backdrop-filter: blur(8px);
	transition: all 0.2s ease;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.property-hero-img__badge svg {
	width: 14px;
	height: 14px;
	opacity: 0.7;
}

.property-hero-img__badge:hover {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	transform: translateY(-1px);
}

.property-hero-img__badge--location {
	background: rgba(31, 41, 55, 0.85);
	color: #F3F4F6;
	border-color: rgba(255, 255, 255, 0.1);
}

.property-hero-img__badge--location svg {
	opacity: 1;
	color: #F3F4F6;
}

.property-hero-img__badge--location:hover {
	background: rgba(31, 41, 55, 0.95);
}

/* Property Specs Row */
.property-specs-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	padding: var(--space-4);
	margin-block-start: var(--space-4);
	background: var(--color-surface-alt);
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-border);
	max-width: 100%;
}

.property-specs-row__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-inline-end: var(--space-4);
	border-inline-end: 1px solid var(--color-border);
}

.property-specs-row__item:last-child {
	border-inline-end: none;
	padding-inline-end: 0;
}

.property-specs-row__item svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.property-specs-row__value {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	color: var(--color-text);
}

.property-specs-row__label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

@media (max-width: 576px) {
	.property-specs-row {
		flex-direction: column;
		gap: var(--space-3);
		max-width: 100%;
	}
	
	.property-specs-row__item {
		border-inline-end: none;
		padding-inline-end: 0;
		padding-block-end: var(--space-3);
		border-block-end: 1px solid var(--color-border);
	}
	
	.property-specs-row__item:last-child {
		border-block-end: none;
		padding-block-end: 0;
	}
	
	.property-top__main,
	.property-hero-img,
	.gallery-strip {
		max-width: 100%;
	}
}

/* Property Body Layout */
.property-body {
	padding-block: var(--space-10);
}

.property-content {
	max-width: 100%;
}

/* Property Content Details */
.property-content {
	min-width: 0;
}

.property-section {
	margin-block-end: var(--space-10);
}

.property-section__title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	margin-block-end: var(--space-4);
	padding-block-end: var(--space-3);
	border-bottom: 2px solid var(--color-primary);
}

.property-section__text {
	font-size: var(--text-md);
	line-height: var(--leading-relaxed);
	color: var(--color-gray-700);
}

/* Property Specs Grid */
.property-specs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: var(--space-3);
}

.property-specs__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	background: var(--color-surface-alt);
	border-radius: var(--radius-md);
	transition: background var(--transition-fast);
}

.property-specs__item:hover {
	background: var(--color-primary-light);
}

.property-specs__icon {
	flex-shrink: 0;
	color: var(--color-primary);
}

.property-specs__icon svg {
	display: block;
}

.property-specs__label {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	flex-shrink: 0;
}

.property-specs__value {
	margin-inline-start: auto;
	font-weight: var(--font-semibold);
	color: var(--color-text);
}

a.property-specs__value {
	color: var(--color-primary);
}

a.property-specs__value:hover {
	text-decoration: underline;
}

/* Property Gallery */
.property-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--space-3);
}

.property-gallery__item {
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-surface-alt);
}

.property-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.property-gallery__item:hover img {
	transform: scale(1.05);
}

/* Property Sidebar */
.property-sidebar {
	position: sticky;
	top: calc(var(--space-6) + 64px);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	min-width: 0;
	max-width: 100%;
}

@media (max-width: 992px) {
	.property-sidebar {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
	}
	
	.property-sidebar > * {
		flex: 1 1 100%;
	}
	
	.sidebar-contacts {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.property-top__grid {
		grid-template-columns: 1fr;
	}
	
	.sidebar-contacts {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2);
	}
}

@media (max-width: 576px) {
	.sidebar-profile__avatar {
		width: 64px;
		height: 64px;
	}
	
	.sidebar-profile__name {
		font-size: 16px;
	}
	
	.sidebar-profile__badge {
		font-size: 11px;
		padding: 5px 12px;
	}
	
	.contact-btn {
		padding: 12px 14px;
		min-width: 0;
		font-size: 13px;
	}
	
	.contact-btn svg {
		width: 18px;
		height: 18px;
	}
	
	.contact-btn span {
		font-size: 12px;
	}
	
	.sidebar-profile__view-all {
		flex-wrap: wrap;
		gap: var(--space-2);
	}
}

/* Sidebar Card - Base Style */
.sidebar-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: box-shadow var(--transition-fast);
	max-width: 100%;
	word-wrap: break-word;
	margin-bottom: var(--space-4);
}

.sidebar-card:hover {
	box-shadow: var(--shadow-lg);
}

.sidebar-card__header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-4);
	background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
	color: var(--color-text-inverse);
	font-weight: var(--font-semibold);
	font-size: var(--text-sm);
}

.sidebar-card__header svg {
	flex-shrink: 0;
	opacity: 0.95;
}

/* Seller Profile Card */
.sidebar-profile {
	text-align: center;
	padding: 0;
	background: var(--color-white);
	position: relative;
	overflow: visible;
}

.sidebar-profile::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 70px;
	background: url('../images/seller-bg.webp') center/cover;
	border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	z-index: 0;
}

.sidebar-profile::after {
	content: '';
	position: absolute;
	top: 70px;
	left: 0;
	right: 0;
	height: 25px;
	background: var(--color-white);
	z-index: 1;
	clip-path: polygon(
		0 0,
		0% 50%,
		5% 35%,
		10% 25%,
		15% 30%,
		20% 45%,
		25% 55%,
		30% 50%,
		35% 35%,
		40% 25%,
		45% 30%,
		50% 45%,
		55% 55%,
		60% 50%,
		65% 35%,
		70% 25%,
		75% 30%,
		80% 45%,
		85% 55%,
		90% 50%,
		95% 40%,
		100% 35%,
		100% 0
	);
}

.sidebar-profile__brand {
	position: absolute;
	top: 20px;
	left: var(--space-4);
	color: var(--color-white);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	z-index: 1;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.sidebar-profile__avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--color-white);
    position: absolute;
    top: 15px;
    right: var(--space-4);
    z-index: 2;
    background: #fff;
}

.sidebar-profile__avatar--default {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-primary);
	color: var(--color-white);
}

.sidebar-profile__name {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	color: var(--color-text);
	margin: 0;
	padding: 105px var(--space-4) var(--space-2);
	position: relative;
	z-index: 2;
	text-align: center;
}

.sidebar-profile__badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 500;
	border-radius: 16px;
	position: relative;
	z-index: 2;
	letter-spacing: 0.3px;
}

/* Badge container spacing */
.sidebar-profile__name + div {
	margin-top: var(--space-2);
	margin-bottom: var(--space-2);
}

/* New Seller Badge - Blue */
.sidebar-profile__badge--new {
	background: #EBF5FF;
	color: #2563EB;
	border: 1px solid #BFDBFE;
}

.sidebar-profile__badge--new::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232563EB'%3E%3Cpath d='M12 2l2.4 7.4h7.6l-6 4.6 2.3 7-6.3-4.6-6.3 4.6 2.3-7-6-4.6h7.6z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Expert Seller Badge - Orange */
.sidebar-profile__badge--expert {
	background: #FEF3E7;
	color: #D97706;
	border: 1px solid #FDE68A;
}

.sidebar-profile__badge--expert::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D97706'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Verified Seller Badge - Green */
.sidebar-profile__badge--verified {
	background: #ECFDF5;
	color: #059669;
	border: 1px solid #A7F3D0;
}

.sidebar-profile__badge--verified::before {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23059669'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.sidebar-profile__view-all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	margin: var(--space-3) var(--space-4) var(--space-4);
	background: #F9FAFB;
	color: #374151;
	font-weight: 500;
	font-size: 14px;
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.2s ease;
	border: 1px solid #E5E7EB;
	position: relative;
	z-index: 2;
}

.sidebar-profile__view-all:hover {
	background: #F3F4F6;
	border-color: #D1D5DB;
	transform: translateY(-1px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.sidebar-profile__view-all .count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 8px;
	background: #E5E7EB;
	color: #374151;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 600;
}

.sidebar-profile__view-all:hover .count {
	background: #D1D5DB;
}

.sidebar-profile__view-all svg {
	flex-shrink: 0;
	transition: transform var(--transition-base);
}

.sidebar-profile__view-all:hover svg {
	transform: translateX(4px);
}

/* View All Properties Card */
.sidebar-view-all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-4);
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-weight: var(--font-semibold);
	font-size: var(--text-sm);
	text-decoration: none;
	transition: all var(--transition-base);
}

.sidebar-view-all:hover {
	background: var(--color-primary);
	color: var(--color-white);
	padding-inline-start: var(--space-5);
}

.sidebar-view-all .count {
	padding: 4px 10px;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: var(--radius-xl);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
}

.sidebar-view-all svg {
	flex-shrink: 0;
}

/* Quick Navigation Card - Simple Style */
.sidebar-quick-nav {
	padding: var(--space-4);
}

.sidebar-quick-nav__header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.sidebar-quick-nav__header svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.sidebar-quick-nav__title {
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-text);
	margin: 0;
}

.sidebar-quick-nav__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-quick-nav__links li {
	margin: 0;
}

.sidebar-quick-nav__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	font-size: var(--text-sm);
	color: var(--color-text);
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: background-color 0.2s;
}

.sidebar-quick-nav__links a svg {
	color: var(--color-text-muted);
	flex-shrink: 0;
	opacity: 0.5;
}

.sidebar-quick-nav__links a:hover {
	background: var(--color-surface-alt);
	color: var(--color-primary);
}

.sidebar-quick-nav__links a:hover svg {
	color: var(--color-primary);
	opacity: 1;
}

/* Nearby Regions Card */
.sidebar-regions {
	padding: var(--space-4);
}

.sidebar-regions__header {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.sidebar-regions__header svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.sidebar-regions__title {
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-text);
	margin: 0;
}

.sidebar-regions__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sidebar-regions__links li {
	margin: 0;
}

.sidebar-regions__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border-radius: var(--radius-lg);
	text-decoration: none;
	transition: all var(--transition-base);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sidebar-regions__links a:hover {
	background: var(--color-surface-alt);
	color: var(--color-primary);
	padding-inline-start: 16px;
}

.sidebar-regions__links a .count {
	padding: 2px 8px;
	background: var(--color-surface-alt);
	color: var(--color-text-muted);
	border-radius: var(--radius-md);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
}

/* Contact Buttons Card */
.sidebar-contacts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2);
	padding: var(--space-3);
	background: transparent;
	border: none;
	box-shadow: none;
	min-width: 0;
	margin-bottom: 0;
}

/* Sticky on Desktop */
@media (min-width: 992px) {
	.sidebar-contacts--sticky {
		position: sticky;
		top: var(--space-4);
		z-index: 10;
	}
}

/* Sticky Bottom on Mobile */
@media (max-width: 991px) {
	.sidebar-contacts--sticky {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background: var(--color-white);
		border-top: 1px solid var(--color-border);
		box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
		padding: var(--space-3) var(--space-4);
		margin: 0 auto;
		border-radius: 0;
		max-width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-2);
	}
	
	/* Add padding to body to prevent content hiding */
	body {
		padding-bottom: 80px;
	}
}

.contact-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 14px 20px;
	border-radius: var(--radius-lg);
	transition: all var(--transition-base);
	text-decoration: none;
	border: none;
	font-weight: var(--font-semibold);
	font-size: var(--text-sm);
}

.contact-btn svg {
	flex-shrink: 0;
}

.contact-btn span {
	white-space: nowrap;
}

.contact-btn--wa {
	background: #25D366;
	color: var(--color-white);
}

.contact-btn--wa:hover {
	background: #1da851;
	transform: scale(1.02);
}

.contact-btn--call {
	background: #E8E8E8;
	color: var(--color-text);
}

.contact-btn--call:hover {
	background: #d4d4d4;
	transform: scale(1.02);
}

/* Property Navigation */
.property-nav__list {
	list-style: none;
	margin: 0;
	padding: var(--space-4);
}

.property-nav__list li {
	margin: 0;
}

.property-nav__link {
	display: flex;
	align-items: center;
	padding: 10px 12px;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	border-radius: var(--radius-lg);
	transition: all var(--transition-fast);
	text-decoration: none;
}

.property-nav__link::before {
	content: '';
	width: 4px;
	height: 4px;
	background: currentColor;
	border-radius: 50%;
	margin-inline-end: 10px;
	opacity: 0.5;
}

.property-nav__link:hover {
	color: var(--color-primary);
	background: var(--color-surface-alt);
	transform: translateX(-2px);
}

/* Sidebar Contact - Removed (moved to seller card) */

.btn--wa {
	background: var(--color-success);
	color: var(--color-white);
}

.btn--wa:hover {
	background: var(--color-success);
	opacity: 0.9;
	color: var(--color-white);
}

.btn--call {
	background: var(--color-primary);
	color: var(--color-white);
}

.btn--call:hover {
	background: var(--color-primary-hover);
	color: var(--color-white);
}


/* Sidebar Plans - Modern Design */
.sidebar-plans__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	padding: var(--space-4);
	background: var(--color-surface);
}

.sidebar-plans__item {
	text-align: center;
	padding: var(--space-3);
	background: var(--color-surface-alt);
	border-radius: var(--radius-md);
	transition: transform var(--transition-fast);
}

.sidebar-plans__item:hover {
	transform: translateY(-2px);
}

.sidebar-plans__item--highlight {
	grid-column: 1 / -1;
	background: var(--color-primary-light);
	border: 1px solid var(--color-primary);
	padding: var(--space-4);
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: start;
}

.sidebar-plans__number {
	display: block;
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	color: var(--color-primary);
	line-height: var(--leading-tight);
	margin-bottom: 4px;
}

.sidebar-plans__label {
	display: block;
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	font-weight: var(--font-medium);
}

.sidebar-plans__value {
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	color: var(--color-primary);
}

/* Content Expandable - CSS only */
.content-toggle__input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.content-expandable {
	max-height: 800px;
	overflow: hidden;
	position: relative;
	transition: max-height var(--transition-base);
}

.content-expandable::after {
	content: '';
	position: absolute;
	bottom: 0;
	inset-inline: 0;
	height: 80px;
	background: linear-gradient(to bottom, transparent, var(--color-surface));
	pointer-events: none;
	transition: opacity var(--transition-base);
}

.content-toggle__input:checked ~ .content-expandable {
	max-height: none;
}

.content-toggle__input:checked ~ .content-expandable::after {
	opacity: 0;
}

.content-toggle__btn {
	margin-block-start: var(--space-4);
}

.content-toggle__less {
	display: none;
}

.content-toggle__input:checked ~ .content-toggle__btn .content-toggle__more {
	display: none;
}

.content-toggle__input:checked ~ .content-toggle__btn .content-toggle__less {
	display: inline;
}


/* ==========================================================================
   GALLERY STRIP - Thumbnail Slider
   ========================================================================== */

/* Gallery Strip */
.gallery-strip {
	position: relative;
	background: var(--color-surface-alt);
	border-radius: var(--radius-xl);
	padding: var(--space-3);
	max-width: 100%;
	overflow: hidden;
}

.gallery-strip__track {
	display: flex;
	gap: var(--space-2);
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: var(--space-1);
}

.gallery-strip__track::-webkit-scrollbar {
	display: none;
}

.gallery-strip__item {
	flex-shrink: 0;
	position: relative;
	width: 140px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 2px solid transparent;
	background: var(--color-surface);
	cursor: pointer;
	transition: all var(--transition-fast);
	padding: 0;
	will-change: transform, border-color;
}

.gallery-strip__item:hover {
	border-color: var(--color-primary);
	transform: translate3d(0, -2px, 0);
	box-shadow: var(--shadow-lg);
}

.gallery-strip__item:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

.gallery-strip__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.gallery-strip__item:hover img {
	transform: scale(1.08);
}

.gallery-strip__count {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	color: var(--color-white);
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
	opacity: 0;
	transition: opacity var(--transition-fast);
}

.gallery-strip__item:hover .gallery-strip__count {
	opacity: 1;
}

.gallery-strip__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	transition: all var(--transition-fast);
	z-index: 2;
}

.gallery-strip__nav:hover {
	background: var(--color-primary);
	color: var(--color-white);
	border-color: var(--color-primary);
}

.gallery-strip__nav--prev {
	inset-inline-start: var(--space-1);
}

.gallery-strip__nav--next {
	inset-inline-end: var(--space-1);
}

@media (max-width: 768px) {
	.gallery-strip__item {
		width: 100px;
	}
	.gallery-strip__nav {
		display: none;
	}
}


/* ==========================================================================
   LIGHTBOX - Full Screen Image Viewer
   ========================================================================== */

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox.is-open {
	opacity: 1;
	visibility: visible;
}

.lightbox__close {
	position: absolute;
	top: var(--space-4);
	inset-inline-end: var(--space-4);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: var(--color-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition-fast);
	z-index: 10;
}

.lightbox__close:hover {
	background: rgba(255, 255, 255, 0.25);
}

.lightbox__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	border: none;
	color: var(--color-white);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition-fast);
	z-index: 10;
}

.lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.25);
}

.lightbox__nav--prev {
	inset-inline-start: var(--space-4);
}

.lightbox__nav--next {
	inset-inline-end: var(--space-4);
}

.lightbox__figure {
	max-width: 90vw;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	position: relative;
}

.lightbox__img {
	max-width: 100%;
	max-height: 80vh;
	object-fit: contain;
	border-radius: var(--radius-lg);
}

.lightbox__caption {
	color: rgba(255, 255, 255, 0.8);
	font-size: var(--text-sm);
	text-align: center;
	margin-block-start: var(--space-3);
	max-width: 600px;
}

.lightbox__counter {
	position: absolute;
	bottom: var(--space-4);
	inset-inline-start: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.6);
	color: var(--color-white);
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
}

[dir="rtl"] .lightbox__counter {
	transform: translateX(50%);
}


@media (max-width: 768px) {
	.lightbox__nav {
		width: 44px;
		height: 44px;
	}
	.lightbox__nav--prev {
		inset-inline-start: var(--space-2);
	}
	.lightbox__nav--next {
		inset-inline-end: var(--space-2);
	}
	.lightbox__close {
		width: 40px;
		height: 40px;
	}
}

.badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-1) var(--space-2);
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	border-radius: var(--radius-full);
	line-height: 1;
}

.badge--muted {
	background: var(--color-surface-alt);
	color: var(--color-text-muted);
}


/* ==========================================================================
   PROPERTY ARCHIVE FILTER SYSTEM
   ========================================================================== */

/* --- Archive Hero --- */
.archive-hero {
	position: relative;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.archive-hero__bg {
	position: absolute;
	inset: 0;
	background: url('../images/properties.webp') center top/cover no-repeat;
	z-index: 1;
}

.archive-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.7));
	z-index: 2;
}

.archive-hero__content {
	position: relative;
	z-index: 3;
	padding: var(--space-16) 0 var(--space-8);
	text-align: center;
	color: var(--color-white);
}

.archive-hero__title {
	font-size: var(--text-4xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-4);
	text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.archive-hero__subtitle {
	font-size: var(--text-base);
	opacity: 0.85;
	margin: var(--space-2) auto;
	font-weight: var(--font-normal);
	max-width: 600px;
}

.archive-hero__count {
	font-size: var(--text-lg);
	opacity: 0.9;
	margin: 0;
}

.archive-hero__count strong {
	font-weight: var(--font-bold);
}

/* --- Collection Intro (Project Collections) --- */
.collection-intro {
	padding: var(--space-8) 0;
	background-color: var(--color-surface-alt);
}
.collection-intro .entry-content {
	max-width: 900px;
}
.collection-intro .entry-content p {
	font-size: var(--text-lg);
	line-height: 1.8;
	color: var(--color-text-secondary);
}
.collection-intro .entry-content p:last-child {
	margin-bottom: 0;
}

/* --- Filter Bar --- */
.filter-bar {
	position: sticky;
	top: var(--header-height, 80px);
	z-index: var(--z-dropdown);
	background: var(--color-white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-md);
	padding: var(--space-4) 0;
	overflow: visible;
	    margin: 40px;
}

.filter-bar__form {
	display: flex;
	gap: var(--space-3);
	align-items: center;
}

.filter-bar__content {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

.filter-bar__group {
	flex: 1;
	min-width: 180px;
}

.filter-bar__group--region {
	flex: 1.5;
	min-width: 200px;
}

.filter-bar__group--category,
.filter-bar__group--status {
	flex: 0 0 auto;
	min-width: auto;
}

/* Region Search Autocomplete */
.region-search {
	position: relative;
}

.region-search__input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.region-search__icon {
	position: absolute;
	inset-inline-start: var(--space-3);
	color: var(--color-text-muted);
	pointer-events: none;
}

.region-search__input {
	width: 100%;
	padding: var(--space-3) var(--space-10);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	background: var(--color-white);
	transition: all var(--transition-fast);
}

.region-search__input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.region-search__clear {
	position: absolute;
	inset-inline-end: var(--space-3);
	width: 20px;
	height: 20px;
	padding: 0;
	border: none;
	background: var(--color-gray-300);
	color: var(--color-white);
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background var(--transition-fast);
}

.region-search__clear:hover {
	background: var(--color-gray-500);
}

.region-search__results {
	display: none;
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	inset-inline-end: 0;
	margin-top: var(--space-1);
	padding: var(--space-2);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	max-height: 280px;
	overflow-y: auto;
	z-index: 9999;
	list-style: none;
}

.region-search__results.active {
	display: block;
}

.region-search__item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-3);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--transition-fast);
}

.region-search__item:hover,
.region-search__item.active {
	background: var(--color-primary-light);
}

.region-search__name {
	font-weight: var(--font-medium);
}

.region-search__count {
	font-size: var(--text-xs);
	color: var(--color-text-muted);
	background: var(--color-surface-alt);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-full);
}

.region-search__empty {
	padding: var(--space-4);
	text-align: center;
	color: var(--color-text-muted);
}

/* Category Tabs */
.filter-bar__tabs {
	display: flex;
	gap: var(--space-2);
	background: var(--color-surface-alt);
	padding: var(--space-1);
	border-radius: var(--radius-lg);
}

.filter-bar__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-4);
	border: none;
	background: transparent;
	color: var(--color-text-muted);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: all var(--transition-fast);
	white-space: nowrap;
}

.filter-bar__tab svg {
	flex-shrink: 0;
	margin-inline-end: var(--space-1);
}

.filter-bar__tab:hover {
	background: var(--color-white);
	color: var(--color-text);
}

.filter-bar__tab.active {
	background: var(--color-primary);
	color: var(--color-white);
	box-shadow: var(--shadow-sm);
}

/* Launch Tab - Orange Icon */
.filter-bar__tab[data-value="launch"] svg {
	color: #e48e00;
}

.filter-bar__tab[data-value="launch"]:hover {
	background: rgba(228, 142, 0, 0.1);
	border-color: #e48e00;
}

.filter-bar__tab[data-value="launch"].active {
	background: #e48e00;
	border-color: #e48e00;
	color: var(--color-white);
}

.filter-bar__tab[data-value="launch"].active svg {
	color: var(--color-white);
}

/* Filter Buttons */
.filter-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	background: var(--color-white);
	color: var(--color-text);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: all var(--transition-fast);
	text-decoration: none;
	white-space: nowrap;
}

.filter-bar__btn:hover {
	background: var(--color-surface-alt);
	border-color: var(--color-gray-400);
}

.filter-bar__btn--advanced {
	background: var(--color-surface-alt);
}

.filter-bar__btn--reset {
	color: var(--color-error);
	border-color: var(--color-error);
}

.filter-bar__btn--reset:hover {
	background: var(--color-error);
	color: var(--color-white);
}

/* Active Filters Tags */
.filter-bar__active {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

.filter-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-size: var(--text-sm);
	border-radius: var(--radius-full);
}

.filter-tag__remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	border: none;
	background: var(--color-primary);
	color: var(--color-white);
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
	transition: background var(--transition-fast);
}

.filter-tag__remove:hover {
	background: var(--color-primary-hover);
}

.filter-tag--locked {
	background: var(--color-surface-alt, #f1f5f9);
	color: var(--color-text-secondary, #64748b);
	padding-inline-end: var(--space-3);
}

/* --- Filter Select & Buttons --- */
.filter-select-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.filter-select-wrap__icon {
	position: absolute;
	inset-inline-start: var(--space-4);
	color: var(--color-text-muted);
	pointer-events: none;
	z-index: 1;
}

.filter-bar__select {
	width: 100%;
    padding: var(--space-3) var(--space-10);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	font-size: var(--text-sm);
	background: var(--color-white);
	cursor: pointer;
	transition: all var(--transition-base);
}

.filter-bar__select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

.filter-bar__advanced {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	color: var(--color-text);
	cursor: pointer;
	transition: all var(--transition-base);
	white-space: nowrap;
}

.filter-bar__advanced:hover {
	background: var(--color-surface-alt);
	border-color: var(--color-gray-300);
}

.filter-bar__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-5);
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: background var(--transition-base);
}

.filter-bar__submit:hover {
	background: var(--color-primary-hover);
}

/* --- Filter Modal --- */
.filter-modal {
	position: fixed;
	inset: 0;
	z-index: var(--z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}

.filter-modal[hidden] {
	display: none !important;
}

.filter-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(4px);
}

.filter-modal__content {
	position: relative;
	width: 100%;
	max-width: 600px;
	max-height: 90vh;
	background: var(--color-white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.filter-modal__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

.filter-modal__title-group {
	display: flex;
	gap: var(--space-3);
	align-items: flex-start;
}

.filter-modal__title-group svg {
	color: var(--color-primary);
	flex-shrink: 0;
	margin-top: 2px;
}

.filter-modal__title {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-1);
}

.filter-modal__subtitle {
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.filter-modal__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	color: var(--color-gray-600);
	cursor: pointer;
	border-radius: var(--radius-md);
	transition: all var(--transition-fast);
}

.filter-modal__close:hover {
	background: var(--color-surface-alt);
	color: var(--color-text);
}

.filter-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: var(--space-6);
}

.filter-modal__group {
	margin-bottom: var(--space-5);
}

.filter-modal__group:last-child {
	margin-bottom: 0;
}

.filter-modal__label {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-text);
	margin-bottom: var(--space-3);
}

.filter-modal__label svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.filter-modal__row {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.filter-modal__separator {
	color: var(--color-text-muted);
	font-weight: var(--font-medium);
}

.filter-modal__input,
.filter-modal__select {
	flex: 1;
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	transition: all var(--transition-fast);
	background: var(--color-surface);
}

.filter-modal__input:focus,
.filter-modal__select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-modal__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border: none;
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	font-weight: var(--font-semibold);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.filter-modal__btn--reset {
	background: var(--color-surface);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

.filter-modal__btn--reset:hover {
	background: var(--color-surface-alt);
}

.filter-modal__btn--apply {
	background: var(--color-primary);
	color: white;
}

.filter-modal__btn--apply:hover {
	background: var(--color-primary-dark);
}

.filter-modal__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--space-4) var(--space-6);
	border-top: 1px solid var(--color-border);
	background: var(--color-surface-alt);
}

.filter-modal__actions {
	display: flex;
	gap: var(--space-3);
}

/* --- Filter Groups --- */
.filter-group {
	margin-bottom: var(--space-6);
}

.filter-group:last-child {
	margin-bottom: 0;
}

.filter-group__label {
	display: block;
	font-weight: var(--font-semibold);
	margin-bottom: var(--space-3);
	color: var(--color-text);
}

.filter-group--row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-4);
}

.filter-select,
.filter-input {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: var(--text-base);
	transition: all var(--transition-base);
}

.filter-select:focus,
.filter-input:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* --- Price Range Slider --- */
.price-range {
	padding: var(--space-2) 0;
}

.price-range__slider {
	position: relative;
	height: 40px;
	margin-bottom: var(--space-4);
}

.price-range__input {
	position: absolute;
	width: 100%;
	height: 6px;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.price-range__input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 20px;
	height: 20px;
	background: var(--color-primary);
	border: 2px solid var(--color-white);
	border-radius: 50%;
	cursor: pointer;
	pointer-events: all;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.price-range__input::-moz-range-thumb {
	width: 20px;
	height: 20px;
	background: var(--color-primary);
	border: 2px solid var(--color-white);
	border-radius: 50%;
	cursor: pointer;
	pointer-events: all;
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.price-range__values {
	display: flex;
	justify-content: space-between;
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-primary);
}

/* --- Results Header (Compact) --- */
.results-header {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border-light);
	background: var(--color-bg-light);
}

.results-header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
}

.results-header__count {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}

.results-header__number {
	font-size: 24px;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1;
}

.results-header__text {
	font-size: 14px;
	color: var(--color-text-muted);
	font-weight: 500;
}

/* Legacy support */
.results-header__content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
}

.results-header__count svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.results-header__count strong {
	color: var(--color-text);
	font-weight: var(--font-semibold);
}

.results-header__sort {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.results-header__sort-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--color-text-muted);
	white-space: nowrap;
	font-weight: 500;
}

.results-header__sort-label svg {
	flex-shrink: 0;
	opacity: 0.7;
}

.results-header__sort-select {
	padding: 8px 32px 8px 12px;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	background: var(--color-white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%2364748b' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat;
	background-position: calc(100% - 10px) center;
	font-size: 14px;
	font-weight: 500;
	color: var(--color-text);
	cursor: pointer;
	appearance: none;
	min-width: 140px;
	transition: all 0.2s ease;
}

.results-header__sort-select:hover {
	border-color: var(--color-primary);
	background-color: var(--color-bg-light);
}

.results-header__sort-select:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

@media (max-width: 768px) {
	.results-header__sort-label {
		font-size: 13px;
	}
	
	.results-header__sort-select {
		min-width: 120px;
		font-size: 13px;
		padding: 6px 28px 6px 10px;
	}
}

@media (max-width: 576px) {
	.results-header__inner {
		flex-wrap: wrap;
		gap: var(--space-3);
	}
	
	.results-header__count {
		flex: 1 1 100%;
	}
	
	.results-header__sort {
		flex: 1 1 100%;
		justify-content: space-between;
	}
	
	.results-header__sort-select {
		flex: 1;
	}
}

/* Price Range Inputs */
.filter-group--price {
	min-width: 200px;
}

.filter-price-inputs {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.filter-price-inputs .filter-input {
	width: 100px;
	text-align: center;
}

.filter-price-sep {
	color: var(--color-text-muted);
	font-weight: var(--font-medium);
}

@media (max-width: 768px) {
	.section-archive-header {
		padding: var(--space-8) 0;
	}
	
	.section-archive-header h1 {
		font-size: var(--text-2xl);
	}
	
	.filters-form {
		flex-direction: column;
	}
	
	.filter-group {
		width: 100%;
	}
	
	.btn-filter {
		width: 100%;
	}
	
	.filter-price-inputs {
		flex-wrap: wrap;
	}
	
	.filter-price-inputs .filter-input {
		width: 100%;
	}
}

/* ============================================================================
   RELATED PROJECTS & SIMILAR PROPERTIES SECTIONS (Full Width)
   ============================================================================ */

.related-projects,
.similar-properties,
.recently-viewed {
	padding: var(--space-16) 0;
	background: var(--color-surface-alt);
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

.related-projects__header,
.similar-properties__header,
.recently-viewed__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--space-8);
	gap: var(--space-4);
}

.related-projects__title,
.similar-properties__title,
.recently-viewed__title {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 28px;
	font-weight: 700;
	color: var(--color-text);
	margin: 0;
	flex-wrap: wrap;
}

.related-projects__title svg,
.similar-properties__title svg,
.recently-viewed__title svg {
	color: var(--color-primary);
	flex-shrink: 0;
}

.related-projects__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
	transition: gap 0.2s ease;
}

.related-projects__link:hover {
	gap: 10px;
}

.related-projects__link svg {
	flex-shrink: 0;
}

/* Match Indicator Badges */
.match-indicator {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: var(--text-xs);
	font-weight: var(--font-semibold);
	letter-spacing: 0.3px;
}

.match-indicator svg {
	flex-shrink: 0;
}

.match-high {
	background: var(--color-primary-light);
	color: var(--color-primary-hover);
	border: 1px solid var(--color-primary);
}

.match-medium {
	background: var(--color-gray-100);
	color: var(--color-text);
	border: 1px solid var(--color-border);
}

.match-low {
	background: var(--color-surface-alt);
	color: var(--color-text-muted);
	border: 1px solid var(--color-gray-300);
}

.related-projects__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
}

/* Responsive */
@media (max-width: 1200px) {
	.related-projects__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.related-projects,
	.similar-properties,
	.recently-viewed {
		padding: var(--space-12) 0;
	}
	
	.related-projects__header,
	.similar-properties__header,
	.recently-viewed__header {
		margin-bottom: var(--space-6);
	}
	
	.related-projects__title,
	.similar-properties__title,
	.recently-viewed__title {
		font-size: 20px;
	}
	
	.match-indicator {
		font-size: 11px;
		padding: 4px 10px;
	}
	
	.related-projects__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
	}
}

@media (max-width: 576px) {
	.related-projects,
	.similar-properties {
		padding: var(--space-10) 0;
	}
	
	.related-projects__header,
	.similar-properties__header {
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: var(--space-5);
	}
	
	.related-projects__title,
	.similar-properties__title {
		font-size: 18px;
		gap: 8px;
	}
	
	.related-projects__title svg,
	.similar-properties__title svg {
		width: 18px;
		height: 18px;
	}
	
	.related-projects__grid {
		grid-template-columns: 1fr;
	}
}

/* No Results */
.no-results {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--space-12) var(--space-4);
	background: var(--color-surface);
	border-radius: var(--radius-lg);
}

.no-results svg {
	color: var(--color-gray-400);
	margin-bottom: var(--space-4);
}

.no-results h2 {
	font-size: var(--font-2xl);
	font-weight: var(--font-bold);
	margin: 0 0 var(--space-2);
	color: var(--color-text);
}

.no-results p {
	font-size: var(--font-lg);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-6);
}

/* Archive Pagination */
.archive-pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.archive-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-weight: var(--font-medium);
	color: var(--color-text);
	text-decoration: none;
	transition: all var(--transition-base);
}

.archive-pagination .page-numbers:not(.current):not(.dots):hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.archive-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	cursor: default;
}

.archive-pagination .page-numbers.dots {
	border: none;
	background: transparent;
	pointer-events: none;
	cursor: default;
}

/* ==========================================================================
   BLOG ARCHIVE & POST CARDS
   ========================================================================== */

/* Blog Hero Section */
.blog-hero {
	position: relative;
	padding: var(--space-12) 0 var(--space-8);
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
	color: var(--color-white);
	overflow: hidden;
}

.blog-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.blog-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(46, 81, 140, 0.92) 0%, rgba(20, 38, 60, 0.88) 100%);
}

.blog-hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
}

.blog-hero__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: var(--font-bold);
	margin-bottom: var(--space-4);
	line-height: 1.2;
}



/* Blog Categories Filter */
.blog-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	margin-top: var(--space-6);
}

.blog-categories__item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-full);
	color: var(--color-white);
	font-size: var(--font-sm);
	font-weight: var(--font-medium);
	text-decoration: none;
	transition: all var(--transition-base);
	backdrop-filter: blur(10px);
}

.blog-categories__item:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.4);
	transform: translateY(-2px);
}

.blog-categories__item.is-active {
	background: var(--color-white);
	color: var(--color-primary);
	border-color: var(--color-white);
}

.blog-categories__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 var(--space-1);
	background: rgba(255, 255, 255, 0.2);
	border-radius: var(--radius-full);
	font-size: 0.75rem;
	font-weight: var(--font-bold);
}

.blog-categories__item.is-active .blog-categories__count {
	background: var(--color-primary);
	color: var(--color-white);
}

/* Blog Content Section */
.blog-content {
	padding: var(--space-12) 0;
}

.blog-results {
	margin-bottom: var(--space-6);
}

.blog-results__count {
	font-size: var(--font-lg);
	color: var(--color-text-muted);
	margin: 0;
}

.blog-results__count strong {
	color: var(--color-text);
	font-weight: var(--font-bold);
}

/* Posts Grid */
.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--space-6);
	margin-bottom: var(--space-8);
}

@media (max-width: 768px) {
	.posts-grid {
		grid-template-columns: 1fr;
		gap: var(--space-5);
	}
}

/* Post Card */
.post-card {
	display: flex;
	flex-direction: column;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	height: 100%;
	display: flex;
	flex-direction: column;
	height: 100%;
	contain: layout style paint;
}

.post-card__image-wrap {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-gray-100);
}

.post-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post-card__category {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	padding: var(--space-1) var(--space-3);
	background: var(--color-primary);
	color: var(--color-white);
	font-size: var(--font-xs);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: all var(--transition-base);
	z-index: 1;
}

.post-card__category:hover {
	background: var(--color-primary-hover);
}

[dir="rtl"] .post-card__category {
	left: auto;
	right: var(--space-3);
}

.post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--space-5);
}

.post-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
	font-size: var(--font-sm);
	color: var(--color-text-muted);
}

.post-card__date,
.post-card__reading-time {
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.post-card__date svg,
.post-card__reading-time svg {
	flex-shrink: 0;
}

.post-card__title {
	font-size: var(--font-xl);
	font-weight: var(--font-bold);
	line-height: 1.3;
	margin: 0 0 var(--space-3);
}

.post-card__title a {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition-base);
}

.post-card__title a:hover {
	color: var(--color-primary);
}

.post-card__excerpt {
	flex: 1;
	font-size: var(--font-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
	margin: 0 0 var(--space-4);
}

.post-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
	margin-top: auto;
}

.post-card__author {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.post-card__avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	object-fit: cover;
}

.post-card__author-name {
	font-size: var(--font-sm);
	font-weight: var(--font-medium);
	color: var(--color-text);
}

.post-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--font-sm);
	font-weight: var(--font-medium);
	color: var(--color-primary);
	text-decoration: none;
	transition: all var(--transition-base);
}

.post-card__read-more:hover {
	gap: var(--space-2);
	color: var(--color-primary-hover);
}

.post-card__read-more svg {
	transition: transform var(--transition-base);
}

[dir="rtl"] .post-card__read-more svg {
	transform: rotate(180deg);
}


/* Pagination */
.pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--space-8);
}

.pagination ul,
.pagination .page-numbers {
	display: flex;
	gap: var(--space-2);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pagination li {
	display: flex;
}

.pagination a.page-numbers,
.pagination span.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-weight: var(--font-medium);
	color: var(--color-text);
	text-decoration: none;
	transition: all var(--transition-base);
}

.pagination a.page-numbers:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
}

.pagination span.page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	cursor: default;
}

.pagination span.page-numbers.dots {
	border: none;
	background: transparent;
	pointer-events: none;
	cursor: default;
}

/* Breadcrumb in Blog */
.blog-hero .breadcrumb {
	margin-bottom: var(--space-4);
}

.blog-hero .breadcrumb a,
.blog-hero .breadcrumb__current {
	color: var(--color-white);
	opacity: 0.9;
}

.blog-hero .breadcrumb a:hover {
	opacity: 1;
	text-decoration: underline;
}

.blog-hero .breadcrumb__sep {
	opacity: 0.6;
}

/* Blog Description Section */
.blog-description {
	padding: var(--space-8) 0;
	background: var(--color-gray-50);
}

.blog-description__content {
	max-width: 800px;
	margin: 0 auto;
	font-size: var(--font-lg);
	line-height: var(--leading-relaxed);
	color: var(--color-text-muted);
	text-align: center;
}

.blog-description__content p {
	margin-bottom: var(--space-4);
}

.blog-description__content p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   DEVELOPERS ARCHIVE
   ========================================================================== */

/* Developers Hero */
.developers-hero {
	position: relative;
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--color-white);
}

.developers-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.developers-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(46, 81, 140, 0.92) 0%, rgba(20, 38, 60, 0.88) 100%);
}

.developers-hero__content {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: var(--space-8) 0;
}

.developers-hero__title {
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: var(--font-bold);
	margin: 0 0 var(--space-4);
	line-height: 1.1;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.developers-hero__subtitle {
	font-size: clamp(1.125rem, 2vw, 1.5rem);
	margin: 0 auto var(--space-4);
	opacity: 0.95;
	max-width: 700px;
}

.developers-hero__count {
	font-size: var(--font-lg);
	margin: 0;
	opacity: 0.9;
}

.developers-hero__count strong {
	font-size: var(--font-2xl);
	font-weight: var(--font-bold);
}

/* Developers Content */
.developers-content {
	padding: var(--space-12) 0;
	background: var(--color-surface-alt);
}

/* Developers Grid */
.developers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-5);
	margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
	.developers-grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}
}

/* Developer Card */
.developer-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: all var(--transition-base);
	display: flex;
	flex-direction: column;
	height: 100%;
	contain: layout style paint;
}

.developer-card:hover {
	transform: translate3d(0, -2px, 0);
	box-shadow: var(--shadow-md);
	border-color: var(--color-primary);
}

.developer-card__link {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5);
	text-decoration: none;
	color: inherit;
}

.developer-card__logo-wrap {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-gray-50);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.developer-card__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: var(--space-2);
}

.developer-card__logo-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-gray-400);
}

.developer-card__body {
	flex: 1;
	min-width: 0;
}

.developer-card__name {
	font-size: var(--font-lg);
	font-weight: var(--font-bold);
	margin: 0 0 var(--space-3);
	color: var(--color-text);
	line-height: 1.3;
}

.developer-card__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.developer-card__stat {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: var(--font-sm);
	color: var(--color-text-muted);
}

.developer-card__stat svg {
	flex-shrink: 0;
	color: var(--color-primary);
}

.developer-card__arrow {
	flex-shrink: 0;
	color: var(--color-gray-400);
	transition: all var(--transition-base);
}

.developer-card:hover .developer-card__arrow {
	color: var(--color-primary);
	transform: translateX(4px);
}

[dir="rtl"] .developer-card:hover .developer-card__arrow {
	transform: translateX(-4px);
}

[dir="rtl"] .developer-card__arrow svg {
	transform: rotate(180deg);
}

/* Loading & End States - Unified for all archives */
.developers-loading,
.developers-end,
.load-more-spinner {
	text-align: center;
	padding: var(--space-8) 0;
}

.load-more-info {
	text-align: center;
	padding: var(--space-4) 0;
	margin-top: var(--space-4);
}

.developers-loading .spinner,
.load-more-spinner .spinner {
	width: 40px;
	height: 40px;
	margin: 0 auto var(--space-3);
	display: block;
}

/* Div-based spinner (developers) */
.developers-loading .spinner:not(svg) {
	border: 3px solid var(--color-gray-200);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
}

/* SVG spinner (properties & projects) */
.load-more-spinner .spinner svg,
.load-more-spinner svg.spinner {
	color: var(--color-primary);
	animation: spin 0.8s linear infinite;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

.developers-loading p,
.developers-end p,
.load-more-spinner span,
.load-more-info {
	font-size: var(--font-lg);
	color: var(--color-text-muted);
	margin: 0;
}

.developers-end p {
	color: var(--color-gray-500);
	font-style: italic;
}

/* Load More Trigger States */
.load-more-trigger {
	display: block;
	margin: var(--space-4) 0;
}

/* Hide spinner by default */
.load-more-spinner {
	display: none;
}

/* Show spinner when loading */
.load-more-trigger[data-loading="true"] .load-more-spinner {
	display: block;
}

/* Hide trigger when complete */
.load-more-trigger[data-complete="true"] {
	display: none;
}

/* ==========================================================================
   SINGLE DEVELOPER
   ========================================================================== */

/* Developer Single Hero */
.developer-single-hero {
	position: relative;
	padding: var(--space-10) 0 var(--space-8);
	background: var(--color-primary-hover);
	border-bottom: 1px solid var(--color-border);
	overflow: hidden;
	color: var(--color-white);
}

.developer-single-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('../images/properties.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.4;
	z-index: 0;
}

.developer-single-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(46, 81, 140, 0.75) 0%, rgba(20, 38, 60, 0.8) 100%);
	z-index: 0;
}

.developer-single-header {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.developer-single-logo {
	flex-shrink: 0;
	width: 150px;
	height: 150px;
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
	border: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
}

.developer-single-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.developer-single-info {
	flex: 1;
}

.developer-single-title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--font-bold);
	margin: 0 0 var(--space-4);
	color: var(--color-white);
	line-height: 1.2;
}

.developer-single-stats-inline {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
}

.stat-inline {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--font-lg);
	font-weight: var(--font-medium);
	color: var(--color-white);
}

.stat-inline svg {
	color: rgba(255, 255, 255, 0.9);
	flex-shrink: 0;
}

/* Developer CTA */
.developer-cta--desktop {
	flex-shrink: 0;
	width: 320px;
}

.developer-cta--mobile {
	display: none;
}

.developer-cta__card {
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	color: var(--color-white);
	text-align: center;
	box-shadow: var(--shadow-lg);
}

.developer-cta__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto var(--space-4);
	background: rgba(255, 255, 255, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.developer-cta__icon svg {
	color: var(--color-white);
}

.developer-cta__title {
	font-size: var(--font-xl);
	font-weight: var(--font-bold);
	margin: 0 0 var(--space-2);
	color: var(--color-white);
}

.developer-cta__text {
	font-size: var(--font-base);
	margin: 0 0 var(--space-5);
	opacity: 0.95;
	line-height: 1.6;
}

.developer-cta__buttons {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.developer-cta__buttons .btn {
	justify-content: center;
	gap: var(--space-2);
}

.developer-cta__buttons .btn--primary {
	background: var(--color-white);
	color: var(--color-primary);
	border-color: var(--color-white);
}

.developer-cta__buttons .btn--primary:hover {
	background: rgba(255, 255, 255, 0.9);
	transform: translate3d(0, -2px, 0);
}

.developer-cta__buttons .btn--outline {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.5);
}

.developer-cta__buttons .btn--outline:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--color-white);
}

@media (max-width: 768px) {
	.developer-single-header {
		flex-direction: column;
		text-align: center;
	}
	
	.developer-single-logo {
		width: 120px;
		height: 120px;
	}
	
	.developer-single-stats-inline {
		justify-content: center;
	}
	
	/* Hide desktop CTA, show mobile CTA */
	.developer-cta--desktop {
		display: none;
	}
	
	.developer-cta--mobile {
		display: block;
		padding: var(--space-8) 0;
		background: var(--color-surface-alt);
	}
	
	.developer-cta--mobile .developer-cta__card {
		max-width: 500px;
		margin: 0 auto;
	}
}

/* Developer About */
.developer-about {
	padding: var(--space-10) 0;
	content-visibility: auto;
	contain-intrinsic-size: auto 400px;
}

.developer-about .section-title {
	font-size: var(--font-2xl);
	font-weight: var(--font-bold);
	margin: 0 0 var(--space-6);
	color: var(--color-text);
}

.developer-about .entry-content {
	font-size: var(--font-lg);
	line-height: 1.8;
	color: var(--color-text-muted);
}

/* Developer Projects/Properties Sections */
.developer-projects,
.developer-properties {
	padding: var(--space-10) 0;
	background: var(--color-surface-alt);
	content-visibility: auto;
	contain-intrinsic-size: auto 800px;
}

.developer-properties {
	background: var(--color-surface);
}

.developer-projects .section-title,
.developer-properties .section-title {
	font-size: var(--font-2xl);
	font-weight: var(--font-bold);
	margin: 0 0 var(--space-6);
	color: var(--color-text);
}

.developer-projects .section-title .count,
.developer-properties .section-title .count {
	color: var(--color-primary);
	font-weight: var(--font-normal);
	font-size: var(--font-xl);
}

/* Developer FAQ */
.developer-faq {
	padding: var(--space-10) 0;
	background: var(--color-surface-alt);
	content-visibility: auto;
	contain-intrinsic-size: auto 600px;
}

/* Global Grid - unified for all cards (projects, properties) */
.projects-grid,
.properties-grid,
.props-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr); /* Desktop: 4 columns */
	gap: var(--space-5);
}

@media (max-width: 1199px) {
	.projects-grid,
	.properties-grid,
	.props-grid {
		grid-template-columns: repeat(3, 1fr); /* Tablet: 3 columns */
	}
}

@media (max-width: 767px) {
	.projects-grid,
	.properties-grid,
	.props-grid {
		grid-template-columns: 1fr; /* Mobile: 1 column */
		gap: var(--space-4);
	}
}

/* ========================================================================
   Seller Profile Page Styles
   ======================================================================== */

/* Hero Section */
.seller-hero__cover {
	position: relative;
	margin-bottom: var(--space-8);
}

/* Profile Card */
.seller-profile-card {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	padding: var(--space-6);
}

.seller-profile-card__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: var(--space-6);
	align-items: start;
}

/* Avatar */
.seller-avatar__img {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid var(--color-white);
	box-shadow: var(--shadow-md);
}

.seller-avatar__placeholder {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: var(--color-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	border: 4px solid var(--color-white);
	box-shadow: var(--shadow-md);
}

/* Info */
.seller-info {
	flex: 1;
	min-width: 0;
}

.seller-info__name {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	color: var(--color-text);
	margin: 0 0 var(--space-2) 0;
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.seller-info__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin-bottom: var(--space-3);
}

.meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
}

.meta-item svg {
	color: var(--color-primary);
}

/* Social Links */
.seller-social {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-surface-alt);
	color: var(--color-text-muted);
	transition: all var(--transition-base);
}

.social-link:hover {
	background: var(--color-primary);
	color: var(--color-white);
	transform: translateY(-2px);
}

/* Actions */
.seller-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.btn--whatsapp {
	background: #25D366;
	color: var(--color-white);
	border: none;
}

.btn--whatsapp:hover {
	background: #128C7E;
}

.btn--phone {
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
}

.btn--phone:hover {
	background: var(--color-primary-dark);
}

.seller-actions .btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-lg);
	font-weight: var(--font-medium);
	font-size: var(--text-sm);
	text-decoration: none;
	white-space: nowrap;
	transition: all var(--transition-base);
}

/* Section Titles */
.section-title {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	color: var(--color-text);
	margin-bottom: var(--space-6);
}

/* Responsive */
@media (max-width: 991px) {
	.seller-profile-card__inner {
		grid-template-columns: 1fr;
		text-align: center;
		justify-items: center;
	}
	
	.seller-info {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.seller-info__name {
		justify-content: center;
	}
	
	.seller-info__meta {
		justify-content: center;
	}
	
	.seller-social {
		justify-content: center;
	}
	
	.seller-actions {
		width: 100%;
		max-width: 400px;
	}
	
	.seller-actions .btn {
		justify-content: center;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.seller-hero__bg {
		height: 200px !important;
	}
	
	.seller-avatar__img,
	.seller-avatar__placeholder {
		width: 100px;
		height: 100px;
	}
	
	.seller-info__name {
		font-size: var(--text-xl);
	}
	
	.seller-profile-card {
		padding: var(--space-4);
	}
}

/* ============================================================================
   HOME CTA GUARANTEE
   ============================================================================ */

.home-cta__guarantee {
	display: flex;
	justify-content: center;
	gap: var(--space-6);
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.home-cta__guarantee-item {
	display: flex;
	align-items: center;
	font-size: var(--text-sm);
	color: rgba(255, 255, 255, 0.8);
	position: relative;
}

.home-cta__guarantee-item::before {
	content: '';
	width: 6px;
	height: 6px;
	background-color: var(--color-primary);
	border-radius: 50%;
	margin-inline-end: var(--space-2);
	flex-shrink: 0;
}

.home-cta__guarantee-item span {
	font-weight: var(--font-medium);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.home-cta__guarantee {
		flex-direction: column;
		gap: var(--space-3);
		align-items: center;
		text-align: center;
	}
	
	.home-cta__guarantee-item {
		font-size: var(--text-xs);
	}
}

@media (max-width: 480px) {
	.home-cta__guarantee {
		gap: var(--space-2);
	}
	
	.home-cta__guarantee-item::before {
		width: 4px;
		height: 4px;
	}
}

/* ============================================================================
   HOME STORY STATS - 4 ITEMS LAYOUT
   ============================================================================ */

.home-story__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--space-4);
	margin: var(--space-6) 0;
}

@media (max-width: 768px) {
	.home-story__stats {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-4);
		text-align: center;
	}
}

@media (max-width: 480px) {
	.home-story__stats {
		grid-template-columns: 1fr;
		gap: var(--space-3);
	}
}