/* ========================================
   MOBILE FIX - ŁATKA NAPRAWCZA
   Dodaj ten plik po _shared_styles.css:
   <link rel="stylesheet" href="_mobile_fix.css">
======================================== */

/* === GLOBALNE NAPRAWY OVERFLOW === */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    position: relative !important;
}

/* === KONTENERY === */
/* Container ma max-width 1500px z _shared_styles.css - nie nadpisuj na desktop */
@media (max-width: 768px) {
    .container {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        overflow-x: hidden;
    }
}

/* === NAVBAR MOBILE FIX === */
@media (max-width: 992px) {
    .navbar {
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
    }
    
    .nav-container {
        padding: 0 15px;
        max-width: 100%;
    }
    
    .nav-menu {
        max-width: 85%;
        overflow-y: auto;
    }
}

/* === HERO SECTION MOBILE FIX === */
@media (max-width: 768px) {
    .hero {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        overflow: hidden;
        min-height: 280px !important;
        height: 280px !important;
        margin-bottom: 30px !important;
    }
    
    .hero-container {
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }
    
    .hero-content {
        width: 100%;
        max-width: 100%;
        padding: 15px !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    
    .hero-title {
        font-size: 24px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    
    .hero-subtitle {
        font-size: 16px !important;
        word-wrap: break-word;
    }
    
    .hero-buttons {
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* === CONTENT GRID MOBILE FIX === */
@media (max-width: 992px) {
    .content-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 25px !important;
    }
    
    .content-grid .content-text,
    .content-grid .content-image,
    .content-grid.reverse .content-text,
    .content-grid.reverse .content-image {
        width: 100% !important;
        max-width: 100% !important;
        order: unset !important;
    }
    
    /* Zdjęcie na górze */
    .content-grid .content-image,
    .content-grid.reverse .content-image {
        order: 1 !important;
    }
    
    .content-grid .content-text,
    .content-grid.reverse .content-text {
        order: 2 !important;
    }
}

/* === OBRAZKI MOBILE FIX === */
img {
    max-width: 100% !important;
    height: auto !important;
}

.content-image img,
.image-item img,
.product-image img,
.carousel-image img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

/* === IMAGE GRID MOBILE FIX === */
@media (max-width: 768px) {
    .image-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .image-grid .image-item {
        width: 100% !important;
    }
}

/* === CAROUSEL MOBILE FIX (NAJWAŻNIEJSZE!) === */
@media (max-width: 992px) {
    .carousel-wrapper {
        padding: 0 45px !important;
        max-width: 100%;
        overflow: hidden;
    }
    
    .carousel-container {
        overflow: hidden !important;
        clip-path: none !important;
        width: 100% !important;
    }
    
    .carousel-track {
        overflow: hidden;
    }
    
    .carousel-btn {
        width: 35px !important;
        height: 35px !important;
    }
    
    .carousel-btn-prev {
        left: 5px !important;
    }
    
    .carousel-btn-next {
        right: 5px !important;
    }
}

@media (max-width: 768px) {
    .carousel-wrapper {
        padding: 0 40px !important;
    }
    
    .carousel-card {
        flex: 0 0 100% !important;
        min-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .carousel-wrapper {
        padding: 0 35px !important;
    }
    
    .carousel-btn {
        width: 30px !important;
        height: 30px !important;
    }
    
    .carousel-btn i {
        font-size: 12px !important;
    }
}

/* === TILES GRID MOBILE FIX - Flexbox === */
/* Matching _shared_styles.css - gap 20px (fixed) */

@media (max-width: 1320px) {
    .tiles-container {
        padding: 0 15px !important;
    }
    
    /* Oferta: 5+5 → 2 */
    .tiles-grid-oferta {
        max-width: 500px !important; /* 2×240 + 1×20 */
        gap: 20px !important;
    }
    
    /* Miasta: 5 → 2 */
    .tiles-grid-5 {
        max-width: 500px !important; /* 2×240 + 1×20 */
        gap: 20px !important;
        justify-content: center !important;
    }
}

@media (max-width: 1220px) {
    /* Oferta/Inne Woj.: 4 → 2 */
    .tiles-grid-4,
    .tiles-grid.tiles-grid-4 {
        max-width: 580px !important; /* 2×280 + 1×20 */
        gap: 20px !important;
    }
    
    /* Baza wiedzy: 6 → 3 */
    .tiles-grid-6,
    .tiles-grid.tiles-grid-6 {
        max-width: 580px !important; /* 3×180 + 2×20 */
        gap: 20px !important;
    }
}

/* Mobile: wszystko → 1 w rzędzie */
@media (max-width: 620px) {
    .tiles-container {
        padding: 0 12px !important;
    }
    
    .tiles-grid-4,
    .tiles-grid.tiles-grid-4 {
        max-width: 300px !important;
    }
    
    .tiles-grid-4 .tile,
    .tiles-grid.tiles-grid-4 .tile {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 600px) {
    .tiles-grid-6,
    .tiles-grid.tiles-grid-6 {
        max-width: 280px !important;
    }
    
    .tiles-grid-6 .tile,
    .tiles-grid.tiles-grid-6 .tile {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 540px) {
    .tiles-grid-oferta,
    .tiles-grid-5 {
        max-width: 100% !important;
        padding: 0 15px !important;
        justify-content: center !important;
    }
    
    .tiles-grid-oferta .tile,
    .tiles-grid-5 .tile {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 280px !important;
    }
}

/* Mobilny styl kafelków - wszystkie typy */
@media (max-width: 600px) {
    .tile {
        min-height: 65px !important;
        padding: 10px 15px !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 12px !important;
    }
    
    .tile-icon {
        width: 34px !important;
        height: 34px !important;
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .tile-name {
        font-size: 12px !important;
        text-align: left !important;
    }
}

/* === PRODUCTS GRID MOBILE FIX === */
@media (max-width: 768px) {
    .products-section {
        padding: 50px 0 !important;
    }
    
    .products-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .product-card {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .product-info {
        padding: 15px !important;
    }
    
    .product-info h3 {
        font-size: 14px !important;
    }
}

/* === CTA SECTION MOBILE FIX === */
@media (max-width: 768px) {
    .cta-section {
        padding: 50px 15px !important;
    }
    
    .cta-content {
        padding: 0 10px;
    }
    
    .cta-title {
        font-size: 22px !important;
        word-wrap: break-word;
    }
    
    .cta-text {
        font-size: 14px !important;
        padding: 0 5px;
    }
    
    .cta-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    .cta-buttons .btn {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
    }
}

/* === FOOTER MOBILE FIX === */
@media (max-width: 768px) {
    .footer {
        padding: 40px 15px 20px !important;
    }
    
    .footer-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }
    
    .footer-social {
        justify-content: center !important;
    }
    
    .footer-links ul {
        text-align: center;
    }
    
    .contact-item {
        justify-content: center;
    }
}

/* === SEKCJE CONTENT MOBILE FIX === */
@media (max-width: 768px) {
    .content-section {
        padding: 50px 0 !important;
    }
    
    .section-title,
    .section-title-left {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 25px !important;
    }
    
    .tiles-title,
    .tiles-subtitle {
        font-size: 20px !important;
        line-height: 1.3 !important;
        margin-bottom: 25px !important;
    }
    
    .content-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    
    .content-text p {
        margin-bottom: 15px !important;
    }
    
    .feature-list li {
        font-size: 14px !important;
    }
    
    .feature-list.two-columns {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
}

/* === BUTTONS MOBILE FIX === */
@media (max-width: 480px) {
    .btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
    }
    
    .btn-primary,
    .btn-light,
    .btn-outline-light {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* === BACK TO TOP MOBILE FIX === */
@media (max-width: 768px) {
    .back-to-top {
        bottom: 15px !important;
        right: 15px !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 16px !important;
    }
}

/* === TYPOGRAPHY MOBILE FIX === */
@media (max-width: 768px) {
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
    }
    
    p, span, a, li {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* === TABLES MOBILE FIX (jeśli są) === */
@media (max-width: 768px) {
    table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* === IFRAME/EMBED MOBILE FIX === */
iframe,
embed,
object,
video {
    max-width: 100% !important;
}

/* === PRELOADER MOBILE FIX === */
@media (max-width: 768px) {
    .preloader {
        width: 100%;
        max-width: 100%;
    }
    
    .loader {
        width: 50px;
        height: 50px;
    }
    
    .loader-inner {
        width: 50px;
        height: 50px;
    }
}

/* === DODATKOWE ZABEZPIECZENIA === */
/* Ukryj poziomy scrollbar na całej stronie */
::-webkit-scrollbar:horizontal {
    display: none;
}

/* Firefox */
html {
    scrollbar-width: thin;
}

/* Zabezpieczenie przed elementami wychodzącymi poza viewport - TYLKO na mobile */
@media (max-width: 768px) {
    [class*="wrapper"],
    [class*="grid"],
    [class*="section"]:not(.content-section):not(.tiles-section) {
        max-width: 100%;
    }
}