/**
 * Foundation XY Grid - Modern Implementation
 * ==========================================
 * 
 * Based on Foundation 6.7+ XY Grid
 * Enhanced with CSS Custom Properties, Container Queries, Logical Properties
 * 
 * @version 3.0.0
 */

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */

:root {
    /* Grid Settings */
    --grid-columns: 12;
    --grid-gutter: 1.25rem;        /* 20px */
    --grid-gutter-small: 0.625rem; /* 10px */
    --grid-gutter-large: 1.875rem; /* 30px */
    
    /* Container Settings */
    --container-max: 1200px;
    --container-padding: 0.9375rem; /* 15px */
    
    /* Breakpoints */
    --breakpoint-small: 40em;      /* 640px */
    --breakpoint-medium: 48em;     /* 768px */
    --breakpoint-large: 64em;      /* 1024px */
    --breakpoint-xlarge: 75em;     /* 1200px */
    --breakpoint-xxlarge: 90em;    /* 1440px */
}

/* Dark mode adjustments */
[data-theme="dark"] {
    --grid-gutter: 1.5rem;
}


/* ========================================
   FLEX GRID (Base)
   ======================================== */

.grid-container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

.grid-container-fluid {
    max-width: 100%;
    padding-inline: var(--container-padding);
}

.grid-container-full {
    max-width: 100%;
    padding-inline: 0;
}

/* XY Grid Base */
.grid-x {
    display: flex;
    flex-flow: row wrap;
}

/* Vertical Grid */
.grid-y {
    display: flex;
    flex-flow: column nowrap;
}

/* Cell Base */
.cell {
    flex: 0 0 auto;
    min-width: 0;
    width: 100%;
}


/* ========================================
   GRID GUTTERS (Modern with CSS Gap)
   ======================================== */

/* Horizontal Margin Gutters (Negative Margin Method) */
.grid-margin-x {
    margin-left: calc(var(--grid-gutter) * -0.5);
    margin-right: calc(var(--grid-gutter) * -0.5);
}

.grid-margin-x > .cell {
    padding-left: calc(var(--grid-gutter) * 0.5);
    padding-right: calc(var(--grid-gutter) * 0.5);
}

/* Small Gutters */
.grid-margin-x.small {
    margin-left: calc(var(--grid-gutter-small) * -0.5);
    margin-right: calc(var(--grid-gutter-small) * -0.5);
}

.grid-margin-x.small > .cell {
    padding-left: calc(var(--grid-gutter-small) * 0.5);
    padding-right: calc(var(--grid-gutter-small) * 0.5);
}

/* Large Gutters */
.grid-margin-x.large {
    margin-left: calc(var(--grid-gutter-large) * -0.5);
    margin-right: calc(var(--grid-gutter-large) * -0.5);
}

.grid-margin-x.large > .cell {
    padding-left: calc(var(--grid-gutter-large) * 0.5);
    padding-right: calc(var(--grid-gutter-large) * 0.5);
}

/* Vertical Margin Gutters */
.grid-margin-y {
    margin-top: calc(var(--grid-gutter) * -0.5);
    margin-bottom: calc(var(--grid-gutter) * -0.5);
}

.grid-margin-y > .cell {
    padding-top: calc(var(--grid-gutter) * 0.5);
    padding-bottom: calc(var(--grid-gutter) * 0.5);
}

/* CSS Gap Support (Modern Browsers) */
@supports (gap: 1rem) {
    .grid-x.gap {
        gap: var(--grid-gutter);
        margin: 0;
    }
    
    .grid-x.gap > .cell {
        margin: 0;
    }
    
    .grid-x.gap.small {
        gap: var(--grid-gutter-small);
    }
    
    .grid-x.gap.large {
        gap: var(--grid-gutter-large);
    }
}


/* ========================================
   AUTO & SHRINK CELLS (Flexible Width)
   ======================================== */

/* Auto: Takes remaining space */
.cell.auto {
    flex: 1 1 0;
}

/* Shrink: Takes only needed space */
.cell.shrink {
    flex: 0 0 auto;
    width: auto;
}


/* ========================================
   GRID COLUMNS (Mobile First)
   ======================================== */

/* Small (Default - Mobile) */
.small-1  { flex: 0 0 auto; width: 8.33333%; }
.small-2  { flex: 0 0 auto; width: 16.66667%; }
.small-3  { flex: 0 0 auto; width: 25%; }
.small-4  { flex: 0 0 auto; width: 33.33333%; }
.small-5  { flex: 0 0 auto; width: 41.66667%; }
.small-6  { flex: 0 0 auto; width: 50%; }
.small-7  { flex: 0 0 auto; width: 58.33333%; }
.small-8  { flex: 0 0 auto; width: 66.66667%; }
.small-9  { flex: 0 0 auto; width: 75%; }
.small-10 { flex: 0 0 auto; width: 83.33333%; }
.small-11 { flex: 0 0 auto; width: 91.66667%; }
.small-12 { flex: 0 0 auto; width: 100%; }

/* Small Auto/Shrink */
.small-auto { flex: 1 1 0; width: auto; }
.small-shrink { flex: 0 0 auto; width: auto; }

/* Medium (≥768px) */
@media (min-width: 48em) {
    .medium-1  { flex: 0 0 auto; width: 8.33333%; }
    .medium-2  { flex: 0 0 auto; width: 16.66667%; }
    .medium-3  { flex: 0 0 auto; width: 25%; }
    .medium-4  { flex: 0 0 auto; width: 33.33333%; }
    .medium-5  { flex: 0 0 auto; width: 41.66667%; }
    .medium-6  { flex: 0 0 auto; width: 50%; }
    .medium-7  { flex: 0 0 auto; width: 58.33333%; }
    .medium-8  { flex: 0 0 auto; width: 66.66667%; }
    .medium-9  { flex: 0 0 auto; width: 75%; }
    .medium-10 { flex: 0 0 auto; width: 83.33333%; }
    .medium-11 { flex: 0 0 auto; width: 91.66667%; }
    .medium-12 { flex: 0 0 auto; width: 100%; }
    
    .medium-auto { flex: 1 1 0; width: auto; }
    .medium-shrink { flex: 0 0 auto; width: auto; }
}

/* Large (≥1024px) */
@media (min-width: 64em) {
    .large-1  { flex: 0 0 auto; width: 8.33333%; }
    .large-2  { flex: 0 0 auto; width: 16.66667%; }
    .large-3  { flex: 0 0 auto; width: 25%; }
    .large-4  { flex: 0 0 auto; width: 33.33333%; }
    .large-5  { flex: 0 0 auto; width: 41.66667%; }
    .large-6  { flex: 0 0 auto; width: 50%; }
    .large-7  { flex: 0 0 auto; width: 58.33333%; }
    .large-8  { flex: 0 0 auto; width: 66.66667%; }
    .large-9  { flex: 0 0 auto; width: 75%; }
    .large-10 { flex: 0 0 auto; width: 83.33333%; }
    .large-11 { flex: 0 0 auto; width: 91.66667%; }
    .large-12 { flex: 0 0 auto; width: 100%; }
    
    .large-auto { flex: 1 1 0; width: auto; }
    .large-shrink { flex: 0 0 auto; width: auto; }
}


/* ========================================
   ALIGNMENT HELPERS
   ======================================== */

/* Horizontal Alignment */
.align-right {
    justify-content: flex-end;
}

.align-center {
    justify-content: center;
}

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

.align-spaced {
    justify-content: space-around;
}

/* Vertical Alignment */
.align-top {
    align-items: flex-start;
}

.align-middle {
    align-items: center;
}

.align-bottom {
    align-items: flex-end;
}

.align-stretch {
    align-items: stretch;
}

/* Self Alignment */
.align-self-top {
    align-self: flex-start;
}

.align-self-middle {
    align-self: center;
}

.align-self-bottom {
    align-self: flex-end;
}

.align-self-stretch {
    align-self: stretch;
}


/* ========================================
   ORDERING
   ======================================== */

.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }

@media (min-width: 48em) {
    .medium-order-1 { order: 1; }
    .medium-order-2 { order: 2; }
    .medium-order-3 { order: 3; }
    .medium-order-4 { order: 4; }
    .medium-order-5 { order: 5; }
    .medium-order-6 { order: 6; }
}

@media (min-width: 64em) {
    .large-order-1 { order: 1; }
    .large-order-2 { order: 2; }
    .large-order-3 { order: 3; }
    .large-order-4 { order: 4; }
    .large-order-5 { order: 5; }
    .large-order-6 { order: 6; }
}


/* ========================================
   GRID FRAME (Full Height)
   ======================================== */

.grid-frame {
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.cell.grid-frame-content {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


/* ========================================
   BLOCK GRID (Equal Height Cells)
   ======================================== */

.small-up-1 > .cell { width: 100%; }
.small-up-2 > .cell { width: 50%; }
.small-up-3 > .cell { width: 33.33333%; }
.small-up-4 > .cell { width: 25%; }
.small-up-5 > .cell { width: 20%; }
.small-up-6 > .cell { width: 16.66667%; }

@media (min-width: 48em) {
    .medium-up-1 > .cell { width: 100%; }
    .medium-up-2 > .cell { width: 50%; }
    .medium-up-3 > .cell { width: 33.33333%; }
    .medium-up-4 > .cell { width: 25%; }
    .medium-up-5 > .cell { width: 20%; }
    .medium-up-6 > .cell { width: 16.66667%; }
}

@media (min-width: 64em) {
    .large-up-1 > .cell { width: 100%; }
    .large-up-2 > .cell { width: 50%; }
    .large-up-3 > .cell { width: 33.33333%; }
    .large-up-4 > .cell { width: 25%; }
    .large-up-5 > .cell { width: 20%; }
    .large-up-6 > .cell { width: 16.66667%; }
}


/* ========================================
   CSS GRID SUPPORT (Modern Browsers)
   ======================================== */

@supports (display: grid) {
    .grid-x.use-grid {
        display: grid;
        grid-template-columns: repeat(var(--grid-columns), 1fr);
        gap: var(--grid-gutter);
        margin: 0;
    }
    
    .grid-x.use-grid > .cell {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    .grid-x.use-grid > .small-6 {
        grid-column: span 6;
    }
    
    .grid-x.use-grid > .small-12 {
        grid-column: span 12;
    }
    
    @media (min-width: 48em) {
        .grid-x.use-grid > .medium-6 {
            grid-column: span 6;
        }
    }
    
    @media (min-width: 64em) {
        .grid-x.use-grid > .large-4 {
            grid-column: span 4;
        }
    }
}


/* ========================================
   CONTAINER QUERIES (Future-Ready)
   ======================================== */

@supports (container-type: inline-size) {
    .grid-container {
        container-type: inline-size;
        container-name: grid-container;
    }
    
    /* Responsive cells based on container width */
    @container grid-container (min-width: 768px) {
        .cell.container-medium-6 {
            width: 50%;
        }
    }
}


/* ========================================
   FLUID SPACING (Clamp)
   ======================================== */

.grid-margin-x.fluid {
    --fluid-gutter: clamp(0.625rem, 2vw, 1.875rem);
    margin-inline-start: calc(var(--fluid-gutter) * -0.5);
    margin-inline-end: calc(var(--fluid-gutter) * -0.5);
}

.grid-margin-x.fluid > .cell {
    margin-inline-start: calc(var(--fluid-gutter) * 0.5);
    margin-inline-end: calc(var(--fluid-gutter) * 0.5);
}


/* ========================================
   UTILITIES
   ======================================== */

/* Hide/Show */
.hide { display: none !important; }
.show { display: block !important; }

@media (max-width: 47.9375em) {
    .hide-for-small-only { display: none !important; }
}

@media (min-width: 48em) {
    .show-for-small-only { display: none !important; }
    .hide-for-medium { display: none !important; }
}

@media (min-width: 64em) {
    .hide-for-large { display: none !important; }
}

/* Flex Utilities */
.flex-container {
    display: flex;
}

.flex-child-auto {
    flex: 1 1 auto;
}

.flex-child-grow {
    flex: 1 0 auto;
}

.flex-child-shrink {
    flex: 0 1 auto;
}


/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .grid-x {
        display: block;
    }
    
    .cell {
        width: 100% !important;
        page-break-inside: avoid;
    }
}

/* XLarge (≥1200px) */
@media (min-width: 75em) {
    .xlarge-1  { flex: 0 0 auto; width: 8.33333%; }
    .xlarge-2  { flex: 0 0 auto; width: 16.66667%; }
    .xlarge-3  { flex: 0 0 auto; width: 25%; }
    .xlarge-4  { flex: 0 0 auto; width: 33.33333%; }
    .xlarge-5  { flex: 0 0 auto; width: 41.66667%; }
    .xlarge-6  { flex: 0 0 auto; width: 50%; }
    .xlarge-7  { flex: 0 0 auto; width: 58.33333%; }
    .xlarge-8  { flex: 0 0 auto; width: 66.66667%; }
    .xlarge-9  { flex: 0 0 auto; width: 75%; }
    .xlarge-10 { flex: 0 0 auto; width: 83.33333%; }
    .xlarge-11 { flex: 0 0 auto; width: 91.66667%; }
    .xlarge-12 { flex: 0 0 auto; width: 100%; }
    
    .xlarge-auto { flex: 1 1 0; width: auto; }
    .xlarge-shrink { flex: 0 0 auto; width: auto; }
    
    .xlarge-order-1 { order: 1; }
    .xlarge-order-2 { order: 2; }
    .xlarge-order-3 { order: 3; }
    .xlarge-order-4 { order: 4; }
    .xlarge-order-5 { order: 5; }
    .xlarge-order-6 { order: 6; }
}