/* Compact, reusable layout for the capital-city landing pages. */
.city-page { max-width: 68rem; }
.city-page .info-content > p { max-width: 58rem; }
.city-section { margin-top: 1rem; }
.city-section h3 { margin-top: 0; }
.city-updated { color: var(--text-muted); font-size: .73rem !important; margin-bottom: .42rem; }
.city-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .42rem; }
.city-grid article { min-width: 0; padding: .48rem .55rem; border: 1px solid var(--border-03); border-radius: 7px; background: var(--card-surface-soft); }
.city-grid span, .city-grid small { display: block; color: var(--text-muted); font-size: .69rem; line-height: 1.3; }
.city-grid strong { display: block; margin: .08rem 0; color: #314536; font-size: .96rem; line-height: 1.22; }
.city-forecast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 38rem; }
.city-links { display: flex; flex-wrap: wrap; gap: .34rem .48rem; margin-top: 1rem; padding-top: .72rem; border-top: 1px solid var(--divider-standard); }
.city-links a { padding: .18rem .42rem; border: 1px solid #d6d4c9; border-radius: 999px; background: var(--surface-02); font-size: .73rem; text-decoration: none; }
.city-links a:hover { background: var(--surface-05); border-color: #aebdab; }
.city-hub { margin-top: .9rem; padding-top: 0; border-top: 0; }
@media (max-width: 640px) { .city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .city-forecast-grid { grid-template-columns: 1fr; } }