/* ============================================
   RESPONSIVE HELPERS - Elastyczne rozwiązania zamiast hardcodingu
   ============================================ */

:root {
    /* Breakpointy jako zmienne CSS */
    --bp-xs: 375px;      /* iPhone SE, małe telefony */
    --bp-sm: 480px;      /* Średnie telefony */
    --bp-md: 768px;      /* Duże telefony, małe tablety */
    --bp-lg: 1024px;     /* Tablety */
    --bp-xl: 1440px;     /* Desktop */
    
    /* Spacing - używaj clamp() dla elastyczności */
    --spacing-xs: clamp(4px, 1vw, 8px);
    --spacing-sm: clamp(8px, 2vw, 16px);
    --spacing-md: clamp(12px, 3vw, 24px);
    --spacing-lg: clamp(16px, 4vw, 32px);
    --spacing-xl: clamp(24px, 5vw, 48px);
    
    /* Font sizes - responsive z clamp() */
    --font-xs: clamp(10px, 2.5vw, 12px);
    --font-sm: clamp(12px, 3vw, 14px);
    --font-base: clamp(14px, 3.5vw, 16px);
    --font-lg: clamp(16px, 4vw, 18px);
    --font-xl: clamp(18px, 4.5vw, 20px);
    --font-2xl: clamp(20px, 5vw, 24px);
    --font-3xl: clamp(24px, 6vw, 32px);
    --font-4xl: clamp(28px, 7vw, 36px);
    
    /* Container widths */
    --container-padding: clamp(1rem, 4vw, 2rem);
    --container-max-width: min(100%, 1400px);
    
    /* Safe area insets - dla urządzeń z notchem */
    --safe-top: env(safe-area-inset-top, 0);
    --safe-bottom: env(safe-area-inset-bottom, 0);
    --safe-left: env(safe-area-inset-left, 0);
    --safe-right: env(safe-area-inset-right, 0);
}

/* ============================================
   UTILITY CLASSES - Gotowe klasy do użycia
   ============================================ */

/* Container z automatycznym paddingiem i max-width */
.container-responsive {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    padding-left: calc(var(--container-padding) + var(--safe-left));
    padding-right: calc(var(--container-padding) + var(--safe-right));
    box-sizing: border-box;
}

/* Flexbox utilities */
.flex-responsive {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.flex-responsive > * {
    flex: 1 1 auto;
    min-width: 0; /* Zapobiega overflow */
}

/* Grid responsive - automatycznie dostosowuje kolumny */
.grid-responsive {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--spacing-md);
}

/* Text responsive */
.text-responsive {
    font-size: var(--font-base);
    line-height: 1.6;
}

.text-responsive-lg {
    font-size: var(--font-lg);
    line-height: 1.5;
}

.text-responsive-xl {
    font-size: var(--font-xl);
    line-height: 1.4;
}

/* Spacing utilities */
.spacing-responsive {
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
}

/* ============================================
   MEDIA QUERIES - Więcej breakpointów
   ============================================ */

/* Extra Small Devices (iPhone SE, małe telefony) */
@media (max-width: 375px) {
    :root {
        --container-padding: clamp(0.75rem, 3vw, 1rem);
        --spacing-md: clamp(8px, 2vw, 16px);
    }
    
    /* Zmniejsz padding i marginesy dla bardzo małych ekranów */
    .container-responsive {
        padding-left: clamp(0.5rem, 2vw, 0.75rem);
        padding-right: clamp(0.5rem, 2vw, 0.75rem);
    }
}

/* Small Devices (średnie telefony) */
@media (min-width: 376px) and (max-width: 480px) {
    :root {
        --container-padding: clamp(0.75rem, 3.5vw, 1.25rem);
    }
}

/* Medium Devices (duże telefony, małe tablety) */
@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --container-padding: clamp(1rem, 4vw, 1.5rem);
    }
    
    /* Dla tabletów w orientacji pionowej */
    .grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
    }
}

/* Large Devices (tablety) */
@media (min-width: 769px) and (max-width: 1024px) {
    :root {
        --container-padding: clamp(1.5rem, 5vw, 2rem);
    }
    
    /* Tablety - 2 kolumny zamiast 1 */
    .grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(min(50%, 400px), 1fr));
    }
}

/* Extra Large Devices (desktop) */
@media (min-width: 1025px) {
    :root {
        --container-padding: 2rem;
    }
    
    .grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(min(33.333%, 350px), 1fr));
    }
}

/* ============================================
   HELPER FUNCTIONS - Użyj w swoich stylach
   ============================================ */

/* Przykład użycia w innych plikach CSS:
   
   .my-element {
       padding: var(--spacing-md);
       font-size: var(--font-base);
       max-width: var(--container-max-width);
   }
   
   .my-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
       gap: var(--spacing-md);
   }
   
   .my-text {
       font-size: clamp(14px, 3.5vw, 18px);
       line-height: clamp(1.4, 4vw, 1.6);
   }
*/

/* ============================================
   FIXES DLA NACHODZENIA ZAWARTOŚCI
   ============================================ */

/* Zapobiega overflow na małych ekranach */
* {
    box-sizing: border-box;
}

/* Upewnij się, że elementy nie wychodzą poza viewport */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Flexbox - zapobiega nachodzeniu */
.flex-no-overlap {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.flex-no-overlap > * {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

/* Grid - zapobiega nachodzeniu */
.grid-no-overlap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--spacing-sm);
    width: 100%;
}

/* Text overflow protection */
.text-no-overflow {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
}

/* Container z overflow protection */
.container-no-overlap {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    box-sizing: border-box;
}