/* ===== Городовые страницы: услуги, портфолио, FAQ =====
   Hero на городовых страницах использует родные классы главной (.hero) — см. hero.css */
/* Список услуг со ссылками */
.city-services {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 32px;
}

.city-services li {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 16px;
}

.city-services a {
    color: var(--color-text);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition-base);
}

.city-services a:hover { color: var(--color-text-secondary); }

.city-services span { color: var(--color-text-secondary); }

/* Портфолио на городской странице */
.city-portfolio { background: var(--color-surface); padding: var(--section-space-desktop) 0; }

/* FAQ */
.city-faq {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.city-faq__item {
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: #FFFFFF;
    overflow: hidden;
}

.city-faq__item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    font-weight: 600;
    font-size: 16px;
    color: var(--color-text);
    position: relative;
    padding-right: 48px;
}

.city-faq__item summary::-webkit-details-marker { display: none; }

.city-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    font-weight: 400;
    color: var(--color-text-secondary);
    transition: transform var(--transition-base);
}

.city-faq__item[open] summary::after { content: "3"; }

.city-faq__item p {
    padding: 0 24px 20px;
    margin: 0;
    color: var(--color-text-secondary);
    line-height: 1.65;
}

@media (max-width: 768px) {
    .city-hero__actions { flex-wrap: wrap; }
    .city-hero__actions .btn { flex: 1 1 0; justify-content: center; font-size: 13px; padding: 0 14px; height: 44px; }
    .city-hero__image { height: 200px; }
    .city-services { grid-template-columns: 1fr; gap: 0; }
    .city-faq__item summary { padding: 16px 40px 16px 16px; font-size: 15px; }
    .city-faq__item summary::after { right: 16px; }
    .city-faq__item p { padding: 0 16px 16px; }
}