@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&display=swap');

.lh-area-page,
.lh-area-directory{
	--blue:#175cd3;
	--blue-dark:#1849a9;
	--blue-soft:#eff6ff;
	--ink:#101828;
	--text:#344054;
	--muted:#667085;
	--subtle:#98a2b3;
	--line:#e4e7ec;
	--line-soft:#f2f4f7;
	--bg:#f7f9fc;
	--card:#fff;
	box-sizing:border-box;
	min-height:100vh;
	background:var(--bg);
	color:var(--ink);
	font-family:Anuphan,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
	font-size:16px;
	line-height:1.55
}
.lh-area-page *,
.lh-area-directory *{box-sizing:border-box}
.lh-area-page a,
.lh-area-directory a{text-decoration:none}
.lh-area-container{width:min(1240px,calc(100% - 40px));margin-inline:auto}

/* WordPress page shell */
.livinghub-area-directory-page #brx-content{
	width:100%;
	max-width:none;
	margin:0;
	padding:0;
	background:var(--bg,#f7f9fc)
}
.livinghub-area-directory-page #brx-content>h1{display:none}

/* Shared hero */
.lh-area-hero,
.lh-area-directory__header{
	position:relative;
	margin:0;
	padding:44px 0 70px;
	background:
		radial-gradient(circle at 82% 0,rgba(64,139,255,.55) 0,transparent 30%),
		linear-gradient(135deg,#071a37 0%,#0b3d83 52%,#175cd3 100%);
	color:#fff
}
.lh-area-directory__header{
	width:100vw;
	max-width:none;
	margin-left:calc(50% - 50vw);
	padding-left:max(20px,calc((100vw - 1240px)/2));
	padding-right:max(20px,calc((100vw - 1240px)/2))
}
.lh-area-directory__header:before,
.lh-area-eyebrow{
	display:block;
	margin-bottom:8px;
	color:#a9c9ff;
	font-size:12px;
	font-weight:700;
	letter-spacing:.12em
}
.lh-area-directory__header:before{content:"PROPERTY LOCATIONS"}
.lh-area-hero h1,
.lh-area-directory__header h1{
	max-width:900px;
	margin:0 0 10px;
	color:#fff;
	font:800 clamp(30px,3.3vw,44px)/1.15 Anuphan,system-ui,sans-serif;
	letter-spacing:-.035em
}
.lh-area-directory__header p,
.lh-area-description{
	max-width:760px;
	margin:0;
	color:#d6e4f7;
	font-size:14px;
	line-height:1.7
}
.lh-area-name-en{
	margin:0 0 7px;
	color:#a9c9ff;
	font-size:14px;
	font-weight:600
}
.lh-area-hero__content{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:32px
}
.lh-area-hero__content header{min-width:0}
.lh-area-hero__stat{
	flex:0 0 auto;
	min-width:150px;
	text-align:right
}
.lh-area-hero__stat strong,
.lh-area-hero__stat span{display:block}
.lh-area-hero__stat strong{font:800 34px/1.1 Anuphan,system-ui,sans-serif}
.lh-area-hero__stat span{margin-top:5px;color:#c3d5ed;font-size:13px}

/* Breadcrumb */
.lh-area-breadcrumb{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0 0 24px;
	color:#b9cceb;
	font-size:13px
}
.lh-area-breadcrumb a{color:#dbe8fb}
.lh-area-breadcrumb a:hover{color:#fff}
.lh-area-breadcrumb span[aria-current=page]{color:#fff;font-weight:600}

/* Main area archive */
.lh-area-main{
	position:relative;
	margin-top:-28px;
	padding-bottom:80px
}
.lh-area-section{margin-top:18px}
.lh-area-panel,
.lh-area-group{
	border:1px solid var(--line);
	border-radius:18px;
	background:#fff;
	box-shadow:0 8px 26px rgba(16,24,40,.055)
}
.lh-area-panel{padding:24px}
.lh-area-section__head{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:20px;
	margin-bottom:18px
}
.lh-area-section__head>div>span{
	display:block;
	margin-bottom:4px;
	color:var(--blue);
	font-size:11px;
	font-weight:700;
	letter-spacing:.08em
}
.lh-area-section__head h2,
.lh-area-group h2{
	margin:0;
	color:var(--ink);
	font-size:20px;
	font-weight:700;
	line-height:1.4
}
.lh-area-section__head>small{
	flex:0 0 auto;
	padding:7px 10px;
	border-radius:999px;
	background:var(--blue-soft);
	color:var(--blue);
	font-size:12px;
	font-weight:700
}

/* Directory */
.lh-area-directory{padding-bottom:80px}
.lh-area-group{
	width:min(1240px,calc(100% - 40px));
	margin:18px auto 0;
	padding:24px
}
.lh-area-directory__header+.lh-area-group{margin-top:-28px;position:relative}
.lh-area-group h2{margin-bottom:18px}
.lh-area-group h2 a{color:var(--ink)}
.lh-area-group h2 a:hover{color:var(--blue)}

/* Location cards */
.lh-area-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:12px;
	padding:0;
	margin:0;
	list-style:none
}
.lh-area-grid li{
	display:flex;
	min-width:0;
	margin:0;
	padding:0
}
.lh-area-grid li>a{
	display:grid;
	position:relative;
	width:100%;
	height:100%;
	min-width:0;
	min-height:96px;
	overflow:hidden;
	padding:15px 40px 15px 15px;
	align-content:center;
	border:1px solid var(--line);
	border-radius:12px;
	background:#fff;
	color:var(--ink);
	transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}
.lh-area-grid li>a:hover{
	transform:translateY(-2px);
	border-color:#b2ccff;
	box-shadow:0 10px 24px rgba(16,24,40,.08)
}
.lh-area-grid li>a>span{
	display:-webkit-box;
	overflow:hidden;
	min-width:0;
	color:#1d2939;
	font-size:14px;
	font-weight:700;
	line-height:1.45;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2
}
.lh-area-grid li>a>small{
	display:block;
	overflow:hidden;
	min-width:0;
	margin-top:5px;
	color:var(--muted);
	font-size:11px;
	line-height:1.45;
	text-overflow:ellipsis;
	white-space:nowrap
}
.lh-area-grid li>a>i{
	position:absolute;
	right:15px;
	top:50%;
	transform:translateY(-50%);
	color:var(--blue);
	font-size:24px;
	font-style:normal
}
.lh-area-directory .lh-area-grid li>a:after{
	content:"›";
	position:absolute;
	right:15px;
	top:50%;
	transform:translateY(-50%);
	color:var(--blue);
	font-size:24px
}

/* Results */
.lh-area-results{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:18px
}
.lh-area-result{
	display:flex;
	min-width:0;
	min-height:210px;
	padding:20px;
	flex-direction:column;
	border:1px solid var(--line);
	border-radius:16px;
	background:#fff;
	box-shadow:0 5px 18px rgba(16,24,40,.045);
	transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.lh-area-result:hover{
	transform:translateY(-4px);
	border-color:#d0d5dd;
	box-shadow:0 18px 38px rgba(16,24,40,.10)
}
.lh-area-result__type{
	margin:0;
	color:var(--blue);
	font-size:11px;
	font-weight:700;
	letter-spacing:.04em
}
.lh-area-result h3{
	margin:8px 0 8px;
	font-size:17px;
	font-weight:700;
	line-height:1.45
}
.lh-area-result h3 a{color:#1d2939}
.lh-area-result h3 a:hover{color:var(--blue)}
.lh-area-result__excerpt{
	display:-webkit-box;
	overflow:hidden;
	margin:0 0 18px;
	color:var(--muted);
	font-size:13px;
	line-height:1.65;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:3
}
.lh-area-result__link{
	margin-top:auto;
	padding-top:13px;
	border-top:1px solid var(--line-soft);
	color:var(--blue);
	font-size:12px;
	font-weight:700
}

/* Empty state */
.lh-area-empty{
	padding:64px 20px;
	border:1px solid var(--line);
	border-radius:18px;
	background:#fff;
	text-align:center
}
.lh-area-empty>div{color:var(--blue);font-size:48px}
.lh-area-empty h3{margin:8px 0 4px;color:var(--ink);font-size:24px}
.lh-area-empty p{margin:0 0 18px;color:var(--muted);font-size:14px}
.lh-area-empty a{
	display:inline-block;
	padding:11px 17px;
	border-radius:10px;
	background:var(--blue);
	color:#fff;
	font-size:14px;
	font-weight:700
}
.lh-area-empty a:hover{background:var(--blue-dark)}

/* Related locations */
.lh-area-related{
	display:flex;
	flex-wrap:wrap;
	gap:9px;
	padding:0;
	margin:0;
	list-style:none
}
.lh-area-related a{
	display:block;
	padding:8px 12px;
	border:1px solid var(--line);
	border-radius:999px;
	background:#fff;
	color:var(--text);
	font-size:12px;
	font-weight:600;
	transition:border-color .18s ease,background .18s ease,color .18s ease
}
.lh-area-related a:hover{border-color:#b2ccff;background:var(--blue-soft);color:var(--blue)}

/* Pagination */
.lh-area-pagination{margin-top:30px}
.lh-area-pagination .nav-links{
	display:flex;
	justify-content:center;
	flex-wrap:wrap;
	gap:7px
}
.lh-area-pagination a,
.lh-area-pagination span{
	display:grid;
	min-width:40px;
	height:40px;
	padding:0 10px;
	place-items:center;
	border:1px solid var(--line);
	border-radius:9px;
	background:#fff;
	color:#475467;
	font-size:13px;
	font-weight:600
}
.lh-area-pagination .current{border-color:var(--blue);background:var(--blue);color:#fff}

@media(max-width:1000px){
	.lh-area-grid,
	.lh-area-results{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
	.lh-area-container,
	.lh-area-group{width:min(100% - 24px,1240px)}
	.lh-area-hero,
	.lh-area-directory__header{padding-top:36px;padding-bottom:62px}
	.lh-area-directory__header{
		padding-left:12px;
		padding-right:12px
	}
	.lh-area-hero__content{align-items:flex-start}
	.lh-area-hero__stat{display:none}
	.lh-area-hero h1,
	.lh-area-directory__header h1{font-size:30px}
	.lh-area-breadcrumb{font-size:12px;margin-bottom:20px}
	.lh-area-main{margin-top:-24px;padding-bottom:56px}
	.lh-area-panel,
	.lh-area-group{padding:18px;border-radius:16px}
	.lh-area-section__head{align-items:flex-start}
	.lh-area-section__head h2,
	.lh-area-group h2{font-size:18px}
	.lh-area-grid,
	.lh-area-results{grid-template-columns:1fr}
	.lh-area-grid li>a{min-height:86px}
	.lh-area-result{min-height:0}
}

@media(max-width:420px){
	.lh-area-container,
	.lh-area-group{width:min(100% - 20px,1240px)}
	.lh-area-directory__header{padding-left:10px;padding-right:10px}
	.lh-area-hero h1,
	.lh-area-directory__header h1{font-size:27px}
	.lh-area-description,
	.lh-area-directory__header p{font-size:13px}
	.lh-area-panel,
	.lh-area-group{padding:15px}
	.lh-area-section__head>small{display:none}
}