/* Presence rules */
/* .unspotlighted-grid-users is also the container used to wrap the tiles when something is on stage (media or featured tile) */

/********************************/
/* 1 tile + something on stage  */
/********************************/

@container room-presence (height >= 1px) {
    .unspotlighted-grid-users {
      padding: 10px;
      margin: auto;
      height: 100cqh;

      & > *:not(.plus-tile) {
          max-width: 96cqh;
      }
    }
}

@container room-presence (height >= 1px) {
    .unspotlighted-grid-users[data-count="1"] {
      grid-auto-rows: 1fr;
      justify-content: center;
    }
}

@container room-presence (height >= 440px) {
    .unspotlighted-grid-users[data-count="1"] {
        grid-template-columns: repeat(auto-fit, minmax(112px, 95cqh));
        align-items: center;
    }
} 

/*****************************************/
/*    2 or 3 tiles + something on stage  */
/*****************************************/

@container room-presence (height >= 1px) {
    .unspotlighted-grid-users:is([data-count="2"], [data-count="3"]) {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
        align-items: center;
        max-height: 100cqh;

        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
        }
    }
}

/*****************************************/
/*   4 tiles + something on stage rules  */
/*****************************************/

@container room-presence (height >= 1px) {
    .unspotlighted-grid-users[data-count="4"] {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
        align-items: center;
        max-height: 100cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (height >= 289px) {
    .unspotlighted-grid-users[data-count="4"] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 256px));
        grid-template-rows: repeat(2, minmax(0, 256px));
        gap: 8px;
        justify-items: center;
        align-items: stretch;
        align-content: center;
        height: 100%;
        max-height: 100cqh;
        max-width: 100cqh;
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (height >= 440px) {
    .unspotlighted-grid-users[data-count="4"] {
        max-height: 100cqw;
        max-width: 100cqw;
        align-self: center;

    }
}

/**********************************************/
/*   5 and 6tiles + something on stage rules  */
/**********************************************/

@container room-presence (height >= 1px) {
    .unspotlighted-grid-users:is([data-count="5"], [data-count="6"]) {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
        align-items: center;
        max-height: 100cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (height >= 289px) {
    .unspotlighted-grid-users:is([data-count="5"], [data-count="6"]) {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 160px));
        grid-template-rows: repeat(2, minmax(0, 160px));
        gap: 8px;
        justify-items: center;
        align-items: stretch;
        align-content: center;
        height: 100%;
        max-height: 100cqh;
        max-width: 200cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

/***********************************************/
/*   7 and 8 tiles + something on stage rules  */
/***********************************************/

@container room-presence (height >= 1px) {
    .unspotlighted-grid-users:is([data-count="7"], [data-count="8"]) {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
        align-items: center;
        max-height: 100cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            width: 96cqh;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (height >= 289px) {
    .unspotlighted-grid-users:is([data-count="7"], [data-count="8"]) {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 130px));
        grid-template-rows: repeat(2, minmax(0, 130px));
        gap: 8px;
        justify-items: center;
        align-items: stretch;
        align-content: center;
        height: 100%;
        max-height: 100cqh;
        max-width: 200cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (height >= 419px) {
    .unspotlighted-grid-users:is([data-count="7"], [data-count="8"]) {
        grid-template-columns: repeat(4, minmax(0, 120px));
        grid-template-rows: repeat(2, minmax(0, 120px));
    }
}

/***********************************************/
/*   9 tiles + something on stage rules  */
/***********************************************/

@container room-presence (height >= 1px) {
    .unspotlighted-grid-users[data-count="9"] {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
        align-items: center;
        max-height: 100cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (height >= 249px) {
    .unspotlighted-grid-users[data-count="9"] {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 120px));
        grid-template-rows: repeat(2, minmax(0, 120px));
        gap: 8px;
        justify-items: center;
        align-items: stretch;
        align-content: center;
        height: 100%;
        max-height: 100cqh;
        max-width: 240cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (height >= 373px) {
    .unspotlighted-grid-users[data-count="9"] {
        max-width: 100cqh;
        grid-template-columns: repeat(3, minmax(90px, 140px));
        grid-template-rows: repeat(3, minmax(90px, 140px));
    }
}

/***********************************************/
/*   10 tiles + something on stage rules  */
/***********************************************/

@container room-presence (height >= 1px) {
    .unspotlighted-grid-users[data-count="10"] {  
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        justify-content: center;
        align-items: center;
        max-height: 100cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (height >= 200px) {
    .unspotlighted-grid-users[data-count="10"] {
        display: grid;
        grid-template-columns: repeat(5, minmax(90px, 120px));
        grid-template-rows: repeat(2, minmax(90px, 120px));
        gap: 8px;
        justify-items: center;
        align-items: stretch;
        align-content: center;
        height: 100%;
        max-height: 100cqh;
        max-width: 240cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (height >= 353px) {
    .unspotlighted-grid-users[data-count="10"] {
        max-width: 200cqh;
        grid-template-columns: repeat(4, minmax(90px, 110px));
        grid-template-rows: repeat(3, minmax(90px, 110px));
    }
}

/***********************************************/
/*   11 and 12 tiles + something on stage rules  */
/***********************************************/

@container room-presence (height >= 1px) {
    .unspotlighted-grid-users:is([data-count="11"], [data-count="12"]) {
        grid-template-columns: repeat(8, minmax(70px, 72px));
        grid-template-rows: repeat(2, minmax(70px, 72px));
        grid-auto-flow: row;
        gap: 8px;
        justify-items: center;
        align-items: center;
        align-content: center;
        max-width: -webkit-fill-available;
        
        & > *:not(.plus-tile) {
            max-width: -webkit-fill-available;
        }
    }
}

@container room-presence (height >= 200px) {
    .unspotlighted-grid-users:is([data-count="11"], [data-count="12"]) {
        display: grid;
        grid-template-columns: repeat(6, minmax(90px, 120px));
        grid-template-rows: repeat(2, minmax(90px, 120px));
        gap: 8px;
        justify-items: center;
        align-items: stretch;
        align-content: center;
        height: 100%;
        max-height: 100cqh;
        max-width: 300cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (width >= 275px) {
    .unspotlighted-grid-users:is([data-count="11"], [data-count="12"]) {
        grid-template-columns: repeat(6, minmax(50px, 78px));
        grid-template-rows: repeat(2, minmax(50px, 78px));
        grid-auto-flow: row;
        gap: 8px;
        justify-items: center;
        align-items: center;
        align-content: center;
        max-width: -webkit-fill-available;

       & > *:not(.plus-tile) {
          max-width: -webkit-fill-available;
      }
    }
}

@container room-presence (height >= 299px) {
    .unspotlighted-grid-users:is([data-count="11"], [data-count="12"]) {
        max-width: 200cqh;
        grid-template-columns: repeat(4, minmax(90px, 97px));
        grid-template-rows: repeat(3, minmax(90px, 97px));
    }
}

/*********************************************/
/*   13 up to 16 tiles + something on stage  */
/********************************************/
@container room-presence (height >= 1px) {
    .unspotlighted-grid-users:is([data-count="13"], [data-count="14"], [data-count="15"], [data-count="16"]) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(90px, 91px));
        grid-auto-flow: row;
        grid-auto-rows: minmax(90px, 92px);
        gap: 6px;
        justify-items: center;
        align-items: stretch;
        align-content: center;
        height: 100%;
        max-height: 100cqh;
        max-width: 360cqh;
        
        & > *:not(.plus-tile) {
            display: flex;
            justify-content: center;
            aspect-ratio: 1 / 1;
        }
    }
}

@container room-presence (height >= 390px) {
    .unspotlighted-grid-users:is([data-count="13"], [data-count="14"], [data-count="15"], [data-count="16"]) {
        max-width: 100cqh;
        grid-template-columns: repeat(4, minmax(90px, 100px));
        grid-template-rows: repeat(4, minmax(90px, 100px));
    }
}

@container room-presence (width >= 435px) and (height < 450px) {
    .unspotlighted-grid-users:is([data-count="13"], [data-count="14"], [data-count="15"], [data-count="16"]) {
        grid-template-columns: repeat(6, minmax(50px, 72px));
        grid-template-rows: repeat(3, minmax(50px, 72px));
        grid-auto-flow: row;
        gap: 8px;
        justify-items: center;
        align-items: center;
        align-content: center;
        max-width: -webkit-fill-available;

       & > *:not(.plus-tile) {
          max-width: -webkit-fill-available;
      }
    }
}

@container room-presence (width >= 630px) and (height < 380px) {
    .unspotlighted-grid-users:is([data-count="13"], [data-count="14"], [data-count="15"], [data-count="16"]) {
        grid-template-columns: repeat(8, minmax(70px, 72px));
        grid-template-rows: repeat(2, minmax(70px, 72px));
        grid-auto-flow: row;
        gap: 8px;
        justify-items: center;
        align-items: center;
        align-content: center;
        max-width: -webkit-fill-available;
        
        & > *:not(.plus-tile) {
            max-width: -webkit-fill-available;
        }
    }
}

@container room-presence (width >= 900px) and (height > 380px) {
    .unspotlighted-grid-users:is([data-count="13"], [data-count="14"], [data-count="15"], [data-count="16"]) {
        grid-template-columns: repeat(6, minmax(50px, 121px));
        grid-template-rows: repeat(3, minmax(50px, 121px));
        grid-auto-flow: row;
        gap: 8px;
        justify-items: center;
        align-items: center;
        align-content: center;
        max-width: -webkit-fill-available;

       & > *:not(.plus-tile) {
          max-width: -webkit-fill-available;
      }
    }
}

/********************************************/
/*   More than 16 tiles   */
/********************************************/

@container room-presence (height >= 1px) {
    .unspotlighted-grid-users:has(> :nth-child(17)) {
        grid-template-columns: repeat(auto-fit, minmax(110px, 110px));
        grid-auto-flow: row;
        max-width: -webkit-fill-available;
        align-content: flex-start;
        gap: 8px;
        
        & > *:not(.plus-tile) {
          max-width: -webkit-fill-available;
        }
    }
}

@container room-presence (height >= 250px) {
    .unspotlighted-grid-users:has(> :nth-child(17)) {
        grid-template-columns: repeat(auto-fit, minmax(110px, 110px));
    }
}

/********************************************/
/*         Full Grid Users rules            */
/********************************************/

@container room-presence (height >= 1px) {
    .full-grid-users {
        grid-template-columns: repeat(auto-fit, minmax(72px, calc(100cqh - 20px)));
        gap: 8px;
        padding: 10px 0;
    }
}

/*
 * Tile Count Specific Rules
 * 
 * These following queries set maximum tile widths for specific tile counts:
 * - 2 tiles: 522px max width at 542px height
 * - 3 tiles: 342px max width at 362px height
 * - 4 tiles: 288px max width at 308px height (also applies to 5, 6 tiles)
 * - 7 tiles: 255px max width at 275px height
 * - 8 tiles: 191px max width at 211px height (also applies to 9, 10, 11 tiles)
 * - 12+ tiles: 190px max width at 220px height
 */

@container room-presence (height >= 542px) {
    .full-grid-users:has(:nth-child(2)) {
        grid-template-columns: repeat(auto-fit, 522px);
    }
}

@container room-presence (height >= 362px) {
    .full-grid-users:has(:nth-child(3)) {
        grid-template-columns: repeat(auto-fit, 342px);
    }
}

@container room-presence (height >= 308px) {
    .full-grid-users:has(:nth-child(4)) {
        grid-template-columns: repeat(auto-fit, 300px);
        align-self: center;
    }
}

@container room-presence (height >= 275px) {
    .full-grid-users:has(:nth-child(7)) {
        grid-template-columns: repeat(auto-fit, 255px);
    }
}

@container room-presence (height >= 211px) {
    .full-grid-users:has(:nth-child(8)) {
        grid-template-columns: repeat(auto-fit, 191px);
    }
}

@container room-presence (height >= 220px) {
    .full-grid-users:has(:nth-child(12)) {
        grid-template-columns: repeat(auto-fit, 190px);
    }
}

.spotlighted-grid-users {
    grid-template-rows: 120px;
}

.presence-layout-stage-right .spotlighted-grid-users {
    grid-template-rows: minmax(120px, 1fr);
}

@container room-presence (height >= 200px) {
    .presence-layout-stage-top .spotlighted-grid-users {
        grid-template-rows: minmax(120px, 1fr);
    }
}

@container room-presence (height >= calc((50cqw - 48px) / 0.6)) {
    .presence-layout-stage-top .spotlighted-grid-users {
        grid-template-rows: calc(50cqw - 24px);
        min-height: 0 !important;
    }
}

@container room-presence (height >= 33cqw) {
    .presence-layout-stage-right .spotlighted-grid-users {
        grid-template-rows: 33cqw;
        min-height: 0 !important;
    }
}