/* =========================
   Homepage responsive
   ========================= */

/* Tablet / small desktop */
@media (max-width: 1100px) {

    .kontaktum-home-hero {
        padding: 20px 22px 16px !important;
        min-height: unset !important;
    }

    .kontaktum-home-hero h2,
    .kontaktum-home-hero .wp-block-heading {
        font-size: clamp(34px, 4vw, 46px);
        line-height: 1.12;
        margin-bottom: 18px !important;
    }

    .kontaktum-home-hero p {
        font-size: 17px;
        margin-bottom: 0 !important;
    }

    .kontaktum-home-hero .kbc-hero-search {
        margin-top: 18px;
        margin-bottom: 18px;
    }

    .kbc-search-form--hero {
        grid-template-columns: minmax(0, 1fr) 180px 200px;
        width: calc(100% - 48px);
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }

    .kbc-search-form--hero .kbc-search-form__button {
        grid-column: 1 / -1;
        width: 100%;
    }

    .kontaktum-home-hero .kontaktum-category-tabs {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: calc(100% - 48px);
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        gap: 18px;
    }

    .kontaktum-home-hero .kontaktum-category-tab {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        min-height: 154px;
        gap: 18px;
        padding: 0 18px !important;
        text-align: left !important;
    }

    .kontaktum-home-hero .kontaktum-category-tab > svg {
        width: 34px;
        height: 34px;
        padding: 12px;
        flex: 0 0 auto;
    }

    .kontaktum-home-hero .kontaktum-category-tab > .wp-block-group {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        min-width: 0;
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
    }

    .kontaktum-home-hero .kontaktum-category-tab h2,
    .kontaktum-home-hero .kontaktum-category-tab .wp-block-heading {
        width: 100% !important;
        margin: 0 !important;
        font-size: clamp(22px, 4vw, 25px) !important;
        line-height: 1.12;
        text-align: left !important;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
        hyphens: none;
    }

    .kontaktum-home-hero .kontaktum-category-tab h2 a,
    .kontaktum-home-hero .kontaktum-category-tab .wp-block-heading a {
        display: block;
        width: 100%;
        font-size: inherit !important;
        line-height: inherit;
    }

    .kontaktum-home-hero .kontaktum-category-tab p {
        width: 100% !important;
        margin: 0 !important;
        font-size: clamp(13px, 2.5vw, 15px) !important;
        line-height: 1.35 !important;
        text-align: left !important;
    }
}

/* 986px - 1189px: compact horizontal category tabs */
@media (min-width: 986px) and (max-width: 1189px) {

    .kontaktum-home-hero .kontaktum-category-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: calc(100% - 48px);
        max-width: 1100px;
        gap: 14px;
    }

    .kontaktum-home-hero .kontaktum-category-tab {
        min-height: 118px;
        gap: 12px;
        padding: 0 14px !important;
    }

    .kontaktum-home-hero .kontaktum-category-tab > svg {
        width: 28px;
        height: 28px;
        padding: 10px;
    }

    .kontaktum-home-hero .kontaktum-category-tab h2,
    .kontaktum-home-hero .kontaktum-category-tab .wp-block-heading {
        font-size: 24px !important;
        line-height: 1.1;
    }

    .kontaktum-home-hero .kontaktum-category-tab h2 a,
    .kontaktum-home-hero .kontaktum-category-tab .wp-block-heading a {
        font-size: inherit !important;
        line-height: inherit;
    }

    .kontaktum-home-hero .kontaktum-category-tab p {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
}

/* 840px - 985px: extra compact horizontal category tabs */
@media (min-width: 840px) and (max-width: 985px) {

    .kontaktum-home-hero .kontaktum-category-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: calc(100% - 32px);
        max-width: 100%;
        gap: 10px;
    }

    .kontaktum-home-hero .kontaktum-category-tab {
        min-height: 104px;
        gap: clamp(4px, 1vw, 8px);
        padding: 0 clamp(6px, 1.2vw, 10px) !important;
    }

    .kontaktum-home-hero .kontaktum-category-tab > svg {
        width: clamp(20px, 3vw, 24px);
        height: clamp(20px, 3vw, 24px);
        padding: clamp(6px, 1vw, 8px);
    }

    .kontaktum-home-hero .kontaktum-category-tab h2,
    .kontaktum-home-hero .kontaktum-category-tab .wp-block-heading {
        font-size: clamp(17px, 2.25vw, 19px) !important;
        line-height: 1.08;
    }

    .kontaktum-home-hero .kontaktum-category-tab h2 a,
    .kontaktum-home-hero .kontaktum-category-tab .wp-block-heading a {
        font-size: inherit !important;
        line-height: inherit;
    }

    .kontaktum-home-hero .kontaktum-category-tab p {
        font-size: clamp(11px, 1.5vw, 12px) !important;
        line-height: 1.25 !important;
    }
}

/* Mobile */
@media (max-width: 768px) {

    .kontaktum-home-hero {
        padding: 18px 16px 14px !important;
        min-height: unset !important;
    }

    .kontaktum-home-hero h2,
    .kontaktum-home-hero .wp-block-heading {
        font-size: 30px;
        line-height: 1.14;
        margin-bottom: 14px !important;
    }

    .kontaktum-home-hero p {
        font-size: 16px;
        margin-bottom: 0 !important;
    }

    .kontaktum-home-hero .kbc-hero-search {
        margin-top: 14px;
        margin-bottom: 14px;
    }

    .kbc-search-form--hero {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 14px;
        border-radius: 22px;
        gap: 10px;
    }

    .kbc-search-form--hero .kbc-search-form__field,
    .kbc-search-form--hero .kbc-search-form__button {
        width: 100%;
    }

    .kbc-search-form--hero .kbc-input,
    .kbc-search-form--hero .kbc-search-form__button {
        min-height: 54px;
        font-size: 16px;
    }

    .kontaktum-category-tabs {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        gap: 16px;
    }

    .kontaktum-category-tab {
        grid-template-columns: 72px minmax(0, 1fr);
        grid-template-areas:
            "icon title"
            "icon text";
        min-height: 154px;
        padding: 24px;
        column-gap: 18px;
        row-gap: 6px;
        align-content: center;
        align-items: center;
        justify-items: stretch;
        text-align: left !important;
    }

    .kontaktum-category-tab > svg {
        width: 32px;
        height: 32px;
        padding: 12px;
        align-self: center;
        justify-self: center;
    }

    .kontaktum-category-tab h2,
    .kontaktum-category-tab .wp-block-heading {
        width: 100%;
        font-size: 25px;
        line-height: 1.12;
        margin: 0;
        text-align: left !important;
        justify-self: stretch;
    }

    .kontaktum-category-tab h2 a,
    .kontaktum-category-tab .wp-block-heading a {
        display: block;
        width: 100%;
    }

    .kontaktum-category-tab p {
        width: 100%;
        font-size: 15px !important;
        line-height: 1.35 !important;
        margin: 0 !important;
        text-align: left !important;
        justify-self: stretch;
    }
}

/* Small mobile */
@media (max-width: 480px) {

    .kontaktum-home-hero {
        padding: 14px 12px 12px !important;
    }

    .kontaktum-home-hero h2,
    .kontaktum-home-hero .wp-block-heading {
        font-size: 27px;
        margin-bottom: 12px !important;
    }

    .kontaktum-home-hero .kbc-hero-search {
        margin-top: 12px;
        margin-bottom: 12px;
    }

    .kontaktum-category-tab {
        grid-template-columns: 64px minmax(0, 1fr);
        min-height: 154px;
        padding: 22px;
        column-gap: 16px;
        justify-items: stretch;
        text-align: left !important;
    }

    .kontaktum-category-tab > svg {
        width: 30px;
        height: 30px;
        padding: 11px;
    }

    .kontaktum-category-tab h2,
    .kontaktum-category-tab .wp-block-heading {
        width: 100%;
        font-size: 24px;
        text-align: left !important;
        justify-self: stretch;
    }

    .kontaktum-category-tab p {
        width: 100%;
        font-size: 15px !important;
        text-align: left !important;
        justify-self: stretch;
    }
}