/* ========================================
   RESPONSIVE STYLES
   ======================================== */

@media (max-width: 1200px) {
    .ci-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    
    .ci-property-layout {
        grid-template-columns: 1fr;
    }
    
    .ci-sidebar-sticky {
        position: static;
    }
}

/* O menu passa a botao abaixo dos 1200px.
   Com as acoes do utilizador numa linha propria por cima (ver main.css), a
   linha do menu fica so com o logotipo e os dez itens - e ai cabe a partir
   dos 1200, que e o valor pedido na especificacao. */
@media (max-width: 1199px) {
    .ci-header__main-inner {
        flex-wrap: wrap;
    }

    .ci-menu-toggle {
        margin-left: auto;
    }

    .ci-header__nav {
        order: 3;
        flex-basis: 100%;
        display: none;
    }

    .ci-header__nav.ci-header__nav--open {
        display: block;
    }

    .ci-nav-list {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
        padding: 16px 0;
        border-top: 1px solid var(--ci-gray-200);
    }

    .ci-nav-list > li > a {
        padding: 14px 0;
        white-space: normal;
        border-bottom: 1px solid var(--ci-gray-100);
    }

    .ci-nav-list .sub-menu {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding-left: 16px;
    }

    .ci-menu-toggle {
        display: flex;
    }
}

@media (max-width: 1024px) {
    .ci-properties--list .ci-property-card {
        flex-direction: column;
    }
    
    .ci-properties--list .ci-property-card__image {
        width: 100%;
        aspect-ratio: 4/3;
    }
    
    .ci-properties--list .ci-property-card__footer {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--ci-gray-100);
    }
    
    .ci-about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .ci-form-row--4 {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {

    .ci-header__main-inner {
        flex-wrap: wrap;
    }
    
    .ci-header__nav {
        order: 3;
        flex-basis: 100%;
        display: none;
    }
    
    .ci-header__nav.ci-header__nav--open {
        display: block;
    }
    
    .ci-nav-list {
        flex-direction: column;
        gap: 0;
        padding: 16px 0;
        border-top: 1px solid var(--ci-gray-200);
    }
    
    .ci-nav-list > li > a {
        padding: 14px 0;
        border-bottom: 1px solid var(--ci-gray-100);
    }
    
    .ci-nav-list .sub-menu {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding-left: 16px;
    }
    
    .ci-menu-toggle {
        display: flex;
    }
    
    .ci-hero {
        padding: 80px 0 120px;
    }

    .ci-hero--archive {
        padding: 80px 0 60px;
    }

    .ci-hero__search {
        position: static;
        margin-top: 32px;
    }
    
    .ci-search-form__main {
        grid-template-columns: 1fr 1fr;
    }
    
    .ci-search-form__actions {
        flex-direction: column;
    }
    
    .ci-section {
        padding: 60px 0;
    }
    
    .ci-properties--grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
    
    .ci-property-features__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .ci-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .ci-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
    }
    
    .ci-form-row,
    .ci-form-row--3,
    .ci-form-row--4,
    .ci-form-row--compact,
    .ci-form-row--cp {
        grid-template-columns: 1fr;
    }
    
    .ci-gallery-main img {
        height: 350px;
    }
    
    .ci-archive-toolbar {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .ci-container {
        padding: 0 16px;
    }

    .ci-header__user-name {
        display: none;
    }

    .ci-header__user-chip {
        padding-left: 8px;
        border-left: none;
    }
    
    .ci-hero {
        padding: 60px 0 100px;
    }

    .ci-hero--archive {
        padding: 60px 0 40px;
    }

    .ci-search-form {
        padding: 20px;
    }
    
    .ci-search-form__main {
        grid-template-columns: 1fr;
    }
    
    .ci-properties--grid {
        grid-template-columns: 1fr;
    }
    
    .ci-property-features__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .ci-gallery-main img {
        height: 250px;
    }
    
    .ci-404__title {
        font-size: 80px;
    }
}