/* ======================================================
   CEZEL 2.0
   HERO.CSS FINAL
   WERSJA PRODUKCYJNA
====================================================== */



/* ======================================================
   HEADER
====================================================== */

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    background:rgba(35,35,35,.40);

    backdrop-filter:blur(10px);

    -webkit-backdrop-filter:blur(10px);

    box-shadow:0 3px 18px rgba(0,0,0,.08);

    z-index:1000;

    transition:background .3s ease, box-shadow .3s ease;

}

.header:hover{

    background:rgba(20,20,20,.92);

    box-shadow:0 4px 20px rgba(0,0,0,.18);

}



/* ======================================================
   GŁÓWNY KONTENER
====================================================== */

.container{

    width:100%;

    max-width:1280px;

    margin:0 auto;

    padding:0 40px;

    box-sizing:border-box;

}


/* ======================================================
   HEADER GRID
====================================================== */

.header .container{

    display:grid;

    grid-template-columns:

        190px

        1fr

        auto

        auto;

    align-items:center;

    gap:28px;

    height:82px;

}


/* ======================================================
   LOGO
====================================================== */

.logo img{

    height:70px;

    width:auto;

    display:block;

    object-fit:contain;

}



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

.main-nav{

    display:flex;

    justify-content:center;

}

.main-nav ul{

    display:flex;

    list-style:none;

    gap:34px;

    margin:0;

    padding:0;

}


.main-nav a{

    text-decoration:none;

    color:#ffffff;

    font-size:16px;

    font-weight:500;

    transition:.3s;

    text-shadow:0 1px 3px rgba(0,0,0,.25);

}


.main-nav a:hover{

    color:#c62828;

}



/* ======================================================
   PRZYCISK WYCENY — SWOBODNY, ELEGANCKI STYL
====================================================== */

.btn-header{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 0 15px;

    border:none;

    border-radius:0;

    background:transparent;

    color:#ffffff;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    font-style:italic;

    white-space:nowrap;

    transition:opacity .3s ease;

}

/* Jedno długie, lekko ukośne pociągnięcie */

.btn-header::after{

    content:"";

    position:absolute;

    left:-10%;

    right:-10%;

    bottom:5px;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,255,255,.75) 7%,
        #ffffff 20%,
        #ffffff 80%,
        rgba(255,255,255,.75) 93%,
        transparent 100%
    );

    transform:rotate(-2deg);

    transform-origin:center;

    border-radius:2px;

}

.btn-header:hover{

    opacity:.78;

}




/* ======================================================
   TELEFON — BIAŁY, ELEGANCKI
====================================================== */

.header-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
}

.header-phone .phone-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    flex-shrink: 0;
}

.header-phone .phone-icon svg {
    display: block;
    width: 18px;
    height: 18px;
    stroke: #ffffff;
}

.header-phone a,
.header-phone a:link,
.header-phone a:visited,
.header-phone a:hover,
.header-phone a:active {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: opacity .3s ease;
}

.header-phone a:hover {
    opacity: .75;
}


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

.hero{

    position:relative;

    width:100%;

    height:100vh;

    min-height:820px;

    overflow:hidden;

    display:flex;

    align-items:center;

}


/* ======================================================
   TŁO
====================================================== */

.hero-slider{

    position:absolute;

    inset:0;

    overflow:hidden;

    z-index:1;

}

.hero-slider img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    transition: opacity 2s ease-in-out;

}


/* ======================================================
   GRADIENT
====================================================== */

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.48) 0%,
            rgba(0,0,0,.28) 30%,
            rgba(0,0,0,.10) 55%,
            rgba(0,0,0,0) 100%
        );

    z-index:2;

}


/* ======================================================
   TREŚĆ
====================================================== */


.hero-content{

    position:relative;
    z-index:5;
    width:520px;
    margin-left:6%;
    margin-top:-20px;
    text-align:left;

}


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

.hero-title{

    font-size:48px;

    line-height:1.12;

    font-weight:700;

    color:#ffffff;

    margin:0;

    letter-spacing:-1px;

    text-shadow:0 4px 16px rgba(0,0,0,.45);

}

.hero-title span{

    display:block;

    margin-top:18px;

    font-size:24px;

    font-weight:400;

    color:#C8A46A;

    letter-spacing:1px;

    text-transform:none;

}

.hero-subtitle{

    font-size:20px;

    color:#ffffff;

    opacity:.92;

    margin-bottom:36px;

    text-shadow:0 2px 8px rgba(0,0,0,.30);

}

.hero-categories{

    margin-top:26px;

    margin-bottom:30px;

    font-size:16px;

    line-height:1.7;

    color:#ffffff;

    opacity:.94;

    text-shadow:0 2px 10px rgba(0,0,0,.35);

}

.hero-categories span {
    display: block;
}


/* ======================================================
   ODNOSNIKI HERO – ELEGANCKI STYL CEZEL
====================================================== */

.hero-buttons{

    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:32px;
    margin-top:42px;

}

.hero-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    position:relative;
    color:#ffffff;
    text-decoration:none;
    padding:8px 2px 12px;
    transition:color .3s ease;
}

.hero-link-icon{

    width:30px;
    height:30px;
    flex-shrink:0;
    color:#ffffff;
    transition:
        transform .35s ease,
        color .35s ease;

}

.hero-link-content{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;

}

.hero-link-text{

    font-size:clamp(15px, 1.3vw, 19px);
    font-weight:400;
    font-style:italic;
    line-height:1.25;
    white-space:nowrap;
    transition:color .3s ease;

}


.hero-link-underline{

    display:block;
    width:100%;
    height:2px;
    position:relative;

background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(200,164,106,.35) 12%,
    rgba(200,164,106,.75) 35%,
    #C8A46A 55%,
    rgba(200,164,106,.65) 82%,
    transparent 100%
);

    transform:skewX(-18deg) rotate(-1deg);
    transform-origin:left center;

    transition:
        width .35s ease,
        background .35s ease,
        transform .35s ease;

}


/* Indywidualna długość kresek w HERO */


/* Indywidualna długość kresek w HERO */

.hero-link-realizacje .hero-link-underline {
    width: 105%;
}

.hero-link-kontakt .hero-link-underline {
    width: 110%;
}

/* Efekt po najechaniu */

.hero-link-realizacje:hover .hero-link-underline {
    width: 105%;
}

.hero-link-kontakt:hover .hero-link-underline {
    width: 110%;
}



/* Delikatny złoty akcent ikon */

.hero-link:hover .hero-link-icon{

    color:#d4ad69;
    transform:translateY(-3px);

}

/* Kreska wydłuża się po najechaniu */

.hero-link:hover .hero-link-underline{

    width:112%;

    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(212,173,105,.4) 12%,
        rgba(212,173,105,.85) 40%,
        #e4c58d 58%,
        rgba(212,173,105,.55) 85%,
        transparent 100%
    );

    transform:skewX(-18deg) rotate(0deg);

}

.hero-link:hover .hero-link-text{

    color:#f0d7a7;

}

.hero-link:focus-visible{

    outline:1px solid #d4ad69;
    outline-offset:6px;
    border-radius:3px;

}

/* ======================================================
   TELEFONY
====================================================== */

@media (max-width:768px){

    .hero-buttons{

        flex-direction:column;
        gap:22px;
        margin-top:32px;

    }

    .hero-link{

        gap:13px;
        padding:8px 4px 14px;

    }

    .hero-link-icon{

        width:34px;
        height:34px;

    }

    .hero-link-text{

        font-size:19px;

    }

}

/* ==========================================
   HAMBURGER – tylko na telefonach
========================================== */

.menu-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    width:48px;

    height:48px;

    border:none;

    border-radius:12px;

    background:rgba(255,255,255,.92);

    color:#222;

    font-size:28px;

    cursor:pointer;

    box-shadow:0 6px 20px rgba(0,0,0,.10);

    transition:.3s;

}

.menu-toggle:hover{

    background:#ffffff;

    transform:scale(1.05);

}

/* ======================================================
   DESKTOP
====================================================== */

@media (min-width:1025px){

    .menu-toggle{

        display:none;

    }

}


/* ======================================================
   TABLETY
====================================================== */

@media (max-width:1024px){

}



/* ======================================================
   TELEFONY
====================================================== */

@media (max-width:768px){


}


/* ==========================================
   HERO — TELEFONY
========================================== */

@media (max-width:768px){

    .hero-content{

        width:90%;

        text-align:center;

    }

    .hero-content h1{

        font-size:36px;

        line-height:1.15;

    }

    .hero-content p{

        font-size:18px;

        line-height:1.6;

        margin-top:18px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:16px;

    }

    .hero-buttons .btn{

        width:100%;

    }

}



/* ======================================================
   MAŁE TELEFONY
====================================================== */

@media (max-width:480px){

}

/* ======================================================
   HEADER — MENU MOBILNE
====================================================== */

@media (hover: none) {

    .header:hover {
        background: rgba(35,35,35,.40);
        box-shadow: 0 3px 18px rgba(0,0,0,.08);
    }

    .header.menu-is-open {
        background: rgba(20,20,20,.92);
        box-shadow: 0 4px 20px rgba(0,0,0,.18);
    }

}