/* ViewportStyles.css - Viewport ratio grid system (11.5 × 25) */

:root {
    --unb-vh-unit: calc(100vh / 11.5);
    --unb-vw-unit: calc(100vw / 25);

    --unb-safe-block-start: env(safe-area-inset-top, 0px);
    --unb-safe-block-end: env(safe-area-inset-bottom, 0px);
    --unb-safe-inline-start: env(safe-area-inset-left, 0px);
    --unb-safe-inline-end: env(safe-area-inset-right, 0px);

    --unb-viewport-ratio: auto;
    --unb-dpr: 1;
}

/* Base viewport units */
.vhOne { block-size: var(--unb-vh-unit); }
.vhTwo { block-size: calc(var(--unb-vh-unit) * 2); }
.vhThree { block-size: calc(var(--unb-vh-unit) * 3); }
.vhFour { block-size: calc(var(--unb-vh-unit) * 4); }
.vhFive { block-size: calc(var(--unb-vh-unit) * 5); }
.vhSix { block-size: calc(var(--unb-vh-unit) * 6); }
.vhSeven { block-size: calc(var(--unb-vh-unit) * 7); }
.vhEight { block-size: calc(var(--unb-vh-unit) * 8); }
.vhNine { block-size: calc(var(--unb-vh-unit) * 9); }
.vhTen { block-size: calc(var(--unb-vh-unit) * 10); }
.vhEleven { block-size: calc(var(--unb-vh-unit) * 11); }

.vwOne { inline-size: var(--unb-vw-unit); }
.vwTwo { inline-size: calc(var(--unb-vw-unit) * 2); }
.vwThree { inline-size: calc(var(--unb-vw-unit) * 3); }
.vwFour { inline-size: calc(var(--unb-vw-unit) * 4); }
.vwFive { inline-size: calc(var(--unb-vw-unit) * 5); }
.vwSix { inline-size: calc(var(--unb-vw-unit) * 6); }
.vwSeven { inline-size: calc(var(--unb-vw-unit) * 7); }
.vwEight { inline-size: calc(var(--unb-vw-unit) * 8); }
.vwNine { inline-size: calc(var(--unb-vw-unit) * 9); }
.vwTen { inline-size: calc(var(--unb-vw-unit) * 10); }
.vwEleven { inline-size: calc(var(--unb-vw-unit) * 11); }
.vwTwelve { inline-size: calc(var(--unb-vw-unit) * 12); }
.vwThirteen { inline-size: calc(var(--unb-vw-unit) * 13); }
.vwFourteen { inline-size: calc(var(--unb-vw-unit) * 14); }
.vwFifteen { inline-size: calc(var(--unb-vw-unit) * 15); }
.vwSixteen { inline-size: calc(var(--unb-vw-unit) * 16); }
.vwSeventeen { inline-size: calc(var(--unb-vw-unit) * 17); }
.vwEighteen { inline-size: calc(var(--unb-vw-unit) * 18); }
.vwNineteen { inline-size: calc(var(--unb-vw-unit) * 19); }
.vwTwenty { inline-size: calc(var(--unb-vw-unit) * 20); }
.vwTwentyOne { inline-size: calc(var(--unb-vw-unit) * 21); }
.vwTwentyTwo { inline-size: calc(var(--unb-vw-unit) * 22); }
.vwTwentyThree { inline-size: calc(var(--unb-vw-unit) * 23); }
.vwTwentyFour { inline-size: calc(var(--unb-vw-unit) * 24); }
.vwTwentyFive { inline-size: calc(var(--unb-vw-unit) * 25); }

/* Fractional units */
.vhSemi { block-size: calc(var(--unb-vh-unit) * 0.5); }
.vhQuarter { block-size: calc(var(--unb-vh-unit) * 0.25); }
.vhThird { block-size: calc(var(--unb-vh-unit) / 3); }

.vwSemi { inline-size: calc(var(--unb-vw-unit) * 0.5); }
.vwQuarter { inline-size: calc(var(--unb-vw-unit) * 0.25); }
.vwThird { inline-size: calc(var(--unb-vw-unit) / 3); }

/* Safe area insets padding */
.safe-padding-all {
    padding-block-start: var(--unb-safe-block-start);
    padding-block-end: var(--unb-safe-block-end);
    padding-inline-start: var(--unb-safe-inline-start);
    padding-inline-end: var(--unb-safe-inline-end);
}

.safe-margin-all {
    margin-block-start: var(--unb-safe-block-start);
    margin-block-end: var(--unb-safe-block-end);
    margin-inline-start: var(--unb-safe-inline-start);
    margin-inline-end: var(--unb-safe-inline-end);
}

/* Grid helpers */
.grid-full { inline-size: 100vw; block-size: 100vh; }
.grid-centered {
    place-self: center;
}
.grid-stretch { place-self: stretch; }
.grid-start { justify-self: start; }
.grid-end { justify-self: end; }
.grid-center { justify-self: center; }