/* =========================================================
   KOSKENKUISKE – YHTEYSTIEDOT
   Vain page-yhteystiedot.php käyttää tätä tiedostoa.
   ========================================================= */


/* =========================================================
   VÄRIT
   ========================================================= */

.kk-contact-page {

    --kk-green: #176965;
    --kk-green-light: #247d78;
    --kk-green-dark: #105854;

    --kk-gold: #e3aa27;
    --kk-gold-light: #f0ca68;

    --kk-bg: #f7f3ed;
    --kk-surface: #ffffff;

    --kk-text: #302925;
    --kk-muted: #746a63;

    --kk-border: rgba(74, 53, 38, 0.15);

    --kk-radius: 24px;

    --kk-shadow:
        0 18px 45px
        rgba(56, 42, 30, 0.07);

    background:
        var(--kk-bg);

    color:
        var(--kk-text);
}


.kk-contact-page,
.kk-contact-page * {

    box-sizing: border-box;
}


/* =========================================================
   YLEINEN KONTTI
   ========================================================= */

.kk-contact-container {

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

    margin-inline:
        auto;
}


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

.kk-contact-hero {

    padding:
        58px 0 48px;

    text-align:
        center;
}


.kk-contact-eyebrow {

    margin:
        0 0 12px;

    color:
        #a26f13;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.18em;

    text-transform:
        uppercase;
}


.kk-contact-eyebrow-light {

    color:
        var(--kk-gold-light);
}


.kk-contact-hero h1 {

    max-width:
        780px;

    margin:
        0 auto 18px;

    color:
        var(--kk-text);

    font-size:
        clamp(
            2.8rem,
            5vw,
            4.5rem
        );

    font-weight:
        700;

    line-height:
        1.02;

    letter-spacing:
        -0.035em;
}


.kk-contact-lead {

    max-width:
        600px;

    margin:
        0 auto;

    color:
        var(--kk-muted);

    font-size:
        18px;

    line-height:
        1.65;
}


/* =========================================================
   PÄÄSISÄLTÖ
   ========================================================= */

.kk-contact-main {

    padding:
        0 0 80px;
}


/* =========================================================
   YHTEYSTIETOKORTTI
   ========================================================= */

.kk-contact-card {

    max-width:
        720px;

    margin:
        0 auto 48px;

    overflow:
        hidden;

    border:
        1px solid
        var(--kk-border);

    border-radius:
        var(--kk-radius);

    background:
        var(--kk-surface);

    box-shadow:
        var(--kk-shadow);
}


.kk-contact-row {

    display:
        grid;

    grid-template-columns:
        58px 1fr;

    align-items:
        center;

    gap:
        22px;

    min-height:
        118px;

    padding:
        25px 34px;

    color:
        var(--kk-text);

    text-decoration:
        none;

    transition:
        background 0.18s ease;
}


.kk-contact-row + .kk-contact-row {

    border-top:
        1px solid
        var(--kk-border);
}


.kk-contact-row:hover {

    background:
        #fbf8f3;
}


.kk-contact-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        52px;

    height:
        52px;

    border-radius:
        50%;

    background:
        #f8eaca;

    color:
        var(--kk-green);
}


.kk-contact-icon svg {

    width:
        25px;

    height:
        25px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.kk-contact-row-text {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.kk-contact-row-text strong {

    color:
        var(--kk-text);

    font-size:
        20px;

    font-weight:
        700;
}


.kk-contact-row-text > span {

    color:
        var(--kk-muted);

    font-size:
        16px;
}


.kk-contact-row-text small {

    margin-top:
        4px;

    color:
        var(--kk-green);

    font-size:
        13px;

    font-weight:
        600;
}


/* =========================================================
   AJANVARAUS
   ========================================================= */

.kk-contact-booking {

    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    gap:
        44px;

    margin:
        0 auto 54px;

    padding:
        46px 52px;

    border-radius:
        var(--kk-radius);

    background:
        linear-gradient(
            135deg,
            var(--kk-green-light),
            var(--kk-green-dark)
        );

    box-shadow:
        var(--kk-shadow);

    color:
        #ffffff;
}


.kk-contact-booking h2 {

    margin:
        0 0 12px;

    color:
        #ffffff;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height:
        1.1;
}


.kk-contact-booking-text > p:last-child {

    max-width:
        620px;

    margin:
        0;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    font-size:
        16px;

    line-height:
        1.6;
}


.kk-contact-booking-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        150px;

    min-height:
        56px;

    padding:
        0 28px;

    border-radius:
        9px;

    background:
        var(--kk-gold-light);

    color:
        var(--kk-green-dark);

    font-size:
        16px;

    font-weight:
        700;

    line-height:
        1;

    text-align:
        center;

    text-decoration:
        none;

    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.10);

    transition:
        transform 0.18s ease,
        background 0.18s ease;
}


.kk-contact-booking-button:hover {

    background:
        #f5d681;

    color:
        var(--kk-green-dark);

    transform:
        translateY(-2px);
}


/* =========================================================
   VERKKOLINKIT
   ========================================================= */

.kk-contact-links {

    margin-bottom:
        54px;

    text-align:
        center;
}


.kk-contact-links h2 {

    margin:
        0 0 28px;

    color:
        var(--kk-text);

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height:
        1.1;
}


.kk-contact-link-grid {

    display:
        grid;

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

    gap:
        16px;
}


.kk-contact-service-link {

    display:
        flex;

    align-items:
        center;

    gap:
        16px;

    min-height:
        108px;

    padding:
        22px;

    border:
        1px solid
        var(--kk-border);

    border-radius:
        18px;

    background:
        #ffffff;

    color:
        var(--kk-text);

    text-align:
        left;

    text-decoration:
        none;

    box-shadow:
        0 8px 25px
        rgba(56, 42, 30, 0.04);

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


.kk-contact-service-link:hover {

    color:
        var(--kk-text);

    transform:
        translateY(-2px);

    box-shadow:
        0 14px 32px
        rgba(56, 42, 30, 0.08);
}


.kk-service-icon {

    display:
        flex;

    flex:
        0 0 48px;

    align-items:
        center;

    justify-content:
        center;

    width:
        48px;

    height:
        48px;

    border-radius:
        14px;

    background:
        #f8eaca;

    color:
        var(--kk-green);
}


.kk-service-icon svg {

    width:
        26px;

    height:
        26px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.kk-facebook-icon svg {

    fill:
        currentColor;

    stroke:
        none;
}


.kk-timma-icon {

    font-size:
        24px;

    font-weight:
        700;
}


.kk-contact-service-link > span:last-child {

    display:
        flex;

    flex-direction:
        column;

    gap:
        4px;
}


.kk-contact-service-link strong {

    color:
        var(--kk-text);

    font-size:
        18px;
}


.kk-contact-service-link small {

    color:
        var(--kk-muted);

    font-size:
        13px;
}


/* =========================================================
   SIJAINTI
   ========================================================= */

.kk-contact-location {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    overflow:
        hidden;

    border-radius:
        var(--kk-radius);

    background:
        var(--kk-green);

    box-shadow:
        var(--kk-shadow);
}


.kk-contact-location-text {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        50px;

    color:
        #ffffff;

    text-align:
        center;
}


.kk-contact-location h2 {

    margin:
        0 auto 24px;

    color:
        #ffffff;

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

    line-height:
        1.08;
}


.kk-contact-location-text > p {

    max-width:
        500px;

    margin:
        0 auto 16px;

    color:
        rgba(
            255,
            255,
            255,
            0.88
        );

    line-height:
        1.65;
}


.kk-contact-distances {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        7px;

    width:
        100%;

    max-width:
        400px;

    margin:
        18px auto 0;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.2
        );
}


.kk-contact-distances span {

    color:
        #ffffff;

    font-size:
        15px;
}


.kk-contact-distances strong {

    margin-right:
        6px;

    color:
        var(--kk-gold-light);
}


.kk-contact-map {

    position:
        relative;

    min-height:
        520px;

    background:
        #e7e3dd;
}


.kk-contact-map iframe {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    border:
        0;
}


/* =========================================================
   TABLETTI
   ========================================================= */

@media (max-width: 850px) {

    .kk-contact-booking {

        grid-template-columns:
            1fr;
    }


    .kk-contact-booking-button {

        width:
            fit-content;
    }


    .kk-contact-link-grid {

        grid-template-columns:
            1fr;
    }


    .kk-contact-location {

        grid-template-columns:
            1fr;
    }


    .kk-contact-map {

        min-height:
            380px;
    }

}


/* =========================================================
   MOBIILI
   ========================================================= */

@media (max-width: 600px) {

    .kk-contact-container {

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


    .kk-contact-hero {

        padding:
            38px 0 34px;
    }


    .kk-contact-hero h1 {

        font-size:
            clamp(
                2.25rem,
                11vw,
                3rem
            );
    }


    .kk-contact-lead {

        font-size:
            15px;
    }


    .kk-contact-card {

        margin-bottom:
            36px;
    }


    .kk-contact-row {

        grid-template-columns:
            48px 1fr;

        gap:
            16px;

        min-height:
            104px;

        padding:
            22px 20px;
    }


    .kk-contact-icon {

        width:
            46px;

        height:
            46px;
    }


    .kk-contact-row-text strong {

        font-size:
            17px;
    }


    .kk-contact-booking {

        gap:
            26px;

        margin-bottom:
            40px;

        padding:
            34px 26px;

        text-align:
            center;
    }


    .kk-contact-booking-button {

        width:
            100%;
    }


    .kk-contact-links {

        margin-bottom:
            40px;
    }


    .kk-contact-links h2 {

        font-size:
            2rem;
    }


    .kk-contact-service-link {

        min-height:
            94px;
    }


    .kk-contact-location-text {

        padding:
            38px 24px;
    }


    .kk-contact-map {

        min-height:
            320px;
    }

}