/* ---------------------------------
   Pojedyncze szkolenie
--------------------------------- */

.training-single-page {
    min-height: 0;
    padding: 0;
}

.training-icon {
    display: block;
    width: 100%;
    height: 100%;
}


/* ---------------------------------
   Hero szkolenia
--------------------------------- */

.training-single-hero {
    position: relative;
    min-height: clamp(650px, 42vw, 790px);
    overflow: hidden;
    color: var(--color-dark);
    background-color: #eef1f4;
    isolation: isolate;
}

/*
 * Zdjęcie desktopowe znajduje się po prawej stronie.
 * Używamy prawdziwego <img>, żeby poprawić LCP.
 */
.training-single-hero__media {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;

    width: 78%;
    min-width: 1100px;
    max-width: 1760px;
    height: 100%;

    overflow: hidden;

    -webkit-mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgb(0 0 0 / 14%) 9%,
            rgb(0 0 0 / 62%) 23%,
            #000000 39%,
            #000000 100%
        );

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            rgb(0 0 0 / 14%) 9%,
            rgb(0 0 0 / 62%) 23%,
            #000000 39%,
            #000000 100%
        );

    pointer-events: none;
}

.training-single-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
}

/*
 * Jasne przejście pomiędzy treścią a zdjęciem.
 */
.training-single-hero::after {
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            #eef1f4 0%,
            rgb(238 241 244 / 100%) 18%,
            rgb(238 241 244 / 96%) 31%,
            rgb(238 241 244 / 78%) 44%,
            rgb(238 241 244 / 42%) 57%,
            rgb(238 241 244 / 12%) 70%,
            rgb(238 241 244 / 0%) 80%
        );
    content: "";
    pointer-events: none;
}

.training-single-hero__inner {
    display: flex;
    min-height: inherit;
    align-items: center;
    padding-top: 190px;
    padding-bottom: 58px;
}

.training-single-hero__content {
    position: relative;
    z-index: 2;
    width: min(100%, 620px);
}

.training-single-hero__title {
    max-width: 610px;
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(46px, 4.2vw, 72px);
    font-weight: 800;
    line-height: 0.96;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.training-single-hero__lead,
.training-single-hero__description {
    max-width: 570px;
    color: #263448;
    font-size: 15px;
    line-height: 1.55;
}

.training-single-hero__lead {
    margin-top: 22px;
    font-weight: 600;
}

.training-single-hero__description {
    margin-top: 12px;
    font-weight: 400;
}

.training-single-hero__lead p,
.training-single-hero__description p {
    margin: 0;
}

.training-single-hero__lead p + p,
.training-single-hero__description p + p {
    margin-top: 10px;
}


/* ---------------------------------
   Przyciski hero
--------------------------------- */

.training-single-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 26px;
}

.training-single-hero__button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 11px 22px;
    border: 1px solid;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.training-single-hero__button:hover {
    transform: translateY(-2px);
}

.training-single-hero__button:focus-visible {
    outline: 3px solid rgb(227 6 19 / 28%);
    outline-offset: 4px;
}

.training-single-hero__button--primary {
    color: #ffffff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.training-single-hero__button--primary:hover {
    color: var(--color-primary);
    background-color: #ffffff;
}

.training-single-hero__button--secondary {
    color: var(--color-dark);
    background-color: rgb(255 255 255 / 84%);
    border-color: var(--color-dark);
}

.training-single-hero__button--secondary:hover {
    color: #ffffff;
    background-color: var(--color-dark);
}


/* ---------------------------------
   Parametry hero
--------------------------------- */

.training-single-hero__parameters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
}

.training-single-hero__parameter {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    margin: 0;
    color: #344154;
    background-color: rgb(255 255 255 / 84%);
    border: 1px solid rgb(8 39 68 / 12%);
    border-radius: 7px;
    box-shadow: 0 5px 14px rgb(15 23 42 / 5%);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.training-single-hero__parameter-icon {
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    color: var(--color-dark);
}

.training-single-hero__parameter-text {
    min-width: 0;
}


/* ---------------------------------
   Pasek korzyści
--------------------------------- */

.training-benefits {
    padding: 34px 0;
    background-color: #f5f7fb;
    border-top: 1px solid rgb(8 39 68 / 5%);
    border-bottom: 1px solid rgb(8 39 68 / 6%);
}

.training-benefits__grid {
    display: grid;
    grid-template-columns:
        repeat(
            var(--benefits-count, 4),
            minmax(0, 1fr)
        );
    gap: 0;
}

.training-benefits__item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: start;
    gap: 15px;
    min-width: 0;
    padding: 10px 30px;
    border-right: 1px solid rgb(8 39 68 / 9%);
}

.training-benefits__item:first-child {
    padding-left: 0;
}

.training-benefits__item:last-child {
    padding-right: 0;
    border-right: 0;
}

.training-benefits__icon {
    width: 42px;
    height: 42px;
    color: var(--color-dark);
}

.training-benefits__content {
    min-width: 0;
}

.training-benefits__title {
    margin: 0;
    color: var(--color-dark);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.training-benefits__description {
    margin: 9px 0 0;
    color: #5b6675;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
}


/* ---------------------------------
   Średnie ekrany
--------------------------------- */

@media (max-width: 1100px) {
    .training-single-hero {
        min-height: 680px;
    }

    .training-single-hero__media {
        width: 84%;
        min-width: 900px;
    }

    .training-single-hero::after {
        background:
            linear-gradient(
                90deg,
                #eef1f4 0%,
                rgb(238 241 244 / 100%) 22%,
                rgb(238 241 244 / 93%) 37%,
                rgb(238 241 244 / 66%) 52%,
                rgb(238 241 244 / 22%) 67%,
                rgb(238 241 244 / 0%) 80%
            );
    }

    .training-single-hero__content {
        width: min(100%, 560px);
    }

    .training-single-hero__title {
        max-width: 550px;
        font-size: clamp(44px, 5.5vw, 62px);
    }

    .training-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .training-benefits__item {
        padding: 24px;
        border-right: 1px solid rgb(8 39 68 / 9%);
        border-bottom: 1px solid rgb(8 39 68 / 9%);
    }

    .training-benefits__item:first-child {
        padding-left: 24px;
    }

    .training-benefits__item:last-child {
        padding-right: 24px;
    }

    .training-benefits__item:nth-child(2n) {
        border-right: 0;
    }

    .training-benefits__item:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}


/* ---------------------------------
   Tablet i telefon
--------------------------------- */

@media (max-width: 767px) {
    .training-single-hero {
        /*
         * Zdjęcie zaczyna się poniżej mobilnego headera.
         */
        --training-mobile-header-offset: 50px;

        /*
         * Wysokość kadru zdjęcia.
         */
        --training-mobile-image-height:
            clamp(310px, 82vw, 410px);

        min-height: 0;
        background-color: #eef1f4;
    }

    /*
     * Zdjęcie wypełnia całą szerokość.
     * Pozycja "top" zachowuje górną część fotografii.
     */
    .training-single-hero__media {
        top: var(--training-mobile-header-offset);
        right: 0;
        left: 0;

        width: 100%;
        min-width: 0;
        max-width: none;
        height: var(--training-mobile-image-height);

        overflow: hidden;

        -webkit-mask-image: none;
        mask-image: none;
    }

    .training-single-hero__image {
        width: 100%;
        height: 100%;

        object-fit: cover;
        object-position: center top;
    }

    /*
     * Gradient znajduje się na dolnej części zdjęcia
     * i płynnie przechodzi w tło treści.
     */
    .training-single-hero::after {
        top: var(--training-mobile-header-offset);
        right: 0;
        bottom: auto;
        left: 0;
        height: var(--training-mobile-image-height);
        background:
            linear-gradient(
                180deg,
                rgb(238 241 244 / 0%) 0%,
                rgb(238 241 244 / 0%) 50%,
                rgb(238 241 244 / 12%) 64%,
                rgb(238 241 244 / 52%) 79%,
                rgb(238 241 244 / 90%) 92%,
                #eef1f4 100%
            );
    }

    .training-single-hero__inner {
        display: block;
        min-height: 0;
        padding-top:
            calc(
                var(--training-mobile-header-offset)
                + var(--training-mobile-image-height)
                - 38px
            );
        padding-right: 24px;
        padding-bottom: 34px;
        padding-left: 24px;
    }

    .training-single-hero__content {
        width: 100%;
        max-width: none;
    }

    .training-single-hero__title {
        max-width: 560px;
        font-size: clamp(38px, 10vw, 48px);
        line-height: 0.98;
        letter-spacing: -0.035em;
        text-wrap: balance;
    }

    .training-single-hero__lead,
    .training-single-hero__description {
        max-width: 620px;
        font-size: 15px;
        line-height: 1.55;
    }

    .training-single-hero__lead {
        margin-top: 20px;
        font-weight: 650;
    }

    .training-single-hero__description {
        margin-top: 12px;
    }

    .training-single-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 24px;
    }

    .training-single-hero__button {
        width: 100%;
        min-height: 48px;
        padding: 12px 18px;
        border-radius: 7px;
        font-size: 13px;
    }

    .training-single-hero__parameters {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 20px;
    }

    .training-single-hero__parameter {
        min-width: 0;
        min-height: 56px;
        padding: 10px 12px;
        gap: 8px;
        background-color: rgb(255 255 255 / 92%);
        border-radius: 8px;
        font-size: 11px;
        line-height: 1.3;
    }

    .training-single-hero__parameter-icon {
        flex: 0 0 21px;
        width: 21px;
        height: 21px;
    }

    .training-single-hero__parameter-text {
        min-width: 0;
        overflow-wrap: anywhere;
    }


    /* Pasek korzyści */

    .training-benefits {
        padding: 16px 0;
    }

    .training-benefits__grid {
        grid-template-columns: 1fr;
    }

    .training-benefits__item,
    .training-benefits__item:first-child,
    .training-benefits__item:last-child {
        grid-template-columns:
            40px minmax(0, 1fr);
        gap: 13px;
        padding: 20px 0;
        border-right: 0;
        border-bottom: 1px solid rgb(8 39 68 / 9%);
    }

    .training-benefits__item:last-child {
        border-bottom: 0;
    }

    .training-benefits__icon {
        width: 36px;
        height: 36px;
    }

    .training-benefits__title {
        font-size: 14px;
    }

    .training-benefits__description {
        margin-top: 6px;
        font-size: 12px;
    }
}


/* ---------------------------------
   Małe telefony
--------------------------------- */

@media (max-width: 480px) {
    .training-single-hero {
        --training-mobile-header-offset: 50px;
        --training-mobile-image-height:
            clamp(295px, 84vw, 365px);
    }

    .training-single-hero__image {
        object-position: center top;
    }

    .training-single-hero__inner {
        padding-top:
            calc(
                var(--training-mobile-header-offset)
                + var(--training-mobile-image-height)
                - 32px
            );
        padding-right: 20px;
        padding-bottom: 28px;
        padding-left: 20px;
    }

    .training-single-hero__title {
        max-width: 430px;
        font-size: clamp(34px, 9.5vw, 42px);
    }

    .training-single-hero__lead,
    .training-single-hero__description {
        font-size: 14px;
    }

    .training-single-hero__parameters {
        gap: 8px;
    }

    .training-single-hero__parameter {
        min-height: 54px;
        padding: 9px 10px;
        font-size: 10px;
    }
}


/* ---------------------------------
   Bardzo wąskie telefony
--------------------------------- */

@media (max-width: 360px) {
    .training-single-hero {
        --training-mobile-header-offset: 50px;
        --training-mobile-image-height: 290px;
    }

    .training-single-hero__title {
        font-size: 32px;
    }

    .training-single-hero__parameters {
        grid-template-columns: 1fr;
    }
}


/* ---------------------------------
   Film i opis szkolenia
--------------------------------- */

.training-intro {
    padding:
        clamp(64px, 6vw, 96px)
        0;
    background-color: #ffffff;
}

.training-intro__grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(360px, 0.92fr);
    align-items: center;
    gap: clamp(42px, 5vw, 76px);
}

.training-intro__media {
    min-width: 0;
}

.training-intro__media-frame {
    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background-color: #10131a;

    border-radius: 14px;

    box-shadow:
        0 16px 38px
        rgb(15 23 42 / 13%);
}


/*
 * Właściwy iframe pojawia się
 * dopiero po kliknięciu PLAY.
 */
.training-intro__media-frame iframe {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/*
 * =================================
 * YouTube facade
 * =================================
 */

.training-intro__video-facade {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    padding: 0;
    margin: 0;

    overflow: hidden;

    color: inherit;

    background: none;

    border: 0;

    cursor: pointer;
}


/*
 * Lokalny placeholder z ACF.
 */
.training-intro__placeholder {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}


/*
 * Fallback, jeżeli film ma YouTube ID,
 * ale nie ustawiono placeholdera w ACF.
 */
.training-intro__placeholder--empty {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            #15283a,
            #071a2d
        );
}


/*
 * Delikatne przyciemnienie zdjęcia.
 */
.training-intro__video-overlay {
    position: absolute;

    z-index: 1;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgb(0 0 0 / 2%),
            rgb(0 0 0 / 16%)
        );

    transition:
        background-color 0.25s ease;

    pointer-events: none;
}


/*
 * Przycisk PLAY.
 */
.training-intro__video-play {
    position: absolute;

    z-index: 2;

    top: 50%;
    left: 50%;

    display: flex;

    width: 68px;
    height: 48px;

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

    color: #ffffff;

    background-color: var(--color-primary);

    border-radius: 13px;

    box-shadow:
        0 8px 24px
        rgb(0 0 0 / 22%);

    transform:
        translate(-50%, -50%);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;

    pointer-events: none;
}


.training-intro__video-play span {
    width: 0;
    height: 0;

    margin-left: 4px;

    border-top:
        9px solid transparent;

    border-bottom:
        9px solid transparent;

    border-left:
        15px solid #ffffff;
}


/*
 * Hover.
 */
.training-intro__video-facade:hover
.training-intro__placeholder {
    transform: scale(1.025);
}

.training-intro__video-facade:hover
.training-intro__video-play {
    box-shadow:
        0 10px 30px
        rgb(0 0 0 / 28%);

    transform:
        translate(-50%, -50%)
        scale(1.07);
}


/*
 * Dostępność klawiatury.
 */
.training-intro__video-facade:focus-visible {
    outline:
        3px solid
        rgb(227 6 19 / 45%);

    outline-offset: -3px;
}

.training-intro__content {
    min-width: 0;
}

.training-intro__title {
    max-width: 600px;
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(28px, 2.4vw, 40px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.training-intro__description {
    max-width: 650px;
    margin-top: 22px;
    color: #344154;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
}

.training-intro__description > :first-child {
    margin-top: 0;
}

.training-intro__description > :last-child {
    margin-bottom: 0;
}

.training-intro__description p {
    margin: 0 0 16px;
}

.training-intro__description ul,
.training-intro__description ol {
    padding-left: 22px;
    margin: 16px 0;
}

.training-intro__points {
    display: grid;
    gap: 10px;
    padding: 0;
    margin: 26px 0 0;
    list-style: none;
}

.training-intro__point {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin: 0;
    color: #263448;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.training-intro__point-icon {
    display: inline-block;
    width: auto;
    height: auto;
    color: var(--color-primary);
    background: none;
    border-radius: 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.training-intro__point-text {
    min-width: 0;
    padding-top: 0;
}

/*
 * Film po prawej.
 */
.training-intro--video-right
.training-intro__media {
    order: 2;
}

.training-intro--video-right
.training-intro__content {
    order: 1;
}

/*
 * Brak filmu lub grafiki zastępczej.
 */
.training-intro--without-media
.training-intro__grid {
    grid-template-columns: 1fr;
}

.training-intro--without-media
.training-intro__content {
    width: min(100%, 820px);
    margin-inline: auto;
    text-align: center;
}

.training-intro--without-media
.training-intro__title,
.training-intro--without-media
.training-intro__description {
    margin-right: auto;
    margin-left: auto;
}

.training-intro--without-media
.training-intro__points {
    width: min(100%, 620px);
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}


/* ---------------------------------
   Film i opis — średnie ekrany
--------------------------------- */

@media (max-width: 1100px) {
    .training-intro__grid {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.9fr);
        gap: 42px;
    }

    .training-intro__title {
        font-size: clamp(27px, 3vw, 36px);
    }

    .training-intro__description {
        font-size: 14px;
    }
}


/* ---------------------------------
   Film i opis — telefon
--------------------------------- */

@media (max-width: 767px) {
    .training-intro {
        padding: 58px 0 64px;
    }

    .training-intro__grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    /*
     * Na telefonie film zawsze jest pierwszy,
     * niezależnie od ustawienia ACF.
     */
    .training-intro__media,
    .training-intro--video-right
    .training-intro__media {
        order: 1;
    }

    .training-intro__content,
    .training-intro--video-right
    .training-intro__content {
        order: 2;
    }

    .training-intro__media-frame {
        border-radius: 11px;
    }

    .training-intro__title {
        max-width: 560px;
        font-size: clamp(26px, 7.5vw, 34px);
        line-height: 1.1;
    }

    .training-intro__description {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.6;
    }

    .training-intro__points {
        gap: 9px;
        margin-top: 22px;
    }

    .training-intro__point {
        font-size: 13px;
    }
}


/* ---------------------------------
   Film i opis — małe telefony
--------------------------------- */

@media (max-width: 480px) {
    .training-intro {
        padding: 48px 0 56px;
    }

    .training-intro__grid {
        gap: 28px;
    }

    .training-intro__media-frame {
        /*
         * Trochę wyższy film na bardzo wąskim ekranie.
         */
        aspect-ratio: 4 / 3;
    }

    .training-intro__title {
        font-size: 27px;
    }

    .training-intro__video-play {
        width: 58px;
        height: 42px;

        border-radius: 11px;
    }

    .training-intro__video-play span {
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 13px;
    }
}


/* ---------------------------------
   Warianty szkolenia
--------------------------------- */

.training-variants {
    padding:
        clamp(68px, 6vw, 100px)
        0
        clamp(78px, 7vw, 112px);
    background-color: #f5f7fb;
    scroll-margin-top: 120px;
}

.training-variants__header {
    margin-bottom: clamp(38px, 4vw, 56px);
    text-align: center;
}

.training-variants__title {
    max-width: 900px;
    margin: 0 auto;
    color: var(--color-dark);
    font-size: clamp(30px, 2.8vw, 44px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.training-variants__groups {
    display: grid;
    gap: clamp(58px, 6vw, 86px);
}

.training-variants__group {
    min-width: 0;
}


/* ---------------------------------
   Tytuł grupy wariantów
--------------------------------- */

.training-variants__group-title {
    display: flex;
    width: min(100%, 920px);
    align-items: center;
    gap: 22px;
    margin: 0 auto 32px;
    color: var(--color-dark);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.training-variants__group-title::before,
.training-variants__group-title::after {
    height: 1px;
    flex: 1 1 auto;
    background-color: rgb(227 6 19 / 34%);
    content: "";
}

.training-variants__group-title span {
    flex: 0 1 auto;
}


/* ---------------------------------
   Siatka wariantów
--------------------------------- */

.training-variants__grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 30px;
    width: min(100%, 1420px);
    margin-inline: auto;
}

.training-variants__grid--single {
    grid-template-columns: minmax(0, 860px);
    justify-content: center;
}


/* ---------------------------------
   Karta wariantu
--------------------------------- */

.training-variant-card {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(220px, 37%)
        minmax(0, 1fr);
    min-width: 0;
    min-height: 390px;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid rgb(8 39 68 / 13%);
    border-radius: 15px;
    box-shadow:
        0 16px 38px
        rgb(15 23 42 / 8%);
}

.training-variant-card--featured {
    border-color: var(--color-primary);
    box-shadow:
        0 18px 42px
        rgb(227 6 19 / 11%);
}


/* ---------------------------------
   Zdjęcie wariantu
--------------------------------- */

.training-variant-card__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background-color: #e4e8ed;
    border-radius: 14px 0 0 14px;
}

.training-variant-card__picture,
.training-variant-card__image,
.training-variant-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
}

.training-variant-card__picture {
    overflow: hidden;
}

.training-variant-card__image,
.training-variant-card__placeholder {
    min-height: 390px;
}

.training-variant-card__image {
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.training-variant-card__placeholder {
    background:
        linear-gradient(
            135deg,
            #dbe1e8,
            #f4f6f8
        );
}

.training-variant-card:hover
.training-variant-card__image {
    transform: scale(1.035);
}


/* ---------------------------------
   Treść wariantu
--------------------------------- */

.training-variant-card__body {
    display: flex;
    min-width: 0;
    height: 100%;
    flex-direction: column;
    padding: 36px 36px 32px;
}


/* ---------------------------------
   Etykieta wyróżnionego wariantu
--------------------------------- */

.training-variant-card__badge {
    position: static;
    display: inline-flex;
    max-width: 100%;
    min-height: 25px;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    margin: 0 0 14px;
    color: #ffffff;
    background-color: var(--color-primary);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.045em;
    text-align: center;
    text-transform: uppercase;
}


/* ---------------------------------
   Tytuł wariantu
--------------------------------- */

.training-variant-card__title {
    max-width: 520px;
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(24px, 1.7vw, 31px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.025em;
    text-wrap: balance;
}


/* ---------------------------------
   Informacje wariantu
--------------------------------- */

.training-variant-card__details {
    display: grid;
    gap: 14px;
    padding: 0;
    margin: 26px 0 0;
    list-style: none;
}

.training-variant-card__detail {
    display: grid;
    grid-template-columns:
        22px
        minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    margin: 0;
    color: #263448;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}

.training-variant-card__detail-icon {
    display: inline-flex;
    width: 21px;
    height: 21px;
    color: var(--color-dark);
}

.training-variant-card__detail-text {
    min-width: 0;
    padding-top: 1px;
    overflow-wrap: anywhere;
}


/* ---------------------------------
   Ważna informacja wariantu
--------------------------------- */

.training-variant-card__notice {
    display: grid;
    grid-template-columns:
        20px
        minmax(0, 1fr);
    align-items: start;
    gap: 9px;

    /*
     * Górny odstęp od informacji wariantu.
     */
    margin-top: 21px;

    /*
     * To daje stały oddech między
     * czerwonym tekstem a przyciskiem,
     * ale NIE nadpisuje margin-top:auto
     * przycisku.
     */
    padding-bottom: 22px;

    color: var(--color-primary);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
}

.training-variant-card__notice-icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border: 1px solid currentcolor;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.training-variant-card__notice p {
    min-width: 0;
    margin: 0;
}


/* ---------------------------------
   Przycisk wariantu
--------------------------------- */

.training-variant-card__button {
    display: inline-flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;

    /*
     * NAJWAŻNIEJSZE:
     * zawsze spycha przycisk na dół
     * prawej części karty.
     */
    margin-top: auto;

    color: var(--color-dark);
    background-color: #ffffff;
    border: 1px solid var(--color-dark);
    border-radius: 6px;

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


/*
 * WAŻNE:
 * Nie dodajemy tutaj żadnego:
 *
 * .notice + .button {
 *     margin-top: 28px;
 * }
 *
 * bo rozwaliłoby to margin-top:auto.
 */


.training-variant-card__button:hover {
    color: #ffffff;
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    transform: translateY(-2px);
}


/* ---------------------------------
   Wyróżniony wariant
--------------------------------- */

.training-variant-card--featured
.training-variant-card__button {
    color: #ffffff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.training-variant-card--featured
.training-variant-card__button:hover {
    color: var(--color-primary);
    background-color: #ffffff;
    border-color: var(--color-primary);
}


/* ---------------------------------
   Focus
--------------------------------- */

.training-variant-card__button:focus-visible {
    outline: 3px solid rgb(227 6 19 / 25%);
    outline-offset: 4px;
}

/* ---------------------------------
   Nieparzysta ostatnia karta
--------------------------------- */

@media (min-width: 1001px) {
    .training-variants__grid:not(
        .training-variants__grid--single
    )
    > .training-variant-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: min(100%, 860px);
        justify-self: center;
    }
}


/* ---------------------------------
   Mniejszy komputer i laptop
--------------------------------- */

@media (max-width: 1280px) {
    .training-variants__grid {
        width: min(100%, 1160px);
        gap: 24px;
    }

    .training-variant-card {
        grid-template-columns:
            minmax(190px, 35%)
            minmax(0, 1fr);
        min-height: 370px;
    }

    .training-variant-card__image,
    .training-variant-card__placeholder {
        min-height: 370px;
    }

    .training-variant-card__body {
        padding: 32px 28px 28px;
    }

    .training-variant-card__title {
        font-size: 25px;
    }

    .training-variant-card__detail {
        font-size: 12px;
    }
}


/* ---------------------------------
   Tablet
--------------------------------- */

@media (max-width: 1000px) {
    .training-variants__grid,
    .training-variants__grid--single {
        grid-template-columns: 1fr;
        width: min(100%, 820px);
    }

    .training-variant-card {
        grid-template-columns:
            minmax(240px, 36%)
            minmax(0, 1fr);
        min-height: 370px;
    }

    .training-variant-card__image,
    .training-variant-card__placeholder {
        min-height: 370px;
    }

    .training-variant-card__title {
        font-size: 26px;
    }
}


/* ---------------------------------
   Telefon
--------------------------------- */

@media (max-width: 700px) {
    .training-variants {
        padding: 58px 0 70px;
        scroll-margin-top: 88px;
    }

    .training-variants__header {
        margin-bottom: 34px;
    }

    .training-variants__title {
        font-size: 29px;
    }

    .training-variants__groups {
        gap: 52px;
    }

    .training-variants__group-title {
        gap: 12px;
        margin-bottom: 24px;
        font-size: 15px;
    }

    .training-variant-card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    /*
     * Szerokie zdjęcie mobilne.
     * Jeżeli istnieje variant_mobile_image,
     * element picture podmieni źródło obrazu.
     */
    .training-variant-card__media {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 14px 14px 0 0;
    }

    .training-variant-card__picture,
    .training-variant-card__image,
    .training-variant-card__placeholder {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .training-variant-card__image {
        object-fit: cover;
        object-position: center;
    }

    .training-variant-card__body {
        padding: 25px 22px 22px;
    }

    .training-variant-card__badge {
        min-height: 23px;
        padding: 5px 10px;
        margin-bottom: 12px;
        font-size: 8px;
    }

    .training-variant-card__title {
        font-size: 23px;
    }

    .training-variant-card__details {
        gap: 12px;
        margin-top: 20px;
    }

    .training-variant-card__detail {
        font-size: 12px;
    }

    .training-variant-card__button {
        min-height: 47px;
    }
}


/* ---------------------------------
   Małe telefony
--------------------------------- */

@media (max-width: 480px) {
    .training-variants {
        padding: 52px 0 62px;
    }

    .training-variants__title {
        font-size: 28px;
    }

    .training-variant-card__media {
        aspect-ratio: 16 / 9;
    }

    .training-variant-card__body {
        padding-right: 18px;
        padding-left: 18px;
    }

    .training-variant-card__title {
        font-size: 22px;
    }

    .training-variant-card__detail {
        grid-template-columns:
            20px minmax(0, 1fr);
        gap: 9px;
        font-size: 11px;
    }

    .training-variant-card__detail-icon {
        width: 19px;
        height: 19px;
    }
}


/* ---------------------------------
   Bardzo wąskie telefony
--------------------------------- */

@media (max-width: 360px) {
    .training-variant-card__body {
        padding-right: 16px;
        padding-left: 16px;
    }

    .training-variant-card__title {
        font-size: 21px;
    }
}


/* ---------------------------------
   Ograniczenie animacji
--------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .training-single-hero__button,
    .training-variant-card__image,
    .training-variant-card__button,
    .training-level-card__image {
        transition: none;
    }
}


/* ---------------------------------
   Poziomy zaawansowania
--------------------------------- */

.training-levels {
    padding:
        clamp(64px, 6vw, 96px)
        0
        clamp(76px, 7vw, 110px);
    background-color: #f5f7fb;
}

.training-levels__header {
    margin-bottom: clamp(34px, 4vw, 50px);
    text-align: center;
}

.training-levels__title {
    max-width: 920px;
    margin: 0 auto;
    color: var(--color-dark);
    font-size: clamp(28px, 2.6vw, 42px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.training-levels__groups {
    display: grid;
    gap: clamp(56px, 6vw, 82px);
}

.training-levels__group {
    min-width: 0;
}


/* ---------------------------------
   Tytuł grupy poziomów
--------------------------------- */

.training-levels__group-title {
    display: flex;
    width: min(100%, 900px);
    align-items: center;
    gap: 20px;
    margin: 0 auto 30px;
    color: var(--color-dark);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.training-levels__group-title::before,
.training-levels__group-title::after {
    height: 1px;
    flex: 1 1 auto;
    background-color: rgb(227 6 19 / 32%);
    content: "";
}

.training-levels__group-title span {
    flex: 0 1 auto;
}


/* ---------------------------------
   Siatka poziomów
--------------------------------- */

.training-levels__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: min(100%, 1420px);
    margin-inline: auto;
}


/* ---------------------------------
   Karta poziomu
--------------------------------- */

.training-level-card {
    --level-accent: #64748b;

    display: grid;
    grid-template-columns:
        minmax(120px, 31%)
        minmax(0, 1fr);
    align-items: stretch;
    gap: 18px;
    flex:
        0 1
        calc(
            33.333%
            - 16px
        );
    min-width: 0;
    min-height: 280px;
    padding: 10px;
    overflow: hidden;
    background-color: #ffffff;
    border: 2px solid var(--level-accent);
    border-radius: 12px;
    box-shadow:
        0 10px 28px
        rgb(15 23 42 / 6%);
}


/* ---------------------------------
   Kolory poziomów
--------------------------------- */

.training-level-card--green {
    --level-accent: #36b833;
}

.training-level-card--blue {
    --level-accent: #168cff;
}

.training-level-card--navy {
    --level-accent: #345f9c;
}

.training-level-card--red {
    --level-accent: #ef3340;
}

.training-level-card--gray {
    --level-accent: #6b7280;
}


/* ---------------------------------
   Zdjęcie poziomu
--------------------------------- */

.training-level-card__media {
    position: relative;
    align-self: stretch;
    min-width: 0;
    min-height: 258px;
    overflow: hidden;
    background-color: #e5e9ee;
    border-radius: 9px;
}

.training-level-card__picture,
.training-level-card__image,
.training-level-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.training-level-card__picture {
    overflow: hidden;
}

.training-level-card__image,
.training-level-card__placeholder {
    min-height: 258px;
}

.training-level-card__image {
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.training-level-card__placeholder {
    background-color: #e7ebef;
}

.training-level-card:hover
.training-level-card__image {
    transform: scale(1.035);
}


/* ---------------------------------
   Treść karty poziomu
--------------------------------- */

.training-level-card__body {
    min-width: 0;
    padding: 13px 14px 13px 0;
    background: none;
    background-color: #ffffff;
}

.training-level-card__name {
    margin: 0 0 18px;
    color: var(--level-accent);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-transform: uppercase;
}

.training-level-card__section
+ .training-level-card__section {
    margin-top: 16px;
}

.training-level-card__label {
    margin: 0 0 5px;
    color: var(--color-dark);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
}

.training-level-card__text {
    margin: 0;
    color: #4b5767;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}


/* ---------------------------------
   Poziomy — mniejszy komputer
--------------------------------- */

@media (max-width: 1280px) {
    .training-levels__grid {
        width: min(100%, 1160px);
    }

    .training-level-card {
        grid-template-columns:
            minmax(110px, 30%)
            minmax(0, 1fr);
        gap: 16px;
        min-height: 270px;
        padding: 9px;
    }

    .training-level-card__media,
    .training-level-card__image,
    .training-level-card__placeholder {
        min-height: 250px;
    }

    .training-level-card__body {
        padding: 12px 10px 12px 0;
    }

    .training-level-card__name {
        font-size: 17px;
    }
}


/* ---------------------------------
   Poziomy — tablet
--------------------------------- */

@media (max-width: 1000px) {
    .training-level-card {
        grid-template-columns:
            minmax(125px, 33%)
            minmax(0, 1fr);
        gap: 16px;
        flex-basis:
            calc(
                50%
                - 12px
            );
        min-height: 275px;
        padding: 10px;
    }

    .training-level-card__media,
    .training-level-card__image,
    .training-level-card__placeholder {
        min-height: 253px;
    }

    .training-level-card__body {
        padding: 12px 10px 12px 0;
    }

    .training-level-card__name {
        font-size: 18px;
    }

    .training-level-card__text {
        font-size: 12px;
    }
}


/* ---------------------------------
   Poziomy — telefon
--------------------------------- */

@media (max-width: 700px) {
    .training-levels {
        padding: 56px 0 68px;
    }

    .training-levels__header {
        margin-bottom: 34px;
    }

    .training-levels__title {
        font-size: 29px;
    }

    .training-levels__groups {
        gap: 50px;
    }

    .training-levels__group-title {
        gap: 12px;
        margin-bottom: 24px;
        font-size: 15px;
    }

    .training-levels__grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 18px;
        width: min(100%, 540px);
    }

    /*
     * Na telefonie szerokie zdjęcie znajduje się
     * nad treścią karty.
     */
    .training-level-card {
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
        min-height: 0;
        padding: 10px;
    }

    .training-level-card__media {
        width: 100%;
        min-height: 0;
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 9px;
    }

    /*
     * Element picture obsługuje zdjęcie mobilne z ACF.
     */
    .training-level-card__picture,
    .training-level-card__image,
    .training-level-card__placeholder {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: inherit;
    }

    .training-level-card__picture {
        overflow: hidden;
    }

    .training-level-card__image {
        object-fit: cover;
        object-position: center;
    }

    .training-level-card__body {
        padding: 22px 10px 14px;
        background: none;
        background-color: #ffffff;
    }

    .training-level-card__name {
        margin-bottom: 16px;
        font-size: 19px;
    }

    .training-level-card__section
    + .training-level-card__section {
        margin-top: 14px;
    }

    .training-level-card__label {
        font-size: 12px;
    }

    .training-level-card__text {
        font-size: 12px;
        line-height: 1.5;
    }
}


/* ---------------------------------
   Małe telefony
--------------------------------- */

@media (max-width: 440px) {
    .training-levels {
        padding: 50px 0 60px;
    }

    .training-levels__title {
        font-size: 27px;
    }

    .training-level-card {
        padding: 8px;
    }

    .training-level-card__media {
        aspect-ratio: 16 / 9;
        border-radius: 8px;
    }

    .training-level-card__picture,
    .training-level-card__image,
    .training-level-card__placeholder {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    .training-level-card__image {
        object-position: center;
    }

    .training-level-card__body {
        padding: 19px 8px 12px;
    }

    .training-level-card__name {
        margin-bottom: 14px;
        font-size: 18px;
    }

    .training-level-card__text {
        font-size: 11px;
    }
}


/* ---------------------------------
   Bardzo małe telefony
--------------------------------- */

@media (max-width: 360px) {
    .training-level-card {
        padding: 7px;
    }

    .training-level-card__body {
        padding-right: 6px;
        padding-left: 6px;
    }

    .training-level-card__name {
        font-size: 17px;
    }
}


/* ---------------------------------
   Sprzęt w cenie szkolenia
--------------------------------- */

.training-equipment {
    padding:
        clamp(68px, 7vw, 108px)
        0
        clamp(76px, 8vw, 120px);
    background-color: #ffffff;
}

.training-equipment__layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, 0.92fr);
    align-items: center;
    gap: clamp(50px, 6vw, 96px);
}


/* ---------------------------------
   Kolejność kolumn
--------------------------------- */

.training-equipment__content {
    min-width: 0;
    order: 1;
}

.training-equipment__media {
    order: 2;
}

.training-equipment--image-left
.training-equipment__media {
    order: 1;
}

.training-equipment--image-left
.training-equipment__content {
    order: 2;
}


/* ---------------------------------
   Treść sekcji
--------------------------------- */

.training-equipment__content {
    max-width: 680px;
}

.training-equipment--image-left
.training-equipment__content {
    justify-self: end;
}

.training-equipment__eyebrow {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.training-equipment__title {
    max-width: 680px;
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(31px, 3vw, 48px);
    font-weight: 800;
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.training-equipment__description {
    margin-top: 24px;
    color: #495668;
    font-size: 15px;
    line-height: 1.75;
}

.training-equipment__description > * {
    margin-top: 0;
}

.training-equipment__description > *:last-child {
    margin-bottom: 0;
}

.training-equipment__description p {
    margin-bottom: 16px;
}

.training-equipment__description strong {
    color: var(--color-dark);
    font-weight: 700;
}

.training-equipment__description a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* ---------------------------------
   Lista informacji
--------------------------------- */

.training-equipment__points {
    display: grid;
    gap: 13px;
    padding: 0;
    margin: 28px 0 0;
    list-style: none;
}

.training-equipment__point {
    display: grid;
    grid-template-columns:
        16px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    margin: 0;
    color: #263448;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.training-equipment__point-icon {
    display: inline-block;
    width: auto;
    height: auto;
    padding-top: 2px;
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.training-equipment__point-text {
    min-width: 0;
}


/* ---------------------------------
   Ważna informacja
--------------------------------- */

.training-equipment__notice {
    display: grid;
    grid-template-columns:
        34px minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 20px 22px;
    margin-top: 30px;
    background-color: #f5f7fa;
    border-left: 3px solid var(--color-primary);
    border-radius: 8px;
}

.training-equipment__notice-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: var(--color-primary);
    border-radius: 50%;
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}

.training-equipment__notice-content {
    min-width: 0;
}

.training-equipment__notice-title {
    margin: 0 0 6px;
    color: var(--color-dark);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}

.training-equipment__notice-text {
    color: #566274;
    font-size: 12px;
    line-height: 1.55;
}

.training-equipment__notice-text > * {
    margin-top: 0;
}

.training-equipment__notice-text > *:last-child {
    margin-bottom: 0;
}

.training-equipment__notice-text p {
    margin-bottom: 8px;
}


/* ---------------------------------
   Zdjęcie sprzętu
--------------------------------- */

.training-equipment__media {
    width: 100%;
    min-width: 0;
    padding: 10px;
    background-color: #f0f3f6;
    border-radius: 18px;
    box-shadow:
        0 20px 50px
        rgb(15 23 42 / 10%);
}

.training-equipment__picture,
.training-equipment__image,
.training-equipment__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.training-equipment__picture {
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.training-equipment__image {
    object-fit: cover;
    object-position: center;
    transition: transform 0.45s ease;
}

.training-equipment__placeholder {
    min-height: 480px;
    background-color: #e3e8ed;
}

.training-equipment__media:hover
.training-equipment__image {
    transform: scale(1.025);
}


/* ---------------------------------
   Sprzęt — mniejszy komputer
--------------------------------- */

@media (max-width: 1200px) {
    .training-equipment__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, 0.9fr);
        gap: 48px;
    }

    .training-equipment__title {
        font-size: 40px;
    }

    .training-equipment__description {
        font-size: 14px;
    }
}


/* ---------------------------------
   Sprzęt — tablet
--------------------------------- */

@media (max-width: 900px) {
    .training-equipment__layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(320px, 0.82fr);
        gap: 36px;
    }

    .training-equipment__title {
        font-size: 34px;
    }

    .training-equipment__description {
        margin-top: 20px;
        font-size: 13px;
        line-height: 1.65;
    }

    .training-equipment__points {
        margin-top: 24px;
    }

    .training-equipment__point {
        font-size: 13px;
    }

    .training-equipment__notice {
        padding: 18px;
        margin-top: 25px;
    }
}


/* ---------------------------------
   Sprzęt — telefon
--------------------------------- */

@media (max-width: 700px) {
    .training-equipment {
        padding: 56px 0 68px;
    }

    .training-equipment__layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    /*
     * Zdjęcie zawsze nad tekstem na telefonie.
     */
    .training-equipment__media,
    .training-equipment--image-left
    .training-equipment__media {
        order: 1;
    }

    .training-equipment__content,
    .training-equipment--image-left
    .training-equipment__content {
        max-width: none;
        order: 2;
        justify-self: stretch;
    }

    .training-equipment__media {
        padding: 8px;
        border-radius: 14px;
    }

    /*
     * Osobne zdjęcie mobilne z ACF
     * jest ładowane przez element picture.
     */
    .training-equipment__picture {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        border-radius: 9px;
    }

    .training-equipment__image,
    .training-equipment__placeholder {
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: inherit;
    }

    .training-equipment__image {
        object-fit: cover;
        object-position: center;
    }

    .training-equipment__eyebrow {
        margin-bottom: 10px;
        font-size: 11px;
    }

    .training-equipment__title {
        font-size: 30px;
    }

    .training-equipment__description {
        margin-top: 19px;
        font-size: 14px;
        line-height: 1.65;
    }

    .training-equipment__points {
        gap: 12px;
        margin-top: 23px;
    }

    .training-equipment__point {
        grid-template-columns:
            15px minmax(0, 1fr);
        gap: 9px;
        font-size: 13px;
    }

    .training-equipment__notice {
        grid-template-columns:
            30px minmax(0, 1fr);
        gap: 12px;
        padding: 17px 16px;
        margin-top: 25px;
    }

    .training-equipment__notice-icon {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .training-equipment__notice-title {
        font-size: 13px;
    }

    .training-equipment__notice-text {
        font-size: 11px;
    }
}


/* ---------------------------------
   Sprzęt — małe telefony
--------------------------------- */

@media (max-width: 440px) {
    .training-equipment {
        padding: 50px 0 60px;
    }

    .training-equipment__layout {
        gap: 26px;
    }

    .training-equipment__media {
        padding: 7px;
        border-radius: 12px;
    }

    .training-equipment__picture {
        aspect-ratio: 16 / 9;
        border-radius: 8px;
    }

    .training-equipment__title {
        font-size: 28px;
    }

    .training-equipment__description {
        font-size: 13px;
    }

    .training-equipment__point {
        font-size: 12px;
    }

    .training-equipment__notice {
        padding: 15px 14px;
    }
}

/* ---------------------------------
   Przygotowanie do szkolenia
--------------------------------- */

.training-readiness {
    padding:
        clamp(68px, 7vw, 106px)
        0
        clamp(76px, 8vw, 118px);
    background-color: #f5f7fb;
}

.training-readiness__header {
    width: min(100%, 880px);
    margin: 0 auto clamp(38px, 4vw, 56px);
    text-align: center;
}

.training-readiness__eyebrow {
    margin: 0 0 12px;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.training-readiness__title {
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(31px, 3vw, 47px);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.training-readiness__description {
    max-width: 720px;
    margin: 22px auto 0;
    color: #586577;
    font-size: 15px;
    line-height: 1.7;
}

.training-readiness__description > * {
    margin-top: 0;
}

.training-readiness__description > *:last-child {
    margin-bottom: 0;
}

.training-readiness__description p {
    margin-bottom: 14px;
}


/* ---------------------------------
   Siatka kart
--------------------------------- */

.training-readiness__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: min(100%, 1260px);
    margin-inline: auto;
}

.training-readiness__grid--single {
    grid-template-columns: minmax(0, 520px);
    justify-content: center;
}

.training-readiness__grid--two {
    grid-template-columns:
        repeat(2, minmax(0, 520px));
    justify-content: center;
}

.training-readiness__grid--four {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    width: min(100%, 1040px);
}


/* ---------------------------------
   Karta przygotowania
--------------------------------- */

.training-readiness-card {
    position: relative;
    min-width: 0;
    padding: 32px 30px 30px;
    overflow: hidden;
    background-color: #ffffff;
    border: 1px solid rgb(8 39 68 / 12%);
    border-radius: 14px;
    box-shadow:
        0 14px 34px
        rgb(15 23 42 / 7%);
    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.25s ease;
}

.training-readiness-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 4px;
    background-color: var(--color-primary);
    content: "";
}

.training-readiness-card:hover {
    border-color: rgb(227 6 19 / 30%);
    box-shadow:
        0 18px 42px
        rgb(15 23 42 / 10%);
    transform: translateY(-4px);
}


/* ---------------------------------
   Ikona karty
--------------------------------- */

.training-readiness-card__icon {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    overflow: hidden;
    color: var(--color-primary);
    background-color: rgb(227 6 19 / 8%);
    border-radius: 12px;
}

.training-readiness-card__icon-image {
    display: block;
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.training-readiness-card__icon-fallback {
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
}


/* ---------------------------------
   Treść karty
--------------------------------- */

.training-readiness-card__title {
    margin: 0;
    color: var(--color-dark);
    font-size: 21px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.training-readiness-card__items {
    display: grid;
    gap: 13px;
    padding: 0;
    margin: 23px 0 0;
    list-style: none;
}

.training-readiness-card__item {
    display: grid;
    grid-template-columns:
        15px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    margin: 0;
    color: #4c596a;
    font-size: 13px;
    line-height: 1.55;
}

.training-readiness-card__check {
    display: inline-block;
    padding-top: 2px;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}

.training-readiness-card__item-text {
    min-width: 0;
    overflow-wrap: anywhere;
}


/* ---------------------------------
   Dolna ważna informacja
--------------------------------- */

.training-readiness__notice {
    display: grid;
    grid-template-columns:
        42px minmax(0, 1fr);
    align-items: start;
    gap: 17px;
    width: min(100%, 1040px);
    padding: 24px 27px;
    margin: clamp(34px, 4vw, 50px) auto 0;
    background-color: #ffffff;
    border: 1px solid rgb(227 6 19 / 25%);
    border-radius: 12px;
    box-shadow:
        0 12px 30px
        rgb(15 23 42 / 6%);
}

.training-readiness__notice-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background-color: var(--color-primary);
    border-radius: 50%;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
}

.training-readiness__notice-content {
    min-width: 0;
    padding-top: 2px;
}

.training-readiness__notice-title {
    margin: 0 0 7px;
    color: var(--color-dark);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
}

.training-readiness__notice-text {
    color: #566274;
    font-size: 13px;
    line-height: 1.6;
}

.training-readiness__notice-text > * {
    margin-top: 0;
}

.training-readiness__notice-text > *:last-child {
    margin-bottom: 0;
}

.training-readiness__notice-text p {
    margin-bottom: 8px;
}

.training-readiness__notice-text a {
    color: var(--color-primary);
    font-weight: 700;
    text-underline-offset: 3px;
}


/* ---------------------------------
   Przygotowanie — laptop
--------------------------------- */

@media (max-width: 1100px) {
    .training-readiness__grid {
        gap: 20px;
    }

    .training-readiness-card {
        padding: 29px 25px 27px;
    }

    .training-readiness-card__title {
        font-size: 19px;
    }

    .training-readiness-card__item {
        font-size: 12px;
    }
}


/* ---------------------------------
   Przygotowanie — tablet
--------------------------------- */

@media (max-width: 900px) {
    .training-readiness__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        width: min(100%, 760px);
    }

    .training-readiness__grid--single {
        grid-template-columns: minmax(0, 520px);
    }

    .training-readiness__grid--two,
    .training-readiness__grid--four {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .training-readiness-card__item {
        font-size: 13px;
    }
}


/* ---------------------------------
   Przygotowanie — telefon
--------------------------------- */

@media (max-width: 700px) {
    .training-readiness {
        padding: 56px 0 68px;
    }

    .training-readiness__header {
        margin-bottom: 34px;
    }

    .training-readiness__eyebrow {
        margin-bottom: 10px;
        font-size: 11px;
    }

    .training-readiness__title {
        font-size: 30px;
    }

    .training-readiness__description {
        margin-top: 18px;
        font-size: 14px;
        line-height: 1.65;
    }

    .training-readiness__grid,
    .training-readiness__grid--single,
    .training-readiness__grid--two,
    .training-readiness__grid--four {
        grid-template-columns: 1fr;
        gap: 17px;
        width: min(100%, 540px);
    }

    .training-readiness-card {
        padding: 27px 23px 25px;
    }

    .training-readiness-card:hover {
        transform: none;
    }

    .training-readiness-card__icon {
        width: 54px;
        height: 54px;
        margin-bottom: 19px;
    }

    .training-readiness-card__icon-image {
        width: 31px;
        height: 31px;
    }

    .training-readiness-card__title {
        font-size: 20px;
    }

    .training-readiness-card__items {
        gap: 12px;
        margin-top: 20px;
    }

    .training-readiness-card__item {
        font-size: 13px;
    }

    .training-readiness__notice {
        grid-template-columns:
            36px minmax(0, 1fr);
        gap: 14px;
        padding: 20px 19px;
        margin-top: 30px;
    }

    .training-readiness__notice-icon {
        width: 35px;
        height: 35px;
        font-size: 17px;
    }

    .training-readiness__notice-title {
        font-size: 14px;
    }

    .training-readiness__notice-text {
        font-size: 12px;
    }
}


/* ---------------------------------
   Przygotowanie — małe telefony
--------------------------------- */

@media (max-width: 440px) {
    .training-readiness {
        padding: 50px 0 60px;
    }

    .training-readiness__title {
        font-size: 28px;
    }

    .training-readiness-card {
        padding: 25px 20px 23px;
    }

    .training-readiness__notice {
        grid-template-columns:
            32px minmax(0, 1fr);
        gap: 11px;
        padding: 17px 15px;
    }

    .training-readiness__notice-icon {
        width: 31px;
        height: 31px;
        font-size: 15px;
    }
}

/* =================================
   Lokalizacje na stronie szkolenia
================================= */

.training-single-locations {
    padding:
        clamp(72px, 7vw, 105px)
        0
        clamp(82px, 8vw, 118px);

    background-color: #ffffff;
}


/* =================================
   Layout
================================= */

.training-single-locations
.locations__layout {
    display: grid;

    grid-template-columns:
        minmax(250px, 310px)
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(
            42px,
            5vw,
            72px
        );
}


/* =================================
   Lewa kolumna
================================= */

.training-single-locations
.locations__intro {
    min-width: 0;

    align-self: center;
}

.training-single-locations
.locations__title {
    max-width: 310px;

    margin: 0;

    font-size:
        clamp(
            26px,
            2vw,
            34px
        );

    line-height: 1.08;

    letter-spacing: -0.025em;
}


/* =================================
   Opis
================================= */

.training-single-locations
.locations__description {
    max-width: 310px;

    margin-top: 24px;

    color: #586577;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.7;
}

.training-single-locations
.locations__description > :first-child {
    margin-top: 0;
}

.training-single-locations
.locations__description > :last-child {
    margin-bottom: 0;
}

.training-single-locations
.locations__description p {
    margin:
        0
        0
        11px;
}

.training-single-locations
.locations__description strong {
    color:
        var(--color-text);

    font-weight: 700;
}

.training-single-locations
.locations__description a {
    color:
        var(--color-primary);

    font-weight: 700;
}


/* =================================
   Link
================================= */

.training-single-locations
.locations__all-link {
    margin-top: 27px;
}


/* =================================
   Prawa kolumna
================================= */

.training-single-locations
.locations__content {
    width: 100%;

    min-width: 0;

    justify-self: end;
}


/* =================================
   Dynamiczny grid
================================= */

.training-single-locations
.training-single-locations__grid {
    display: flex;

    width: 100%;

    flex-wrap: wrap;

    align-items: stretch;

    justify-content: center;

    gap: 18px;
}


/* =================================
   Karta wspólna
================================= */

.training-single-locations
.training-single-locations__grid
> .location-card {
    min-width: 0;

    height: auto;

    margin: 0;
}

.training-single-locations
.location-card__link {
    width: 100%;

    height: 100%;

    border-radius: 15px;
}

.training-single-locations
.location-card__media {
    aspect-ratio: 16 / 10;
}

.training-single-locations
.location-card__content {
    min-height: 80px;

    padding:
        14px
        14px
        16px;
}

.training-single-locations
.location-card__title {
    margin-bottom: 10px;

    font-size: 16px;
}

.training-single-locations
.location-card__more {
    font-size: 12px;
}


/* =================================
   1 lokalizacja
================================= */

.training-single-locations
.locations__grid--count-1 {
    max-width: 390px;

    margin-inline: auto;
}

.training-single-locations
.locations__grid--count-1
> .location-card {
    flex:
        0
        1
        390px;
}


/* =================================
   2 lokalizacje
================================= */

.training-single-locations
.locations__grid--count-2 {
    max-width: 800px;

    margin-inline: auto;
}

.training-single-locations
.locations__grid--count-2
> .location-card {
    flex:
        0
        1
        calc(
            50%
            - 9px
        );

    max-width: 390px;
}


/* =================================
   3 lokalizacje
================================= */

.training-single-locations
.locations__grid--count-3 {
    max-width: 960px;

    margin-inline: auto;
}

.training-single-locations
.locations__grid--count-3
> .location-card {
    flex:
        0
        1
        calc(
            33.333%
            - 12px
        );
}


/* =================================
   4 lokalizacje
   2 + 2
================================= */

.training-single-locations
.locations__grid--count-4 {
    max-width: 880px;

    margin-inline: auto;
}

.training-single-locations
.locations__grid--count-4
> .location-card {
    flex:
        0
        1
        calc(
            50%
            - 9px
        );

    max-width: 430px;
}


/* =================================
   5 lokalizacji
   3 + 2 wyśrodkowane
================================= */

.training-single-locations
.locations__grid--count-5 {
    max-width: 960px;

    margin-inline: auto;
}

.training-single-locations
.locations__grid--count-5
> .location-card {
    flex:
        0
        1
        calc(
            33.333%
            - 12px
        );
}


/* =================================
   6 lokalizacji
   3 + 3
================================= */

.training-single-locations
.locations__grid--count-6 {
    max-width: 960px;

    margin-inline: auto;
}

.training-single-locations
.locations__grid--count-6
> .location-card {
    flex:
        0
        1
        calc(
            33.333%
            - 12px
        );
}


/* =================================
   Hover
================================= */

@media (hover: hover) {

    .training-single-locations
    .location-card__link:hover {
        transform:
            translateY(-5px);

        box-shadow:
            0 18px 34px
            rgb(15 23 42 / 12%);
    }

    .training-single-locations
    .location-card__link:hover
    .location-card__image {
        transform:
            scale(1.045);
    }
}


/* =================================
   Mniejszy desktop
================================= */

@media (max-width: 1200px) {

    .training-single-locations {
        padding:
            70px
            0
            86px;
    }

    .training-single-locations
    .locations__layout {
        grid-template-columns: 1fr;

        gap: 38px;
    }

    .training-single-locations
    .locations__intro {
        max-width: 720px;
    }

    .training-single-locations
    .locations__title {
        max-width: 620px;
    }

    .training-single-locations
    .locations__description {
        max-width: 580px;
    }

    .training-single-locations
    .locations__content {
        justify-self: stretch;
    }
}


/* =================================
   Tablet
================================= */

@media (max-width: 900px) {

    /*
     * Przy większej liczbie kart
     * przechodzimy na 2 kolumny.
     */

    .training-single-locations
    .locations__grid--count-3
    > .location-card,

    .training-single-locations
    .locations__grid--count-4
    > .location-card,

    .training-single-locations
    .locations__grid--count-5
    > .location-card,

    .training-single-locations
    .locations__grid--count-6
    > .location-card {
        flex:
            0
            1
            calc(
                50%
                - 9px
            );

        max-width: none;
    }

    .training-single-locations
    .locations__grid--count-3,

    .training-single-locations
    .locations__grid--count-4,

    .training-single-locations
    .locations__grid--count-5,

    .training-single-locations
    .locations__grid--count-6 {
        max-width: 760px;
    }
}


/* =================================
   Telefon
================================= */

@media (max-width: 600px) {

    .training-single-locations {
        padding:
            56px
            0
            68px;
    }

    .training-single-locations
    .locations__layout {
        gap: 30px;
    }

    .training-single-locations
    .locations__title {
        max-width: none;

        font-size: 28px;
    }

    .training-single-locations
    .locations__description {
        max-width: none;

        margin-top: 19px;

        font-size: 13px;

        line-height: 1.65;
    }

    .training-single-locations
    .locations__all-link {
        margin-top: 21px;
    }

    .training-single-locations
    .training-single-locations__grid {
        max-width: 420px;

        gap: 16px;

        margin-inline: auto;
    }


    /*
     * Na telefonie zawsze jedna karta
     * w rzędzie.
     */

    .training-single-locations
    .training-single-locations__grid
    > .location-card {
        flex:
            0
            1
            100%;

        width: 100%;

        max-width: none;
    }

    .training-single-locations
    .location-card__media {
        aspect-ratio: 16 / 9;
    }

    .training-single-locations
    .location-card__content {
        min-height: 76px;
    }
}


/* =================================
   Mały telefon
================================= */

@media (max-width: 420px) {

    .training-single-locations {
        padding:
            50px
            0
            60px;
    }

    .training-single-locations
    .locations__title {
        font-size: 26px;
    }

    .training-single-locations
    .location-card__content {
        padding:
            13px
            14px
            15px;
    }
}

/* ---------------------------------
   Cennik i rezerwacja
--------------------------------- */

.training-pricing {
    padding:
        clamp(64px, 6vw, 92px)
        0
        clamp(66px, 6vw, 94px);
    background-color: #ffffff;
    border-top: 1px solid #eef0f3;
}

.training-pricing__layout {
    display: grid;
    grid-template-columns:
        minmax(320px, 0.72fr)
        minmax(0, 1.75fr);
    align-items: center;
    gap: clamp(50px, 6vw, 90px);
}


/* ---------------------------------
   Lewa kolumna
--------------------------------- */

.training-pricing__intro {
    min-width: 0;
    max-width: 520px;
}

.training-pricing__title {
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(27px, 2vw, 34px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.training-pricing__description {
    margin-top: 32px;
    color: #354255;
    font-size: 14px;
    line-height: 1.65;
}

.training-pricing__description > * {
    margin-top: 0;
}

.training-pricing__description > *:last-child {
    margin-bottom: 0;
}

.training-pricing__description p {
    margin-bottom: 14px;
}

.training-pricing__description strong {
    color: var(--color-dark);
    font-weight: 700;
}

.training-pricing__description a {
    color: var(--color-primary);
    font-weight: 700;
}


/* ---------------------------------
   Przycisk
--------------------------------- */

.training-pricing__button {
    display: inline-flex;
    width: 100%;
    max-width: 390px;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    margin-top: 30px;
    color: #ffffff;
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 7px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.training-pricing__button:hover {
    color: var(--color-primary);
    background-color: #ffffff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
}

.training-pricing__button:focus-visible {
    outline: 3px solid rgb(227 6 19 / 22%);
    outline-offset: 4px;
}


/* ---------------------------------
   Duża ramka
--------------------------------- */

.training-pricing__box {
    display: grid;
    grid-template-columns:
        minmax(230px, 0.82fr)
        minmax(0, 1.7fr);
    min-width: 0;
    padding: 24px 26px;
    background-color: #ffffff;
    border: 2px solid #eee8e8;
    border-radius: 15px;
}

.training-pricing__excludes {
    min-width: 0;
    padding-right: 28px;
}

.training-pricing__box-title {
    margin: 0;
    color: var(--color-dark);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
}


/* ---------------------------------
   Lista "Cena nie zawiera"
--------------------------------- */

.training-pricing__exclude-list {
    display: grid;
    gap: 18px;
    padding: 0;
    margin: 29px 0 0;
    list-style: none;
}

.training-pricing__exclude-item {
    display: grid;
    grid-template-columns:
        20px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    margin: 0;
}

.training-pricing__exclude-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 30px;
    font-weight: 400;
    line-height: 16px;
}

.training-pricing__exclude-text {
    padding-top: 1px;
    color: #344155;
    font-size: 12px;
    line-height: 1.5;
}


/* ---------------------------------
   Prawa część ramki
--------------------------------- */

.training-pricing__infos {
    display: grid;
    align-content: center;
    gap: 38px;
    min-width: 0;
    padding:
        14px
        0
        14px
        clamp(30px, 4vw, 54px);
    border-left: 1px solid #e5dede;
}

.training-pricing__info {
    display: grid;
    grid-template-columns:
        52px minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.training-pricing__info-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
}

.training-pricing__info-icon-image {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.training-pricing__info-icon-fallback {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--color-dark);
    border-radius: 50%;
    font-size: 18px;
    font-weight: 800;
    font-style: normal;
}

.training-pricing__info-text {
    min-width: 0;
    color: #344155;
    font-size: 13px;
    line-height: 1.55;
}


/* ---------------------------------
   Cennik — mniejszy desktop
--------------------------------- */

@media (max-width: 1200px) {
    .training-pricing__layout {
        grid-template-columns:
            minmax(280px, 0.75fr)
            minmax(0, 1.55fr);
        gap: 44px;
    }

    .training-pricing__box {
        grid-template-columns:
            minmax(210px, 0.85fr)
            minmax(0, 1.4fr);
        padding: 22px;
    }

    .training-pricing__infos {
        padding-left: 30px;
    }

    .training-pricing__info {
        grid-template-columns:
            46px minmax(0, 1fr);
        gap: 16px;
    }

    .training-pricing__info-icon {
        width: 46px;
        height: 46px;
    }

    .training-pricing__info-icon-image {
        width: 42px;
        height: 42px;
    }
}


/* ---------------------------------
   Cennik — tablet
--------------------------------- */

@media (max-width: 950px) {
    .training-pricing__layout {
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .training-pricing__intro {
        max-width: 650px;
    }

    .training-pricing__description {
        margin-top: 24px;
    }

    .training-pricing__button {
        max-width: 380px;
        margin-top: 26px;
    }
}


/* ---------------------------------
   Cennik — telefon
--------------------------------- */

@media (max-width: 700px) {
    .training-pricing {
        padding: 56px 0 68px;
    }

    .training-pricing__layout {
        gap: 32px;
    }

    .training-pricing__title {
        font-size: 29px;
    }

    .training-pricing__description {
        margin-top: 20px;
        font-size: 13px;
        line-height: 1.65;
    }

    .training-pricing__button {
        max-width: none;
        min-height: 49px;
        margin-top: 24px;
    }

    .training-pricing__box {
        grid-template-columns: 1fr;
        padding: 22px 20px;
    }

    .training-pricing__excludes {
        padding-right: 0;
    }

    .training-pricing__exclude-list {
        gap: 15px;
        margin-top: 22px;
    }

    .training-pricing__exclude-text {
        font-size: 12px;
    }

    .training-pricing__infos {
        gap: 25px;
        padding:
            25px
            0
            0;
        margin-top: 25px;
        border-top: 1px solid #e5dede;
        border-left: 0;
    }

    .training-pricing__info {
        grid-template-columns:
            46px minmax(0, 1fr);
        gap: 15px;
    }

    .training-pricing__info-text {
        font-size: 12px;
    }
}


/* ---------------------------------
   Cennik — mały telefon
--------------------------------- */

@media (max-width: 440px) {
    .training-pricing {
        padding: 50px 0 60px;
    }

    .training-pricing__title {
        font-size: 27px;
    }

    .training-pricing__box {
        padding: 19px 17px;
        border-radius: 12px;
    }

    .training-pricing__info {
        grid-template-columns:
            42px minmax(0, 1fr);
        gap: 12px;
    }

    .training-pricing__info-icon {
        width: 42px;
        height: 42px;
    }

    .training-pricing__info-icon-image {
        width: 38px;
        height: 38px;
    }

    .training-pricing__info-text,
    .training-pricing__exclude-text {
        font-size: 11px;
    }
}

/* ---------------------------------
   Proces rezerwacji — premium flow
--------------------------------- */

.training-booking-steps {
    position: relative;
    overflow: hidden;
    padding:
        clamp(82px, 8vw, 120px)
        0
        clamp(90px, 9vw, 130px);
    background:
        radial-gradient(
            circle at 50% 0%,
            rgb(227 6 19 / 5%),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #f2f5f9 100%
        );
}


/* delikatne tło dekoracyjne */

.training-booking-steps::before {
    position: absolute;
    top: 80px;
    left: -160px;
    width: 360px;
    height: 360px;
    background: rgb(227 6 19 / 4%);
    border-radius: 50%;
    filter: blur(80px);
    content: "";
    pointer-events: none;
}

.training-booking-steps::after {
    position: absolute;
    right: -170px;
    bottom: 50px;
    width: 380px;
    height: 380px;
    background: rgb(8 39 68 / 5%);
    border-radius: 50%;
    filter: blur(90px);
    content: "";
    pointer-events: none;
}


/* ---------------------------------
   Nagłówek
--------------------------------- */

.training-booking-steps__header {
    position: relative;
    z-index: 2;
    margin-bottom: clamp(58px, 6vw, 80px);
    text-align: center;
}

.training-booking-steps__title {
    max-width: 900px;
    margin: 0 auto;
    color: var(--color-dark);
    font-size: clamp(34px, 3vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    text-wrap: balance;
}


/* mały czerwony akcent pod tytułem */

.training-booking-steps__title::after {
    display: block;
    width: 54px;
    height: 4px;
    margin: 22px auto 0;
    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            rgb(227 6 19 / 35%)
        );
    border-radius: 999px;
    content: "";
}


/* ---------------------------------
   Grid — 3 + 3
--------------------------------- */

.training-booking-steps__grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap:
        38px
        64px;
    width: min(100%, 1220px);
    margin-inline: auto;
}


/* ---------------------------------
   Karta kroku
--------------------------------- */

.training-booking-step {
    position: relative;
    min-width: 0;
    min-height: 220px;
    overflow: hidden;
    padding:
        30px
        30px
        30px;
    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 96%),
            rgb(255 255 255 / 78%)
        );
    border: 1px solid rgb(255 255 255 / 80%);
    border-radius: 22px;
    box-shadow:
        0 18px 50px rgb(15 23 42 / 7%),
        inset 0 0 0 1px rgb(8 39 68 / 4%);
    backdrop-filter: blur(12px);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* czerwony glow w rogu */

.training-booking-step::before {
    position: absolute;
    top: -70px;
    left: -60px;
    width: 170px;
    height: 170px;
    background:
        radial-gradient(
            circle,
            rgb(227 6 19 / 14%) 0%,
            rgb(227 6 19 / 5%) 38%,
            transparent 72%
        );
    border-radius: 50%;
    content: "";
    pointer-events: none;
}


.training-booking-step:hover {
    border-color: rgb(227 6 19 / 18%);
    box-shadow:
        0 26px 60px rgb(15 23 42 / 11%),
        0 0 0 1px rgb(227 6 19 / 5%);
    transform: translateY(-6px);
}


/* ---------------------------------
   Góra karty
--------------------------------- */

.training-booking-step__top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}


/* ---------------------------------
   Numer
--------------------------------- */

.training-booking-step__number {
    display: inline-flex;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            #ff3540
        );
    border: 4px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 10px 24px rgb(227 6 19 / 24%);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.training-booking-step:hover
.training-booking-step__number {
    box-shadow:
        0 13px 30px rgb(227 6 19 / 32%);
    transform: scale(1.08) rotate(-3deg);
}


/* ---------------------------------
   Linia przy numerze
--------------------------------- */

.training-booking-step__top::after {
    height: 2px;
    flex: 1 1 auto;
    background:
        linear-gradient(
            90deg,
            rgb(227 6 19 / 75%),
            rgb(227 6 19 / 5%)
        );
    content: "";
}


/* ---------------------------------
   Duży numer dekoracyjny w tle
--------------------------------- */

.training-booking-step__content::before {
    position: absolute;
    right: 20px;
    bottom: -20px;
    color: rgb(8 39 68 / 3%);
    content: "";
    font-size: 110px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}


/* ---------------------------------
   Treść WYSIWYG
--------------------------------- */

.training-booking-step__content {
    position: relative;
    z-index: 2;
    max-width: 340px;
    color: #354255;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}

.training-booking-step__content > * {
    margin-top: 0;
}

.training-booking-step__content > *:last-child {
    margin-bottom: 0;
}

.training-booking-step__content p {
    margin-bottom: 10px;
}

.training-booking-step__content strong,
.training-booking-step__content b {
    color: var(--color-dark);
    font-weight: 800;
}

.training-booking-step__content a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.training-booking-step__content ul,
.training-booking-step__content ol {
    padding-left: 18px;
}


/* ---------------------------------
   Strzałki między krokami
--------------------------------- */

.training-booking-step:not(:last-child)::after {
    position: absolute;
    top: 50%;
    right: -48px;
    z-index: 6;
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    background-color: #ffffff;
    border: 1px solid rgb(227 6 19 / 16%);
    border-radius: 50%;
    box-shadow:
        0 8px 18px
        rgb(15 23 42 / 8%);
    content: "→";
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-50%);
}


/* trzeci element kończy rząd */

.training-booking-step:nth-child(3n)::after {
    display: none;
}


/* ---------------------------------
   Delikatne różnice między kartami
--------------------------------- */

.training-booking-step:nth-child(2),
.training-booking-step:nth-child(5) {
    transform: translateY(10px);
}

.training-booking-step:nth-child(2):hover,
.training-booking-step:nth-child(5):hover {
    transform: translateY(4px);
}


/* ---------------------------------
   Laptop
--------------------------------- */

@media (max-width: 1280px) {
    .training-booking-steps__grid {
        width: min(100%, 1060px);
        gap:
            34px
            52px;
    }

    .training-booking-step {
        min-height: 230px;
        padding:
            28px
            27px
            28px;
    }

    .training-booking-step:not(:last-child)::after {
        right: -42px;
    }

    .training-booking-step__content {
        font-size: 13px;
    }
}


/* ---------------------------------
   Tablet — 2 kolumny
--------------------------------- */

@media (max-width: 900px) {
    .training-booking-steps {
        padding:
            70px
            0
            86px;
    }

    .training-booking-steps__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
        gap:
            34px
            52px;
        width: min(100%, 760px);
    }

    .training-booking-step:nth-child(2),
    .training-booking-step:nth-child(5) {
        transform: none;
    }

    .training-booking-step:nth-child(3n)::after {
        display: inline-flex;
    }

    .training-booking-step:nth-child(2n)::after {
        display: none;
    }

    .training-booking-step:not(:last-child)::after {
        right: -42px;
    }
}


/* ---------------------------------
   Telefon — pionowy flow
--------------------------------- */

@media (max-width: 620px) {
    .training-booking-steps {
        padding:
            58px
            0
            72px;
    }

    .training-booking-steps__header {
        margin-bottom: 40px;
    }

    .training-booking-steps__title {
        font-size: 29px;
    }

    .training-booking-steps__grid {
        grid-template-columns: 1fr;
        gap: 42px;
        width: min(100%, 520px);
    }

    .training-booking-step {
        min-height: 0;
        padding:
            25px
            22px
            26px;
        border-radius: 18px;
    }

    .training-booking-step:hover {
        transform: none;
    }

    .training-booking-step__top {
        margin-bottom: 20px;
    }

    .training-booking-step__number {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
        font-size: 15px;
    }

    .training-booking-step__content {
        max-width: none;
        font-size: 13px;
    }


    /* strzałki w dół */

    .training-booking-step:not(:last-child)::after,
    .training-booking-step:nth-child(2n)::after,
    .training-booking-step:nth-child(3n)::after {
        top: auto;
        right: 50%;
        bottom: -35px;
        display: inline-flex;
        width: 30px;
        height: 30px;
        transform:
            translateX(50%)
            rotate(90deg);
    }

    .training-booking-step:last-child::after {
        display: none;
    }
}


/* ---------------------------------
   Małe telefony
--------------------------------- */

@media (max-width: 440px) {
    .training-booking-steps {
        padding:
            52px
            0
            64px;
    }

    .training-booking-steps__title {
        font-size: 27px;
    }

    .training-booking-step {
        padding:
            22px
            19px
            23px;
    }

    .training-booking-step__content {
        font-size: 12px;
    }
}

/* ---------------------------------
   Ograniczenie animacji
--------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .training-single-hero__button,
    .training-variant-card__image,
    .training-variant-card__button,
    .training-level-card__image,
    .training-equipment__image,
    .training-readiness-card,
    .location-card__link,
    .location-card__image,
    .training-pricing__button,
    .training-booking-step,
    .training-booking-step__number {
        transition: none;
    }
}


/* =================================
   Poziomy zaawansowania
   Box tekstowy nad poziomami
================================= */

.training-levels__intro {
    position: relative;

    width: min(100%, 1100px);

    margin:
        calc(
            clamp(34px, 4vw, 50px)
            * -0.35
        )
        auto
        clamp(42px, 5vw, 64px);

    padding:
        clamp(24px, 2.5vw, 34px)
        clamp(24px, 3vw, 42px);

    overflow: hidden;

    color: #485568;

    background-color: #ffffff;

    border:
        1px solid
        rgb(8 39 68 / 9%);

    border-radius: 14px;

    box-shadow:
        0 12px 32px
        rgb(15 23 42 / 5%);
}


/*
 * Delikatny akcent na górze boxa.
 */
.training-levels__intro::before {
    position: absolute;

    top: 0;
    left: 50%;

    width: 58px;
    height: 3px;

    background-color:
        var(--color-primary);

    border-radius:
        0
        0
        999px
        999px;

    content: "";

    transform:
        translateX(-50%);
}


/* ---------------------------------
   Tytuł boxa
--------------------------------- */

.training-levels__intro-title {
    margin:
        0
        auto
        15px;

    color:
        var(--color-dark);

    font-size:
        clamp(
            18px,
            1.5vw,
            22px
        );

    font-weight: 800;

    line-height: 1.2;

    letter-spacing: -0.02em;

    text-align: center;
}


/* ---------------------------------
   Treść boxa
--------------------------------- */

.training-levels__intro-content {
    width:
        min(
            100%,
            960px
        );

    margin-inline: auto;

    color: #5a6676;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.7;
}

.training-levels__intro-content > :first-child {
    margin-top: 0;
}

.training-levels__intro-content > :last-child {
    margin-bottom: 0;
}

.training-levels__intro-content p {
    margin:
        0
        0
        12px;
}

.training-levels__intro-content strong {
    color:
        var(--color-dark);

    font-weight: 700;
}

.training-levels__intro-content a {
    color:
        var(--color-primary);

    font-weight: 700;

    text-decoration: underline;

    text-decoration-thickness: 1px;

    text-underline-offset: 3px;
}

.training-levels__intro-content ul,
.training-levels__intro-content ol {
    padding-left: 22px;

    margin:
        14px
        0;
}

.training-levels__intro-content li
+ li {
    margin-top: 5px;
}


/* =================================
   Box nad poziomami — tablet
================================= */

@media (max-width: 1000px) {

    .training-levels__intro {
        width:
            min(
                100%,
                820px
            );

        margin-bottom: 44px;
    }
}


/* =================================
   Box nad poziomami — telefon
================================= */

@media (max-width: 700px) {

    .training-levels__intro {
        width: 100%;

        margin:
            -6px
            auto
            34px;

        padding:
            22px
            20px;

        border-radius: 12px;
    }

    .training-levels__intro-title {
        margin-bottom: 12px;

        font-size: 18px;
    }

    .training-levels__intro-content {
        font-size: 12px;

        line-height: 1.65;
    }

    .training-levels__intro-content p {
        margin-bottom: 10px;
    }
}


/* =================================
   Box nad poziomami — mały telefon
================================= */

@media (max-width: 440px) {

    .training-levels__intro {
        margin-bottom: 30px;

        padding:
            20px
            17px;
    }

    .training-levels__intro-title {
        font-size: 17px;
    }

    .training-levels__intro-content {
        font-size: 11px;

        line-height: 1.65;
    }
}

/* =================================
   Poziomy — dynamiczny układ kart
================================= */

/*
 * Standard:
 * 3 poziomy  = 3 w rzędzie
 * 5 poziomów = 3 + 2
 * 6 poziomów = 3 + 3
 *
 * Dla 4 poziomów robimy specjalnie
 * układ 2 + 2.
 */

@media (min-width: 1001px) {

    .training-levels__grid--count-4 {
        width: min(100%, 1240px);
    }

    .training-levels__grid--count-4
    > .training-level-card {
        flex:
            0
            1
            calc(50% - 12px);
    }


    /*
     * Przy dwóch poziomach również
     * dwie równe karty.
     */
    .training-levels__grid--count-2 {
        width: min(100%, 1120px);
    }

    .training-levels__grid--count-2
    > .training-level-card {
        flex:
            0
            1
            calc(50% - 12px);
    }


    /*
     * Jeden poziom — jedna karta
     * na środku, ale bez rozciągania
     * na całą szerokość.
     */
    .training-levels__grid--count-1 {
        width: min(100%, 720px);
    }

    .training-levels__grid--count-1
    > .training-level-card {
        flex:
            0
            1
            100%;
    }
}