/* ============================================================================
   Shared Responsive Breakpoints
   ============================================================================ */

@media (max-width: 768px) {
    .header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-text h1 {
        font-size: 1.25rem;
    }

    .controls-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .control-inline {
        flex-wrap: wrap;
    }

    .filter-section {
        flex-wrap: wrap;
    }

    footer .container {
        flex-direction: column;
        align-items: flex-start;
    }
}