.hero{background:#f5f0e6;min-width:320px;min-height:100vh;padding:5px 20px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='%23d4c8b8' opacity='0.15'%3E%3Ccircle cx='50' cy='70' r='22'/%3E%3Ccircle cx='30' cy='40' r='12'/%3E%3Ccircle cx='50' cy='35' r='12'/%3E%3Ccircle cx='70' cy='40' r='12'/%3E%3C/svg%3E");
    background-repeat:repeat;      /* kafelkowanie */
    background-size:160px;         /* ↔ wielkość jednego „kafla” */
}

.hero-container{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    max-width:1200px;
    width:100%;
}

/* ====== Slider + slajdy ====== */
.hero-slider{

    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    max-width:800px;
    width:100%;
    overflow:hidden;
}

.hero-slide{
    position:absolute;
    top:0;left:0;width:100%;
    opacity:0;transform:translateY(30px);
    transition:opacity 1s ease,transform 1s ease;
    pointer-events:none;visibility:hidden;
 
}

.hero-slide.active{
    opacity:1;transform:translateY(0);
    pointer-events:auto;visibility:visible;
    z-index:1;
}

/* animacja treści */
.hero-slide .slide-content{opacity:0;transform:translateY(20px);transition:opacity .8s ease .4s,transform .8s ease .4s;}
.hero-slide.active .slide-content{opacity:1;transform:translateY(0);}

.slide-content{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:20px;
}

/* Obrazki */
.slide-content img{
    max-width:700px;max-height:360px;width:100%;height:auto;object-fit:contain;display:block;

}

/* Tekst slajdu */
.slide-text{max-width:600px;color:#333;text-align:center;}
.slide-text h2{font-size:1.6em;margin-bottom:10px;}
.slide-text p{font-size:1.1em;}

/* ====== Kropki ====== */
.slider-dots{
    display:flex;                /* ← wraca */
    justify-content:center;
    gap:10px;                    /* ← wraca */
    z-index:2;
    position:relative;
    margin-top:15px;
    margin-bottom:10px;
}

.dot{
    width:12px;height:12px;border-radius:50%;
    background:#aaa;cursor:pointer;transition:background-color .3s;
}
.dot.active{background:#000;}

/* ====== Menu ====== */
.hero-menu{
    width:100%;text-align:center;margin-top:20px;
}
.hero-menu ul{list-style:none;margin:0;padding:0;}
.hero-menu li{margin:10px 0;}
.hero-menu a{
    display:inline-block;padding:8px 16px;border:2px solid #000;border-radius:12px;
    color:#000;text-decoration:none;background:transparent;transition:.3s;
}
.hero-menu a:hover{background:#000;color:#fff;}
.hero-menu a.active,
#fullscreen-menu a.active{
    background:#000;
    color:#fff;
}
/* ====== Hamburger + fullscreen menu (bez zmian) ====== */
.hamburger{position:fixed;top:20px;right:20px;width:30px;height:30px;border:2px solid #000;border-radius:8px;background:none;font-size:.9em;color:#000;z-index:9999;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.hamburger::before{content:"☰";font-size:1.6em;line-height:40px;}
.hamburger.active::before{content:"✖";}

/* hamburger domyślnie niewidoczny */
.hamburger{display:none;}

/* klasa, którą JS dodaje po przewinięciu */
.hamburger.visible{display:flex;}


.fullscreen-menu{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#f5f0e6;display:flex;flex-direction:column;justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s;text-align:center;z-index:2000;}
.fullscreen-menu.active{opacity:1;pointer-events:auto;}
.fullscreen-menu ul{list-style:none;margin:0;padding:0;}
.fullscreen-menu li{margin:30px;}
.fullscreen-menu a{font-size:1.5em;border:2px solid #000;padding:10px 20px;border-radius:12px;color:#000;text-decoration:none;transition:.3s;background:transparent;}
.fullscreen-menu a:hover{background:#000;color:#fff;}



/* ====== Responsywność ====== */
@media (max-width:768px){
    .hero-slider{
        min-height:auto;   /* zamiast 420px */
         margin-top: 25px;
    }
    .slider-dots{
        margin-top:8px;    /* mniejszy odstęp od obrazu */
        margin-bottom:12px;/* trochę miejsca nad menu */
    }
}
@media(max-width:600px){.slide-content img{max-width:320px;max-height:200px;}}
@media(max-width:450px){.slide-content img{max-width:280px;max-height:180px;}}
@media(max-width:360px){.slide-content img{max-width:240px;max-height:160px;}}
@media(max-width:320px){
    .slide-content img{max-width:220px;max-height:140px;}
    .hero-menu a{font-size:.7em;padding:4px 8px;}
}

/* ====== Desktop layout ====== */
@media (min-width:1050px){
    .hero{
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .hero-container{
        flex-direction:row;
        align-items:center;
        gap:40px;
    }
    /* konkretny „box” na slajd + kropki tylko na szerokim ekranie */
    .hero-slider{
        flex:0 1 800px;
        min-height:420px;        /* ← przeniesione z wersji ogólnej */
    }
    .hero-menu{
        flex:0 0 200px;
        margin-top:0;
    }
}