/**
 * Imperial House Real Estate — responsive
 * Il resto dei fogli è scritto "desktop-first" per la nav e le griglie
 * (più semplice da leggere per un sito con poche pagine); qui si adatta
 * tutto verso il basso, più il breakpoint che rivela la nav desktop.
 */

/* ---------------------------------------------------------------- */
/* ≥ 960px — nav desktop al posto dell'hamburger                     */
/* ---------------------------------------------------------------- */

@media (min-width: 960px) {
    .site-header__nav {
        display: block;
    }

    .site-header__toggle {
        display: none;
    }
}

/* ---------------------------------------------------------------- */
/* ≤ 959px                                                            */
/* ---------------------------------------------------------------- */

@media (max-width: 959px) {
    .site-footer__grid {
        grid-template-columns: 1fr 1fr;
    }

    .site-footer__about {
        grid-column: 1 / -1;
    }

    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---------------------------------------------------------------- */
/* ≤ 720px                                                            */
/* ---------------------------------------------------------------- */

@media (max-width: 720px) {
    .room {
        min-height: 560px;
        align-items: flex-end;
    }

    .room__content--right {
        margin-inline-start: 0;
        text-align: left;
        align-items: flex-start;
    }

    .room__content--wide {
        text-align: left;
    }

    .room__properties {
        grid-template-columns: 1fr;
    }

    .page-hero {
        padding-top: 120px;
        min-height: 50vh;
    }

    .site-footer__grid,
    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .filters {
        grid-template-columns: 1fr 1fr;
    }

    .property-gallery {
        grid-template-columns: 1fr;
    }

    .admin-table-wrap,
    .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .floating-actions {
        bottom: var(--space-sm);
        right: var(--space-sm);
    }
}

/* ---------------------------------------------------------------- */
/* ≤ 480px                                                            */
/* ---------------------------------------------------------------- */

@media (max-width: 480px) {
    .filters {
        grid-template-columns: 1fr;
    }

    .room__headline {
        font-size: clamp(2rem, 9vw, 2.75rem);
    }

    .btn {
        padding: var(--space-xs) var(--space-md);
    }

    .mobile-menu__link {
        font-size: 1.4rem;
    }
}