/* GIPSIC — CPN Office Locations
   สงวนลิขสิทธิ์ พ.ศ. 2569 บริษัท จิ๊บสิค คอร์ปอเรชั่น จำกัด */

.gipsic-places {
	--gipsic-places-btn: #B39656;
	--gipsic-places-list-bg: #fff;
	--gipsic-places-map-h: 630px;

	/* สร้างบริบทการซ้อนของตัวเอง เพื่อไม่ให้ชั้นต่าง ๆ ของ Leaflet
	   ซึ่งตั้ง z-index ไว้สูงถึง 400 และ 1000 ลอยขึ้นไปทับแถบเมนูด้านบนของเว็บไซต์ */
	position: relative;
	z-index: 0;
	isolation: isolate;
}

.gipsic-places-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.gipsic-places-filters button {
	border: 1px solid var(--gipsic-places-btn); background: transparent; color: var(--gipsic-places-btn);
	padding: 6px 16px; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; line-height: 1.6;
}
.gipsic-places-filters button.is-active { background: var(--gipsic-places-btn); color: #fff; }

.gipsic-places-body { display: grid; grid-template-columns: minmax(260px, 360px) 1fr; gap: 16px; align-items: stretch; }

.gipsic-places-list {
	background: var(--gipsic-places-list-bg); max-height: var(--gipsic-places-map-h);
	overflow-y: auto; display: flex; flex-direction: column;
}
.gipsic-places-entry {
	display: flex; gap: 12px; align-items: center; padding: 12px;
	text-decoration: none; color: inherit; border-bottom: 1px solid rgba(0,0,0,.08);
}
.gipsic-places-entry:hover, .gipsic-places-entry.is-active { background: rgba(0,0,0,.04); }
.gipsic-places-entry[hidden] { display: none; }
.gipsic-places-thumb { flex: 0 0 72px; height: 56px; background-size: cover; background-position: center; border-radius: 4px; }
.gipsic-places-text { display: flex; flex-direction: column; }
.gipsic-places-title { font-weight: 600; }
.gipsic-places-area { font-size: 13px; opacity: .7; }

.gipsic-places-map { width: 100%; min-height: 320px; position: relative; z-index: 0; }

/* จำกัดชั้นของ Leaflet ให้อยู่ในกรอบของตัวเอง */
.gipsic-places .leaflet-pane,
.gipsic-places .leaflet-top,
.gipsic-places .leaflet-bottom,
.gipsic-places .leaflet-control { z-index: auto; }

@media (max-width: 880px) {
	.gipsic-places-body { grid-template-columns: 1fr; }
	.gipsic-places-list { max-height: 320px; }
}