/* ===========================================================
   SAKURA BEAUTY
   CAREER.CSS
   CZĘŚĆ 1
   Hero + Story
=========================================================== */

:root{

    --gold:#c7a06b;
    --gold-dark:#b58d58;
    --text:#2d2d2d;
    --text-light:#666;
    --bg:#faf8f6;
    --white:#fff;
    --radius:24px;
    --shadow:0 25px 60px rgba(0,0,0,.08);
    --transition:.35s ease;

}

/* ===========================================================
CONTAINER
=========================================================== */

.career-hero .container,
.manifest-section .container,
.career-section .container,
.career-form .container{

    width:min(1280px,92%);
    margin:auto;

}

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

.career-hero{

    position:relative;

    min-height:880px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:
    linear-gradient(
        90deg,
        rgba(18,18,18,.52) 0%,
        rgba(18,18,18,.26) 30%,
        rgba(18,18,18,.08) 60%,
        rgba(18,18,18,0) 88%
    ),
    url("assets/zespol.jpg");

    background-size:cover;

    background-position:86% center;

    color:#fff;

}
.career-hero::before{
    display:none;
}
.career-hero::after{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to bottom,
        rgba(250,248,246,0) 82%,
        rgba(250,248,246,.9) 97%,
        #faf8f6 100%
    );

    pointer-events:none;

}

.hero-content{

    position:relative;

    z-index:2;

    max-width:640px;
    padding-top:20px;

}

.hero-eyebrow{

    display:inline-block;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:.82rem;

    color:var(--gold);

    margin-bottom:18px;

}

.hero-content h1{

    font-family:"Cormorant Garamond",serif;

    font-size:5rem;

    line-height:.95;

    margin-bottom:28px;
    font-weight:500;

}

.hero-subtitle{

    font-size:1.12rem;

    line-height:1.75;

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

    margin-bottom:18px;

    max-width:640px;

}

/* ===========================================================
BUTTONS
=========================================================== */

.hero-buttons{

    display:flex;

    gap:20px;

    margin-top:45px;

    flex-wrap:wrap;

}

.hero-cta{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:999px;

    background:var(--gold);

    color:#fff;

    text-decoration:none;

    transition:var(--transition);

    font-weight:600;

}

.hero-cta:hover{

    background:var(--gold-dark);

    transform:translateY(-3px);

}

.hero-cta-secondary{

    background:transparent;

    border:1px solid rgba(255,255,255,.5);

}

.hero-cta-secondary:hover{

    background:#fff;

    color:#222;

}

/* ===========================================================
STATYSTYKI
=========================================================== */

.hero-stats{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:22px;

    margin-top:70px;

}

.hero-stat{

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

    backdrop-filter:blur(10px);

    border:1px solid rgba(255,255,255,.15);

    padding:22px;

    border-radius:18px;

    text-align:center;

}

.hero-stat strong{

    display:block;

    font-size:1.4rem;

    margin-bottom:8px;

}

.hero-stat span{

    font-size:.92rem;

    opacity:.9;

}

/* ===========================================================
TWORZYMY PIĘKNO
=========================================================== */

.manifest-section{

    padding:120px 0;

    background:#faf8f6;

}

.story-header{

    text-align:center;

    max-width:850px;

    margin:auto auto 70px;

}

.section-title{

    font-family:"Cormorant Garamond",serif;

    font-size:3rem;

    color:var(--text);

    margin:18px 0;

}

.gold-line{

    width:90px;

    height:2px;

    background:var(--gold);

    margin:25px auto 35px;

}

.story-image{

    margin:0 auto 60px;

    max-width:1000px;

    overflow:hidden;

    border-radius:28px;

    box-shadow:var(--shadow);

}

.story-image img{

    display:block;

    width:100%;

    transition:1s;

}

.story-image:hover img{

    transform:scale(1.04);

}

.story-quote{

    max-width:760px;

    margin:50px auto;

    text-align:center;

    font-size:2rem;

    font-family:"Cormorant Garamond",serif;

    color:#444;

    line-height:1.4;

}

.story-content{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.story-content h3{

    font-size:2rem;

    margin-bottom:25px;

    font-family:"Cormorant Garamond",serif;

}

.story-content p{

    color:#666;

    line-height:2;

    font-size:1.05rem;

}

.story-content .hero-cta{

    margin-top:40px;

}

/* ===========================================================
TABLET
=========================================================== */

@media(max-width:992px){

.hero-content h1{

    font-size:3.2rem;

}

.hero-stats{

    grid-template-columns:repeat(2,1fr);

}

}

/* ===========================================================
MOBILE
=========================================================== */

@media(max-width:768px){

.career-hero{

    min-height:640px;

    padding:120px 0;

}

.hero-content h1{

    font-size:2.6rem;

}

.hero-buttons{

    flex-direction:column;

}

.hero-cta{

    width:100%;

}

.hero-stats{

    grid-template-columns:1fr;

}

.section-title{

    font-size:2.3rem;

}

.story-quote{

    font-size:1.6rem;

}

}
/* ===========================================================
   MANIFEST SAKURA BEAUTY
=========================================================== */

.manifest-section{

    padding:140px 0;

    background:#ffffff;

}

.manifest-grid{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.manifest-card{

    background:#fff;

    border:1px solid #eee;

    border-radius:26px;

    padding:50px 40px;

    transition:.35s;

    position:relative;

    overflow:hidden;

    box-shadow:0 18px 40px rgba(0,0,0,.05);

}

.manifest-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--gold),
        #e6cfad
    );

}

.manifest-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.10);

}

.manifest-number{

    display:inline-flex;

    width:70px;

    height:70px;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    background:#faf7f2;

    color:var(--gold);

    font-size:1.3rem;

    font-weight:700;

    margin-bottom:30px;

}

.manifest-card h3{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    margin-bottom:20px;

    color:var(--text);

}

.manifest-card p{

    color:#666;

    line-height:1.9;

    font-size:1rem;

}

/* ===========================================================
   CTA POD MANIFESTEM
=========================================================== */

.manifest-cta{

    margin-top:90px;

    text-align:center;

}

.manifest-cta p{

    max-width:720px;

    margin:0 auto 35px;

    line-height:1.9;

    color:#666;

}

/* ===========================================================
   ANIMACJA KART
=========================================================== */

.manifest-card{

    opacity:0;

    transform:translateY(40px);

    animation:fadeUp .8s forwards;

}

.manifest-card:nth-child(2){

    animation-delay:.15s;

}

.manifest-card:nth-child(3){

    animation-delay:.3s;

}

@keyframes fadeUp{

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ===========================================================
   TABLET
=========================================================== */

@media(max-width:992px){

.manifest-grid{

    grid-template-columns:1fr;

}

.manifest-card{

    padding:40px 30px;

}

}

/* ===========================================================
   MOBILE
=========================================================== */

@media(max-width:768px){

.manifest-section{

    padding:90px 0;

}

.manifest-card{

    border-radius:20px;

}

.manifest-card h3{

    font-size:1.7rem;

}

.manifest-number{

    width:60px;

    height:60px;

    font-size:1.1rem;

}

}
/* ===========================================================
   AKTUALNIE REKRUTUJEMY
=========================================================== */

.career-section{

    padding:140px 0;

    background:#faf8f6;

}

.career-header{

    text-align:center;

    max-width:760px;

    margin:0 auto 80px;

}

.career-header p{

    color:#666;

    line-height:1.9;

}

.career-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

}

.career-card{

    background:#fff;

    border-radius:28px;

    padding:45px;

    border:1px solid #ececec;

    transition:.35s;

    position:relative;

    overflow:hidden;

    box-shadow:0 20px 50px rgba(0,0,0,.05);

}

.career-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        var(--gold),
        #ead8b9
    );

}

.career-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.10);

}

.career-number{

    width:68px;

    height:68px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f8f4ef;

    color:var(--gold);

    font-size:1.3rem;

    font-weight:700;

    margin-bottom:25px;

}

.career-card h3{

    font-family:"Cormorant Garamond",serif;

    font-size:2rem;

    margin-bottom:20px;

    color:#2d2d2d;

}

.career-card p{

    color:#666;

    line-height:1.9;

    margin-bottom:30px;

}

.career-meta{

    list-style:none;

    padding:0;

    margin:0 0 35px;

}

.career-meta li{

    padding:10px 0;

    border-bottom:1px solid #efefef;

    color:#555;

    font-size:.95rem;

}

.career-meta li:last-child{

    border-bottom:none;

}

.career-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:999px;

    border:none;

    cursor:pointer;

    background:var(--gold);

    color:#fff;

    font-weight:600;

    transition:.3s;

}

.career-link:hover{

    background:var(--gold-dark);

    transform:translateY(-2px);

}

/* ===========================================================
   BLOK "NIE ZNALAZŁEŚ STANOWISKA"
=========================================================== */

.career-extra{

    margin-top:100px;

    background:#fff;

    padding:70px;

    border-radius:28px;

    text-align:center;

    box-shadow:0 25px 60px rgba(0,0,0,.05);

}

.career-extra p{

    max-width:720px;

    margin:25px auto 40px;

    color:#666;

    line-height:1.9;

}

.career-extra .btn-gold{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 36px;

    border-radius:999px;

}

/* ===========================================================
   RESPONSYWNOŚĆ
=========================================================== */

@media(max-width:1100px){

    .career-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .career-section{

        padding:90px 0;

    }

    .career-card{

        padding:30px;

        border-radius:20px;

    }

    .career-card h3{

        font-size:1.6rem;

    }

    .career-extra{

        padding:40px 25px;

        border-radius:20px;

    }

}
/* ===========================================================
   FORMULARZ REKRUTACYJNY
=========================================================== */

.career-form{

    padding:140px 0;

    background:#ffffff;

}

.career-form-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.career-form-header p{

    color:#666;

    line-height:1.9;

}

.application-form{

    max-width:960px;

    margin:auto;

    background:#fff;

    padding:60px;

    border-radius:30px;

    border:1px solid #ece8e3;

    box-shadow:0 25px 70px rgba(0,0,0,.06);

}

.form-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:28px;

    margin-bottom:25px;

}

.form-group{

    display:flex;

    flex-direction:column;

}

.form-group label{

    margin-bottom:10px;

    font-weight:600;

    color:#444;

    font-size:.95rem;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:16px 18px;

    border:1px solid #ddd;

    border-radius:12px;

    background:#fff;

    font-size:15px;

    transition:.3s;

    font-family:inherit;

}

.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover{

    border-color:#c9a882;

}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(199,160,107,.12);

}

.form-group textarea{

    min-height:180px;

    resize:vertical;

}

input[type=file]{

    cursor:pointer;

    padding:14px;

}

input[type=file]::file-selector-button{

    border:none;

    background:var(--gold);

    color:#fff;

    padding:12px 20px;

    border-radius:8px;

    cursor:pointer;

    margin-right:15px;

    transition:.3s;

}

input[type=file]::file-selector-button:hover{

    background:var(--gold-dark);

}

.checkbox{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin:35px 0;

    cursor:pointer;

}

.checkbox input{

    margin-top:4px;

    width:20px;

    height:20px;

}

.checkbox span{

    line-height:1.8;

    color:#555;

    font-size:.95rem;

}

.application-form .btn-gold{

    width:100%;

    border:none;

    padding:18px;

    border-radius:999px;

    font-size:16px;

    cursor:pointer;

    transition:.3s;

}

.application-form .btn-gold:hover{

    transform:translateY(-2px);

    box-shadow:0 15px 35px rgba(199,160,107,.30);

}

/* ===========================================================
   PLACEHOLDERY
=========================================================== */

::placeholder{

    color:#999;

}

/* ===========================================================
   RESPONSYWNOŚĆ
=========================================================== */

@media(max-width:900px){

    .form-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .career-form{

        padding:90px 0;

    }

    .application-form{

        padding:30px;

        border-radius:20px;

    }

    .checkbox{

        align-items:flex-start;

    }

}
/* ===========================================================
   SAKURA BEAUTY
   CAREER.CSS
   CZĘŚĆ 5
   Animacje • Premium • Mobile
=========================================================== */

/* Płynne przewijanie */

html{

    scroll-behavior:smooth;

}

/* Animacje sekcji */

.hero-content,
.story-header,
.story-image,
.story-content,
.manifest-card,
.career-card,
.career-extra,
.career-form-header,
.application-form{

    animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

    from{

        opacity:0;
        transform:translateY(35px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/* Zdjęcia */

.story-image img,
.career-hero{

    transition:.8s;

}

.story-image:hover img{

    transform:scale(1.05);

}

/* Przyciski */

.hero-cta,
.btn-gold,
.career-link{

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

}

.hero-cta:hover,
.btn-gold:hover,
.career-link:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(199,160,107,.25);

}

/* Formularz */

.application-form{

    position:relative;

}

.application-form::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:linear-gradient(
        90deg,
        var(--gold),
        #ead5af
    );

    border-radius:30px 30px 0 0;

}

/* Linki */

a{

    transition:.3s;

}

/* Karty */

.manifest-card,
.career-card{

    will-change:transform;

}

/* Responsywność */

@media(max-width:1200px){

    .hero-content{

        max-width:650px;

    }

}

@media(max-width:992px){

    .career-hero{

        min-height:650px;

    }

    .hero-content{

        max-width:100%;

    }

}

@media(max-width:768px){

    .career-hero{

        background-position:center center;

        text-align:center;

    }

    .hero-content{

        margin:auto;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-stats{

        margin-top:45px;

    }

    .story-image{

        margin-bottom:40px;

    }

    .career-card{

        padding:28px;

    }

    .application-form{

        padding:28px;

    }

}

@media(max-width:576px){

    .hero-content h1{

        font-size:2.2rem;

    }

    .section-title{

        font-size:2rem;

    }

    .hero-subtitle{

        font-size:1rem;

    }

    .story-quote{

        font-size:1.35rem;

    }

    .hero-cta,
    .btn-gold,
    .career-link{

        width:100%;

    }

}