/* ============================================================================
   Footer - four-column link grid (mobile-first).
   Replaces the old .f-mail-social-icons / .f-navigation / .f-privacy-terms
   layout in style.css (those rules are now unused by footer.php).
   Phone: 2 x 2 grid. Tablet and up: 4 equal columns, everything left aligned.
   ============================================================================ */
.footer .f-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px 24px;
    padding: 36px 0 28px;
    color: var(--white);
}
.footer .f-col { min-width: 0; }
.footer .f-col-title {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: var(--fw-500);
    line-height: 1.3;
    color: var(--white);
    margin: 0 0 16px;
}
.footer .f-col ul { list-style: none; margin: 0; padding: 0; }
.footer .f-col ul li { margin: 0 0 12px; padding: 0; line-height: 1.35; }
.footer .f-col ul li:last-child { margin-bottom: 0; }
.footer .f-col a {
    font-family: var(--font-primary);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer .f-col a:hover, .footer .f-col a:focus { color: var(--primary); }
.footer .f-col .common-social-icons { margin-top: 20px; }
.footer .f-col .common-social-icons a { font-size: 20px; line-height: 1; color: var(--white); }
.footer .f-col .common-social-icons a:hover, .footer .f-col .common-social-icons a:focus { color: var(--primary); }
.footer .f-col .common-social-icons ul { gap: 16px; margin: 0 !important; }
.footer .f-col .common-social-icons ul li { margin: 0 !important; }

/* Cities strip: same heading and link styling as the columns below it */
.footer .f-cities { padding: 36px 0 0; }
.footer .f-cities .f-col-title { margin-bottom: 14px; }
.footer .f-cities-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 20px; }
.footer .f-cities-list li { margin: 0; padding: 0; line-height: 1.35; }
.footer .f-cities-list a { font-family: var(--font-primary); font-size: 15px; color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color 0.2s ease; }
.footer .f-cities-list a:hover, .footer .f-cities-list a:focus { color: var(--primary); }


@media (min-width: 768px) {
    .footer .f-cities { padding: 44px 0 0; }
    .footer .f-cities-list { gap: 12px 24px; }
    .footer .f-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; padding: 44px 0 36px; }
}
@media (min-width: 1200px) {
    .footer .f-grid { gap: 40px; padding: 48px 0 40px; }
    .footer .f-col-title { font-size: 16px; margin-bottom: 18px; }
    .footer .f-col a { font-size: 15px; }
}