/* =========================================================
   CTA / FORMULARZ KONTAKTOWY
   ========================================================= */


/* FULL WIDTH */

.ctasekcja.alignfull {
    width: 100vw;
    max-width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    /* usuwa WordPressowy odstęp między blokami */
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}


/* SEKCJA */

.ctasekcja {
    position: relative;

    width: 100%;
    max-width: none;

    padding: 0;

    background: #f1ebdc;

    overflow: hidden;
    isolation: isolate;
}


.ctasekcja,
.ctasekcja * {
    box-sizing: border-box;
}


/* =========================================================
   GŁÓWNY CONTAINER
   ========================================================= */

.ctasekcja__container {
    position: relative;
    z-index: 4;

    width: min(100% - 40px, 1210px);
    min-height: 870px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 530px 600px;
    column-gap: 80px;

    align-items: end;
}


/* =========================================================
   KOGUT
   ========================================================= */

.ctasekcja__media {
    position: relative;

    min-height: 735px;

    align-self: end;

    opacity: 0;
    transform: translateY(26px);
}


.ctasekcja__image {
    position: absolute;
    z-index: 3;

    left: 50%;
    bottom: 0;

    display: block;

    width: 510px;
    max-width: none;
    height: auto;

    transform: translateX(-50%);
}


/* =========================================================
   PRAWA KOLUMNA
   ========================================================= */

.ctasekcja__content {
    position: relative;
    z-index: 5;

    width: 600px;
    max-width: 600px;

    padding: 85px 0 105px;

    align-self: center;

    opacity: 0;
    transform: translateY(26px);
}


/* ANIMACJA */

.ctasekcja.is-visible .ctasekcja__media,
.ctasekcja.is-visible .ctasekcja__content {
    opacity: 1;
    transform: translateY(0);

    transition:
        opacity 0.75s ease,
        transform 0.75s ease;
}


/* =========================================================
   TYTUŁ
   ========================================================= */

.ctasekcja__title {
    width: 100%;
    max-width: 600px;

    margin: 0;

    color: #050505;

    font-family: "Fraunces", serif;

    font-size: 50px;
    line-height: 0.98;

    font-weight: 700;

    letter-spacing: -0.035em;
}


/* =========================================================
   TEKST POD TYTUŁEM
   ========================================================= */

.ctasekcja__text {
    width: 100%;
    max-width: 600px;

    margin-top: 16px;

    color: #050505;

    font-family: "Poppins", sans-serif;

    font-size: 16px;
    line-height: 1.45;

    font-weight: 400;
}


.ctasekcja__text p {
    margin: 0;
}


/* =========================================================
   FORMULARZ - WRAPPER
   ========================================================= */

.ctasekcja__actions {
    width: 100%;
    max-width: 600px;

    margin-top: 56px;
}


.ctasekcja__form {
    width: 100%;
    max-width: 600px;
}


/* =========================================================
   FORMULARZ - GRID
   ========================================================= */

.ctasekcja__form form {
    width: 100%;

    margin: 0;

    display: grid;

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

    column-gap: 32px;
    row-gap: 0px;

    align-items: start;
}


.ctasekcja__form p {
    margin: 0;
    min-width: 0;
}


/* TEXTAREA NA CAŁĄ SZEROKOŚĆ */

.ctasekcja__form p:has(textarea) {
    grid-column: 1 / -1;
}


/* =========================================================
   POLA FORMULARZA
   ========================================================= */

.ctasekcja__form input[type="text"],
.ctasekcja__form input[type="email"],
.ctasekcja__form input[type="tel"],
.ctasekcja__form input[type="url"],
.ctasekcja__form textarea {

    display: block;

    width: 100%;

    border: 0;
    outline: 0;

    border-radius: 8px;

    background: #fffdf9;

    color: #050505;

    font-family: "Poppins", sans-serif;

    font-size: 15px;
    line-height: 1.4;

    font-weight: 400;

    box-shadow: none;

    appearance: none;
    -webkit-appearance: none;
}


/* INPUT */

.ctasekcja__form input[type="text"],
.ctasekcja__form input[type="email"],
.ctasekcja__form input[type="tel"],
.ctasekcja__form input[type="url"] {

    height: 60px;
    min-height: 60px;

    padding: 0 20px;
}


/* PLACEHOLDER */

.ctasekcja__form input::placeholder,
.ctasekcja__form textarea::placeholder {
    color: #545454;
    opacity: 1;
}


/* TEXTAREA */

.ctasekcja__form textarea {
    height: 110px;
    min-height: 110px;

    padding: 16px 20px;

    resize: vertical;
}


/* =========================================================
   SUBMIT
   ========================================================= */

.ctasekcja__form p:has(input[type="submit"]),
.ctasekcja__form p:has(button[type="submit"]) {

    grid-column: 1 / -1;

    margin-top: 3px;
}


.ctasekcja__form input[type="submit"],
.ctasekcja__form button[type="submit"] {
    width: auto;

    min-width: 125px;

    height: 64px;
    min-height: 64px;

    padding: 0 30px;

    border: 0 !important;
    outline: 0 !important;

    border-radius: 10px;

    background: #fac24a;

    color: #050505;

    font-family: "Poppins", sans-serif;

    font-size: 14px;
    line-height: 1;

    font-weight: 800;

    text-transform: uppercase;

    cursor: pointer;

    box-shadow: none !important;

    appearance: none;
    -webkit-appearance: none;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}


.ctasekcja__form input[type="submit"]:hover,
.ctasekcja__form button[type="submit"]:hover {
    background: #e8b13a;

    color: #050505;

    border: 0 !important;
    box-shadow: none !important;

    transform: translateY(-1px);
}

.ctasekcja__form input[type="submit"]:hover,
.ctasekcja__form button[type="submit"]:hover {

    background: #e69f07;

    color: #050505;

    border: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   TELEFON
   ========================================================= */

.ctasekcja__bottom {
    position: absolute;

    left: 188px;
    bottom: 105px;

    margin: 0;
}


.ctasekcja__phone {
    display: inline-flex;

    align-items: center;

    gap: 17px;

    color: #050505;

    font-family: "Poppins", sans-serif;

    font-size: 22px;
    line-height: 1;

    font-weight: 600;

    text-decoration: none;
}


.ctasekcja__phone:hover {
    color: #050505;
    text-decoration: none;
}


.ctasekcja__phoneicon {
    position: relative;
    z-index: 1;

    width: 66px;
    height: 66px;
    min-width: 66px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fffdf9;
    color: #050505;

    /* fala ma móc wychodzić poza kółko */
    overflow: visible;

    transition: transform 0.3s ease;
}


/* IKONA ZAWSZE NAD FALAMI */

.ctasekcja__phoneicon svg {
    position: relative;
    z-index: 3;

    display: block;

    width: 25px;
    height: 25px;

    transition: transform 0.3s ease;
}


/* =========================================================
   FALE
   ========================================================= */

.ctasekcja__phoneicon::before,
.ctasekcja__phoneicon::after {
    content: "";

    position: absolute;
    z-index: -1;

    left: 50%;
    top: 50%;

    width: 100%;
    height: 100%;

    border: 5px solid rgb(255, 255, 255);
    border-radius: 50%;

    transform: translate(-50%, -50%) scale(1);
    opacity: 0;

    pointer-events: none;
}


/* =========================================================
   HOVER
   ========================================================= */

.ctasekcja__phoneicon {
    transform: scale(1.05);
}


.ctasekcja__phoneicon svg {
    transform: rotate(-8deg) scale(1.05);
}


.ctasekcja__phoneicon::before {
    animation: phoneRipple 1.35s ease-out infinite;
}


.ctasekcja__phoneicon::after {
    animation: phoneRipple 1.35s ease-out 0.42s infinite;
}


/* =========================================================
   ANIMACJA FALI
   ========================================================= */

@keyframes phoneRipple {

    0% {
        transform: translate(-50%, -50%) scale(0.92);
        opacity: 0.8;
    }

    60% {
        opacity: 0.3;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.45);
        opacity: 0;
    }
}

.ctasekcja__phonetext {
    display: inline-block;

    white-space: nowrap;
}


/* =========================================================
   DEKORACJE
   ========================================================= */

.ctasekcja__decor {
    position: absolute;
    z-index: 1;

    pointer-events: none;
}


/* FALE */

.ctasekcja__decor--wave-left,
.ctasekcja__decor--wave-right {
    width: 42px;
    height: 26px;

    opacity: 0.35;
}


.ctasekcja__decor--wave-left::before,
.ctasekcja__decor--wave-right::before {

    content: "";

    display: block;

    width: 42px;
    height: 26px;

    background:
        radial-gradient(
            circle at 4px 18px,
            transparent 0 6px,
            #eab26a 6px 8px,
            transparent 8px
        ),
        radial-gradient(
            circle at 16px 8px,
            transparent 0 6px,
            #eab26a 6px 8px,
            transparent 8px
        ),
        radial-gradient(
            circle at 28px 18px,
            transparent 0 6px,
            #eab26a 6px 8px,
            transparent 8px
        );
}


.ctasekcja__decor--wave-left {
    left: 19%;
    top: 13%;
}


.ctasekcja__decor--wave-right {
    right: 18%;
    bottom: 19%;
}


/* KÓŁKA */

.ctasekcja__decor--circle-left,
.ctasekcja__decor--circle-right {

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #fac24a;

    opacity: 0.25;
}


.ctasekcja__decor--circle-left {
    left: 14%;
    bottom: 19%;
}


.ctasekcja__decor--circle-right {
    right: 20%;
    top: 11%;

    background: #ead9bf;
    }
.ctasekcja__form .wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
    position: absolute !important;
    bottom: 20px;

}


/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1300px) {

    .ctasekcja__container {
        width: min(100% - 40px, 1100px);

        grid-template-columns: 480px 550px;
        column-gap: 70px;
    }


    .ctasekcja__content {
        width: 550px;
        max-width: 550px;
    }


    .ctasekcja__title,
    .ctasekcja__text,
    .ctasekcja__actions,
    .ctasekcja__form {
        max-width: 550px;
    }


    .ctasekcja__image {
        width: 475px;
    }


    .ctasekcja__bottom {
        left: 180px;
    }
}


/* =========================================================
   MAŁY LAPTOP / TABLET LANDSCAPE
   ========================================================= */

@media (max-width: 1100px) {

    .ctasekcja__container {
        width: min(100% - 40px, 940px);

        min-height: 750px;

        grid-template-columns: 410px 480px;
        column-gap: 50px;
    }


    .ctasekcja__media {
        min-height: 620px;
    }


    .ctasekcja__image {
        width: 420px;
    }


    .ctasekcja__content {
        width: 480px;
        max-width: 480px;

        padding-top: 70px;
        padding-bottom: 90px;
    }


    .ctasekcja__title {
        max-width: 480px;

        font-size: 43px;
    }


    .ctasekcja__text {
        max-width: 480px;

        font-size: 14px;
    }


    .ctasekcja__actions,
    .ctasekcja__form {
        width: 100%;
        max-width: 480px;
    }


    .ctasekcja__form form {
        column-gap: 20px;
    }


    .ctasekcja__bottom {
        left: 160px;
        bottom: 90px;
    }


    .ctasekcja__phone {
        font-size: 19px;
    }


    .ctasekcja__phoneicon {
        width: 58px;
        height: 58px;
        min-width: 58px;
    }
    
}


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

@media (max-width: 900px) {

    .ctasekcja {
        padding-top: 0px;
    }
.ctasekcja__form .wpcf7 form .wpcf7-response-output {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
    position: relative !important;
    bottom: 20px;
}

    .ctasekcja__container {

        width: min(100% - 40px, 620px);

        min-height: auto;

        display: grid;

        grid-template-columns: 1fr;

        gap: 35px;
    }


    .ctasekcja__content {

        order: 1;

        width: 100%;
        max-width: 600px;

        margin: 0 auto;

        padding: 0;
    }


    .ctasekcja__title {
        max-width: 600px;

        font-size: 44px;
    }


    .ctasekcja__text {
        max-width: 600px;
    }


    .ctasekcja__actions {
        width: 100%;
        max-width: 600px;

        margin-top: 40px;
    }


    .ctasekcja__form {
        width: 100%;
        max-width: 600px;
    }


    .ctasekcja__bottom {
        position: static;

        margin-top: 18px;
    }


    .ctasekcja__media {

        order: 2;

        min-height: 470px;
    }


    .ctasekcja__image {

        left: 50%;

        width: 430px;

        transform: translateX(-50%);
    }

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

@media (max-width: 640px) {

    .ctasekcja {
        padding-top: 0px;
    }


    .ctasekcja__container {
        width: min(100% - 30px, 430px);

        gap: 30px;
    }


    .ctasekcja__title {

        font-size: 32px;
        line-height: 1;
    }


    .ctasekcja__text {

        margin-top: 14px;

        font-size: 13px;
    }


    .ctasekcja__actions {
        margin-top: 32px;
    }


    .ctasekcja__form form {

        grid-template-columns: 1fr;

        row-gap: 16px;
    }
.ctasekcja__form form label > br {
display: none;
}

    .ctasekcja__form p:has(textarea),
    .ctasekcja__form p:has(input[type="submit"]),
    .ctasekcja__form p:has(button[type="submit"]) {

        grid-column: 1 / -1;
    }


    .ctasekcja__form input[type="text"],
    .ctasekcja__form input[type="email"],
    .ctasekcja__form input[type="tel"],
    .ctasekcja__form input[type="url"] {

        height: 54px;
        min-height: 54px;

        font-size: 14px;
    }


    .ctasekcja__form textarea {

        height: 110px;
        min-height: 110px;

        font-size: 14px;
    }


    .ctasekcja__form input[type="submit"],
    .ctasekcja__form button[type="submit"] {

        width: 100%;

        height: 56px;
        min-height: 56px;
    }


    .ctasekcja__bottom {
        margin-top: 18px;
        text-align: center;
    }

}

    .ctasekcja__phone {
        gap: 12px;
    gap: 12px;
    font-size: 21px;
    }


    .ctasekcja__phoneicon {

        width: 50px;
        height: 50px;
        min-width: 50px;
    }


    .ctasekcja__phoneicon svg {

        width: 21px;
        height: 21px;
    }


    .ctasekcja__media {
        min-height: 370px;
    }


    .ctasekcja__image {
        width: 350px;
    }


    .ctasekcja__decor--wave-left,
    .ctasekcja__decor--wave-right {
        display: none;
    }
}


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

@media (max-width: 390px) {

    .ctasekcja__container {
        width: calc(100% - 24px);
    }


    .ctasekcja__title {
        font-size: 31px;
    }


    .ctasekcja__media {
        min-height: 330px;
    }


    .ctasekcja__image {
        width: 310px;
    }
}