/* El Paseo Interactive Map
   Colours are exposed as custom properties so they can be themed per placement.
   --eppm-hot is the active-on-hover building colour and can also be set via the
   shortcode's hot="" attribute. */

.eppm{
	--eppm-hot:#643A54;
	--eppm-dusk:#643A54;
	--eppm-green:#B2BB1E;
	--eppm-ink:#393A3A;
	--eppm-line:rgba(57,58,58,.14);
	--eppm-display:'Tenor Sans','Times New Roman',serif;
	--eppm-body:'basic-sans','Hanken Grotesk',system-ui,sans-serif;
	font-family:var(--eppm-body);
	color:var(--eppm-ink);
	line-height:1.6;
}

.eppm-grid{
	display:grid;
	grid-template-columns:1.35fr 1fr;
	gap:clamp(24px,3vw,56px);
	align-items:start;
}
@media (max-width:1000px){ .eppm-grid{ grid-template-columns:1fr; } }

/* Map */
.eppm-mapcard{
	background:#fff;
	border-bottom:4px solid var(--eppm-green);
	padding:6px;
}
.eppm-mapcard svg{ width:112%; height:auto; display:block; }

/* Building interaction */
.eppm .eppm-unit{ transition:fill .28s cubic-bezier(.2,.7,.2,1); }
.eppm .eppm-unit.is-hot{ fill:var(--eppm-hot)!important; }
.eppm .eppm-unit.eppm-occupied{ cursor:pointer; }

/* Legend */
.eppm-legend{
	display:flex; gap:18px; flex-wrap:wrap; margin-top:16px;
	font-size:12px; letter-spacing:.04em;
}
.eppm-legend span{ display:inline-flex; align-items:center; gap:7px; }
.eppm-sw{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.eppm-sw-hot{ background:var(--eppm-hot); }

/* Directory */
.eppm-dir-h{
	font-family:var(--eppm-display);
	text-transform:uppercase;
	font-size:clamp(18px,2vw,26px);
	margin:0 0 4px;
}
.eppm-hint{
	margin:0 0 16px;
	font-weight:700; font-size:11px; letter-spacing:.14em;
	text-transform:uppercase; color:var(--eppm-dusk);
}
.eppm-cols{
	display:grid;
	/* Two groups sit 2-up (Dining | Shopping); a third (Services) makes it 3-up.
	   Collapses to one column on narrow screens. */
	grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
	gap:clamp(20px,2.4vw,40px);
}
@media (max-width:560px){ .eppm-cols{ grid-template-columns:1fr; } }
.eppm-grouplabel{
	font-weight:700; font-size:11px; letter-spacing:.16em;
	text-transform:uppercase; color:var(--eppm-dusk); margin:0 0 8px;
}
.eppm-dir ul{ list-style:none; margin:0; padding:0; }
.eppm-dir li{ border-bottom:1px solid var(--eppm-line); }
.eppm-dir a{
	display:block; padding:9px 8px; color:var(--eppm-ink);
	text-decoration:none; font-size:15px;
	transition:background .25s, color .25s;
}
.eppm-dir a:hover,
.eppm-dir a.is-active{
	background:rgba(100,58,84,.10);
	color:var(--eppm-dusk);
}

/* Editor-only duplicate warning */
.eppm-warn{
	margin:0 0 16px; padding:10px 14px;
	background:#fdecea; border-left:3px solid #c0392b;
	font-size:13px; color:#7d241c;
}