/* aisd layout.css — generated by Ai Studio Design By MaFady.com.
   library base layout + print + rtl. Standalone: no external URL, tokens --aisd-* only. */
/* aisd base/layout — container, scenes, small grid vocabulary. Tokens only ·
   logical properties · mobile-first (min-width) · every class prefixed aisd-. */

.aisd-container {
    inline-size: 100%;
    max-inline-size: var(--aisd-container);
    margin-inline: auto;
    padding-inline: var(--aisd-container-pad);
}

.aisd-container--narrow {
    max-inline-size: 48rem;
}

/* A scene is a full-width band: its tone class re-scopes the colour tokens
   (SceneResolver), so background/text simply read the LOCAL token values. */
.aisd-scene {
    position: relative;
    background: var(--aisd-surface-1);
    color: var(--aisd-ink);
    padding-block: var(--aisd-space-section);
}

.aisd-scene--flush {
    padding-block: 0;
}

.aisd-scene__bg {
    position: absolute;
    inset: 0;
    background: var(--aisd-gradient-surface);
    pointer-events: none;
}

.aisd-scene > .aisd-container {
    position: relative;
}

/* When a scene hosts an immersive stage (behind, z-index:0), the content is
   wrapped so it paints above the stage layer. */
.aisd-scene__content {
    position: relative;
    z-index: 1;
}

.aisd-grid {
    display: grid;
    gap: var(--aisd-space-md);
}

@media (min-width: 640px) {
    .aisd-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .aisd-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .aisd-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .aisd-grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Mobile-first overflow safety net. A grid/flex track defaults to a minimum of
   its content's min-content size (`min-width: auto`), so a wide child — media,
   a code block, an unbreakable string — can force the whole page to scroll
   sideways on a narrow viewport. Letting every grid/flex item shrink below that
   intrinsic minimum guarantees no horizontal overflow, for the curated bricks
   today and any brick added later. Covers every AISD grid container name. */
:is([class*="__grid"], [class*="__list"], [class*="__row"], [class*="__cols"],
    .aisd-grid, [class*="card-grid"], [class*="footer-cols"], [class*="stat-chips"]) > * {
    min-inline-size: 0;
}

.aisd-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--aisd-space-xs);
    align-items: center;
}

.aisd-stack > * + * {
    margin-block-start: var(--aisd-space-sm);
}

.aisd-prose {
    max-inline-size: 65ch;
}

.aisd-prose > * + * {
    margin-block-start: var(--aisd-space-sm);
}

/* aisd base/print — printable pages: hide chrome and effects, keep content.
   No colours declared here (the browser's print rendering decides). */

@media print {
    .aisd-skip-link,
    .aisd-scene__bg,
    .aisd-stage,
    .aisd-stage-fallback,
    nav,
    [data-aisd-behavior] {
        display: none !important;
    }

    .aisd-scene {
        padding-block: var(--aisd-space-md);
    }

    * {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: var(--aisd-step--1);
    }
}

/* aisd base/rtl — the base uses logical properties everywhere, so RTL needs
   almost nothing: only glyph-level mirroring for directional icons. */

[dir="rtl"] .aisd-flip-rtl {
    transform: scaleX(-1);
}