/* QLII Home — business mosaic V2
   Load AFTER home.css and public.css. Scope: only .home-business-mosaic.
   No impact on other home grids and cards. */

.qlii-home .home-business-grid.home-business-mosaic {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 230px 230px 245px 215px;
    grid-template-areas:
        "restaurant restaurant restaurant restaurant restaurant restaurant restaurant spa spa spa spa spa"
        "restaurant restaurant restaurant restaurant restaurant restaurant restaurant hair hair hair hair hair"
        "tattoo tattoo tattoo tattoo stay stay stay stay play play play play"
        "me me me me me craft craft craft craft craft craft craft";
    gap: 16px;
    align-items: stretch;
}

.qlii-home .home-business-mosaic > .home-business-card {
    min-width: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: clamp(22px, 2.1vw, 34px);
    border-radius: 28px;
    border: 1px solid rgba(38, 32, 29, .065);
    box-shadow: 0 10px 32px rgba(48, 40, 34, .055);
    transition: transform .3s ease, box-shadow .3s ease;
}

.qlii-home .home-business-mosaic > .home-business-card--restaurant {grid-area: restaurant;}
.qlii-home .home-business-mosaic > .home-business-card--spa {grid-area: spa;}
.qlii-home .home-business-mosaic > .home-business-card--hair {grid-area: hair;}
.qlii-home .home-business-mosaic > .home-business-card--tattoo {grid-area: tattoo;}
.qlii-home .home-business-mosaic > .home-business-card--stay {grid-area: stay;}
.qlii-home .home-business-mosaic > .home-business-card--play {grid-area: play;}
.qlii-home .home-business-mosaic > .home-business-card--me {grid-area: me;}
.qlii-home .home-business-mosaic > .home-business-card--craft {grid-area: craft;}

/* Editorial contrast: photo fills the tile and labels read above its overlay */
.qlii-home .home-business-mosaic > .home-business-card::before {
    background-position: center;
    transform: scale(1);
    transition: transform .6s cubic-bezier(.19,.7,.22,1);
}



.qlii-home .home-business-mosaic .home-business-mark {
    margin-bottom: .9rem;
    font-size: .7rem;
    letter-spacing: .2em;
}
.qlii-home .home-business-mosaic .home-business-card h3 {
    max-width: 78%;
    font-size: clamp(1.22rem, 1.85vw, 1.7rem);
    line-height: 1.13;
    letter-spacing: -.035em;
    margin-bottom: .8rem;
}
.qlii-home .home-business-mosaic .home-business-card p {
    max-width: 72%;
    font-size: .95rem;
    line-height: 1.5;
}
.qlii-home .home-business-mosaic > .home-business-card--restaurant h3 {
    font-size: clamp(2.1rem, 3.3vw, 3.15rem);
    max-width: 95%;
}
.qlii-home .home-business-mosaic > .home-business-card--restaurant p {
    font-size: 1.11rem;
    max-width: 58%;
}
.qlii-home .home-business-mosaic .home-business-discover {
    padding: .62rem 1rem;
    font-size: .85rem;
    box-shadow: none;
}

@media (hover: hover) {
    .qlii-home .home-business-mosaic > a.home-business-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 42px rgba(48, 40, 34, .12);
    }
    .qlii-home .home-business-mosaic > a.home-business-card:hover::before {
        transform: scale(1.055);
    }
}

/* Tablet: explicit two-column layout, no implicit placement surprises */
@media (max-width: 900px) {
    .qlii-home .home-business-grid.home-business-mosaic {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: 300px repeat(3, 250px) 270px;
        grid-template-areas:
            "restaurant restaurant"
            "spa hair"
            "tattoo stay"
            "play me"
            "craft craft";
        gap: 14px;
    }
    .qlii-home .home-business-mosaic > .home-business-card { padding: 1.4rem; }
    .qlii-home .home-business-mosaic > .home-business-card--restaurant h3 { font-size: 2.05rem; }
}

/* Mobile: intentional one-column editorial rhythm */
@media (max-width: 600px) {
    .qlii-home .home-business-grid.home-business-mosaic {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 340px 220px 220px 265px 220px 250px 220px 250px;
        grid-template-areas:
            "restaurant" "spa" "hair" "tattoo" "stay" "play" "me" "craft";
        gap: 12px;
    }
    .qlii-home .home-business-mosaic > .home-business-card {
        padding: 1.4rem;
        border-radius: 22px;
    }
    .qlii-home .home-business-mosaic > .home-business-card--restaurant h3 { font-size: 2rem; }
    .qlii-home .home-business-mosaic .home-business-card h3 { max-width: 75%; }
    .qlii-home .home-business-mosaic .home-business-card p { max-width: 70%; font-size: .9rem; }
    .qlii-home .home-business-mosaic > .home-business-card--restaurant p { max-width: 65%; }
}

@media (prefers-reduced-motion: reduce) {
    .qlii-home .home-business-mosaic > .home-business-card,
    .qlii-home .home-business-mosaic > .home-business-card::before { transition: none; }
}



.qlii-home .home-business-mosaic > .home-business-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

    /* Image en arrière-plan */
    .qlii-home .home-business-mosaic > .home-business-card::before {
        z-index: -2;
    }

    /* Overlay sombre au-dessus de l'image */
    .qlii-home .home-business-mosaic > .home-business-card::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background: linear-gradient( 110deg, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .15) 75%, transparent 100% );
    }

    /* Contenu au-dessus de l'overlay */
    .qlii-home .home-business-mosaic > .home-business-card > * {
        position: relative;
        z-index: 1;
    }
/* Texte blanc sur toutes les cartes */

.qlii-home .home-business-mosaic .home-business-card {
    --mosaic-text: #fff;
    --mosaic-muted: rgba(255, 255, 255, .92);
}

    .qlii-home .home-business-mosaic .home-business-card h3 {
        color: var(--mosaic-text);
        text-shadow: 0 2px 12px rgba(0, 0, 0, .25);
    }

    .qlii-home .home-business-mosaic .home-business-card p {
        color: var(--mosaic-muted);
        text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    }

.home-business-card .home-business-discover {
    position: absolute;
    bottom: 20px;
    right: 20px;
    margin: 0;
}

.home-business-card .home-business-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    padding: 0;
    margin: 0 0 1rem;
    border-radius: 13px;
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(255, 255, 255, .40);
    box-shadow: 0 5px 16px rgba(30, 20, 15, .10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    position: relative;
    z-index: 2;
}

    .home-business-card .home-business-mark img {
        display: block;
        width: 23px;
        height: 23px;
    }

@media (max-width: 640px) {
    .home-business-card .home-business-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
        margin-bottom: .8rem;
    }
}