/* vf_communities 2026-10-24: one community card component for Cape Coral (a.g6hc) and every city hub (.g6cm).
   Logo palette only: NAVY #095E93, SKY #2B80BB, LIGHT #60C3EF, PALE #D2E4F5, cream #f4f9fd. Cormorant Garamond + Manrope. */
a.g6hc, .g6cm { -webkit-tap-highlight-color: rgba(43,128,187,.22); touch-action: manipulation; }
a.g6hc:focus-visible, a.g6cm:focus-visible { outline: 3px solid #60c3ef; outline-offset: 3px; }
a.g6hc:active, a.g6cm:active, .g6cm:active { transform: scale(.985); box-shadow: 0 6px 16px rgba(0,50,90,.16), 0 0 0 2px #60c3ef; }
.g6hc-media img { background: #d2e4f5; }
.g6hc-media--map .g6hc-chip { top: auto; bottom: 12px; }
/* text-only premium card (no image exists for this place; nothing is faked) */
a.g6hc--text { background: #f4f9fd; box-shadow: 0 8px 22px rgba(0,50,90,.10), 0 0 0 1px rgba(9,94,147,.12); }
a.g6hc--text .g6hc-body { position: relative; padding: 26px 22px 18px; border-top: 5px solid #2b80bb; gap: 8px; }
a.g6hc--text .g6hc-chip { position: static; align-self: flex-start; background: #d2e4f5; color: #095e93; margin: 0 0 2px; }
a.g6hc--text .g6hc-body { justify-content: center; gap: 10px; padding: 28px 24px 18px; }
a.g6hc--text .g6hc-body strong { font-size: 34px; }
a.g6hc--text .g6hc-d { font-size: 16px; }
a.g6hc--text .g6hc-go { margin-top: 0; }
a.g6hc--text .g6hc-body::after { content: ""; display: block; width: 44px; height: 3px; border-radius: 3px; background: #60c3ef; order: 3; }
@media (hover: none) { a.g6hc:hover, a.g6cm:hover { transform: none; box-shadow: 0 8px 22px rgba(0,50,90,.12), 0 0 0 1px rgba(9,94,147,.07); } a.g6hc:hover .g6hc-media img, a.g6cm:hover .g6cm-media img { transform: none; } a.g6hc:active, a.g6cm:active { transform: scale(.98); } }

/* city hub community cards */
.g6cm-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.g6cm-grid > li { margin: 0; padding: 0; display: flex; min-width: 0; }
.g6cm { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0; border-radius: 22px; overflow: hidden; background: #fff; color: #16283e; text-decoration: none; box-shadow: 0 8px 22px rgba(0,50,90,.12), 0 0 0 1px rgba(9,94,147,.07); transition: transform .2s ease, box-shadow .2s ease; }
a.g6cm:hover, a.g6cm:focus-visible { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,50,90,.2), 0 0 0 2px #2b80bb; }
.g6cm-media { position: relative; display: block; aspect-ratio: 16 / 10; background: #d2e4f5; overflow: hidden; }
.g6cm-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
a.g6cm:hover .g6cm-media img { transform: scale(1.05); }
.g6cm-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 16px 18px 16px; }
.g6cm--text { background: #f4f9fd; box-shadow: 0 8px 22px rgba(0,50,90,.10), 0 0 0 1px rgba(9,94,147,.12); }
.g6cm--text .g6cm-body { padding-top: 24px; border-top: 5px solid #2b80bb; justify-content: center; gap: 8px; }
.g6cm--text .g6cm-name { font-size: 32px; }
.g6cm--text .g6cm-d { font-size: 15.5px; }
.g6cm--text .g6cm-go { margin-top: 0; }
.g6cm-name { font: 600 28px/1.08 "Cormorant Garamond", Georgia, serif; color: #095e93; margin: 0; }
.g6cm-tag { font: 800 12px/1.3 Manrope, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #2b80bb; }
.g6cm-d { font: 500 14.5px/1.55 Manrope, sans-serif; color: #3d5368; }
.g6cm-go { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; min-height: 44px; font: 800 14px/1 Manrope, sans-serif; color: #2b80bb; }
@media (max-width: 560px) { .g6cm-grid { grid-template-columns: 1fr; gap: 14px; } .g6cm-name { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .g6cm, .g6cm-media img { transition: none; } a.g6cm:hover, a.g6cm:hover .g6cm-media img { transform: none; } }

/* vf_communities 2026-10-24 PM rulings: a map must read as a map, a Commons photo carries its credit */
.g6-maptag { position: absolute; right: 12px; top: 12px; z-index: 2; padding: 6px 11px 6px 9px; border-radius: 999px; background: #095e93; color: #fff; font: 800 12px/1 Manrope, sans-serif; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0,50,90,.25); }
.g6-maptag::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-right: 6px; border: 2px solid #60c3ef; border-radius: 50%; vertical-align: -1px; box-sizing: content-box; }
.g6-credit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 12px 7px; background: linear-gradient(to top, rgba(9,60,100,.82), rgba(9,60,100,0)); color: #fff; font: 600 11px/1.3 Manrope, sans-serif; letter-spacing: .01em; }
.g6hc-media--map .g6hc-chip, .g6cm-media--map .g6hc-chip { bottom: 12px; top: auto; }