/* ==========================================================================
   Layout CSS - Grid Systems, Containers, Spacing, Responsive Breakpoints
   ========================================================================== */

/* ==========================================================================
   Breakpoints (Mobile-first approach)
   ========================================================================== */

/* Breakpoint values:
   - Mobile: 320px - 767px (default, no media query needed)
   - Tablet: 768px - 1023px
   - Desktop: 1024px - 1440px
   - Large Desktop: 1441px+
*/

/* ==========================================================================
   Container System
   ========================================================================== */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

/* Container sizes */
.container {
    max-width: 100%;
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
        padding-left: var(--spacing-2xl);
        padding-right: var(--spacing-2xl);
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

@media (min-width: 1441px) {
    .container {
        max-width: 1400px;
    }
}

/* Container variants */
.container-sm {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.container-md {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.container-lg {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.container-xl {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

.container-fluid {
    width: 100%;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
}

/* ==========================================================================
   Grid System
   ========================================================================== */

/* Base grid */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

/* Grid columns */
.grid-cols-1 {
    grid-template-columns: 1fr;
}

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

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

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

.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-cols-12 {
    grid-template-columns: repeat(12, 1fr);
}

/* Auto-fit grids */
.grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Grid gaps */
.gap-xs {
    gap: var(--spacing-xs);
}

.gap-sm {
    gap: var(--spacing-sm);
}

.gap-md {
    gap: var(--spacing-md);
}

.gap-lg {
    gap: var(--spacing-lg);
}

.gap-xl {
    gap: var(--spacing-xl);
}

.gap-2xl {
    gap: var(--spacing-2xl);
}

.gap-3xl {
    gap: var(--spacing-3xl);
}

/* Column gaps */
.gap-x-xs {
    column-gap: var(--spacing-xs);
}

.gap-x-sm {
    column-gap: var(--spacing-sm);
}

.gap-x-md {
    column-gap: var(--spacing-md);
}

.gap-x-lg {
    column-gap: var(--spacing-lg);
}

.gap-x-xl {
    column-gap: var(--spacing-xl);
}

.gap-x-2xl {
    column-gap: var(--spacing-2xl);
}

/* Row gaps */
.gap-y-xs {
    row-gap: var(--spacing-xs);
}

.gap-y-sm {
    row-gap: var(--spacing-sm);
}

.gap-y-md {
    row-gap: var(--spacing-md);
}

.gap-y-lg {
    row-gap: var(--spacing-lg);
}

.gap-y-xl {
    row-gap: var(--spacing-xl);
}

.gap-y-2xl {
    row-gap: var(--spacing-2xl);
}

/* Grid span */
.col-span-1 {
    grid-column: span 1;
}

.col-span-2 {
    grid-column: span 2;
}

.col-span-3 {
    grid-column: span 3;
}

.col-span-4 {
    grid-column: span 4;
}

.col-span-5 {
    grid-column: span 5;
}

.col-span-6 {
    grid-column: span 6;
}

.col-span-full {
    grid-column: 1 / -1;
}

/* Row span */
.row-span-1 {
    grid-row: span 1;
}

.row-span-2 {
    grid-row: span 2;
}

.row-span-3 {
    grid-row: span 3;
}

.row-span-4 {
    grid-row: span 4;
}

.row-span-full {
    grid-row: 1 / -1;
}

/* ==========================================================================
   Flexbox System
   ========================================================================== */

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

/* Flex direction */
.flex-row {
    flex-direction: row;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-col {
    flex-direction: column;
}

.flex-col-reverse {
    flex-direction: column-reverse;
}

/* Flex wrap */
.flex-wrap {
    flex-wrap: wrap;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* Justify content */
.justify-start {
    justify-content: flex-start;
}

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

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

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

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

.justify-evenly {
    justify-content: space-evenly;
}

/* Align items */
.items-start {
    align-items: flex-start;
}

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

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

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

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

/* Align content */
.content-start {
    align-content: flex-start;
}

.content-end {
    align-content: flex-end;
}

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

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

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

.content-evenly {
    align-content: space-evenly;
}

/* Align self */
.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

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

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

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

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

/* Flex grow/shrink */
.flex-1 {
    flex: 1 1 0%;
}

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

.flex-initial {
    flex: 0 1 auto;
}

.flex-none {
    flex: none;
}

.grow {
    flex-grow: 1;
}

.grow-0 {
    flex-grow: 0;
}

.shrink {
    flex-shrink: 1;
}

.shrink-0 {
    flex-shrink: 0;
}

/* ==========================================================================
   Section Spacing
   ========================================================================== */

.section {
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
}

.section-sm {
    padding-top: var(--spacing-4xl);
    padding-bottom: var(--spacing-4xl);
}

.section-lg {
    padding-top: var(--spacing-6xl);
    padding-bottom: var(--spacing-6xl);
}

@media (min-width: 768px) {
    .section {
        padding-top: calc(var(--spacing-6xl) * 1.5);
        padding-bottom: calc(var(--spacing-6xl) * 1.5);
    }

    .section-sm {
        padding-top: var(--spacing-6xl);
        padding-bottom: var(--spacing-6xl);
    }

    .section-lg {
        padding-top: calc(var(--spacing-6xl) * 2);
        padding-bottom: calc(var(--spacing-6xl) * 2);
    }
}

/* ==========================================================================
   Responsive Grid Layouts
   ========================================================================== */

/* Category cards layout - responsive */
.category-cards {
    display: grid;
    gap: var(--spacing-2xl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .category-cards {
        gap: var(--spacing-3xl);
    }
}

@media (min-width: 1024px) {
    .category-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-2xl);
    }
}

/* Feature grid layouts */
.features-grid {
    display: grid;
    gap: var(--spacing-2xl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3xl);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-2xl);
    }
}

/* Two column layout */
.two-column-layout {
    display: grid;
    gap: var(--spacing-2xl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .two-column-layout {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-3xl);
    }
}

/* Three column layout */
.three-column-layout {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .three-column-layout {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-2xl);
    }
}

@media (min-width: 1024px) {
    .three-column-layout {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Hero layout */
.hero-layout {
    display: grid;
    gap: var(--spacing-3xl);
    grid-template-columns: 1fr;
    align-items: center;
}

@media (min-width: 1024px) {
    .hero-layout {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-4xl);
    }
}

/* ==========================================================================
   Display Utilities
   ========================================================================== */

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.hidden {
    display: none;
}

/* Position utilities */
.static {
    position: static;
}

.fixed {
    position: fixed;
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

.sticky {
    position: sticky;
}

/* Overflow utilities */
.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-visible {
    overflow: visible;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

/* ==========================================================================
   Responsive Display Utilities
   ========================================================================== */

/* Mobile only */
@media (max-width: 767px) {
    .mobile-only {
        display: block;
    }

    .mobile-hidden {
        display: none;
    }
}

/* Tablet and up */
@media (min-width: 768px) {
    .tablet-up {
        display: block;
    }

    .mobile-only {
        display: none;
    }

    .tablet-hidden {
        display: none;
    }
}

/* Tablet only */
@media (min-width: 768px) and (max-width: 1023px) {
    .tablet-only {
        display: block;
    }
}

@media (max-width: 767px), (min-width: 1024px) {
    .tablet-only {
        display: none;
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .desktop-up {
        display: block;
    }

    .desktop-hidden {
        display: none;
    }

    .tablet-hidden {
        display: block;
    }
}

/* Desktop only */
@media (min-width: 1024px) and (max-width: 1440px) {
    .desktop-only {
        display: block;
    }
}

@media (max-width: 1023px), (min-width: 1441px) {
    .desktop-only {
        display: none;
    }
}

/* Large desktop */
@media (min-width: 1441px) {
    .large-desktop-up {
        display: block;
    }

    .large-desktop-hidden {
        display: none;
    }
}