/* =========================================================
   KAPCSOLAT OLDAL
========================================================= */

.contact-page {
    background: #f4ead8;
}

.contact-main {
    background: #f4ead8;
}


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

.contact-hero {
    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.38) 0%,
            rgba(0,0,0,.12) 100%
        ),
        url("../images/relax-wellness-apartman-contact-hero.webp");

    background-size: cover;
    background-position: center 55%;
}

.contact-hero-script {
    position: absolute;

    right: 8%;
    top: 50%;

    transform: translateY(-35%) rotate(-7deg);

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

    font-family:
        "Segoe Script",
        "Brush Script MT",
        cursive;

    font-size: clamp(25px, 3vw, 45px);
    line-height: 1.15;

    text-align: center;

    pointer-events: none;
}


/* =========================================================
   KAPCSOLAT + ŰRLAP
========================================================= */

.contact-section {
    width: min(1180px, calc(100% - 48px));

    margin: 0 auto;

    padding: 100px 0 110px;

    display: grid;

    grid-template-columns:
        minmax(0, .85fr)
        minmax(0, 1.15fr);

    gap: 100px;

    align-items: start;
}


/* =========================================================
   BAL OLDAL
========================================================= */

.contact-info .section-eyebrow,
.contact-form-wrapper .section-eyebrow,
.location-heading .section-eyebrow,
.contact-cta .section-eyebrow {
    margin: 0 0 14px;

    color: #b77a2d;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .28em;
}


.contact-info h2,
.contact-form-wrapper h2 {
    margin: 0 0 22px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(40px, 4vw, 58px);

    font-weight: 400;

    line-height: 1;

    color: #17140f;
}


.contact-lead {
    max-width: 470px;

    margin: 0 0 48px;

    color: #655e54;

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   ELÉRHETŐSÉGEK
========================================================= */

.contact-details {
    display: flex;

    flex-direction: column;

    gap: 16px;
}


.contact-detail {
    display: flex;

    align-items: center;

    min-height: 90px;

    padding: 18px 20px;

    border:
        1px solid
        rgba(116, 88, 48, .16);

    border-radius: 12px;

    background:
        rgba(255,255,255,.28);
}


.contact-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    margin-right: 18px;

    border-radius: 50%;

    background: #173f35;

    color: #d9a54d;

    font-size: 20px;
}


.contact-detail div {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.contact-detail small {
    color: #a46f2c;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .2em;
}


.contact-detail strong {
    color: #1b1813;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;
    font-weight: 400;
}


.contact-detail span:not(.contact-icon),
.contact-detail a {
    color: #5d574e;

    font-size: 14px;

    text-decoration: none;
}


.contact-detail a:hover {
    color: #b77a2d;
}


/* =========================================================
   ŰRLAP
========================================================= */

.contact-form-wrapper {
    padding: 42px;

    border-radius: 16px;

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

    border:
        1px solid
        rgba(116,88,48,.14);

    box-shadow:
        0 18px 50px
        rgba(62,44,21,.06);
}


.contact-form {
    margin-top: 35px;
}


.form-row {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 14px;
}


.form-field {
    margin-bottom: 15px;
}


.form-field label {
    display: block;

    margin: 0 0 8px;

    color: #746a5d;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.form-field input,
.form-field textarea {
    width: 100%;

    box-sizing: border-box;

    border:
        1px solid
        rgba(121,88,47,.30);

    border-radius: 8px;

    outline: none;

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

    color: #29251e;

    font: inherit;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.form-field input {
    height: 52px;

    padding: 0 15px;
}


.form-field textarea {
    min-height: 160px;

    padding: 15px;

    resize: vertical;
}


.form-field input:focus,
.form-field textarea:focus {
    border-color: #bd8336;

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

    box-shadow:
        0 0 0 3px
        rgba(189,131,54,.09);
}


/* =========================================================
   KÜLDÉS GOMB
========================================================= */

.contact-submit {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    min-height: 50px;

    margin-top: 8px;

    padding: 0 28px;

    border: 0;

    border-radius: 999px;

    background: #d6a34f;

    color: #18150f;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .11em;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease;
}


.contact-submit:hover {
    transform: translateY(-2px);

    background: #e0af5b;
}


/* =========================================================
   HELYSZÍN
========================================================= */

.location-section {
    padding: 95px max(24px, calc((100% - 1180px) / 2)) 100px;

    background:
        linear-gradient(
            135deg,
            #173f35,
            #0d3028
        );

    color: white;
}


.location-heading {
    max-width: 650px;

    margin-bottom: 42px;
}


.location-heading .section-eyebrow {
    color: #d7a34e;
}


.location-heading h2 {
    margin: 0 0 16px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(48px, 5vw, 70px);

    font-weight: 400;

    line-height: 1;

    color: white;
}


.location-heading > p:last-child {
    margin: 0;

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

    font-size: 15px;

    line-height: 1.7;
}


/* =========================================================
   TÉRKÉP
========================================================= */

.map-wrapper {
    width: 100%;
    height: 470px;

    overflow: hidden;

    border-radius: 15px;

    background: #e8dfce;

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


.map-wrapper iframe {
    display: block;

    width: 100%;
    height: 100%;
}


/* =========================================================
   CÍM + ÚTVONAL
========================================================= */

.location-bottom {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding-top: 28px;
}


.location-bottom > div {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.location-bottom small {
    color: #d6a34f;

    font-size: 9px;
    font-weight: 800;

    letter-spacing: .2em;
}


.location-bottom strong {
    color: white;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;

    font-weight: 400;
}


.route-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    min-height: 48px;

    padding: 0 25px;

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

    border-radius: 999px;

    color: white;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .09em;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.route-button:hover {
    border-color: #d6a34f;

    background: #d6a34f;

    color: #17140f;
}


/* =========================================================
   ALSÓ FOGLALÁS CTA
========================================================= */

.contact-cta {
    padding:
        100px
        24px
        105px;

    text-align: center;

    background: 
     linear-gradient(

            rgba(244, 234, 216, 0.84),

            rgba(244, 234, 216, .8)

        ),


    url("../images/relax-wellness-apartman-contact-hero.webp");

        background-size: cover;

    background-position: center;

    #f4ead8;
}


.contact-cta h2 {
    margin:
        0
        auto
        20px;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(48px, 5vw, 72px);

    font-weight: 400;

    line-height: .98;

    color: #17140f;
}


.contact-cta > p:not(.section-eyebrow) {
    max-width: 550px;

    margin:
        0
        auto
        30px;

    color: #655e54;

    line-height: 1.7;
}


.contact-cta .primary-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

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

    padding: 0 28px;

    border-radius: 999px;

    background: #d6a34f;

    color: #17140f;

    text-decoration: none;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: .1em;
}


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

@media (max-width: 950px) {

    .contact-section {
        gap: 50px;

        grid-template-columns:
            1fr 1.15fr;
    }


    .contact-form-wrapper {
        padding: 30px;
    }

}


/* =========================================================
   MOBIL
========================================================= */

@media (max-width: 768px) {

    .contact-hero-script {
        display: none;
    }


    .contact-section {
        width: calc(100% - 40px);

        padding:
            65px
            0
            70px;

        grid-template-columns: 1fr;

        gap: 55px;
    }


    .contact-info h2,
    .contact-form-wrapper h2 {
        font-size: 42px;
    }


    .contact-lead {
        margin-bottom: 32px;

        font-size: 14px;
    }


    .contact-detail {
        min-height: 76px;

        padding: 14px;
    }


    .contact-icon {
        flex-basis: 43px;

        width: 43px;
        height: 43px;

        margin-right: 14px;
    }


    .contact-form-wrapper {
        padding: 25px 20px;

        border-radius: 12px;
    }


    .form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }


    .contact-submit {
        width: 100%;
    }


    /* HELYSZÍN */

    .location-section {
        padding:
            65px
            20px
            70px;
    }


    .location-heading {
        margin-bottom: 30px;
    }


    .location-heading h2 {
        font-size: 46px;
    }


    .map-wrapper {
        height: 400px;

        border-radius: 11px;
    }


    .location-bottom {
        align-items: flex-start;

        flex-direction: column;

        gap: 22px;
    }


    .location-bottom strong {
        font-size: 18px;
    }


    .route-button {
        width: 100%;

        box-sizing: border-box;
    }


    /* CTA */

    .contact-cta {
        padding:
            70px
            22px
            75px;
    }


    .contact-cta h2 {
        font-size: 46px;
    }

}


/* =========================================================
   KIS MOBIL
========================================================= */

@media (max-width: 480px) {

    .contact-section {
        width: calc(100% - 30px);
    }


    .contact-info h2,
    .contact-form-wrapper h2 {
        font-size: 38px;
    }


    .map-wrapper {
        height: 350px;
    }

}

/* =========================================================
   KAPCSOLAT OLDAL – CÍMMÉRETEK FINOMHANGOLÁSA
========================================================= */

.contact-info h2,
.contact-form-wrapper h2 {
    font-size: clamp(34px, 3vw, 46px);
    line-height: 1.05;
}

.location-heading h2 {
    font-size: clamp(38px, 3.6vw, 52px);
    line-height: 1.05;
}


/* MOBIL */

@media (max-width: 768px) {

    .contact-info h2,
    .contact-form-wrapper h2 {
        font-size: 34px;
    }

    .location-heading h2 {
        font-size: 38px;
    }

}

@media (max-width: 480px) {

    .contact-info h2,
    .contact-form-wrapper h2 {
        font-size: 31px;
    }

    .location-heading h2 {
        font-size: 34px;
    }

}

/* =========================================================
   KAPCSOLAT HERO – EGYSÉGES A HÁZ OLDALLAL
========================================================= */

.contact-hero {
    position: relative;
    min-height: 430px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;
}

.contact-hero-content {
    position: relative;
    z-index: 2;

    width: 78%;
    max-width: none;

    margin: 0 auto;
    padding: 0 0 58px;
}

.contact-hero h1 {
    margin: 0 0 10px;

    color: #fff;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(58px, 5.2vw, 78px);
    font-weight: 400;
    line-height: .95;
}

.contact-hero .hero-subtitle {
    margin: 12px 0 20px;

    color: #fff;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.4;

    text-transform: uppercase;
}

.contact-hero .hero-description {
    max-width: 430px;

    margin: 0;
    padding-left: 18px;

    border-left: 2px solid rgba(223, 173, 85, .8);

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

    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.contact-hero .page-hero-motto {
    right: 8%;
    bottom: 72px;
}


/* A RÉGI MOTTÓT KIKAPCSOLJUK */

.contact-hero-script {
    display: none;
}


/* MOBIL */

@media (max-width: 768px) {

    .contact-hero {
        min-height: 330px;
    }

    .contact-hero-content {
        width: calc(100% - 40px);
        margin: 0 auto;
        padding: 0 0 38px;
    }

    .contact-hero h1 {
        font-size: 52px;
        line-height: .98;
    }

    .contact-hero .hero-subtitle {
        margin: 9px 0 14px;
        font-size: 11px;
    }

    .contact-hero .hero-description {
        max-width: 310px;
        padding-left: 13px;
        font-size: 13px;
        line-height: 1.45;
    }

    .contact-hero .page-hero-motto {
        display: none;
    }
}

/* KAPCSOLAT – ÜZENETKÜLDÉS VISSZAJELZÉSE */

#contact-status {
    color: #25483b !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.6;
    margin-top: 16px;
}

/* KAPCSOLAT – VISSZAIGAZOLÁS */

#contact-status.contact-feedback {
    margin-top: 22px;
    padding: 26px 22px;
    background: #eaf1e9;
    border: 1px solid #cad9c9;
    border-radius: 14px;
    text-align: center;
    color: #244a3c !important;
    line-height: 1.6;
}

#contact-status.contact-feedback[hidden] {
    display: none !important;
}

.contact-feedback-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: #fffdf7;
    color: #ad853f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.contact-feedback-title {
    font-family: Georgia, serif;
    font-size: 23px;
    font-weight: normal;
    margin: 0 0 10px;
    color: #244a3c;
}

.contact-feedback-text {
    font-size: 14px;
    color: #426354;
    margin: 0;
}

.contact-feedback-brand {
    display: block;
    margin-top: 16px;
    color: #8b7045;
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 700;
}

.contact-feedback.error {
    background: #fff0eb;
    border-color: #e5c2b6;
}

.contact-feedback.error .contact-feedback-icon {
    color: #a34d3b;
}

@media (max-width: 768px) {
    #contact-status.contact-feedback {
        padding: 22px 16px;
    }

    .contact-feedback-title {
        font-size: 21px;
    }
}