/* /communities — the island, outlined. Parcel-accurate community shapes from the county
   appraiser (webflow/scripts/community_outlines.py).

   Structure: the section sits inside the page container like everything else on the page, so
   the eyebrow, H1, intro, this list and the section heading below all share one left axis.
   The list is page content (no frame); the map is the one framed object, and its left edge
   lands on the second column of the three-up card grid beneath it. Names appear on the map
   only for the shape that is hot (hovered, focused or tapped), so the map stays quiet. */
/* One frame around list + map. The frame is the container box (80rem, 1.5rem padding), so the
   list text inside it sits on the page axis with the H1 and the cards below. */
.mm2cm { position: relative; display: grid; height: auto; overflow: visible; box-sizing: border-box; grid-template-columns: calc((100% - 3rem) / 3) minmax(0, 1fr); column-gap: 1.5rem; align-items: stretch; width: 100%; max-width: 80rem; margin: 0 auto; padding: 1.5rem; background: #fff; border: 1px solid rgba(11,31,51,.14); border-radius: 10px; }
.mm2cm_map { position: relative; min-width: 0; min-height: 600px; max-height: 920px; background: #e9edf1; border: 1px solid rgba(11,31,51,.08); border-radius: 4px; overflow: hidden; }
.mm2cm_map .mapboxgl-ctrl-logo, .mm2cm_map .mapboxgl-ctrl-attrib { display: none !important; }
.mm2cm_map .mapboxgl-ctrl-group { border-radius: 4px; box-shadow: 0 8px 24px -14px rgba(11,31,51,.4); }
.mm2cm_map .mapboxgl-canvas { outline: none; }

/* Panel: page content, not a widget. Text starts on the page axis; hover fills bleed 0.5rem into the gutter. */
.mm2cm_legend { position: relative; z-index: 2; min-width: 0; padding: 0; border: 0; overflow: visible; }
.mm2cm_group + .mm2cm_group { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(11,31,51,.1); }
.mm2cm_group-title { font-family: var(--_🔠-typography---font--label); font-size: .8rem; font-weight: 500; color: rgba(11,31,51,.55); margin: 0 0 .5rem; }
.mm2cm_group.is-area .mm2cm_rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; }

.mm2cm_row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; column-gap: 1rem; padding: .55rem .6rem .55rem .5rem; margin: 0 -.5rem; border-radius: 2px; color: #0b1f33; text-decoration: none; transition: background-color .2s; }
.mm2cm_row.is-area { grid-template-columns: minmax(0, 1fr); padding: .4rem .6rem .4rem .5rem; }
.mm2cm_row.is-hot, .mm2cm_row:hover { background: rgba(11,31,51,.05); }
.mm2cm_row:focus-visible { background: rgba(11,31,51,.05); outline: 2px solid #0b1f33; outline-offset: 2px; }
.mm2cm_thumb { width: 4.5rem; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; display: block; background: rgba(11,31,51,.08); }
.mm2cm_name { display: block; text-wrap: balance; font-family: var(--_🔠-typography---font--heading-serif); font-size: 1.3rem; line-height: 1.15; letter-spacing: .005em; }
.mm2cm_row.is-area .mm2cm_name { font-family: var(--_🔠-typography---font--body); font-size: 1rem; color: rgba(11,31,51,.85); }
.mm2cm_facts { display: block; margin-top: .25rem; font-size: .85rem; line-height: 1.4; color: rgba(11,31,51,.58); }
.mm2cm_row.is-area .mm2cm_facts { display: none; }
.mm2cm_hint { margin: 1.5rem 0 0; font-size: .78rem; line-height: 1.5; color: rgba(11,31,51,.45); }

/* Map labels: hidden until their shape is hot. HTML markers, set in the site serif. */
.mm2cm_label-wrap { pointer-events: none; }
.mm2cm_label { pointer-events: none; font-family: var(--_🔠-typography---font--heading-serif); font-size: 1.1rem; line-height: 1; letter-spacing: .005em; color: #fff; white-space: nowrap; padding: .45rem .7rem; border-radius: 2px; background: #0b1f33; box-shadow: 0 10px 24px -12px rgba(11,31,51,.6); opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .3s cubic-bezier(.16,1,.3,1); }
.mm2cm_label.is-area { font-family: var(--_🔠-typography---font--body); font-size: .9rem; }
.mm2cm_label.is-hot { opacity: 1; transform: none; }

@media (max-width: 1327px) {
  .mm2cm { width: calc(100% - 1rem); padding: 1rem; border-radius: 8px; }
}
@media (max-width: 1199px) {
  .mm2cm { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}
@media (max-width: 991px) {
  .mm2cm { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .mm2cm_map { order: -1; min-height: 58vh; max-height: 58vh; }
  .mm2cm_group.is-area .mm2cm_rows { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) {
  .mm2cm { width: calc(100% - 1rem); padding: .75rem; }
  .mm2cm_group.is-area .mm2cm_rows { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .mm2cm_row, .mm2cm_label { transition: none; } }