/* --- Responsive Styles (must load after all component CSS) --- */
@media (min-width: 640px) { /* sm breakpoint */
    .app-container {
        padding: 0 2rem;
    }
    .app-container.app-landscape {
        padding: 0;
    }
    .header-subtitle {
        font-size: 1.25rem;
    }
    .service-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
@media (min-width: 768px) { /* md breakpoint */
    .service-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
@media (min-width: 1024px) { /* lg breakpoint */
    .service-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
    .wayfinding-grid {
        grid-template-columns: 1fr 1.3fr 1fr;
    }
    .panel-container-start {
        justify-content: flex-end;
    }
    .panel-container-destination {
        justify-content: center;
    }
}