@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(--hg-pad-std));
    }

    .stack-low {
        --flow-space: var(--hg-pad-low);
    }

    .stack-high {
        --flow-space: var(--hg-pad-high);
    }

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


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

    .cluster-low {
        --cluster-gap: var(--hg-pad-low);
    }

    .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(--hg-pad-std));
        /* Lógica RAM: Repeat, Auto, Minmax */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min-item-width, 20rem)), 1fr));
    }

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

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


    /* --- SWITCHER (Responsive Layout Switching) --- */
    .switcher {
        container-type: inline-size;
        display: flex;
        flex-wrap: wrap;
        gap: var(--switcher-gap, var(--hg-pad-high));
        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-low {
        container-name: switch-low;
    }

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

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

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


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

    .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(--hg-pad-std);
    }

    .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(--hg-pad-std));
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-block-end: var(--hg-pad-std);

        /* OPTIMIZACIÓN: Usar semántica para modo oscuro automático */
        /* Thumb: Border Strong (Neutral 300), Track: Transparent */
        scrollbar-color: var(--hg-border-std) 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-std);
        border-radius: var(--hg-radius-pill);
    }

    .reel::-webkit-scrollbar-thumb:hover {
        background: var(--hg-color-low);
    }


    /* --- 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(--hg-duration-flow) var(--hg-motion-snappy);
    }

    .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 {
        margin-inline: auto;
        width: 100%;
        max-width: var(--wrapper-max, var(--hg-layout-max));
        padding-inline: var(--hg-padding-layout);
    }

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

    .wrapper[data-variant="high"],
    .wrapper-high {
        --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);
    }

    /* ==========================================================
       HGS GRID (Global Component Structure)
       ========================================================== */
    .hgs-grid {
        /* --- VARIABLES LOCALES --- */
        --_gap: var(--local-gap, var(--hg-pad-std));
        --_min-w: var(--local-min-w, 20rem);
        --_align: var(--local-align, stretch);
        --_justify: var(--local-justify, stretch);

        display: grid;
        width: 100%;
        gap: var(--_gap);

        /* MODO FLUX (Default): Diseño Intrínseco */
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_min-w)), 1fr));

        align-items: var(--_align);
        justify-items: var(--_justify);
    }

    /* --- MODO STRICT (Manual Columns) --- */
    .hgs-grid[data-mode="strict"] {
        --_cols: var(--local-cols-d, 3);
        grid-template-columns: repeat(var(--_cols), 1fr);
        grid-auto-flow: dense;
    }

    /* Adaptación Tablet (aprox < 991px) */
    @media (max-width: 991px) {
        .hgs-grid[data-mode="strict"] {
            /* Si no se define tablet, usa 2 por defecto */
            --_cols: var(--local-cols-t, 2);
        }
    }

    /* Adaptación Móvil (aprox < 767px) */
    @media (max-width: 767px) {
        .hgs-grid[data-mode="strict"] {
            --_cols: var(--local-cols-m, 1);
        }
    }

    /* --- VARIANTES VISUALES (Bento / Sidebars / Masonry) --- */
    /* Bento por defecto a 3 columnas si no se sobreescribe en modo strict */
    .hgs-grid[data-variant^="bento_"] {
        grid-template-columns: repeat(var(--local-cols-d, 3), 1fr);
        grid-auto-flow: dense;
    }

    .hgs-grid[data-variant="bento_left"] > :nth-child(1) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .hgs-grid[data-variant="bento_top"] > :nth-child(1) {
        grid-column: 1 / -1;
    }

    .hgs-grid[data-variant="bento_center"] > :nth-child(2) {
        grid-column: span 2;
        grid-row: span 2;
    }

    .hgs-grid[data-variant="sidebar_right"] {
        grid-template-columns: 2fr 1fr;
    }

    .hgs-grid[data-variant="sidebar_left"] {
        grid-template-columns: 1fr 2fr;
    }

    .hgs-grid[data-variant="masonry"] > :nth-child(3n + 2) {
        grid-row: span 2;
    }

    /* --- RESPONSIVIDAD PARA VARIANTES (Bento & Sidebars) --- */
    @media (max-width: 991px) {
        .hgs-grid[data-variant^="bento_"] {
            grid-template-columns: repeat(var(--local-cols-t, 2), 1fr);
        }
        
        .hgs-grid[data-variant="bento_left"] > :nth-child(1),
        .hgs-grid[data-variant="bento_center"] > :nth-child(2) {
            /* En tablet abarcan las 2 columnas enteras */
            grid-column: 1 / -1;
            grid-row: auto;
        }
        
        .hgs-grid[data-variant="sidebar_right"],
        .hgs-grid[data-variant="sidebar_left"] {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 767px) {
        .hgs-grid[data-variant^="bento_"] {
            grid-template-columns: repeat(var(--local-cols-m, 1), 1fr);
        }
        
        .hgs-grid[data-variant="bento_left"] > :nth-child(1),
        .hgs-grid[data-variant="bento_center"] > :nth-child(2) {
            grid-column: span 1;
            grid-row: auto;
        }
    }
}