/* ══ RESPONSIVE: global overrides only ══
   Per-component breakpoints live in each CSS file.
   This file handles cross-cutting layout fixes.
══ */

/* ── 1024px ── */
@media (max-width: 1024px) {
    .projects-mosaic {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-item--featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .contact-inner { grid-template-columns: 1fr; gap: 36px; }

    .contact-headline {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 12px;
        line-height: 1;
    }
}

/* ── 768px ── */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
}

/* ── 480px ── */
@media (max-width: 480px) {
    .projects-mosaic { grid-template-columns: 1fr; }
    .project-item--featured { grid-column: auto; }
}