/* Responsive Layout Utilities */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--space-lg);
}

.grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.grid-4 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

/* Flexbox Utilities */
.flex {
    display: flex;
    gap: var(--space-md);
}

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

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

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

/* Responsive Spacing */
@media (max-width: 768px) {
    :root {
        --space-2xl: clamp(2rem, 2rem + 1vw, 3rem);
        --space-xl: clamp(1.5rem, 1.5rem + 0.75vw, 2rem);
        --space-lg: clamp(1.25rem, 1.25rem + 0.5vw, 1.5rem);
    }

    .container {
        padding: 0 var(--space-sm);
    }

    /* Improved touch targets for mobile */
    .btn {
        padding: var(--space-md) var(--space-lg);
        min-height: 48px;
    }

    .nav-links a {
        padding: var(--space-sm) var(--space-md);
        display: block;
    }

    /* Stack items on mobile */
    .stack-mobile {
        flex-direction: column;
    }

    /* Hide elements on mobile */
    .hide-mobile {
        display: none;
    }
}

/* Tablet Specific Styles */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        padding: 0 var(--space-lg);
    }
}

/* Improved touch targets */
button,
input,
select,
textarea {
    min-height: 44px;
}

a {
    padding: var(--space-2xs);
    margin: calc(var(--space-2xs) * -1);
}

/* Focus styles for better accessibility */
:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Safe Area Insets for modern mobile browsers */
@supports(padding: max(0px)) {
    .container {
        padding-left: max(var(--space-md), env(safe-area-inset-left));
        padding-right: max(var(--space-md), env(safe-area-inset-right));
    }

    .nav-fixed {
        padding-top: max(var(--space-md), env(safe-area-inset-top));
    }

    .footer {
        padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    }
}

/* Improved scrolling experience */
.scroll-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}

/* Responsive Images */
.responsive-img {
    width: 100%;
    height: auto;
    aspect-ratio: attr(width) / attr(height);
}

/* Responsive Tables */
.table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Print Styles */
@media print {
    .no-print {
        display: none;
    }
}