.mmr-comm-title { font-family: var(--font-heading); font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 48px; max-width: 20ch; }

.mmr-comm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-bottom: 96px; }
.mmr-comm-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3; cursor: pointer; text-decoration: none; display: block; }
/* isolation keeps Leaflet's high z-index panes inside the tile, so the tint
   and label always sit on top (not only while hovering). */
.mmr-comm-map { position: absolute; inset: 0; z-index: 0; isolation: isolate; transition: transform 0.5s ease; background: var(--color-surface); }
.mmr-comm-tile:hover .mmr-comm-map { transform: scale(1.06); }
.mmr-comm-tint { position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--color-accent-700) 45%, transparent); transition: background 0.3s ease; pointer-events: none; }
.mmr-comm-tile:hover .mmr-comm-tint { background: color-mix(in srgb, var(--color-accent-700) 58%, transparent); }
.mmr-comm-label { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.mmr-comm-label p { font-style: italic; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-bg); margin: 0 0 10px; }
.mmr-comm-label h2 { font-family: var(--font-heading); font-size: clamp(30px, 3.2vw, 44px); line-height: 1; letter-spacing: -0.015em; margin: 0; color: var(--color-bg); }

/* — closing "your neighbourhood" tile — */
.mmr-comm-tile--cta { background: var(--color-accent-900); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; }
.mmr-comm-tile--cta p { font-style: italic; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-bg) 80%, transparent); margin: 0 0 10px; }
.mmr-comm-tile--cta h2 { font-family: var(--font-heading); font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.015em; margin: 0 0 12px; color: var(--color-bg); }
.mmr-comm-tile--cta span { font-size: 14px; font-weight: 600; color: var(--color-bg); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.mmr-comm-tile--cta:hover { background: var(--color-accent-700); }

@media (max-width: 860px) { .mmr-comm-grid { grid-template-columns: 1fr; } }
@media (min-width: 861px) and (max-width: 1100px) { .mmr-comm-grid { grid-template-columns: repeat(2, 1fr); } }