/**
 * OS TigerLab Design System v2 — LAYOUTS
 * Grid 12 cols + containers + stack/cluster + aspect ratios.
 */

/* ================================================================== */
/*  CONTAINERS                                                         */
/* ================================================================== */
.ostl-container,
.ostl-container--wide,
.ostl-container--prose,
.ostl-container--narrow {
    width: 100%;
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 24px);
    padding-inline-start: max(clamp(16px, 4vw, 24px), var(--safe-left));
    padding-inline-end: max(clamp(16px, 4vw, 24px), var(--safe-right));
}
.ostl-container         { max-width: var(--container-max); }
.ostl-container--wide   { max-width: var(--container-wide); }
.ostl-container--prose  { max-width: var(--container-prose); }
.ostl-container--narrow { max-width: var(--container-narrow); }

/* ================================================================== */
/*  GRID 12 COLS                                                       */
/* ================================================================== */
.ostl-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.ostl-grid > * {
    min-width: 0;
}

/* Variantes utility — generadas a mano para evitar JIT */
.ostl-grid--2 { grid-template-columns: repeat(2,  minmax(0, 1fr)); }
.ostl-grid--3 { grid-template-columns: repeat(3,  minmax(0, 1fr)); }
.ostl-grid--4 { grid-template-columns: repeat(4,  minmax(0, 1fr)); }
.ostl-grid--6 { grid-template-columns: repeat(6,  minmax(0, 1fr)); }

.ostl-grid--auto-sm { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ostl-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ostl-grid--auto-lg { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.ostl-col-span-1  { grid-column: span 1; }
.ostl-col-span-2  { grid-column: span 2; }
.ostl-col-span-3  { grid-column: span 3; }
.ostl-col-span-4  { grid-column: span 4; }
.ostl-col-span-5  { grid-column: span 5; }
.ostl-col-span-6  { grid-column: span 6; }
.ostl-col-span-7  { grid-column: span 7; }
.ostl-col-span-8  { grid-column: span 8; }
.ostl-col-span-9  { grid-column: span 9; }
.ostl-col-span-10 { grid-column: span 10; }
.ostl-col-span-11 { grid-column: span 11; }
.ostl-col-span-12 { grid-column: span 12; }

@media (max-width: 960px) {
    .ostl-grid--md-1 { grid-template-columns: 1fr; }
    .ostl-grid--md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [class*="ostl-col-span-"] { grid-column: span 12; }
}

@media (max-width: 640px) {
    .ostl-grid,
    .ostl-grid--2,
    .ostl-grid--3,
    .ostl-grid--4,
    .ostl-grid--6 {
        grid-template-columns: 1fr;
    }

    /* auto-fit: mínimo fluido para no forzar scroll horizontal en columnas */
    .ostl-grid--auto-sm {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    }
    .ostl-grid--auto-md {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    }
    .ostl-grid--auto-lg {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    }
}

/* ================================================================== */
/*  STACK · vertical spacing autom.                                    */
/* ================================================================== */
.ostl-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ostl-stack-gap, var(--sp-4));
}
.ostl-stack--xs { --ostl-stack-gap: var(--sp-1); }
.ostl-stack--sm { --ostl-stack-gap: var(--sp-2); }
.ostl-stack--md { --ostl-stack-gap: var(--sp-4); }
.ostl-stack--lg { --ostl-stack-gap: var(--sp-6); }
.ostl-stack--xl { --ostl-stack-gap: var(--sp-10); }

/* ================================================================== */
/*  CLUSTER · horizontal flex con wrap                                 */
/* ================================================================== */
.ostl-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ostl-cluster-gap, var(--sp-3));
    align-items: center;
}
.ostl-cluster--sm   { --ostl-cluster-gap: var(--sp-2); }
.ostl-cluster--lg   { --ostl-cluster-gap: var(--sp-5); }
.ostl-cluster--end  { justify-content: flex-end; }
.ostl-cluster--between { justify-content: space-between; }

/* ================================================================== */
/*  ASPECT RATIO HELPERS                                               */
/* ================================================================== */
.ostl-ar-16-9 { aspect-ratio: 16 / 9; }
.ostl-ar-4-3  { aspect-ratio: 4 / 3; }
.ostl-ar-1-1  { aspect-ratio: 1 / 1; }
.ostl-ar-21-9 { aspect-ratio: 21 / 9; }
.ostl-ar-3-4  { aspect-ratio: 3 / 4; }

[class*="ostl-ar-"] {
    overflow: hidden;
    position: relative;
}
[class*="ostl-ar-"] > img,
[class*="ostl-ar-"] > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ================================================================== */
/*  CENTER HELPER                                                      */
/* ================================================================== */
.ostl-center {
    display: grid;
    place-items: center;
}

/* ================================================================== */
/*  SECTIONS · padding vertical consistente                            */
/* ================================================================== */
.ostl-section {
    padding-block: clamp(48px, 8vw, 96px);
}
.ostl-section--sm { padding-block: clamp(32px, 5vw, 56px); }
.ostl-section--lg { padding-block: clamp(64px, 10vw, 128px); }

/* ================================================================== */
/*  CONTAINER QUERIES en cards (cuando se anidan)                      */
/* ================================================================== */
.ostl-cq {
    container-type: inline-size;
    container-name: card;
}

@container card (max-width: 320px) {
    .ostl-card__title { font-size: var(--fs-base); }
}