/* GAG Recipes - Enhanced Responsive Layout & Spacing */

/* Advanced Container System */
.container-fluid {
    width: 100%;
    padding: 0 var(--space-4);
    margin: 0 auto;
}

.container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

/* Enhanced Spacing System */
.section-spacing-xs { padding: var(--space-8) 0; }
.section-spacing-sm { padding: var(--space-12) 0; }
.section-spacing-md { padding: var(--space-16) 0; }
.section-spacing-lg { padding: var(--space-20) 0; }
.section-spacing-xl { padding: var(--space-24) 0; }
.section-spacing-2xl { padding: var(--space-32) 0; }

/* Responsive Section Spacing */
@media (min-width: 768px) {
    .section-spacing-xs { padding: var(--space-12) 0; }
    .section-spacing-sm { padding: var(--space-16) 0; }
    .section-spacing-md { padding: var(--space-20) 0; }
    .section-spacing-lg { padding: var(--space-24) 0; }
    .section-spacing-xl { padding: var(--space-32) 0; }
    .section-spacing-2xl { padding: var(--space-40) 0; }
}

/* Enhanced Grid System with Better Spacing */
.grid-enhanced {
    display: grid;
    gap: var(--space-6);
}

.grid-enhanced.gap-sm { gap: var(--space-4); }
.grid-enhanced.gap-md { gap: var(--space-6); }
.grid-enhanced.gap-lg { gap: var(--space-8); }
.grid-enhanced.gap-xl { gap: var(--space-12); }

/* Responsive Grid Columns */
.grid-responsive-1 { grid-template-columns: 1fr; }
.grid-responsive-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-responsive-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-responsive-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Advanced Flexbox Layouts */
.flex-enhanced {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.flex-enhanced.align-stretch { align-items: stretch; }
.flex-enhanced.align-start { align-items: flex-start; }
.flex-enhanced.align-center { align-items: center; }
.flex-enhanced.align-end { align-items: flex-end; }

.flex-enhanced.justify-start { justify-content: flex-start; }
.flex-enhanced.justify-center { justify-content: center; }
.flex-enhanced.justify-end { justify-content: flex-end; }
.flex-enhanced.justify-between { justify-content: space-between; }
.flex-enhanced.justify-around { justify-content: space-around; }
.flex-enhanced.justify-evenly { justify-content: space-evenly; }

/* Enhanced Typography Responsive System */
.text-responsive-xs {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    line-height: 1.4;
}

.text-responsive-sm {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.5;
}

.text-responsive-base {
    font-size: clamp(1rem, 3vw, 1.125rem);
    line-height: 1.6;
}

.text-responsive-lg {
    font-size: clamp(1.125rem, 3.5vw, 1.25rem);
    line-height: 1.5;
}

.text-responsive-xl {
    font-size: clamp(1.25rem, 4vw, 1.5rem);
    line-height: 1.4;
}

.text-responsive-2xl {
    font-size: clamp(1.5rem, 5vw, 2rem);
    line-height: 1.3;
}

.text-responsive-3xl {
    font-size: clamp(1.875rem, 6vw, 2.5rem);
    line-height: 1.2;
}

.text-responsive-4xl {
    font-size: clamp(2.25rem, 7vw, 3rem);
    line-height: 1.1;
}

/* Enhanced Card Layouts */
.card-masonry {
    columns: 1;
    column-gap: var(--space-6);
    break-inside: avoid;
}

@media (min-width: 640px) {
    .card-masonry { columns: 2; }
}

@media (min-width: 768px) {
    .card-masonry { columns: 3; }
}

@media (min-width: 1024px) {
    .card-masonry { columns: 4; }
}

.card-masonry .card {
    break-inside: avoid;
    margin-bottom: var(--space-6);
}

/* Enhanced Content Layout */
.content-layout-sidebar {
    display: grid;
    gap: var(--space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .content-layout-sidebar {
        grid-template-columns: 1fr 300px;
    }
    
    .content-layout-sidebar.sidebar-left {
        grid-template-columns: 300px 1fr;
    }
}

/* Hero Section Enhanced Responsive */
.hero-responsive {
    min-height: 60vh;
    display: flex;
    align-items: center;
    padding: var(--space-16) 0;
}

@media (min-width: 768px) {
    .hero-responsive {
        min-height: 70vh;
        padding: var(--space-20) 0;
    }
}

@media (min-width: 1024px) {
    .hero-responsive {
        min-height: 80vh;
        padding: var(--space-24) 0;
    }
}

/* Enhanced Navigation Responsive */
.nav-responsive {
    padding: var(--space-4) 0;
    transition: all var(--transition-normal);
}

@media (min-width: 768px) {
    .nav-responsive {
        padding: var(--space-6) 0;
    }
}

.nav-responsive.compact {
    padding: var(--space-3) 0;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Enhanced Form Layouts */
.form-layout-stacked .form-group {
    margin-bottom: var(--space-6);
}

.form-layout-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: end;
}

.form-layout-grid {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .form-layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .form-layout-grid.cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Enhanced Image Layouts */
.image-responsive {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-normal);
}

.image-responsive:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.image-gallery {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.image-gallery.dense {
    grid-auto-rows: 200px;
}

.image-gallery .image-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background: var(--gray-200);
}

.image-gallery .image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-normal);
}

.image-gallery .image-item:hover img {
    transform: scale(1.1);
}

/* Enhanced Button Layouts */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.button-group.vertical {
    flex-direction: column;
    align-items: stretch;
}

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

.button-group.spread {
    justify-content: space-between;
}

/* Enhanced Table Responsive */
.table-responsive {
    overflow-x: auto;
    margin: var(--space-6) 0;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
}

.table-enhanced {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.table-enhanced th,
.table-enhanced td {
    padding: var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--gray-200);
}

.table-enhanced th {
    background: var(--gray-50);
    font-weight: 600;
    color: var(--gray-800);
}

.table-enhanced tbody tr:hover {
    background: var(--gray-50);
}

/* Enhanced Utility Classes */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-photo { aspect-ratio: 4 / 3; }
.aspect-wide { aspect-ratio: 21 / 9; }

.overflow-hidden { overflow: hidden; }
.overflow-scroll { overflow: auto; }
.overflow-x-scroll { overflow-x: auto; }
.overflow-y-scroll { overflow-y: auto; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.position-sticky { position: sticky; }

.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* Enhanced Visibility Controls */
.visible { visibility: visible; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Enhanced Responsive Display */
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.hidden { display: none; }

/* Responsive Display Utilities */
@media (max-width: 639px) {
    .xs\:block { display: block; }
    .xs\:hidden { display: none; }
    .xs\:flex { display: flex; }
    .xs\:grid { display: grid; }
}

@media (min-width: 640px) {
    .sm\:block { display: block; }
    .sm\:hidden { display: none; }
    .sm\:flex { display: flex; }
    .sm\:grid { display: grid; }
}

@media (min-width: 768px) {
    .md\:block { display: block; }
    .md\:hidden { display: none; }
    .md\:flex { display: flex; }
    .md\:grid { display: grid; }
}

@media (min-width: 1024px) {
    .lg\:block { display: block; }
    .lg\:hidden { display: none; }
    .lg\:flex { display: flex; }
    .lg\:grid { display: grid; }
}

@media (min-width: 1280px) {
    .xl\:block { display: block; }
    .xl\:hidden { display: none; }
    .xl\:flex { display: flex; }
    .xl\:grid { display: grid; }
}

/* Enhanced Spacing Responsive */
@media (min-width: 640px) {
    .sm\:p-8 { padding: var(--space-8); }
    .sm\:px-8 { padding-left: var(--space-8); padding-right: var(--space-8); }
    .sm\:py-8 { padding-top: var(--space-8); padding-bottom: var(--space-8); }
    .sm\:m-8 { margin: var(--space-8); }
    .sm\:mx-8 { margin-left: var(--space-8); margin-right: var(--space-8); }
    .sm\:my-8 { margin-top: var(--space-8); margin-bottom: var(--space-8); }
}

@media (min-width: 768px) {
    .md\:p-12 { padding: var(--space-12); }
    .md\:px-12 { padding-left: var(--space-12); padding-right: var(--space-12); }
    .md\:py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
    .md\:m-12 { margin: var(--space-12); }
    .md\:mx-12 { margin-left: var(--space-12); margin-right: var(--space-12); }
    .md\:my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
}

@media (min-width: 1024px) {
    .lg\:p-16 { padding: var(--space-16); }
    .lg\:px-16 { padding-left: var(--space-16); padding-right: var(--space-16); }
    .lg\:py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
    .lg\:m-16 { margin: var(--space-16); }
    .lg\:mx-16 { margin-left: var(--space-16); margin-right: var(--space-16); }
    .lg\:my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }
}

/* Enhanced Content Width Controls */
.w-full { width: 100%; }
.w-auto { width: auto; }
.w-fit { width: fit-content; }
.w-min { width: min-content; }
.w-max { width: max-content; }

.max-w-xs { max-width: 20rem; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }
.max-w-full { max-width: 100%; }
.max-w-none { max-width: none; }

/* Enhanced Height Controls */
.h-auto { height: auto; }
.h-fit { height: fit-content; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }

.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-screen { min-height: 100vh; }

/* Print Optimizations */
@media print {
    .print\:hidden { display: none !important; }
    .print\:block { display: block !important; }
    
    .section-spacing-xs,
    .section-spacing-sm,
    .section-spacing-md,
    .section-spacing-lg,
    .section-spacing-xl,
    .section-spacing-2xl {
        padding: 1rem 0 !important;
    }
    
    .card-depth-1,
    .card-depth-2,
    .card-depth-3,
    .card-glass,
    .card-neuro {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
    }
}

/* Dark Mode Preparations */
@media (prefers-color-scheme: dark) {
    :root {
        --gray-50: #1f2937;
        --gray-100: #374151;
        --gray-200: #4b5563;
        --gray-300: #6b7280;
        --gray-400: #9ca3af;
        --gray-500: #d1d5db;
        --gray-600: #e5e7eb;
        --gray-700: #f3f4f6;
        --gray-800: #f9fafb;
        --gray-900: #ffffff;
    }
    
    body {
        background-color: var(--gray-50);
        color: var(--gray-800);
    }
}