/* ==================== RESET ==================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
font-size:16px;
}

body{
overflow-x:hidden;
font-family:"Playfair Display",serif;
}


/* ==================== SLIDER ==================== */

main{
width:100%;
height:auto;
position:relative;
overflow:hidden;
margin-bottom:0;
}

.swiper{
width:100%;
position:relative;
}

.swiper-wrapper{
height:auto;
}

.swiper-slide{
display:flex;
align-items:center;
justify-content:center;
}

.swiper-slide img,
.swiper-slide video{
width:100%;
height:auto;
object-fit:cover;
display:block;
}

main img{
width:100%;
height:100%;
object-fit:cover;
}

.swiper-slide video{
display:block;
width:100%;
height:auto;
}


/* ==================== NAWIGACJA ==================== */

.subpages{
position:absolute;
top:30px;
left:30px;
display:flex;
gap:3rem;
font-size:1.8rem;
letter-spacing:1px;
z-index:100;
}

.subpages a{
text-decoration:none;
color:white;
transition:.2s;
}

.subpages a:hover{
transform:rotate(-8deg);
}

.socials{
position:fixed;
top:30px;
right:30px;
display:flex;
align-items:center;
gap:18px;
z-index:1000;
}

.socials ion-icon{
font-size:3rem;
cursor:pointer;
transition:.2s;
color:white;
}

.socials ion-icon:hover{
transform:scale(1.1);
}


/* ==================== HERO SIGNATURE ==================== */

.hero-signature{
position:absolute;
bottom:180px;
left:70px;
z-index:10;
color:white;
text-shadow:0 4px 20px rgba(0,0,0,0.35);
}

.hero-name{
font-size:4.4rem;
font-weight:300;
letter-spacing:2px;
}

.hero-sub{
font-size:2.3rem;
font-style:italic;
letter-spacing:3px;
margin-top:10px;
opacity:.85;
}


/* ==================== GALERIA ==================== */

section{
width:98%;
margin:10px auto;
display:flex;
justify-content:space-between;
gap:8px;
}

.columns{
width:33.333%;
display:flex;
flex-direction:column;
gap:8px;
}

.ar4-5,
.ar3-2,
.ar4-5-2{
width:100%;
position:relative;
overflow:hidden;
cursor:pointer;
}

section img,
section video{
width:100%;
height:auto;
object-fit:cover;
display:block;
}

.ar4-5 img,
.ar3-2 img,
.ar4-5-2 img{
transition:.2s;
}

.ar4-5:hover img,
.ar3-2:hover img,
.ar4-5:hover img{
transform:scale(1.05);
}


/* ==================== SCROLL ANIMATION ==================== */

.show{
opacity:0;
transform:translateY(20%);
}

.move{
opacity:1;
transform:translateY(0);
transition:.3s ease;
}


/* ==================== FULLSCREEN ==================== */

.fullscreen-container{
position:fixed;
inset:0;
background:white;
display:flex;
justify-content:center;
align-items:center;
z-index:1000;
}

.fullscreen-container img{
max-width:90%;
max-height:90%;
object-fit:contain;
}

.Xhelp{
font-size:5rem;
position:fixed;
top:3%;
right:5%;
opacity:0;
pointer-events:none;
}


/* ==================== ABOUT SECTION ==================== */

.about-section{
width:100%;
background:#f5f5f5;
padding:140px 0;
text-align:center;
}

.about-container{
width:55%;
margin:0 auto;
font-weight:300;
color:#111;
}

.seo-title{
font-size:1.3rem;
font-style:italic;
letter-spacing:1px;
margin-bottom:40px;
opacity:.85;
}

.about-container .lead{
font-size:1.2rem;
line-height:1.9;
margin-bottom:35px;
}

.about-container p{
font-size:1rem;
line-height:2;
margin-bottom:25px;
opacity:.9;
}

@media(max-width:767px){

html{
font-size:13px;
}

section{
width:99%;
margin:4px auto;
gap:4px;
}

.columns{
gap:4px;
}

.subpages{
top:20px;
left:20px;
gap:18px;
font-size:1rem;
}

.socials{
top:20px;
right:20px;
gap:10px;
}

.socials ion-icon{
font-size:2rem;
}

.hero-signature{
bottom:40px;
left:20px;
}

.hero-name{
font-size:2rem;
}

.hero-sub{
font-size:1rem;
}
/* ===== GLOBAL FIX – BLOKADA SCROLLA POZIOMEGO ===== */

html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

/* zabezpieczenie dla wszystkich elementów */
* {
    max-width: 100%;
}

/* slider i sekcje często powodują overflow */
main,
section,
.swiper,
.swiper-wrapper,
.columns {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* obrazy i video */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* zabezpieczenie dla absolutnych elementów */
.subpages,
.socials {
    max-width: 100%;
}
}