/* =========================================================
   KONTAKT
   Podejście: mobile first
   ========================================================= */

.contact-page {
    padding: 0 16px 42px;
}


/* ---------------------------------------------------------
   WPROWADZENIE
   --------------------------------------------------------- */

.contact-intro {
    padding: 34px 4px 28px;

    text-align: center;
}


.contact-intro h1 {
    margin: 4px 0 0;

    color: var(--color-gold);

    font-family:
        "Comic Sans MS",
        "Trebuchet MS",
        sans-serif;

    font-size: clamp(2rem, 9vw, 3.4rem);
    line-height: 1.08;

    text-shadow:
        0 3px 0 #5f2717,
        0 6px 14px rgba(0, 0, 0, 0.32);
}


.contact-intro > p:last-child {
    margin: 14px 0 0;

    color: var(--color-text-muted);

    font-size: 1rem;
    line-height: 1.5;
}


/* ---------------------------------------------------------
   TELEFON + GODZINY
   --------------------------------------------------------- */

.contact-primary-grid {
    display: grid;

    gap: 16px;
}


.contact-call {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 0;
    padding: 30px 20px 26px;

    text-align: center;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255, 213, 74, 0.1),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #74431f,
            #4b2917
        );

    border: 2px solid rgba(255, 213, 74, 0.42);

    border-radius:
        28px 20px
        30px 18px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 0, 0, 0.28);
}


.contact-call h2 {
    margin: 5px 0 20px;

    color: var(--color-gold);

    font-family:
        "Comic Sans MS",
        "Trebuchet MS",
        sans-serif;

    font-size: clamp(2rem, 10vw, 2.8rem);
    line-height: 1.05;
    letter-spacing: 0.025em;
}


.contact-call h2 a:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 5px;
    border-radius: 6px;
}


.contact-call__button {
    width: 100%;
    max-width: 360px;
}


.contact-call__note {
    margin: 18px 0 0;

    color: var(--color-text-muted);

    font-size: 0.93rem;
}


.contact-call__payment {
    margin: 8px 0 0;

    color: #ffe7a1;

    font-size: 0.95rem;
    font-weight: 800;
}


.contact-hours {
    height: 100%;

    margin: 0;
    padding: 30px 20px 26px;
}


/* ---------------------------------------------------------
   JAK DZIAŁAMY
   --------------------------------------------------------- */

.contact-model {
    margin-top: 18px;
    padding: 28px 18px 20px;

    background:
        linear-gradient(
            145deg,
            rgba(67, 37, 23, 0.94),
            rgba(42, 23, 15, 0.97)
        );

    border: 1px solid rgba(255, 213, 74, 0.28);

    border-radius:
        26px 18px
        28px 17px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 8px 20px rgba(0, 0, 0, 0.22);
}


.contact-model__header {
    margin-bottom: 18px;

    text-align: center;
}


.contact-model__header h2 {
    margin: 4px 0 0;

    color: var(--color-gold);

    font-family:
        "Comic Sans MS",
        "Trebuchet MS",
        sans-serif;

    font-size: 1.65rem;
}


.contact-model__grid {
    display: grid;

    gap: 10px;
}


.contact-model__item {
    padding: 17px 15px;

    text-align: center;

    background: rgba(35, 18, 10, 0.42);
    border: 1px solid rgba(255, 213, 74, 0.13);

    border-radius:
        15px 11px
        16px 12px;
}


.contact-model__item strong {
    display: block;

    color: var(--color-orange);

    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.contact-model__item p {
    margin: 7px 0 0;

    color: var(--color-text-muted);

    font-size: 0.94rem;
    line-height: 1.45;
}


/* ---------------------------------------------------------
   GOOGLE MAPS
   --------------------------------------------------------- */

.contact-location {
    display: grid;

    gap: 18px;

    margin-top: 18px;
    padding: 24px 20px;

    text-align: center;

    background: rgba(47, 24, 12, 0.68);
    border: 1px solid rgba(255, 213, 74, 0.2);

    border-radius:
        22px 16px
        24px 15px;
}


.contact-location h2 {
    margin: 4px 0 0;

    color: var(--color-text);

    font-family:
        "Comic Sans MS",
        "Trebuchet MS",
        sans-serif;

    font-size: 1.35rem;
}


.contact-location__button {
    width: 100%;
}


.contact-location__button:focus-visible,
.contact-call__button:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
}


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

@media (min-width: 600px) {

    .contact-page {
        padding-right: 36px;
        padding-left: 36px;
    }


    .contact-intro {
        padding-top: 42px;
        padding-bottom: 34px;
    }


    .contact-model__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }


    .contact-location {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 0.8fr);

        align-items: center;

        text-align: left;
    }


    .contact-location__button {
        justify-self: end;
    }
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 900px) {

    .contact-page {
        padding:
            0
            40px
            58px;
    }


    .contact-intro {
        padding:
            48px
            0
            38px;
    }


    .contact-primary-grid {
        grid-template-columns:
            minmax(0, 0.92fr)
            minmax(0, 1.08fr);

        align-items: stretch;

        gap: 20px;
    }


    .contact-call,
    .contact-hours {
        padding:
            36px
            30px
            32px;
    }


    .contact-model {
        margin-top: 20px;
        padding: 32px 24px 24px;
    }


    .contact-model__grid {
        gap: 14px;
    }


    .contact-model__item {
        padding: 20px 18px;
    }


    .contact-location {
        margin-top: 20px;
        padding: 26px 30px;
    }
}