/***** CITY PAGES *****/

/* CITY HERO */
.hero--city {
    background-color: var(--color-bg-primary);
    background-image: linear-gradient(rgba(37, 55, 69, 0.85), rgba(37, 55, 69, 0.85)), url(../../img/scs-hero.jpg);
    background-size: cover;
    background-position: center;
    color: var(--color-bg-white);
    padding: var(--space-lg) 0;
    min-height: auto;
}

.hero--city .hero__content {
    max-width: 640px;
}

.hero--city .hero__title {
    color: var(--color-bg-white);
}

.hero--city .hero__description {
    color: var(--color-text-light);
}

/* NEIGHBORHOODS SECTION */
.neighborhoods-section {
    background-color: var(--color-bg-tertiary);
}

.neighborhood-grid {
    margin-top: var(--space-md);
}

.neighborhood-card {
    background: var(--color-bg-white);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    box-shadow: 0 0.5rem 1.5rem var(--color-shadow-md);
    text-align: left;
    text-decoration: none;
    display: block;
}

.neighborhood-card__name {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-dark);
}

/* CITY CONTENT SECTIONS */
.city-intro-section .grid {
    align-items: center;
}

.city-features-list {
    color: var(--color-text-muted);
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0;
}

.city-features-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: var(--space-xs);
}

.city-features-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-bg-secondary);
    font-weight: bold;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero--city {
        padding: var(--space-lg) 0;
    }

    .city-intro__image img {
        aspect-ratio: 16 / 10;
        width: 100%;
        object-fit: cover;
    }
}

@media (max-width: 640px) {
    .hero__actions {
        width: 100%;
        display: flex;
    }
}