/* /things-to-do-in-vero-beach — Places directory with category chips and a Mapbox map.
   Page-specific; base tokens come from the Webflow variables. Loaded first in <body>. */
.mm2t_head { padding: calc(68px + 4.5rem) 0 var(--spacing--space-small); }
.mm2t_intro { max-width: 46rem; font-size: 1.08rem; line-height: 1.7; color: rgba(11,31,51,.86); margin: 1.25rem 0 0; }

.mm2t_bar { position: sticky; top: 68px; z-index: 20; background: #fff; border-bottom: 1px solid rgba(11,31,51,.12); }
.mm2t_chips { display: flex; gap: .5rem; overflow-x: auto; padding: .85rem 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mm2t_chips::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .mm2t_chips { flex-wrap: wrap; overflow: visible; row-gap: .5rem; } }  /* 14 tabs: wrap on desktop, swipe on mobile */
.mm2t_chip { flex: 0 0 auto; border: 1px solid rgba(11,31,51,.22); background: #fff; color: #0b1f33; border-radius: 999px; padding: .5rem .95rem; font-family: var(--_🔠-typography---font--button); font-size: .82rem; letter-spacing: .01em; text-transform: none; font-weight: 500; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.mm2t_chip:focus-visible, .mm2t_card-name a:focus-visible, .mm2t_card a:focus-visible { outline: 2px solid #0b1f33; outline-offset: 2px; }
.mm2t_chip:hover { border-color: #0b1f33; }
.mm2t_chip.is-on { background: #0b1f33; color: #fff; border-color: #0b1f33; }
.mm2t_count { margin-left: auto; align-self: center; font-size: .8rem; color: rgba(11,31,51,.6); white-space: nowrap; padding-left: 1rem; }

.mm2t_layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--spacing--space-small); align-items: start; padding: var(--spacing--space-small) 0 var(--spacing--space-large); }
.mm2t_list { display: grid; grid-template-columns: 1fr; }
.mm2t_map-wrap { position: sticky; top: calc(68px + 62px); height: calc(100vh - 68px - 62px - 24px); min-height: 28rem; border-radius: var(--spacing--space-hairline); overflow: hidden; background: rgba(11,31,51,.06); }
.mm2t_map { position: absolute; inset: 0; }
.mm2t_map .mapboxgl-ctrl-logo, .mm2t_map .mapboxgl-ctrl-attrib { opacity: .6; }

.mm2t_card { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 1.5rem; row-gap: .3rem; padding: 1.25rem 0; border-top: 1px solid rgba(11,31,51,.16); transition: background .2s; }
.mm2t_card-thumb { grid-row: 1 / -1; grid-column: 1; aspect-ratio: 4 / 3; border-radius: var(--spacing--space-hairline); overflow: hidden; background: rgba(11,31,51,.06); position: relative; }
.mm2t_card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.mm2t_card:hover .mm2t_card-img { transform: scale(1.03); }
.mm2t_card-img.w-dyn-bind-empty { display: none; }
.mm2t_card-thumb:has(.w-dyn-bind-empty)::after { content: attr(data-initial); position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--_🔠-typography---font--heading-serif); font-size: 2rem; color: rgba(11,31,51,.28); }
.mm2t_list > .w-dyn-item:last-child .mm2t_card { border-bottom: 1px solid rgba(11,31,51,.16); }
.mm2t_card.is-hot { background: rgba(11,31,51,.035); box-shadow: -1.5rem 0 0 rgba(11,31,51,.035), 1.5rem 0 0 rgba(11,31,51,.035); }
.mm2t_card.is-hidden { display: none; }
.mm2t_card-kicker { grid-column: 2; display: flex; gap: .5rem; font-family: var(--_🔠-typography---font--label); font-size: .78rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: rgba(11,31,51,.58); }
.mm2t_card-name { grid-column: 2; font-family: var(--_🔠-typography---font--heading-serif); font-size: 1.45rem; line-height: 1.2; font-weight: 400; margin: 0; letter-spacing: .005em; }
.mm2t_card-name a { color: #0b1f33; text-decoration: none; transition: color .2s; }
.mm2t_card-name a:hover { color: rgba(11,31,51,.62); }
.mm2t_card-name a.is-static { pointer-events: none; }
.mm2t_card-note { grid-column: 2; margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(11,31,51,.74); }
.mm2t_card-meta { grid-column: 2; display: flex; flex-wrap: wrap; column-gap: 1rem; row-gap: .1rem; font-size: .82rem; line-height: 1.5; color: rgba(11,31,51,.62); margin-top: .25rem; }
.mm2t_card-meta .w-dyn-bind-empty { display: none; }
.mm2t_area:not(.w-dyn-bind-empty)::before { content: "\00b7"; margin-right: .5rem; }
.mm2t_area.w-dyn-bind-empty { display: none; }
.mm2t_data { display: none; }
.mm2t_stars:empty { display: none; }
.mm2t_card-review { grid-column: 2; margin-top: .6rem; padding: .85rem 1rem; background: rgba(11,31,51,.04); border-radius: var(--spacing--space-hairline); display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .75rem; font-size: .92rem; line-height: 1.55; color: rgba(11,31,51,.86); }
.mm2t_card-review.is-empty { display: none; }
.mm2t_stars { color: #0b1f33; letter-spacing: .12em; font-size: .9rem; white-space: nowrap; }
.mm2t_stars .is-off { color: rgba(11,31,51,.22); }
.mm2t_review { flex: 1 1 100%; }
.mm2t_reviewer { font-family: var(--_🔠-typography---font--label); font-size: .78rem; letter-spacing: 0; text-transform: none; font-weight: 500; color: rgba(11,31,51,.58); }
.mm2t_reviewer.w-dyn-bind-empty, .mm2t_review.w-dyn-bind-empty { display: none; }



.mm2t_pop .mapboxgl-popup-content { font-family: var(--_🔠-typography---font--body); padding: .6rem .8rem; border-radius: 4px; box-shadow: 0 4px 18px rgba(11,31,51,.18); }
.mm2t_pop-name { font-family: var(--_🔠-typography---font--heading-serif); font-size: 1.05rem; color: #0b1f33; }
.mm2t_pop-cat { font-family: var(--_🔠-typography---font--label); font-size: .74rem; letter-spacing: 0; text-transform: none; color: rgba(11,31,51,.58); margin-top: .15rem; }
.mm2t_pop .mapboxgl-popup-close-button { display: none; }

@media (max-width: 991px) {
  .mm2t_layout { grid-template-columns: 1fr; }
  .mm2t_map-wrap { position: relative; top: auto; height: 52vw; min-height: 16rem; order: -1; }
  .mm2t_card { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1rem; }
  .mm2t_card.is-hot { box-shadow: none; }
}
@media (max-width: 767px) {
  .mm2t_head { padding-top: calc(60px + 3rem); }
  .mm2t_bar { top: 60px; }
  .mm2t_card-name { font-size: 1.3rem; }
  .mm2t_card { grid-template-columns: 6rem minmax(0, 1fr); }
  .mm2t_card-review { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .mm2t_chip, .mm2t_card, .mm2t_card-img, .mm2t_card-name a { transition: none; } .mm2t_card:hover .mm2t_card-img { transform: none; } }