/* ===== Container Layout Primitive ===== */

.ui-container {
    box-sizing: border-box;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--container-max-width, 1280px);
    padding-top: var(--container-padding-block, 0px);
    padding-bottom: var(--container-padding-block, 0px);
    padding-left: var(--container-padding, 16px);
    padding-right: var(--container-padding, 16px);
}

@media (min-width: 768px) {
    .ui-container {
        max-width: var(--container-max-width-md, var(--container-max-width, 1280px));
        padding-top: var(--container-padding-block-md, var(--container-padding-block, 0px));
        padding-bottom: var(--container-padding-block-md, var(--container-padding-block, 0px));
        padding-left: var(--container-padding-md, var(--container-padding, 16px));
        padding-right: var(--container-padding-md, var(--container-padding, 16px));
    }
}

@media (min-width: 1024px) {
    .ui-container {
        max-width: var(--container-max-width-lg, var(--container-max-width-md, var(--container-max-width, 1280px)));
        padding-top: var(--container-padding-block-lg, var(--container-padding-block-md, var(--container-padding-block, 0px)));
        padding-bottom: var(--container-padding-block-lg, var(--container-padding-block-md, var(--container-padding-block, 0px)));
        padding-left: var(--container-padding-lg, var(--container-padding-md, var(--container-padding, 16px)));
        padding-right: var(--container-padding-lg, var(--container-padding-md, var(--container-padding, 16px)));
    }
}

/* ===== Bleed (opt-in via the Bleed prop) =====

   A bled Container escapes a horizontal inset applied by an ANCESTOR Container, so an
   edge-to-edge band -- e.g. the mobile /gamelist yellow page panel (Figma 341:31) --
   reaches the viewport edge instead of stopping at the shell gutter that
   MainLayout's <Container Padding="md"> imposes on every page body.

   This is the sanctioned home for the negative inset (Bingo-Template 23.3: "if a layout
   need can't be expressed through existing primitive props, add the prop to the
   primitive"). The equivalent margin-inline written in page-local CSS against a page
   class is the same violation expressed from the page side.

   The [data-bleed] attribute gates these rules, so a Container with no Bleed keeps the
   auto-centring margins above untouched. Its VALUE lists the breakpoint steps that
   actually bleed ("base", "md", "lg"), matched here with the whitespace-word selector
   [data-bleed~="md"]. That per-step gate matters: bleeding replaces the auto centring
   margins with an explicit negative inset, so a single [data-bleed] rule applying at a
   breakpoint whose bleed is 0 would pin the Container left instead of re-centring it.
   Each media query therefore RESETS to the centred geometry first, then re-applies the
   bleed only for the step that is active. Same specificity (0,2,0) throughout, so source
   order decides -- the reset must stay above the active rule in each block.

   Container.razor.cs emits all three custom properties whenever Bleed is set, and omits
   the attribute entirely when every step resolves to zero, so the var() fallbacks here
   are only ever reached by a Container that is not bled at all. */
.ui-container[data-bleed~="base"] {
    width: calc(100% + (2 * var(--container-bleed, 0px)));
    margin-left: calc(-1 * var(--container-bleed, 0px));
    margin-right: calc(-1 * var(--container-bleed, 0px));
}

@media (min-width: 768px) {
    .ui-container[data-bleed] {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .ui-container[data-bleed~="md"] {
        width: calc(100% + (2 * var(--container-bleed-md, 0px)));
        margin-left: calc(-1 * var(--container-bleed-md, 0px));
        margin-right: calc(-1 * var(--container-bleed-md, 0px));
    }
}

@media (min-width: 1024px) {
    .ui-container[data-bleed] {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .ui-container[data-bleed~="lg"] {
        width: calc(100% + (2 * var(--container-bleed-lg, 0px)));
        margin-left: calc(-1 * var(--container-bleed-lg, 0px));
        margin-right: calc(-1 * var(--container-bleed-lg, 0px));
    }
}