.challenge-page {
    --challenge-section-inset: 45px;
    background: #ccd1b5;
    padding: 104px 0 76px;
    overflow: hidden;
    font-family: "TT First Neue", "TT Firs Neue", "Montserrat", "Museo Sans", sans-serif;
}

.challenge-page > .container {
    position: relative;
}

.challenge-page h1,
.challenge-page h2 {
    font-family: "Placard Next", "Placard Next Pro", "Bebas Neue", "Museo Sans", sans-serif;
    font-weight: 900;
    color: #d3265b;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0;
}

.challenge-page h1 {
    line-height: 0.9;
}

.challenge-title-main,
.challenge-title-sub {
    display: block;
}

.challenge-page h1 {
    font-size: clamp(74px, 8vw, 150px);
}

.challenge-page h2 {
    font-size: clamp(44px, 4.8vw, 86px);
    line-height: 0.92;
    margin-top: 10px;
}


.challenge-page h3,
.challenge-page p {
    margin: 0;
}

.challenge-section {
    position: relative;
}

.challenge-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.challenge-hero-text {
    padding-left: 45px;
}

.challenge-hero h1 {
    font-size: clamp(80px, 7.8vw, 150px);
}

.challenge-hero h2 {
    font-size: clamp(44px, 4.4vw, 80px);
}

.challenge-hero-media img,
.challenge-image-grid img,
.challenge-reviews-grid article img {
    width: 100%;
    display: block;
    border-radius: 12px;
}

.challenge-hero-media img {
    max-width: 610px;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
}

/* Recenze drží stejně vysoké fotky i u prostředního landscape snímku. */
.challenge-reviews-grid article img {
    height: clamp(360px, 26vw, 500px);
    object-fit: cover;
}

.challenge-lead {
    margin-top: 28px !important;
    font-size: clamp(17px, 1.05vw, 20px);
    line-height: 1.42;
}

.challenge-lead strong {
    font-weight: 900;
}

.challenge-points {
    list-style: none;
    padding: 0;
    margin: 48px 0 0;
}

.challenge-points li {
    position: relative;
    padding-left: 56px;
    margin-bottom: 20px;
    font-size: clamp(19px, 1.2vw, 22px);
    font-weight: 900;
    line-height: 1.25;
}

.challenge-points li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 3px;
    width: 28px;
    height: 28px;
    background: #0e100f;
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
}

.challenge-steps,
.challenge-benefits {
    margin-top: 72px;
}

.challenge-steps > h2,
.challenge-benefits > h1,
.challenge-reviews > h1 {
    padding-left: var(--challenge-section-inset);
    padding-right: var(--challenge-section-inset);
}

.challenge-reviews,
.challenge-reward,
.challenge-faq-loyalty {
    margin-top: 104px;
}

.challenge-info-grid,
.challenge-image-grid,
.challenge-card-grid,
.challenge-reviews-grid {
    display: grid;
    gap: 24px;
}

.challenge-info-grid {
    margin-top: 38px;
}

.challenge-card-grid {
    margin-top: 48px;
}

.challenge-info-grid article h3 {
    font-size: clamp(15px, 0.9vw, 17px);
    line-height: 1.25;
    font-weight: 900;
    margin-bottom: 6px;
}

.challenge-info-grid article p {
    font-size: clamp(15px, 0.9vw, 16px);
    line-height: 1.35;
}

.challenge-info-grid-3,
.challenge-image-grid-3,
.challenge-card-grid-3,
.challenge-reviews-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.challenge-info-grid-4,
.challenge-image-grid-4,
.challenge-card-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.challenge-image-grid {
    margin-top: 24px;
}

.challenge-image-grid img {
    aspect-ratio: 1.42 / 1;
    height: auto;
    object-fit: cover;
}

.challenge-card {
    display: flex;
    flex-direction: column;
}

.challenge-card-copy {
    min-height: 72px;
}

.challenge-card h3 {
    font-size: clamp(15px, 0.9vw, 17px);
    line-height: 1.25;
    font-weight: 900;
    margin: 0 0 6px;
}

.challenge-card p {
    font-size: clamp(15px, 0.9vw, 16px);
    line-height: 1.35;
    margin: 0;
}

.challenge-card img {
    width: 100%;
    display: block;
    margin-top: 24px;
    border-radius: 12px;
    aspect-ratio: 1.42 / 1;
    height: auto;
    object-fit: cover;
}

/* "Co získáš" tiles are square in the design. */
.challenge-benefits .challenge-image-grid img {
    aspect-ratio: 1 / 1;
}

.challenge-card-grid-square .challenge-card img {
    aspect-ratio: 1 / 1;
}

.challenge-steps .challenge-info-grid,
.challenge-steps .challenge-image-grid,
.challenge-steps .challenge-card-grid {
    gap: 24px;
    padding-left: var(--challenge-section-inset);
    padding-right: var(--challenge-section-inset);
}

.challenge-benefits .challenge-info-grid,
.challenge-benefits .challenge-image-grid,
.challenge-benefits .challenge-card-grid {
    gap: 20px;
    padding-left: var(--challenge-section-inset);
    padding-right: var(--challenge-section-inset);
}

.challenge-reviews h1,
.challenge-reviews h2 {
    text-align: left;
}

.challenge-reviews-intro {
    margin: 0;
    padding-top: 38px;
    padding-left: var(--challenge-section-inset);
    padding-right: var(--challenge-section-inset);
    text-align: left;
    font-size: clamp(18px, 1.05vw, 20px);
    line-height: 1.45;
    text-wrap: balance;
    /*max-width: 1080px;*/
}

.challenge-reviews-grid {
    margin-top: 52px;
    gap: 24px;
    padding-left: var(--challenge-section-inset);
    padding-right: var(--challenge-section-inset);
}

.challenge-reviews-grid article h3 {
    margin-top: 28px;
    font-size: clamp(24px, 1.55vw, 30px);
    line-height: 1.15;
    font-weight: 900;
}

.challenge-reviews-grid article p {
    margin-top: 10px;
    font-size: clamp(18px, 1.15vw, 22px);
    line-height: 1.35;
}

.challenge-reward {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
    gap: 56px;
    align-items: start;
    padding-left: var(--challenge-section-inset);
    padding-right: var(--challenge-section-inset);
}

.challenge-reward-copy p {
    font-size: clamp(16px, 1vw, 18px);
    line-height: 1.45;
    margin-top: 34px;
}

.challenge-reward-copy strong {
    font-weight: 900;
}

.challenge-check-list {
    list-style: none;
    padding: 0;
    margin: 42px 0 0;
}

.challenge-check-list li {
    position: relative;
    min-height: 34px;
    padding-left: 50px;
    margin-bottom: 15px;
    font-size: clamp(18px, 1.05vw, 20px);
    font-weight: 900;
    line-height: 1.35;
}

.challenge-check-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: -3px;
    width: 34px;
    height: 34px;
    border-radius: 4px;
    background: #d3265b;
    color: #fff;
    font-size: 24px;
    text-align: center;
    line-height: 34px;
    font-weight: 900;
}

.challenge-reward-form {
    background: #7f8d72;
    border-radius: 12px;
    padding: 54px 60px 52px;
}

.challenge-reward-form h3 {
    font-size: clamp(34px, 2.2vw, 42px);
    line-height: 1.15;
    color: #fff;
    font-weight: 900;
    margin-bottom: 30px;
}

.challenge-reward-form label {
    display: block;
    margin-top: 16px;
    font-size: 13px;
    color: #f0f2eb;
    font-weight: 300;
}

.challenge-reward-form input {
    width: 100%;
    margin-top: 7px;
    border: none;
    border-radius: 999px;
    background: #141613;
    color: #fff;
    font-size: 13px;
    padding: 13px 18px;
    outline: none;
}

.challenge-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.challenge-reward-form button,
.challenge-join-button {
    display: inline-block;
    margin-top: 28px;
    border: none;
    border-radius: 999px;
    background: #df2168;
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    padding: 13px 32px;
    cursor: pointer;
    text-decoration: none;
}

.challenge-join-button:hover,
.challenge-join-button:focus {
    color: #fff;
    text-decoration: none;
}

.challenge-form-errors {
    margin-top: 10px;
}

.challenge-form-error {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.challenge-form-message {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    padding: 14px 16px;
}

.challenge-form-message a {
    color: #fff;
    font-weight: 900;
    text-decoration: underline;
}

.challenge-form-checks {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.challenge-reward-form label.challenge-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 12px;
    line-height: 1.25;
    color: #f0f2eb;
    font-weight: 300;
    margin: 0;
    margin-top: 0;
}

.challenge-reward-form .challenge-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    accent-color: #df2168;
}

.challenge-check a {
    color: #fff;
    text-decoration: underline;
}

.challenge-faq-loyalty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 54px;
    align-items: start;
    padding-left: var(--challenge-section-inset);
    padding-right: var(--challenge-section-inset);
}

.challenge-faq-items {
    margin-top: 36px;
}

.challenge-faq-items article {
    background: #dbc4b7;
    border-radius: 999px;
    padding: 24px 38px;
    margin-bottom: 18px;
}

.challenge-faq-items h3 {
    font-size: clamp(15px, 0.9vw, 17px);
    line-height: 1.25;
    font-weight: 900;
}

.challenge-faq-items p {
    margin-top: 6px;
    font-size: clamp(14px, 0.85vw, 16px);
    line-height: 1.35;
}

.challenge-loyalty {
    display: grid;
    grid-template-columns: minmax(0, 96px) minmax(0, 1fr);
    gap: 20px;
    margin-top: 92px;
    align-self: end;
}

.challenge-loyalty h2 {
    align-self: start;
    justify-self: end;
    width: auto;
    white-space: nowrap;
    writing-mode: sideways-lr;
    transform: none;
    line-height: 0.82;
    font-size: clamp(52px, 4.8vw, 84px);
}

.challenge-loyalty ol {
    counter-reset: loyalty;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-top: 0;
}

.challenge-loyalty li {
    counter-increment: loyalty;
    position: relative;
    display: block;
    min-height: 32px;
    margin-bottom: 9px;
    padding-left: 44px;
    font-size: clamp(12px, 0.78vw, 14px);
    line-height: 1.28;
}

.challenge-loyalty li::before {
    content: counter(loyalty) ".";
    position: absolute;
    left: 0;
    top: -2px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #0e100f;
    color: #fff;
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    display: grid;
    place-items: center;
    padding: 0;
}

.challenge-loyalty strong {
    font-weight: 900;
}

.challenge-arrow {
    position: absolute;
    width: clamp(130px, 14vw, 260px);
    pointer-events: none;
    z-index: 2;
}

.challenge-arrow-hero {
    left: 49.5%;
    top: 48%;
    width: 210px;
}

.challenge-arrow-benefits {
    left: 40%;
    top: -186px;
    width: clamp(120px, 12vw, 220px);
}

.challenge-arrow-reviews {
    left: -24px;
    top: 270px;
    width: 220px;
}

.challenge-arrow-reward {
    left: 52.5%;
    top: 370px;
    bottom: auto;
    width: 110px;
}

.challenge-arrow-loyalty {
    right: -130px;
    bottom: 24px;
    width: 150px;
}

@media (max-width: 1799px) {
    .challenge-arrow {
        display: none;
    }
}

@media (max-width: 1199px) {
    .challenge-page {
        padding-top: 104px;
    }

    .challenge-hero,
    .challenge-reward,
    .challenge-faq-loyalty {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .challenge-hero-text {
        padding-left: 0;
    }

    .challenge-hero-media {
        max-width: 720px;
    }

    .challenge-info-grid-4,
    .challenge-image-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .challenge-reward-form {
        max-width: 560px;
        padding: 56px 48px 52px;
    }

    .challenge-loyalty {
        grid-template-columns: 1fr;
    }

    .challenge-loyalty h2 {
        writing-mode: initial;
        transform: none;
        width: auto;
        white-space: normal;
    }

}

@media (max-width: 767px) {
    .challenge-page {
        padding: 92px 0 52px;
    }

    .challenge-page > .container {
        padding: 0 18px;
    }

    .challenge-page h1 {
        font-size: clamp(52px, 16vw, 76px);
    }

    .challenge-title-main {
        font-size: clamp(46px, 14vw, 68px);
    }

    .challenge-title-sub {
        font-size: clamp(28px, 9vw, 42px);
    }

    .challenge-page h2 {
        font-size: clamp(38px, 11.5vw, 54px);
    }

    .challenge-steps > h2,
    .challenge-benefits > h1,
    .challenge-reviews > h1,
    .challenge-reward,
    .challenge-faq-loyalty {
        padding-left: 0;
        padding-right: 0;
    }

    .challenge-reviews-intro {
        width: auto;
        max-width: 100%;
        margin-left: 0;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .challenge-hero-media {
        order: 2;
        max-width: none;
    }

    .challenge-hero-text {
        order: 1;
    }

    .challenge-steps,
    .challenge-benefits {
        display: block;
    }

    .challenge-steps .challenge-info-grid,
    .challenge-steps .challenge-image-grid,
    .challenge-steps .challenge-card-grid,
    .challenge-benefits .challenge-info-grid,
    .challenge-benefits .challenge-image-grid,
    .challenge-benefits .challenge-card-grid,
    .challenge-reviews-grid {
        padding-left: 0;
        padding-right: 0;
    }

    .challenge-card-grid {
        margin-top: 24px;
    }

    .challenge-card {
        display: flex;
        flex-direction: column;
    }

    .challenge-card img {
        order: 1;
        margin-top: 0;
    }

    .challenge-card-copy {
        order: 2;
        min-height: 0;
        margin-top: 16px;
    }

    .challenge-info-grid-3,
    .challenge-image-grid-3,
    .challenge-card-grid-3,
    .challenge-info-grid-4,
    .challenge-image-grid-4,
    .challenge-card-grid-4,
    .challenge-reviews-grid,
    .challenge-form-grid {
        grid-template-columns: 1fr;
    }

    .challenge-steps,
    .challenge-benefits,
    .challenge-reviews,
    .challenge-reward,
    .challenge-faq-loyalty {
        margin-top: 58px;
    }

    .challenge-reviews-grid article p {
        font-size: 18px;
    }

    .challenge-reward-form {
        padding: 32px 24px;
    }

    .challenge-faq-items article {
        border-radius: 24px;
        padding: 20px 24px;
    }
}