/* === UPDATE 010: mobile card + bottom menu layout fix === */
:root{
    --kallistus-bottom-safe: 128px;
}

html, body{
    max-width:100%;
    overflow-x:hidden;
}

body{
    padding-bottom: env(safe-area-inset-bottom);
}

.main,
.page,
.page-content,
.app,
.container,
.content,
.wrap,
.wrapper{
    min-width:0;
}

.profile-card,
.user-card,
.match-card,
.person-card,
.recommend-card,
.card-profile{
    position:relative;
    overflow:hidden !important;
    border-radius:24px;
    min-width:0;
    max-width:100%;
}

.profile-card img,
.user-card img,
.match-card img,
.person-card img,
.recommend-card img,
.card-profile img,
.profile-photo,
.profile-image,
.user-photo{
    width:100% !important;
    max-width:100%;
    aspect-ratio:4/5;
    height:auto;
    min-height:0;
    object-fit:cover;
    display:block;
}

.profile-placeholder,
.empty-photo,
.no-photo,
.avatar-placeholder{
    width:100% !important;
    aspect-ratio:4/5;
    min-height:0 !important;
    height:auto !important;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:24px;
    overflow:hidden;
    background:linear-gradient(135deg,#fff1f7,#efe7ff);
}

.profile-placeholder svg,
.empty-photo svg,
.no-photo svg,
.avatar-placeholder svg{
    width:64px;
    height:64px;
    opacity:.7;
}

.recommendations,
.profile-grid,
.users-grid,
.cards-grid,
.matches-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
    min-width:0;
}

.mobile-bottom-nav,
.bottom-nav,
.mobile-nav,
.nav-bottom{
    position:fixed !important;
    left:12px;
    right:12px;
    bottom:12px;
    z-index:9999;
    max-width:680px;
    margin:0 auto;
    border-radius:26px;
    box-shadow:0 18px 45px rgba(16,24,40,.16);
    overflow:visible;
}

.floating-mode,
.mode-float,
.mode-button,
.mode-floating{
    z-index:10000;
}

@media(max-width:768px){
    body,
    .app-shell,
    .page-shell,
    main,
    .main,
    .page,
    .page-content,
    .container,
    .content{
        padding-bottom:var(--kallistus-bottom-safe) !important;
    }

    .hero,
    .hero-card,
    .landing-hero{
        max-width:100%;
        overflow:hidden;
    }

    .recommendations,
    .profile-grid,
    .users-grid,
    .cards-grid,
    .matches-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px;
    }

    .profile-card,
    .user-card,
    .match-card,
    .person-card,
    .recommend-card,
    .card-profile{
        border-radius:20px;
    }

    .profile-card .name,
    .user-card .name,
    .profile-card h3,
    .user-card h3,
    .match-card h3,
    .person-card h3{
        font-size:17px !important;
        line-height:1.15;
        word-break:break-word;
    }
}

@media(max-width:420px){
    .recommendations,
    .profile-grid,
    .users-grid,
    .cards-grid,
    .matches-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }

    .mobile-bottom-nav,
    .bottom-nav,
    .mobile-nav,
    .nav-bottom{
        left:8px;
        right:8px;
        bottom:8px;
    }
}