/*
Theme Name:     porozmawiAImy.pl theme
Theme URI:      https://creativethemes.com/blocksy/
Description:    Motyw potomny dla Blocksy
Author:         porozmawiAImy.pl
Template:       blocksy
Version:        1.0
*/

/* === HERO ===*/

.hero-wrapper {
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0;
}

.hero-slogan {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: clamp(2.25rem, 6vw + 0.5rem, 5.5rem); /* 36-88 px */
    line-height: 1.12;
    margin: 0 0 1.5rem;
    text-wrap: balance;
}


/* === career cards ===*/
.career-section {
    width: 100%;
    margin: 0 !important;
    text-align: center;
    border-radius: 0;
}

.career-inner {
    max-width: 1140px;
    margin-inline: auto;
}

.section-title {
    font: 800 clamp(2rem, 4vw + 1rem, 3rem)/1.25 'Fraunces', serif;
    margin: 0 0 2.75rem;
}

.career-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem 2.5rem;
    padding: 1.5rem;
}

/* CARD */
.career-card {
    flex: 1 1 23%;
    max-width: 23%;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FDFDFD;
    border: 1px solid #EEE;
    border-radius: 24px;
    padding: .75rem .75rem 4rem; /* ekstra dół dla .card-body */
    color: #1E1E1E;
    text-decoration: none;
    transition: .25s;
}

.career-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .08);
}


/* obrazek */
.career-card figure {
    margin: 0;
    aspect-ratio: 4/5;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
}

.career-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* żółty bloczek */
.card-body {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
    width: 80%;
    background: #FFD647;
    padding: 1rem 1.25rem 1.25rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .1);
    transition: background .25s, color .25s;
}

.card-body h3 {
    font: 800 clamp(.7rem, .45vw + .75rem, .95rem)/1.25 'Fraunces', serif;
    margin: 0;
}

.card-tag {
    font: 600 clamp(.55rem, .3vw + .5rem, .65rem)/1 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6EC5FF;
    margin-bottom: .15rem;
    display: block;
}

/* hover swap */
.career-card:hover .card-body {
    background: #222;
}

.career-card:hover .card-body h3 {
    color: #FFD647;
}

/* === AI-POST BLOCK === */
.ai-post-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
    background: #F7F7F5;
	border: 1px solid #cfe4e4;
    border-radius: 12px;
    padding: 1rem;
}

.ai-post-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
}

.ai-post-content {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    color: #222;
}

.ai-post-breadcrumbs a {
    font-size: .85rem;
    font-weight: 600;
    color: #6EC5FF;
    text-decoration: none;
}

.ai-post-breadcrumbs a:hover {
    color: #FFD647;
}

.ai-post-title {
    font: 800 1.4rem 'Fraunces', serif;
    margin: 0;
}

.ai-post-title a {
    color: #222;
    text-decoration: none;
}

.ai-post-title a:hover {
    color: #6EC5FF;
}

.ai-post-excerpt {
    font-size: 1rem;
    line-height: 1.5;
    margin: 0 0 .75rem;
}

.ai-post-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.ai-post-tags a {
    font-size: .7rem;
    background: #FFD647;
    color: #222;
    padding: .25rem .75rem;
    border-radius: 100px;
    text-decoration: none;
    transition: .2s;
}

.ai-post-tags a:hover {
    background: #222;
    color: #6EC5FF;
}


/* === statsy-big4 === */
.ai-company-stat-box {
    border: 1px solid #cfe4e4;
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    max-width: 180px;
    margin: 1rem 0 auto !important;
	height: 230px;
}

.ai-company-logo {
    height: 15%;
	width: auto;
    filter: grayscale(70%);
    display: block;
    margin: 0 auto 1rem;
}


.ai-company-stat-text {
    font-size: 1.1rem;
    font-weight: 400;
    margin: 0;
    color: #32203d;
}





/* === ANIMACJE === */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: none;
    }
}

.fadeLeft {
    opacity: 0;
    transform: translateX(-40px);
    animation: fadeIn .8s forwards;
}

.fadeRight {
    opacity: 0;
    transform: translateX(40px);
    animation: fadeIn .8s forwards;
}

.delay-1 {
    animation-delay: .25s;
}







/* === tablets ===*/

@media (max-width: 820px) {
    .hero-slogan {
        background: rgba(255, 255, 255, .75);
        padding: 1rem;
        border-radius: 12px;
        width: 100%;
        box-sizing: border-box;
    }

    .wp-block-buttons .wp-block-button a {
        background: #FFD647 !important;
        opacity: 1 !important;
        position: relative;
        z-index: 10;
    }

    /* career card */
    .career-card {
        flex: 1 1 48%;
        max-width: 48%;
    }


}

/* === mobiles ===*/

@media (max-width: 430px) {
    .hero-wrapper {
        margin: 0 !important;
        width: 100% !important;
        border-radius: 0;
    }

    /* slogan */
    .hero-slogan {
        font: 600 clamp(2.25rem, 6vw + 0.5rem, 5.5rem)/1.12 'Fraunces', serif;
        margin: 0 0 1.5rem;
        text-wrap: balance;
    }

    /* career card */
    .career-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    /* quiz clip */
    .quiz-slogan {
        background: rgba(255, 255, 255, .75);
        padding: 1rem;
        border-radius: 12px;
    }


}

/*  ============================ */
/*  bloki kodu - stylowanie */
/*  ============================ */
.wp-block-code,
.wp-block-code code,
pre,
code {
    background-color: #F7F7F5;
    color: #222222;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 1rem;
    border-radius: 6px;
    padding: 1rem;
    margin: 0.5rem;
    overflow-x: auto;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Kod inline (np. w paragrafie) */
code {
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
}