﻿/* =================================================
   Hotsite Responsive Overrides
   Shared breakpoint adjustments for Instinto Criativo
   ================================================= */

/* ================================================
   Member List & Profile
   Breakpoints: 1200, 1024, 820, 640, 480
   ================================================ */

@media (max-width: 1200px) {
    .member-profile-body {
        padding: 2.5rem 2.25rem 2.75rem;
        gap: 2.25rem;
    }

    .member-profile-name {
        font-size: 2.1rem;
    }

    .member-profile-banner {
        min-height: clamp(260px, 48vw, 440px);
    }
}

@media (max-width: 1024px) {
    .member-profile-body {
        padding: 2.25rem 2rem 2.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .member-profile-top {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1.5rem;
    }

    .member-profile-links {
        justify-content: center;
    }

    .member-profile-banner {
        aspect-ratio: 16 / 9;
        min-height: clamp(240px, 56vw, 420px);
        max-height: clamp(320px, 68vh, 560px);
    }

    .member-grid {
        gap: 1.75rem;
    }
}

@media (max-width: 820px) {
    .member-profile-body {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 2rem 1.75rem 2.25rem;
        gap: 2rem;
    }

    .member-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.5rem;
    }

    .member-profile-avatar-block {
        flex: 0 0 auto;
    }

    .member-profile-avatar {
        width: 11rem;
        height: 11rem;
    }

    .member-profile-name {
        font-size: 1.95rem;
    }

    .member-profile-highlights {
        width: 100%;
    }

    .member-toolbar__filters {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .member-profile {
        padding: 32px 0 32px;
    }

    .member-profile-banner {
        aspect-ratio: 4 / 3;
        min-height: clamp(220px, 70vw, 360px);
    }

    .member-profile-body {
        padding: 1.75rem 1.5rem 2.1rem;
    }

    .member-profile-avatar {
        width: 9.75rem;
        height: 9.75rem;
    }

    .member-profile-name {
        font-size: 1.8rem;
    }

    .member-profile-highlights {
        grid-template-columns: 1fr;
    }

    .member-search-row {
        width: 100%;
    }

    .member-filter {
        flex: 1 1 45%;
        text-align: center;
    }

    .member-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.35rem;
    }
}

@media (max-width: 480px) {
    .member-grid {
        grid-template-columns: minmax(100%, 1fr);
    }

    .member-profile-body {
        padding: 1.5rem 1.25rem 1.9rem;
        gap: 1.35rem;
    }

    .member-profile-avatar {
        width: 8.5rem;
        height: 8.5rem;
        border-width: 4px;
    }

    .member-profile-name {
        font-size: 1.65rem;
    }

    .member-profile-links {
        /* flex-direction: column; */
        gap: 0.85rem;
    }

    .member-search__shell {
        max-width: 100%;
    }

    .member-search__icon {
        left: 0.85rem;
    }

    .member-search__input {
        padding-left: 2.5rem;
    }
}