/*
 * Globalne style przeniesione 1:1 z inline <style> Webflow (global_embed, page_specific_css,
 * Nav CSS, Custom CSS) — w oryginalnym eksporcie żyły w <div class="w-embed"> w index.html,
 * czyli w treści <body>, PO wczytaniu normalize.css / components.css / studio-brothers-123.css.
 *
 * Ten plik jest linkowany w layout.tsx jako <link> PO trzech plikach Webflow (nie importowany
 * przez Next.js jako "globals.css"), żeby zachować tę samą kolejność w kaskadzie CSS —
 * inaczej reguły takie jak `a { text-decoration: inherit }` przegrywałyby z
 * `a { text-decoration: underline }` ze studio-brothers-123.css.
 */

body {
  font-size: 1.1111111111111112vw;
}

@media screen and (min-width: 1440px) {
  body {
    font-size: 1rem;
  }
}

.container {
  max-width: 90em;
}

a,
.w-nav-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.w-richtext > :not(div):first-child,
.w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

.w-richtext > :last-child,
.w-richtext ol li:last-child,
.w-richtext ul li:last-child {
  margin-bottom: 0 !important;
}

.w-select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

@media screen and (max-width: 991px) {
  body {
    font-size: 0.6881944444444444rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1100px) {
  .text_14px {
    font-size: 0.6222222222222223rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1250px) {
  .text_12px {
    font-size: 0.5610416666666667rem;
  }
}

/*
 * Reset natywnego wyglądu <button> — w oryginalnym eksporcie Webflow te elementy
 * (.menu_button, .dropdown_toggle, .lang_dd_toggle) są zwykłymi <div>. W Next.js
 * użyto semantycznych <button> dla dostępności/interakcji, ale normalize.css nie
 * usuwa natywnego tła/ramki przeglądarki dla <button>, więc trzeba to zresetować
 * ręcznie — inaczej widać białe, kwadratowe "duchy" przycisków w nawigacji.
 */
.menu_button,
.dropdown_toggle,
.lang_dd_toggle,
.slider-button-prev,
.slider-button-next {
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

/*
 * .projects_tabs_link (zakładki Strony www / Branding na /realizacje) jest w Next.js
 * <button>, ale w oryginale ma tylko `border-bottom` (nie pełny reset border) —
 * usuwamy więc jedynie górną/lewą/prawą krawędź natywnego przycisku, zachowując
 * dolną obwódkę zdefiniowaną w studio-brothers-123.css (border-bottom-width/-color
 * nie są tu nadpisywane, tylko -style dla pozostałych krawędzi).
 */
.projects_tabs_link {
  background: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border-style: none none solid none;
  margin: 0;
  font: inherit;
  cursor: pointer;
}

/*
 * Karty członków zespołu na /o-studio (popup "Przeczytaj więcej") oraz przycisk
 * "Wróć" w popupie — w oryginalnym eksporcie to <a>, w Next.js to <button> (bo nie
 * prowadzą pod żaden URL, tylko otwierają/zamykają popup), więc trzeba zresetować
 * natywne tło/ramkę przycisku tak jak przy .menu_button wyżej.
 */
button.card,
.team_popup_top_wrap button.link-block {
  background: none;
  border: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
  width: 100%;
}

/* Nav CSS */
.navbar.on-scroll .navbar_bg {
  opacity: 1;
}

.nav_link:hover .nav_link_line,
.nav_link.w--current .nav_link_line,
.dropdown_toggle:hover .nav_link_line,
.dropdown_toggle.w--open .nav_link_line {
  transform: translate(0%, 0);
}

@media screen and (max-width: 991px) {
  .button.is--nav {
    background-color: var(--_colors---colors-neutral--darker);
    color: var(--_colors---colors-neutral--lightest);
    font-size: 1.2em;
  }
  .menu_button.w--open ~ .nav_logo_link {
    color: var(--_colors---colors-neutral--darker);
  }
  .menu_button.w--open ~ .lang_dd .lang_dd_toggle {
    color: var(--_colors---colors-neutral--darker) !important;
  }
  .menu_button.w--open .menu_button_text_wrap {
    display: none;
  }
  .menu_button.w--open .menu_button_close_wrap {
    display: flex;
  }
}

/* Custom CSS */
.card:hover .card_img {
  transform: scale(1.05, 1.05);
}
.card:hover .button_arrow {
  transform: translate(0.2em, 0);
}
.project_card:hover .project_card_img {
  transform: scale(1.05, 1.05);
}
.project_card:hover .project_card_arrow {
  transform: translate(0.2em, 0);
}
.link-block:hover .link_line {
  transform: translate(100%, 0%);
}

/* Swiper — nadpisania wyglądu z index.html */
.swiper-navigation .swiper-scrollbar-drag {
  height: 2px;
  background: #192e57;
  border-radius: 0;
}
.swiper-navigation .swiper-scrollbar.swiper-scrollbar-horizontal.is--light .swiper-scrollbar-drag {
  height: 2px;
  background: #ece7db;
  border-radius: 0;
}
.swiper-navigation .swiper-scrollbar.swiper-scrollbar-horizontal {
  height: 2px;
  border-radius: 0;
  background: #b6c8da;
}
.swiper-button-next,
.swiper-button-prev {
  display: none;
}
.swiper {
  overflow: visible;
}

/*
 * Karuzela logotypów klientów — zastępuje @flowbase-co/boosters-carousel-ticker
 * (Finsweet) czystą animacją CSS. Zawartość jest renderowana 2x (patrz Clients.tsx),
 * animacja przesuwa o 50%, więc pętla jest bezszwowa.
 */
.home_clients_carousel {
  overflow: hidden;
}
.home_clients_track {
  width: max-content;
  animation: home-clients-scroll 30s linear infinite;
}
.home_clients_carousel:hover .home_clients_track {
  animation-play-state: paused;
}
@keyframes home-clients-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/*
 * Karuzela logotypów technologii na /strony-internetowe-i-branding (sekcja „Technologie
 * i integracje”) — tak jak .home_clients_carousel wyżej, zastępuje
 * @flowbase-co/boosters-carousel-ticker czystą animacją CSS. Treść każdego z 3 rzędów
 * jest renderowana 2x (patrz BrandingTech.tsx), klasa .is--right odwraca kierunek
 * przewijania (środkowy rząd w oryginale przewija w prawo, pozostałe w lewo).
 */
.branding_tech_carousel {
  overflow: hidden;
}
.branding_tech_track.is--ticker {
  width: max-content;
  animation: branding-tech-scroll 28s linear infinite;
}
.branding_tech_track.is--ticker.is--right {
  animation-direction: reverse;
}
.branding_tech_carousel:hover .branding_tech_track.is--ticker {
  animation-play-state: paused;
}
@keyframes branding-tech-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/*
 * Sekcja FAQ (strony Oferty) — w oryginalnym eksporcie Webflow każdy .faq_exp_wrap
 * dostaje na mobile (<=767px) `grid-area: 2 / 1 / 3 / 3`, żeby rozwinięta odpowiedź
 * zajmowała pełną szerokość wiersza pod pytaniem/ikoną, ale Webflow zapisał tę regułę
 * per-instancja przez auto-generowane ID (#w-node-...) zamiast przez klasę, więc nie
 * przenosi się 1:1 do komponentu React. Odtworzone tu jako reguła klasowa.
 */
@media screen and (max-width: 767px) {
  .faq_item .faq_exp_wrap {
    grid-area: 2 / 1 / 3 / 3;
  }
}

/*
 * Sekcja „Działamy na wszystkich trzech poziomach” (SEO/GEO/AEO, strona
 * Pozycjonowanie w Google i AI) — analogicznie do FAQ wyżej, trzecia karta (AEO)
 * dostaje w oryginale ID-owy override, żeby na tablecie (2-kolumnowy grid) rozciągać
 * się na całą szerokość. Tu odtworzone przez :nth-child, bo karty renderujemy z tablicy.
 */
@media screen and (max-width: 767px) and (min-width: 480px) {
  .ai-seo_levels_grid .ai-seo_levels_card:nth-child(3) {
    grid-column: span 2 / span 2;
  }
}
