/* Polska wersja: 'capitalize' psuje typografie PL (Kazde Slowo Wielka Litera).
   Tekst zrodlowy ma juz poprawna wielkosc liter, wiec transformacje wylaczamy. */
a, a:hover, a:focus,
.ar-unlck-heading p,
.ar-unlck-sb-heading h4 span,
.ar-unlck-optns ul li a,
.ar-steps-heading h1,
.ar-steps-heading span,
.ar-feature-right-text h4,
.ar-feat2-heading h1,
.ar-earn-slider-wrapper .ar-steps-heading h1,
.ar-steps-heading h1 > span,
.ar-earn-sb-heading h4,
.ar-goal-heading h1,
.ar-goal-sb-heading h2,
.ar-goal-content h4,
.ar-fact-content h4,
.tableHeading,
.ar-price-list ul li,
.ar-price-payment h4,
.ar-price-payment ul li a,
.ar-faq-wrapper .ar-goal-heading h1,
.ar-question-accordian button.accordion-button,
.ar-faq-wrapper .testmnl-heading h1,
.ar-rating span, .ar-date p,
.ar-date p span,
.ar-temnl-content h4,
.ar-footer-pyment-main .ar-price-payment span,
.ar-feedback-inner>span>p,
.ar-footer-links ul li a,
.ar-goal-video-main h4 {
    text-transform: none;
}

/* Pasek metod platnosci PL (BLIK / Stripe) */
.ar-payments-pl {
    max-width: 340px;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------
   CTA: polski tekst jest dluzszy niz angielski oryginal
   ("Uzyskaj natychmiastowy dostep do Artistly" vs "Get Instant Access
   to Artistly"), wiec nie miescil sie w pigulce btn-bg.png rysowanej
   przez `background-size: contain`.

   Zamiast skracac tekst, pigulka dopasowuje sie do niego:
   `background-size: 100% 100%` rozciaga tlo na szerokosc przycisku,
   a padding trzyma napis w srodku.

   `display: table` (a nie inline-block) - dzieki temu przycisk dopasowuje
   szerokosc do tresci, ale nadal jest elementem blokowym i stoi w osobnej
   linii, zamiast wskakiwac obok sasiedniego <span>.

   Lista selektorow powtarza wszystkie oryginalne reguly ustawiajace
   `margin` skrotem (zerowalyby margin-left/right: auto i rozjechalyby
   wysrodkowanie). Kolejnosc w kaskadzie wystarcza - bez !important.
   ------------------------------------------------------------------ */
a.ar-btn,
.ar-price-payment a.ar-btn,
.ar-footer-pyment-main .ar-price-payment a.ar-btn,
.ar-pricing-wrapper .ar-price-payment a.ar-btn {
    display: table;
    width: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-size: 100% 100%;
    line-height: 1.2;
    padding: 16px 26px;
}

/* Ponizsze breakpointy powtarzaja pelna liste selektorow, zeby nie
   przegrac specyficznoscia z regula bazowa powyzej. */
@media (min-width: 768px) {

    a.ar-btn,
    .ar-price-payment a.ar-btn,
    .ar-footer-pyment-main .ar-price-payment a.ar-btn {
        padding: 16px 52px;
    }

    /* karty cennika sa wezsze niz sekcje pelnej szerokosci */
    .ar-pricing-wrapper .ar-price-payment a.ar-btn {
        padding: 16px 24px;
    }
}

@media (min-width: 992px) {
    .ar-pricing-wrapper .ar-price-payment a.ar-btn {
        font-size: 29px;
        padding: 16px 38px;
    }
}

/* ------------------------------------------------------------------
   Odznaki pod naglowkiem "Uwolnij swoja kreatywnosc"
   (Nielimitowane projekty / Unikalne obrazy / Uzytek komercyjny)

   BLAD ODZIEDZICZONY Z ORYGINALU: style.css stylizuje je selektorem
   `.ar-unlck-optns ul li a`, ale w HTML-u nie ma zadnego <a> - tekst
   siedzi golo w <li>. Efekt: zamiast bialego napisu na gradientowej
   pigulce dostajemy bootstrapowy #212529 (prawie czarny) na ciemnym
   tle, czyli nieczytelne. Tak samo wyglada oryginalna strona.

   Przenosimy te same deklaracje na <li>, zeby nie ruszac znacznikow.
   ------------------------------------------------------------------ */
.ar-unlck-optns ul li {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    background-image: url(../images/unlimited-design.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    padding: 15px 30px;
    font-family: "Inter";
    transition: all 0.3s;
}

.ar-unlck-optns ul li img {
    display: block;
    margin-right: 15px;
    flex: 0 0 auto;
}

.ar-unlck-optns ul li:nth-child(2) {
    background-image: url(../images/unique-images.png);
}

.ar-unlck-optns ul li:last-child {
    background-image: url(../images/commercial-use.png);
}

@media (max-width: 767px) {
    .ar-unlck-optns ul {
        flex-wrap: wrap;
        gap: 12px;
    }

    .ar-unlck-optns ul li {
        font-size: 17px;
        padding: 10px 18px;
        margin-right: 0;
    }

    .ar-unlck-optns ul li img {
        width: 26px;
        height: auto;
        margin-right: 10px;
    }
}

/* ------------------------------------------------------------------
   Naglowek "Tworzenie obrazow bez wysilku / w zaledwie 3 prostych
   krokach!" + rozowa plakietka "Nie potrzebujesz doswiadczenia".

   Plakietka jest `position:absolute; bottom:-35px` wzgledem naglowka.
   Po polsku jej tekst zawijal sie do dwoch linii (69 -> 138 px), przez
   co wjezdzala na ostatnia linie naglowka i zaslanial ja napis.

   `white-space: nowrap` trzyma plakietke w jednej linii (szerokosc
   rosnie do tresci zamiast lamac tekst), a wieksze `padding-bottom`
   naglowka jest zabezpieczeniem, gdyby tekst kiedys urosl.
   ------------------------------------------------------------------ */
.ar-step-sub-heading {
    white-space: nowrap;
    min-width: 0;
}

.ar-steps-heading {
    padding-bottom: 70px;
}

/* ------------------------------------------------------------------
   Plakietka "Nowosc" (oryg. "New") przy nazwach funkcji.

   Ponizej 991 px oryginal nadaje jej SZTYWNA szerokosc, malejaca
   z breakpointem: 80 px -> 70 px (575) -> 60 px (480). Krotkie "New"
   sie miescilo, "Nowosc" nie - napis lamal sie na dwie linie ("Now"
   / "osc") i wychodzil poza biale kolko.

   Szerokosc = auto + nowrap, a wysrodkowanie przez translateX zamiast
   `left:0; right:0; margin:auto` (tamto wymaga konkretnej szerokosci).
   Jedna regula wystarcza na wszystkie trzy breakpointy - wygrywa
   kolejnoscia w kaskadzie, bo ten plik laduje sie po style.css.
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .arNewTag span {
        width: auto;
        min-width: 0;
        left: 50%;
        right: auto;
        margin: 0;
        transform: translateX(-50%);
        white-space: nowrap;
    }
}

/* ==================================================================
   POPRAWKI MOBILNE
   Zweryfikowane przez porownanie 1:1 z angielskim oryginalem na tym
   samym viewporcie - ponizej sa TYLKO miejsca, w ktorych dluzszy
   polski tekst psuje uklad. Reszta odstepow zostaje jak w oryginale.
   ================================================================== */

/* Naglowek "Oto podsumowanie wszystkiego..." jest absolutnie
   pozycjonowany (bottom:-30px) wewnatrz .ar-fact-wrapper i pelni role
   pomostu do sekcji cennika. Po polsku tresc tej sekcji jest dluzsza
   i wjezdzala pod naglowek (nachodzenie 28 px na 375 px).
   W oryginale zapas wynosi -1 px, czyli i tak stykaja sie o wlos.
   Wiekszy padding-bottom daje wolna przestrzen na pomost. */
@media (max-width: 991px) {
    .ar-fact-wrapper {
        padding-bottom: 170px;
    }
}

/* Listy korzysci pod przyciskami CTA ("Nielimitowane projekty |
   Bez ukrytych kosztow | Wszystko w komplecie").
   Pozycje sa inline-block z margin-bottom:0 - po angielsku mieszczily
   sie w jednym-dwoch wierszach, po polsku zawijaja sie na 2-3 wiersze,
   ktore stykaly sie ze soba (odstep 2 px). Ponizej 480 px oryginal
   ukrywa tez biale separatory, wiec zostawal sam zlepiony tekst.
   Flex z gap daje wierszom oddech, zachowujac uklad w linii tam,
   gdzie pozycje sie mieszcza. */
@media (max-width: 767px) {
    .ar-price-payment ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 8px 16px;
    }

    .ar-price-payment ul li {
        margin-right: 0;
    }
}

/* ------------------------------------------------------------------
   Gradientowe "pigulki" naglowkowe maja w oryginale zaszyte min-width
   (900/720/550/440/300 px...), zmniejszane skokowo per breakpoint.
   Pomiedzy progami trafiaja sie szerokosci, przy ktorych min-width
   przekracza kontener i strona dostaje poziomy scroll:
     305 px -> .ar-goal-sb-heading h2 wystaje 7 px
     561 px -> .ar-faq-wrapper .ar-goal-heading h1 wystaje 12 px
   Oba wystepuja tak samo w oryginale (te same scrollWidth), ale na
   telefonie daja realne przewijanie w bok, wiec je domykamy.

   min-width wygrywa z max-width, wiec trzeba wyzerowac samo min-width.
   Naglowki sa blokowe, wiec width:auto = pelna szerokosc kontenera,
   czyli pigulka dalej wyglada jak w projekcie - tylko sie nie rozpycha.
   ------------------------------------------------------------------ */
@media (max-width: 991px) {

    .ar-banner-content h4,
    .ar-feature-left h4,
    .ar-earn-sb-heading h4,
    .ar-goal-heading h1,
    .ar-goal-sb-heading h2,
    .ar-faq-wrapper .ar-goal-heading h1,
    .ar-faq-wrapper .testmnl-heading h1,
    .ar-faq-wrapper .ar-goal-heading.testmnl-heading h1 {
        min-width: 0;
        max-width: 100%;
    }

    a.ar-price-card img,
    a.ar-price-btm-img img {
        width: auto;
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------
   Tytuly funkcji (.ar-feature-left h4) - wysrodkowanie na mobile.

   Na desktopie to pigulka doklejona do lewej krawedzi
   (`border-radius: 0 40px 40px 0` + bialy pasek `:before`), wiec
   `text-align: left` ma tam sens. Ponizej 991 px oryginal zmienia ja
   w pelny owal (`border-radius: 40px`) i chowa pasek, ale wyrownanie
   zostaje przy lewej - polskie tytuly czesto lamia sie na dwie linie
   i druga linia wisi poszarpana po lewej.

   Wyzsza specyficznosc (.ar-feature-wrapper ...), bo oryginalne reguly
   paddingu dla tego selektora siedza w kilku breakpointach.
   ------------------------------------------------------------------ */
@media (max-width: 991px) {
    .ar-feature-wrapper .ar-feature-left h4 {
        text-align: center;
        justify-content: center;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Kontener bloku funkcji ma asymetryczny padding poziomy, wiec caly
   blok (pomaranczowy tytul + akapit) byl przesuniety w lewo wzgledem
   obrazka nad nim:
     768-991 px : padding-left 20px  vs padding-right 12px  -> 8 px w lewo
     do 767 px  : padding-left 0     vs padding-right 12px  -> 12 px w lewo
   (`.row > *` z Bootstrapa daje 12 px z obu stron, a reguly
   `.ar-feature-left` nadpisuja tylko lewa strone).

   Wyrownujemy obie strony do guttera Bootstrapa w tym samym zakresie,
   w ktorym tytuly sa wysrodkowane. To jedyny kontener na stronie
   z asymetrycznym paddingiem poziomym. */
@media (max-width: 991px) {
    .ar-feature-wrapper .ar-feature-left {
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }
}

/* ------------------------------------------------------------------
   Pionowe odstepy wokol pomaranczowych tytulow funkcji - ujednolicenie.

   Stan przed (390 px, 42 bloki):
     nad pigulka: 0 px x5, 14 px x10, 30 px x23
     pod pigulka: 22 px x6, 32 px x32, 42 px x4

   Trzy przyczyny:

   1) REGRESJA Z PODMIANY VIDEO -> OBRAZEK. Regula pozycyjna
      `@media(max-width:991px){ ... .ar-feature-box:nth-child(3) ... img
      { margin-top:30px } }` w oryginale nie lapala nic, bo w tych
      slotach byly <iframe>/<video>. Po podmianie lapie moj <img>
      i spycha go o 30 px w dol wewnatrz ramki proporcji o stalej
      wysokosci - obrazek wystawal 30 px pod ramke i dotykal pigulki
      (8 blokow z zerowym odstepem). Zerujemy marginesy podmienionych
      klatek i przypinamy je do ramki. `!important`, bo konkurencyjny
      selektor ma 5 klas + :nth-child i nie da sie go tanio przebic.

   2) Plakietka "Nowosc" wystaje 16 px ponad pigulke, wiec w blokach
      z plakietka odstep optycznie zjadalo do 14 px. Dokladamy te 16 px.

   3) Element pod pigulka ma rozny padding-top (20/30/40 px) zaleznie
      od tego, czy to <p> czy <span> i od modyfikatora karty.
      Ustalamy jeden.
   ------------------------------------------------------------------ */
.ar-video-still {
    margin: 0 !important;
    inset: 0 !important;
}

@media (max-width: 991px) {

    /* Kompensacja musi odpowiadac `top` plakietki, ktore zmienia sie
       z breakpointem: -22px do 991 px, -16px do 575 px. */
    .ar-feature-wrapper .ar-feature-left h4.arNewTag {
        margin-top: 22px;
    }

    .ar-feature-wrapper .ar-feature-left h4 + p,
    .ar-feature-wrapper .ar-feature-left h4 + span {
        padding-top: 30px;
    }
}

@media (max-width: 575px) {
    .ar-feature-wrapper .ar-feature-left h4.arNewTag {
        margin-top: 16px;
    }
}

/* Naglowek sekcji funkcji ("Rozpal swoja kreatywnosc...") stal
   praktycznie na kafelkach krokow. Sekcja ma `margin-top:-140px`, zeby
   jej tlo wsuwalo sie pod poprzednia, wiec na naglowek zostawal tylko
   `padding-top:15px` samego .ar-feature-heading.

   W te szczeline wchodza jeszcze dwie rzeczy:

   - dekoracyjna strzalka `.ar-arrow` (27 px), ktora w ORYGINALE
     nachodzi na pomaranczowa pigulke (konczy sie 13 px ponizej jej
     gornej krawedzi),
   - samo pudelko `.ar-steps-wrapper`, ktore ma `z-index:1` i przez
     `padding-bottom:42px` siega 22 px PONIZEJ gornej krawedzi pigulki,
     wiec jego ciemne tlo ja przykrywalo.

   Zmniejszanie `padding-bottom` sekcji nie pomaga - przez ujemny
   margines cala sekcja funkcji przesuwa sie razem z nim i nachodzenie
   zostaje takie samo. Dzialajacy lever to padding naglowka: 90 px
   ustawia pigulke 20 px ponizej dolnej krawedzi sekcji krokow. */
@media (max-width: 991px) {
    .ar-steps-wrapper .ar-arrow {
        margin-top: 20px;
    }

    .ar-feature-wrapper .ar-feature-heading {
        padding-top: 90px;
    }
}