/* Locations: city chips, state bubbles, ACF prose */
.s8-city-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.s8-city-chips .w-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 14px; text-decoration: none; text-transform: none; letter-spacing: 0; font-weight: 600; border: 1px solid var(--line); background: var(--card); color: var(--tx); border-radius: 999px; transition: transform .25s cubic-bezier(.2,.7,.2,1), background .2s, color .2s; }
.s8-city-chips .w-chip svg { width: 16px; height: 16px; color: var(--gold); flex: none; }
.s8-city-chips .w-chip:hover { background: var(--gold); color: #142219; transform: translateY(-3px); }
.s8-city-chips .w-chip:hover svg { color: #142219; }
.s8-state { padding: 26px 0; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.s8-state[hidden] { display: none; }
.s8-city-filter input { min-width: 260px; border: 1px solid var(--line); background: var(--card); color: var(--tx); border-radius: 999px; padding: 14px 20px; font: inherit; }
.s8-state-bubbles { position: relative; height: 440px; }
.s8-sb { position: absolute; display: grid; align-content: center; justify-items: center; text-align: center; gap: 2px; }
.s8-sb b { font-family: var(--fd); font-size: 44px; line-height: 1; }
.s8-sb small { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.s8-sb-0 { left: 0; top: 10px; background: var(--gold); color: #142219; }
.s8-sb-1 { right: 4%; top: 70px; background: var(--card); border: 1px solid var(--line); }
.s8-sb-2 { left: 34%; bottom: 0; background: var(--sage); color: #fff; }
.s8-sb-3 { right: 0; bottom: 20px; background: #F5F2E9; color: #142219; }
.s8-sb-4 { left: 8%; bottom: 40px; background: #142219; color: #fff; }
.s8-lede-html p { margin: 0 0 .8em; }
.s8-lede-html p:last-child { margin-bottom: 0; }
.s8-prose-mini p { margin: 0 0 1em; line-height: 1.65; }
.s8-loc-card { transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .2s; }
.s8-loc-card:hover { border-color: var(--gold); }

/* City pain quotes run long (150-200 characters): size the blob to the text. */
.s8-location .s8-pains .s8-pain { aspect-ratio: auto !important; min-height: 300px; padding: 58px 40px !important; }
.s8-location .s8-pains .s8-pain p:first-child { font-size: 18px !important; line-height: 1.35 !important; font-weight: 600 !important; margin: 0; }

@media (max-width: 900px) {
  .s8-two-col { grid-template-columns: minmax(0, 1fr) !important; }
  .s8-state-bubbles { height: 320px; }
  .s8-sb { transform: scale(.75); }
}
@media (max-width: 600px) {
  .s8-city-filter input { min-width: 0; width: 100%; }
  .s8-location .s8-pains .s8-pain { min-height: 0; padding: 48px 40px !important; }
}