/*
 * Contacts page mobile refinement v3.
 * Scope: /kontakty/ only. Loaded after contacts-modern.css and contacts-modern-v2.css.
 */

@media (max-width: 767px) {
    body.page-id-0,
    body {
        overflow-x: hidden;
    }

    .kyc-contacts-page {
        width: calc(100% - 12px);
        max-width: none;
        margin-inline: auto;
    }

    .kyc-contacts-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        border-radius: 12px;
        padding: 22px 14px 14px;
        background:
            linear-gradient(180deg, rgba(0, 59, 156, .98) 0%, rgba(0, 63, 159, .96) 58%, rgba(0, 49, 126, .98) 100%),
            url("../images/hero-mobile.webp") 68% 34% / cover no-repeat;
        box-shadow: 0 10px 28px rgba(7, 45, 96, .13);
    }

    .kyc-contacts-hero::after {
        inset: auto -34% -12% 22%;
        height: 28%;
        opacity: .75;
    }

    .kyc-contacts-hero__content {
        width: 100%;
        max-width: none;
        padding: 0;
    }

    .kyc-contacts-hero h1 {
        margin: 0 0 10px;
        font-size: clamp(30px, 8.9vw, 36px);
        line-height: 1.04;
        letter-spacing: -.02em;
    }

    .kyc-contacts-hero__content > p {
        max-width: 300px;
        margin: 0 0 18px;
        font-size: 14px;
        line-height: 1.48;
    }

    .kyc-contacts-hero__actions {
        display: block;
        width: 100%;
    }

    .kyc-contacts-hero__actions .kyc-btn {
        width: 100%;
        min-height: 44px;
        border-radius: 7px;
        padding: 11px 14px;
        font-size: 13px;
        font-weight: 500;
    }

    /* Compact contact card instead of the large white panel shown previously. */
    .kyc-contacts-hero__qr {
        position: relative;
        top: auto;
        right: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 88px;
        align-items: center;
        gap: 10px;
        width: min(220px, 72%);
        min-height: 102px;
        margin: 12px 0 0 auto;
        transform: none;
        border: 1px solid rgba(255, 255, 255, .72);
        border-radius: 9px;
        padding: 9px 9px 9px 12px;
        background: rgba(255, 255, 255, .97);
        box-shadow: 0 10px 24px rgba(0, 31, 82, .16);
    }

    .kyc-contacts-hero__qr strong {
        margin: 0;
        color: #102947;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.25;
        text-align: left;
    }

    .kyc-contacts-hero__qr img {
        width: 86px;
        height: 86px;
        max-width: none;
        margin: 0;
        justify-self: end;
    }

    /* Four main facts become a compact 2 x 2 grid instead of long full-width cards. */
    .kyc-contact-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }

    .kyc-contact-fact {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 8px;
        min-height: 118px;
        border-radius: 9px;
        padding: 13px 10px;
        box-shadow: 0 5px 16px rgba(20, 54, 99, .045);
    }

    .kyc-contact-fact__icon {
        width: 25px;
        height: 25px;
    }

    .kyc-contact-fact__icon svg {
        width: 22px;
        height: 22px;
    }

    .kyc-contact-fact__label {
        margin-bottom: 3px;
        font-size: 9.5px;
        line-height: 1.3;
    }

    .kyc-contact-fact__value {
        margin-bottom: 5px;
        font-size: 12px;
        line-height: 1.34;
        overflow-wrap: anywhere;
    }

    .kyc-contact-fact__accent,
    .kyc-contact-fact div > span:not(.kyc-contact-fact__label):not(.kyc-contact-fact__value):not(.kyc-contact-fact__accent),
    .kyc-contact-fact__link {
        font-size: 10.5px;
        line-height: 1.4;
    }

    .kyc-contact-fact__link {
        gap: 3px;
        margin-top: 5px;
    }

    .kyc-contact-fact__link span {
        width: 13px;
        height: 13px;
        flex-basis: 13px;
    }

    /* Appointment notice stays compact, but now has a clear high-priority alert treatment. */
    .kyc-contact-appointment {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 11px;
        margin-top: 10px;
        border: 1px solid #f0aaa5;
        border-left: 4px solid #e52e2e;
        border-radius: 10px;
        padding: 13px 12px;
        background: linear-gradient(90deg, #fff0ef 0%, #fff7f3 62%, #fffdf9 100%);
        box-shadow: 0 7px 20px rgba(211, 45, 45, .14);
    }

    .kyc-contact-appointment__icon {
        width: 34px;
        height: 34px;
        border-color: #ffd0cb;
        color: #d92d2d;
        background: #fff;
        box-shadow: 0 3px 11px rgba(211, 45, 45, .13);
    }

    .kyc-contact-appointment__icon svg {
        width: 19px;
        height: 19px;
    }

    .kyc-contact-appointment strong {
        margin-bottom: 3px;
        color: #b51f1f;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.32;
    }

    .kyc-contact-appointment div > span {
        color: #6f514d;
        font-size: 10.8px;
        font-weight: 400;
        line-height: 1.45;
    }

    .kyc-contact-map-grid {
        gap: 10px;
        margin-top: 10px;
    }

    .kyc-contact-address-card,
    .kyc-contact-map-card,
    .kyc-additional-offices {
        border-radius: 9px;
    }

    .kyc-contact-address-card {
        padding: 15px 13px;
    }

    .kyc-contact-address-card h2,
    .kyc-contact-map-card h2,
    .kyc-additional-offices h2 {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 1.3;
    }

    .kyc-contact-address-card__block {
        margin-bottom: 11px;
    }

    .kyc-contact-address-card__block h3 {
        margin-bottom: 4px;
        font-size: 11.5px;
    }

    .kyc-contact-address-card__block p {
        font-size: 11.5px;
        line-height: 1.5;
    }

    .kyc-contact-map-card h2 {
        padding: 13px 13px 10px;
    }

    .kyc-contact-map-card__frame,
    .kyc-contact-map-card__frame iframe {
        height: 220px;
        min-height: 220px;
    }

    .kyc-contact-map-card > a {
        margin: 10px 13px 0;
        font-size: 11.5px;
    }

    .kyc-additional-offices {
        margin-top: 10px;
        padding: 14px 13px;
    }

    .kyc-additional-offices__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 12px;
    }

    .kyc-additional-offices__item {
        grid-template-columns: 5px minmax(0, 1fr);
        gap: 7px;
        font-size: 10.5px;
        line-height: 1.38;
    }

    .kyc-additional-offices__dot {
        width: 4px;
        height: 4px;
        margin-top: 5px;
    }
}

@media (max-width: 390px) {
    .kyc-contacts-page {
        width: calc(100% - 10px);
    }

    .kyc-contacts-hero {
        padding: 20px 12px 12px;
    }

    .kyc-contacts-hero h1 {
        font-size: 30px;
    }

    .kyc-contacts-hero__content > p {
        font-size: 13.5px;
    }

    .kyc-contacts-hero__qr {
        grid-template-columns: minmax(0, 1fr) 82px;
        width: min(210px, 74%);
        min-height: 96px;
        padding: 8px 8px 8px 11px;
    }

    .kyc-contacts-hero__qr img {
        width: 80px;
        height: 80px;
    }

    .kyc-contact-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kyc-contact-fact {
        min-height: 114px;
        padding: 12px 9px;
    }

    .kyc-contact-fact__value {
        font-size: 11.5px;
    }

    .kyc-additional-offices__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 350px) {
    .kyc-contact-facts {
        grid-template-columns: 1fr;
    }

    .kyc-contact-fact {
        min-height: 0;
    }

    .kyc-contacts-hero__qr {
        width: 100%;
    }
}