/* ==========================================================================
   LP Challenge CUDAKI (Monika) – template-pages/lp-challenge-cudaki.php
   Projekt: Figma "Akcje Sierpień 2026" / Challenge CUDAKOWA
   Desktop 1280px, mobile 600px.

   Typografia jest 1:1 z panelu Inspect w Figmie (Unna dla nagłówków,
   Raleway dla reszty) – nie zmieniaj rozmiarów "na oko".
   ========================================================================== */

.lp-cudaki {
    /* Paleta z projektu */
    --cudaki-coral: #F37B5E;
    --cudaki-orange: #DA5922;
    --cudaki-cream: #FEF4E3;
    --cudaki-tan: #CDB091;
    --cudaki-dark: #333333;
    --cudaki-black: #000000;
    --cudaki-light: #FFFFFF;
    --cudaki-highlight: #FFC1AC;

    /* Typografia */
    --cudaki-serif: 'Unna', Georgia, serif;
    --cudaki-sans: 'Raleway', Arial, sans-serif;

    --cudaki-h1: 60px;
    /* nagłówki sekcji wyśrodkowanych */
    --cudaki-h2: 50px;
    /* nagłówki w panelach bocznych */
    --cudaki-h2-panel: 40px;
    --cudaki-body: 18px;
    --cudaki-small: 16px;

    /* Proporcje podziału 660/620 z makiety 1280px (kolumna lewa / prawa) */
    --cudaki-col-left: 51.5625%;
    --cudaki-col-right: 48.4375%;
    --cudaki-section-min-h: 440px;

    font-family: var(--cudaki-sans);
    color: var(--cudaki-dark);
    overflow-x: hidden;
}

.lp-cudaki img {
    max-width: 100%;
}

/* Motyw dokłada globalnie `section { padding-bottom: 60px }` poniżej 1000px
   (css/main.scss). Na tej podstronie sekcje mają własne odstępy z makiety,
   więc kasujemy tamten dodatek dla całej strony. Reguły z własnym paddingiem
   (punkty, "jak działa", nagrody, "Gotowa?") mają wyższą specyficzność i
   zostają nietknięte. */
@media (max-width: 1000px) {
    .lp-cudaki section {
        padding-bottom: 0;
    }
}

/* --------------------------------------------------------------------------
   Wspólne elementy: nagłówki, pigułki, przyciski
   -------------------------------------------------------------------------- */
.lp-cudaki .cudaki-heading {
    font-family: var(--cudaki-serif);
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: 0;
    margin: 0;
    color: var(--cudaki-dark);
}

.lp-cudaki .cudaki-heading--center {
    font-size: var(--cudaki-h2);
    text-align: center;
}

.lp-cudaki .cudaki-heading--panel {
    font-size: var(--cudaki-h2-panel);
}

.lp-cudaki .cudaki-heading--points {
    font-size: var(--cudaki-h2);
    color: var(--cudaki-light);
}

.lp-cudaki .cudaki-heading--accent {
    color: var(--cudaki-orange);
}

.lp-cudaki mark {
    background: var(--cudaki-highlight);
    color: inherit;
    padding: 0 2px;
}

/* Pigułka / badge – Raleway 16/500, line-height 100% */
.lp-cudaki .cudaki-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 6px 26px;
    border-radius: 50px;
    border: 1px solid transparent;
    font-family: var(--cudaki-sans);
    font-size: var(--cudaki-small);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
}

.lp-cudaki .cudaki-pill--outline-light {
    border-color: var(--cudaki-light);
    color: var(--cudaki-light);
    background: transparent;
}

.lp-cudaki .cudaki-pill--outline-dark {
    border-color: var(--cudaki-dark);
    color: var(--cudaki-dark);
    background: transparent;
}

.lp-cudaki .cudaki-pill--solid {
    background: var(--cudaki-orange);
    border-color: var(--cudaki-orange);
    color: var(--cudaki-light);
    text-transform: uppercase;
    font-weight: 700;
    min-width: 183px;
}

/* Przyciski – Raleway 16, uppercase; wyróżnienia (<strong>) w 700 */
.lp-cudaki .cudaki-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 282px;
    min-height: 50px;
    padding: 12px 24px;
    border: 1px solid transparent;
    border-radius: 0;
    font-family: var(--cudaki-sans);
    font-size: var(--cudaki-small);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Etykieta jako jeden flex-item – inaczej flex zjada spację przed <strong> */
.lp-cudaki .cudaki-btn__label {
    display: inline;
}

.lp-cudaki .cudaki-btn strong,
.lp-cudaki .cudaki-btn b {
    font-weight: 700;
}

.lp-cudaki .cudaki-btn--outline-light {
    border-color: var(--cudaki-light);
    color: var(--cudaki-light);
    background: transparent;
}

.lp-cudaki .cudaki-btn--outline-light:hover,
.lp-cudaki .cudaki-btn--outline-light:focus {
    background: var(--cudaki-light);
    color: var(--cudaki-dark);
}

.lp-cudaki .cudaki-btn--dark {
    background: var(--cudaki-black);
    border-color: var(--cudaki-black);
    color: var(--cudaki-light);
}

.lp-cudaki .cudaki-btn--dark:hover,
.lp-cudaki .cudaki-btn--dark:focus {
    background: var(--cudaki-orange);
    border-color: var(--cudaki-orange);
    color: var(--cudaki-light);
}

/* --------------------------------------------------------------------------
   Baner góra (hero) – 1281x546 desktop, 600x764 mobile
   -------------------------------------------------------------------------- */
.lp-cudaki .cudaki-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 546px;
    color: var(--cudaki-light);
    background: var(--cudaki-dark);
    overflow: hidden;
}

.lp-cudaki .cudaki-hero__media {
    position: absolute;
    inset: 0;
}

.lp-cudaki .cudaki-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.lp-cudaki .cudaki-hero__img--mobile {
    display: none;
}

.lp-cudaki .cudaki-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
}

.lp-cudaki .cudaki-hero__content {
    max-width: 620px;
}

.lp-cudaki .cudaki-hero__insta {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    text-decoration: none;
    color: var(--cudaki-light);
}

.lp-cudaki .cudaki-hero__avatar {
    display: block;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 90px;
}

.lp-cudaki .cudaki-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lp-cudaki .cudaki-hero__insta-label {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    padding: 6px 22px;
    border: 1px solid var(--cudaki-light);
    border-radius: 50px;
    font-size: var(--cudaki-small);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
}

.lp-cudaki .cudaki-hero__title {
    font-family: var(--cudaki-serif);
    font-style: italic;
    font-weight: 400;
    font-size: var(--cudaki-h1);
    line-height: 1.1;
    letter-spacing: 0;
    margin: 0 0 8px;
    color: var(--cudaki-light);
}

.lp-cudaki .cudaki-hero__subtitle {
    font-size: 30px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0;
    margin: 0 0 24px;
    color: var(--cudaki-light);
}

.lp-cudaki .cudaki-hero__subtitle strong,
.lp-cudaki .cudaki-hero__subtitle b {
    font-weight: 700;
}

.lp-cudaki .cudaki-hero__desc {
    font-size: var(--cudaki-small);
    line-height: 1.5;
    color: var(--cudaki-light);
}

.lp-cudaki .cudaki-hero__desc p {
    margin: 0;
}

/* --------------------------------------------------------------------------
   Pasek animowany (marquee) – 66px, Raleway 18/600
   -------------------------------------------------------------------------- */
.lp-cudaki .cudaki-marquee {
    background: var(--cudaki-light);
    overflow: hidden;
}

.lp-cudaki .cudaki-marquee__viewport {
    display: flex;
    width: max-content;
    animation: cudaki-marquee var(--cudaki-marquee-speed, 60s) linear infinite;
}

.lp-cudaki .cudaki-marquee:hover .cudaki-marquee__viewport {
    animation-play-state: paused;
}

.lp-cudaki .cudaki-marquee__track {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.lp-cudaki .cudaki-marquee__item {
    display: inline-flex;
    align-items: center;
    height: 66px;
    padding: 0 22px;
    white-space: nowrap;
    /* 18px na desktopie i na mobile – w makiecie pasek się nie skaluje */
    font-size: 18px;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -0.18px;
    text-transform: uppercase;
}

.lp-cudaki .cudaki-marquee__text {
    display: inline;
    color: inherit;
    text-decoration: none;
}

.lp-cudaki .cudaki-marquee__item strong,
.lp-cudaki .cudaki-marquee__item b {
    font-weight: 700;
}

.lp-cudaki .cudaki-marquee__item--orange {
    color: var(--cudaki-orange);
}

.lp-cudaki .cudaki-marquee__item--dark {
    color: var(--cudaki-dark);
}

@keyframes cudaki-marquee {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-cudaki .cudaki-marquee__viewport {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Sekcje dzielone 50/50 (Sekcja 1, 2, 6)
   -------------------------------------------------------------------------- */
/* Zdjęcie po lewej (660px w makiecie), panel po prawej (620px) */
.lp-cudaki .cudaki-split {
    display: grid;
    grid-template-columns: var(--cudaki-col-left) var(--cudaki-col-right);
    align-items: stretch;
    min-height: var(--cudaki-section-min-h);
    background: var(--cudaki-section-bg, transparent);
}

/* Panel po lewej (660px), zdjęcie po prawej (620px) – tło tylko na panelu */
.lp-cudaki .cudaki-split--panel-first {
    background: transparent;
}

.lp-cudaki .cudaki-split--panel-first .cudaki-split__panel {
    background: var(--cudaki-section-bg, transparent);
}

.lp-cudaki .cudaki-split__media {
    position: relative;
    min-height: var(--cudaki-section-min-h);
    overflow: hidden;
}

.lp-cudaki .cudaki-split__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.lp-cudaki .cudaki-split__panel {
    display: flex;
    align-items: center;
    padding: 48px 56px;
}

.lp-cudaki .cudaki-split__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    max-width: 480px;
}

.lp-cudaki .cudaki-split__panel--light-text,
.lp-cudaki .cudaki-split__panel--light-text .cudaki-heading {
    color: var(--cudaki-light);
}

.lp-cudaki .cudaki-split__desc {
    font-size: var(--cudaki-body);
    line-height: 1.55;
    margin: 0;
}

.lp-cudaki .cudaki-split__desc p {
    margin: 0 0 12px;
}

.lp-cudaki .cudaki-split__desc p:last-child {
    margin-bottom: 0;
}

.lp-cudaki .cudaki-split__desc strong,
.lp-cudaki .cudaki-split__desc b {
    font-weight: 700;
}

/* Sekcja 6 – interlinia 145% zgodnie z makietą */
.lp-cudaki .cudaki-split__desc--rich {
    max-width: 420px;
    line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Sekcja 3 – Punkty
   -------------------------------------------------------------------------- */
.lp-cudaki .cudaki-points {
    background: var(--cudaki-section-bg, var(--cudaki-tan));
    min-height: var(--cudaki-section-min-h);
    display: flex;
    align-items: center;
    padding: 56px 0;
    color: var(--cudaki-light);
    text-align: center;
}

.lp-cudaki .cudaki-points .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-cudaki .cudaki-points__badge {
    margin-bottom: 36px;
}

.lp-cudaki .cudaki-points__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    width: 100%;
    max-width: 900px;
}

.lp-cudaki .cudaki-points__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-cudaki .cudaki-points__icon {
    height: 70px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.lp-cudaki .cudaki-points__icon img {
    max-height: 70px;
    width: auto;
}

.lp-cudaki .cudaki-points__desc {
    font-size: var(--cudaki-body);
    line-height: 1.3;
    margin: 8px 0 0;
    max-width: 320px;
}

/* --------------------------------------------------------------------------
   Sekcja 4 – Jak działa wyzwanie
   -------------------------------------------------------------------------- */
.lp-cudaki .cudaki-how {
    background: var(--cudaki-light);
    padding: 72px 0;
    text-align: center;
}

.lp-cudaki .cudaki-how__subtitle {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.4;
    margin: 12px 0 0;
}

.lp-cudaki .cudaki-how__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;
    margin: 48px auto 0;
    max-width: 1040px;
}

.lp-cudaki .cudaki-how__step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lp-cudaki .cudaki-how__icon {
    width: 90px;
    height: 90px;
    border: 1px solid var(--cudaki-orange);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.lp-cudaki .cudaki-how__icon img {
    max-width: 48px;
    max-height: 48px;
    width: auto;
    height: auto;
}

.lp-cudaki .cudaki-how__text {
    font-size: var(--cudaki-body);
    line-height: 1.3;
    margin: 0;
}

.lp-cudaki .cudaki-how__footer {
    font-size: 23px;
    line-height: 1.3;
    margin: 44px 0 0;
}

.lp-cudaki .cudaki-how__footer strong,
.lp-cudaki .cudaki-how__footer b {
    color: var(--cudaki-orange);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Sekcja 5 – Nagrody
   -------------------------------------------------------------------------- */
.lp-cudaki .cudaki-prizes {
    background: var(--cudaki-section-bg, var(--cudaki-cream));
    padding: 72px 0;
    text-align: center;
}

.lp-cudaki .cudaki-prizes__subtitle {
    font-size: 22px;
    line-height: 1.35;
    margin: 16px 0 0;
}

.lp-cudaki .cudaki-prizes__subtitle p {
    margin: 0;
}

.lp-cudaki .cudaki-prizes__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
    margin-top: 48px;
}

.lp-cudaki .cudaki-prizes__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* W makiecie tytuł nagrody jest Raleway italic 600 – nie Unna */
.lp-cudaki .cudaki-prizes__title {
    font-family: var(--cudaki-sans);
    font-style: italic;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: var(--cudaki-orange);
    margin: 24px 0 12px;
}

.lp-cudaki .cudaki-prizes__desc {
    font-size: var(--cudaki-body);
    line-height: 1.3;
    margin: 0;
    max-width: 280px;
}

/* --------------------------------------------------------------------------
   Sekcja ostatnia – Gotowa?
   -------------------------------------------------------------------------- */
.lp-cudaki .cudaki-cta {
    background: var(--cudaki-light);
    padding: 72px 0;
    text-align: center;
}

.lp-cudaki .cudaki-cta__desc {
    font-size: 20px;
    font-style: italic;
    line-height: 1.4;
    margin: 20px auto 32px;
}

.lp-cudaki .cudaki-cta__desc p {
    margin: 0;
}

.lp-cudaki .cudaki-cta__desc strong,
.lp-cudaki .cudaki-cta__desc b {
    font-weight: 600;
}

.lp-cudaki .cudaki-cta__terms {
    margin: 40px auto 0;
    max-width: 900px;
    font-size: var(--cudaki-small);
    line-height: 1.5;
    color: var(--cudaki-black);
}

.lp-cudaki .cudaki-cta__terms p {
    margin: 0;
}

.lp-cudaki .cudaki-cta__terms-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--cudaki-black);
    /* motyw globalnie zdejmuje podkreślenia z linków */
    text-decoration: underline !important;
    text-transform: uppercase;
}

/* ==========================================================================
   Tablet – układ pośredni
   ========================================================================== */
@media (max-width: 1199.98px) {
    .lp-cudaki {
        --cudaki-h1: 48px;
        --cudaki-h2: 42px;
        --cudaki-h2-panel: 36px;
    }

    .lp-cudaki .cudaki-split__panel {
        padding: 40px 32px;
    }

    .lp-cudaki .cudaki-how__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px 24px;
    }
}

/* ==========================================================================
   Mobile – makieta 600px, wszystko w jednej kolumnie
   ========================================================================== */
@media (max-width: 991.98px) {
    /* Wartości z ramki mobilnej (600px) w Figmie – tekst jest tam wyraźnie
       większy niż na desktopie: body 22px, nagłówki 50/40px. */
    .lp-cudaki {
        --cudaki-h1: 50px;
        --cudaki-h2: 40px;
        --cudaki-h2-panel: 40px;
        --cudaki-body: 22px;
        --cudaki-section-min-h: auto;
    }

    /* Hero – w makiecie mobilnej (600x764) tekst siedzi u góry, a zdjęcie
       wypełnia dolną połowę kadru. Wysokość trzymamy w proporcji makiety
       (764/600 = 127vw), żeby kadr był wysoki i tekst nie nachodził na
       postać ze zdjęcia. */
    .lp-cudaki .cudaki-hero {
        min-height: min(127vw, 764px);
        align-items: flex-start;
        padding: 40px 0 0;
        text-align: center;
    }

    .lp-cudaki .cudaki-hero__img--desktop {
        display: none;
    }

    .lp-cudaki .cudaki-hero__img--mobile {
        display: block;
        /* kadr trzymamy przy górnej krawędzi, żeby nie ucinało twarzy */
        object-position: center top;
    }

    .lp-cudaki .cudaki-hero__content {
        max-width: 100%;
    }

    .lp-cudaki .cudaki-hero__insta {
        gap: 12px;
        margin-bottom: 20px;
    }

    .lp-cudaki .cudaki-hero__avatar {
        width: 72px;
        height: 72px;
        flex-basis: 72px;
    }

    /* Hero skalujemy płynnie do szerokości ekranu (makieta = 600px). Tylko tutaj,
       bo kompozycja zdjęcia rezerwuje na tekst górną połowę kadru – przy stałych
       rozmiarach tekst zawija się na tyle linii, że wchodzi na postać. */
    .lp-cudaki .cudaki-hero__title {
        font-size: min(var(--cudaki-h1), 8.33vw);
    }

    .lp-cudaki .cudaki-hero__subtitle {
        font-size: min(24px, 4vw);
        margin-bottom: 12px;
    }

    .lp-cudaki .cudaki-hero__desc {
        font-size: min(22px, 3.67vw);
        line-height: 1.35;
    }

    .lp-cudaki .cudaki-hero__insta-label {
        font-size: min(16px, 2.67vw);
        min-height: 0;
        padding: 6px 16px;
    }

    /* Marquee */
    .lp-cudaki .cudaki-marquee__item {
        height: 52px;
        padding: 0 14px;
    }

    /* Sekcje dzielone – jedna kolumna */
    .lp-cudaki .cudaki-split {
        grid-template-columns: 100%;
        background: var(--cudaki-section-bg, transparent);
    }

    .lp-cudaki .cudaki-split--panel-first {
        background: transparent;
    }

    .lp-cudaki .cudaki-split__media {
        min-height: 0;
        aspect-ratio: 3 / 2;
    }

    .lp-cudaki .cudaki-split__panel {
        padding: 36px 20px 44px;
    }

    .lp-cudaki .cudaki-split__content {
        max-width: 100%;
        gap: 16px;
    }

    /* Sekcja 6 – na mobile tekst nad zdjęciem */
    .lp-cudaki .cudaki-s6 .cudaki-split__media {
        order: 2;
    }

    .lp-cudaki .cudaki-s6 .cudaki-split__panel {
        order: 1;
    }

    .lp-cudaki .cudaki-split__desc--rich {
        max-width: 100%;
    }

    /* Punkty */
    .lp-cudaki .cudaki-points {
        padding: 44px 0;
    }

    .lp-cudaki .cudaki-points__badge {
        margin-bottom: 28px;
    }

    .lp-cudaki .cudaki-points__grid {
        grid-template-columns: 100%;
        gap: 24px;
    }

    .lp-cudaki .cudaki-points__icon {
        height: 56px;
    }

    .lp-cudaki .cudaki-points__icon img {
        max-height: 56px;
    }

    

    /* Jak działa wyzwanie – 4 kroki jeden pod drugim */
    .lp-cudaki .cudaki-how {
        padding: 48px 0;
    }

    .lp-cudaki .cudaki-how__grid {
        grid-template-columns: 100%;
        gap: 32px;
        margin-top: 32px;
    }

    .lp-cudaki .cudaki-how__icon {
        width: 72px;
        height: 72px;
        margin-bottom: 14px;
    }

    .lp-cudaki .cudaki-how__icon img {
        max-width: 38px;
        max-height: 38px;
    }

    

    

    .lp-cudaki .cudaki-how__footer {
        font-size: var(--cudaki-body);
        margin-top: 32px;
    }

    /* Nagrody – karty jedna pod drugą */
    .lp-cudaki .cudaki-prizes {
        padding: 48px 0;
    }

    

    .lp-cudaki .cudaki-prizes__grid {
        grid-template-columns: 100%;
        gap: 36px;
        margin-top: 32px;
    }

    .lp-cudaki .cudaki-prizes__title {
        margin-top: 18px;
    }

    

    /* CTA */
    .lp-cudaki .cudaki-cta {
        padding: 48px 0;
    }

    .lp-cudaki .cudaki-cta__desc {
        margin-bottom: 24px;
    }

    .lp-cudaki .cudaki-cta__terms {
        margin-top: 28px;
    }
}

@media (max-width: 575.98px) {
    .lp-cudaki .cudaki-btn {
        min-width: 100%;
    }
}

/* ==========================================================================
   Stopka produkt (#footer-product) – korekty tylko dla tej podstrony.
   Stopka renderuje się poza <main class="lp-cudaki">, więc zakres bierzemy
   z klasy body, żeby nie ruszyć stron produktowych.
   ========================================================================== */
@media (max-width: 767.98px) {

    /* Zamiast karuzeli pokazujemy wartości jedna pod drugą.
       `!important` przełamuje bootstrapowe .d-none / .d-md-flex. */
    body.page-template-lp-challenge-cudaki #footer-product .list-footer {
        display: flex !important;
    }

    body.page-template-lp-challenge-cudaki #footer-product #footer_splide {
        display: none !important;
    }
}