/* ======================================================
   CEZEL 2.0
   RESPONSIVE.CSS
   WERSJA PRODUKCYJNA
====================================================== */


/* ======================================================
   TABLETY
   max-width: 992px
====================================================== */

@media (min-width:769px) and (max-width:992px){

    .header .main-nav{
        display:none;
    }

    .header .menu-toggle{
        display:flex;
    }

    .header .btn-header,
    .header .header-phone{
        display:flex;
    }

    /* Kreska pod kalkulacją dopasowana do napisu */
.header .btn-header{
    width:max-content;
    flex:0 0 auto;
    justify-self:end;
    margin-left:auto;
}

    .header .btn-header::after{
        width:100%;
        max-width:100%;
    }

}



/* ======================================================
   TELEFONY
   max-width: 768px
====================================================== */


@media (max-width:768px){

.header .container{

    grid-template-columns:1fr auto;

    gap:12px;

    padding:0 20px;
}

.btn-header,
.header-phone{

    display:none;
}

.logo img{

    height:65px;

    width:auto;

    display:block;

    object-fit:contain;

}

.menu-toggle{

    justify-self:end;

}

.hero{

    min-height:100vh;

    align-items:flex-start;

    padding-top:120px;


/* ==========================================
   GALERIA — TELEFONY
========================================== */

.gallery {
    padding: 60px 0 50px;
}

.gallery-header {
    margin-bottom: 30px;
}

.gallery-header h2 {
    font-size: 38px;
    line-height: 1.15;
    margin-bottom: 16px;
}

.gallery-header p {
    font-size: 18px;
    line-height: 1.5;
    margin: 0 auto;
}

.gallery-categories {
    gap: 16px 22px;
    margin-bottom: 30px;
}

.gallery-category {
    font-size: 17px;
}

.gallery-viewer {
    width: 92%;
    margin: 0 auto;
}

.gallery-main {
    width: 100%;
}

.gallery-note {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.5;
}

}

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

.hero-container{

    width:86%;

    margin:0 auto;

    text-align:left;

}

.hero-title{

    font-size:30px;

    line-height:1.15;

}

.hero-title span{

    display:block;

    margin-top:18px;

    font-size:24px;

    color:#C8A46A;

}

.hero-categories{

    font-size:16px;

    line-height:1.6;

    margin:30px 0;

}

.hero-buttons{

    display:flex;

    gap:18px;

}

.hero-buttons .btn{

    width:100%;

}

/* ==========================================
   OFERTA
========================================== */

.offer{

    padding:80px 0;

}

.offer-container{

    width:90%;

}

.offer-header{

    margin-bottom:50px;

}

.offer-header h2{

    font-size:34px;

    line-height:1.2;

}

.offer-header p{

    font-size:18px;

    line-height:1.7;

}

.offer-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.offer-card{

    border-radius:18px;

}

.offer-project{

    width:100%;

    height:160px;

    margin-bottom:8px;

    overflow:hidden;

}

.offer-project img{

    width:100%;

    height:160px;

    object-fit:cover;

    display:block;

}

.offer-realization{

    width:100%;

    height:160px;

    overflow:hidden;

}

.offer-realization img{

    width:100%;

    height:160px;

    object-fit:cover;

    display:block;

}

.offer-card h3{

    padding:18px;

    font-size:22px;

}

.offer-bottom{

    margin-top:60px;

}

.offer-bottom p{

    font-size:18px;

    line-height:1.6;

    margin-bottom:30px;

}

/* ==========================================
   MENU MOBILNE
========================================== */

.main-nav{
    display:none;

    position:absolute;
    top:82px;
    left:0;

    width:100%;

    background:#1a1a1a;

    padding:20px 0;

    box-shadow:0 8px 20px rgba(0,0,0,.20);
}

.main-nav.menu-open{
    display:block;
}

.main-nav ul{
    display:flex;
    flex-direction:column;

    gap:0;

    width:100%;

    margin:0;
    padding:0;
}

.main-nav li{
    width:100%;
    text-align:center;
}

.main-nav a{
    display:block;

    padding:16px 20px;

    color:#ffffff;

    font-size:18px;
}

.main-nav a:hover{
    background:#c62828;
    color:#ffffff;
}

/* ======================================================
   O FIRMIE — TELEFONY
====================================================== */

@media (max-width:768px){

    .about-title {
        font-size: 32px;
        line-height: 1.2;
        max-width: 92%;
        transform: translateY(-20px);
        margin-bottom: 4px;
    }

.about-sketch {
    width: 180%;
    height: 180%;
    left: -40%;
    top: -5%;
    bottom: -5%;
}

}

.about-signature {
    transform: translate(0, 120px);
    margin-right: 0;
    justify-content: center;
}

.about {
    padding-top: 130px;
}

/* ======================================================
   MAŁE TELEFONY
   max-width:480px
====================================================== */

@media (max-width:480px){

}

/* ======================================================
   KONTAKT — TELEFONY
====================================================== */

@media (max-width:768px){

    .contact-container{
        width:90%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
        overflow:hidden;
    }

    .contact-content{
        display:grid;
        grid-template-columns:minmax(0, 1fr);
        gap:50px;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .contact-form{
        display:grid;
        grid-template-columns:minmax(0, 1fr);
        gap:24px;
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .contact-field{
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .contact-field input,
    .contact-field select,
    .contact-field textarea{
        display:block;
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .contact-field input[type="file"]{
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
        overflow:hidden;
    }

    .contact-submit{
        max-width:100%;
        box-sizing:border-box;
    }

    .contact-title{
        font-size:32px;
        line-height:1.15;
    }

    .contact-title{
        font-size:32px;
        line-height:1.15;
    }

}



/* ======================================================
   AKCESORIA — TELEFONY
====================================================== */

@media (max-width:768px){

    .accessories{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        padding:70px 20px 80px;
        overflow:hidden;
    }

    .accessories-container{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    .accessories-header{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        margin-bottom:45px;
    }

    .accessories-header h2{
        font-family: Georgia, "Times New Roman", serif !important;
        font-size:38px !important;
        font-weight:700 !important;
        line-height:1.15 !important;
    }

    .accessories-category{
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        grid-template-columns:1fr;
    }

    .accessories-category h3{
        font-size:32px !important;
        line-height:1.2 !important;
        margin-bottom:16px !important;
    }

    .accessories-kitchen-sketch{
        width:72%;
        margin:0 auto -35px;
    }

}