@layer composition {

    /* --- STACK (Vertical Rythm) --- */
    .stack {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .stack>* {
        margin-block: 0;
    }

    .stack>*+* {
        /* Usamos tus tokens de espaciado globales */
        margin-block-start: var(--flow-space, var(--a-gap-m));
    }

    .stack-s {
        --flow-space: var(--a-gap-s);
    }

    .stack-l {
        --flow-space: var(--a-gap-l);
    }

    .stack-xl {
        /* gap-xl no existe en tokens públicos, usamos raw correctamente */
        --flow-space: var(--a-raw-spacing-xl);
    }


    /* --- CLUSTER (Flex Wrap Groups) --- */
    .cluster {
        display: flex;
        flex-wrap: wrap;
        gap: var(--cluster-gap, var(--a-gap-m));
        align-items: center;
        justify-content: flex-start;
    }

    .cluster-s {
        --cluster-gap: var(--a-gap-s);
    }

    .cluster-between {
        justify-content: space-between;
    }

    .cluster-end {
        justify-content: flex-end;
    }


    /* --- GRID AUTO (RAM Pattern) --- */
    .grid-auto {
        display: grid;
        gap: var(--grid-gap, var(--a-gap-m));
        /* Lógica RAM: Repeat, Auto, Minmax */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min-item-width, 20rem)), 1fr));
    }

    .grid-auto-s {
        --min-item-width: 15rem;
    }

    .grid-auto-l {
        --min-item-width: 25rem;
    }


    /* --- SWITCHER (Responsive Layout Switching) --- */
    .switcher {
        container-type: inline-size;
        display: flex;
        flex-wrap: wrap;
        gap: var(--switcher-gap, var(--a-gap-l));
        align-items: flex-start;
    }

    .switcher>* {
        flex-grow: 1;
        /* El algoritmo "Holy Albatross" */
        flex-basis: calc((var(--switcher-target-width, 30rem) - 100%) * 999);
    }

    /* Container Queries para control fino */
    .switch-at-s {
        container-name: switch-s;
    }

    @container switch-s (max-width: 30rem) {
        .switch-at-s>* {
            width: 100%;
            flex-basis: auto;
        }
    }

    .switch-at-m {
        container-name: switch-m;
    }

    @container switch-m (max-width: 50rem) {
        .switch-at-m>* {
            width: 100%;
        }
    }


    /* --- SIDEBAR (Flex with specific expansion) --- */
    .sidebar-layout {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sidebar-gap, var(--a-gap-l));
    }

    .sidebar-layout>* {
        flex-grow: 1;
        flex-basis: var(--sidebar-target-width, 20rem);
    }

    .sidebar-layout> :not(.sidebar-fixed) {
        flex-basis: 0;
        flex-grow: 999;
        min-width: 50%;
    }


    /* --- COVER (Vertical Centering) --- */
    .cover {
        display: flex;
        flex-direction: column;
        min-block-size: var(--cover-min-height, 100vh);
        /* Logical Property */
        padding: var(--a-gap-m);
    }

    .cover>.centered {
        margin-block: auto;
    }

    .cover> :first-child:not(.centered) {
        margin-block-start: 0;
    }

    .cover> :last-child:not(.centered) {
        margin-block-end: 0;
    }


    /* --- REEL (Horizontal Scrolling) --- */
    .reel {
        display: flex;
        gap: var(--reel-gap, var(--a-gap-m));
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-block-end: var(--a-gap-m);

        /* OPTIMIZACIÓN: Usar semántica para modo oscuro automático */
        /* Thumb: Border Strong (Neutral 300), Track: Transparent */
        scrollbar-color: var(--hg-border) transparent;
    }

    .reel>* {
        flex: 0 0 var(--reel-item-width, auto);
        scroll-snap-align: start;
    }

    .reel::-webkit-scrollbar {
        height: 6px;
    }

    .reel::-webkit-scrollbar-track {
        background: transparent;
    }

    .reel::-webkit-scrollbar-thumb {
        /* OPTIMIZACIÓN: Coincide con scrollbar-color */
        background: var(--hg-border);
        border-radius: var(--hg-radius-pill);
    }

    .reel::-webkit-scrollbar-thumb:hover {
        background: var(--a-text-muted);
    }


    /* --- FRAME (Aspect Ratio) --- */
    .frame {
        aspect-ratio: var(--aspect-ratio, 16 / 9);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--frame-radius, 0);
    }

    .frame>img,
    .frame>video {
        inline-size: 100%;
        /* Logical width */
        block-size: 100%;
        /* Logical height */
        object-fit: cover;

        /* Motion Tokens Correctos */
        transition: transform var(--a-raw-motion-duration-slow) var(--a-raw-motion-ease-out);
    }

    .frame-zoom:hover>img,
    .frame-zoom:hover>video {
        transform: scale(1.05);
    }

    .ratio-square {
        --aspect-ratio: 1 / 1;
    }

    .ratio-landscape {
        --aspect-ratio: 16 / 9;
    }

    .ratio-portrait {
        --aspect-ratio: 3 / 4;
    }

    .ratio-ultrawide {
        --aspect-ratio: 21 / 9;
    }


    /* --- WRAPPER (Container / Center Content) --- */
    .wrapper {
        box-sizing: content-box;
        margin-inline: auto;
        width: 100%;
        max-width: var(--wrapper-max, var(--hg-layout-max));
        padding-inline: var(--hg-padding-layout);
    }

    .wrapper[data-variant="narrow"],
    .wrapper-narrow {
        --wrapper-max: var(--hg-layout-narrow);
    }

    .wrapper[data-variant="wide"],
    .wrapper-wide {
        --wrapper-max: var(--hg-layout-wide);
    }

    .wrapper[data-variant="full"],
    .wrapper-full {
        --wrapper-max: var(--hg-layout-full);
        padding-inline: 0;
    }

    .place-center {
        display: grid;
        place-items: center;
        place-content: center;
        text-align: center;
        min-width: 100%;
        height: 100%;
    }

    .place-flex-center {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        min-width: 100%;
        height: 100%;
    }

    /* --- FULL BLEED (Breakout) --- */
    .full-bleed {
        width: 100vw;
        /* Logical property para soporte RTL automático */
        margin-inline: calc(50% - 50vw);
    }
}