/* ==========================================================================
   Compilio — warstwa projektowa nad szablonem bazowym
   Zero stylow inline: kazda regula, ktora w szablonie siedziala w atrybucie
   style="...", ma tutaj swoja klase.
   Kolejnosc breakpointow: desktop-first, od najwiekszych do najmniejszych.
   ========================================================================== */

:root {
  --compilio-hero-measure: 46.125rem;
  --compilio-radius-image: 0.375rem;
}

/* Szerokosci tekstu (measure) - START
   Zastepuja style="max-width:NNNpx" ze szablonu bazowego. */
.mw-190 { max-width: 11.875rem; }
.mw-280 { max-width: 17.5rem; }
.mw-300 { max-width: 18.75rem; }
.mw-315 { max-width: 19.6875rem; }
.mw-337 { max-width: 21.0625rem; }
.mw-345 { max-width: 21.5625rem; }
.mw-396 { max-width: 24.75rem; }
.mw-406 { max-width: 25.375rem; }
.mw-416 { max-width: 26rem; }
.mw-420 { max-width: 26.25rem; }
.mw-430 { max-width: 26.875rem; }
.mw-432 { max-width: 27rem; }
.mw-436 { max-width: 27.25rem; }
.mw-448 { max-width: 28rem; }
.mw-488 { max-width: 30.5rem; }
.mw-512 { max-width: 32rem; }
.mw-514 { max-width: 32.125rem; }
.mw-554 { max-width: 34.625rem; }
.mw-560 { max-width: 35rem; }
.mw-564 { max-width: 35.25rem; }
.mw-578 { max-width: 36.125rem; }
.mw-605 { max-width: 37.8125rem; }
.mw-615 { max-width: 38.4375rem; }
.mw-630 { max-width: 39.375rem; }
.mw-634 { max-width: 39.625rem; }
.mw-680 { max-width: 42.5rem; }
.mw-738 { max-width: 46.125rem; }
.mw-912 { max-width: 57rem; }
.is-fluid { width: 100%; }
.mw-22ch { max-width: 22ch; }
.mw-full { max-width: 100%; }
/* Szerokosci tekstu (measure) - END */

/* Postery tla dla sekcji wideo - START
   Webflow trzymal je w style="background-image:url(...)". */
.poster-dropdown { background-image: url("../videos/dropdown_poster.0000000.jpg"); }
.poster-home-a { background-image: url("../videos/home-a_poster.0000000.jpg"); }
.poster-home-b { background-image: url("../videos/home.b_poster.0000000.jpg"); }
.poster-bento { background-image: url("../videos/bento-video_poster.0000000.jpg"); }
.poster-testimonial { background-image: url("../videos/testimonial_poster.0000000.jpg"); }
.poster-plant { background-image: url("../videos/plant_poster.0000000.jpg"); }
.poster-about-a { background-image: url("../videos/about-a_poster.0000000.jpg"); }
.poster-slider { background-image: url("../videos/slider-video_poster.0000000.jpg"); }
/* Postery tla dla sekcji wideo - END */

/* Pomocnicze modyfikatory - START */
.text-balance { text-wrap: balance; }
.is-nowrap { white-space: nowrap; }
.is-animation-hidden { opacity: 0; }
.is-single-column { grid-template-columns: 1fr; }
.is-stacked {
  flex-direction: column;
  align-items: flex-start;
}
.is-grid-span-3 { grid-area: 1 / 1 / 2 / 4; }
.heading_about-c.is-single-word {
  font-size: clamp(3.5rem, 13vw, 10.625rem);
  white-space: nowrap;
}
/* SVG maski w kartach osi czasu - w szablonie jako style="mask-type:alpha" */
mask.is-alpha { mask-type: alpha; }
/* Pomocnicze modyfikatory - END */

/* Dostepnosc i standard mobilny - START */
body { overflow-x: hidden; }

a,
button,
.link_nav,
.link_dropdown,
.link_footer,
[button] {
  -webkit-tap-highlight-color: transparent;
}

/* Akapit pod naglowkiem hero na stronie glownej: szerszy i rowniej lamany na desktopie */
@media (min-width: 992px) {
  .home-a_hero-content .mw-337 { max-width: 24.325rem; }
  .home-a_hero-content .mw-337 .paragraph {
    text-wrap: pretty;
    hyphens: none;
  }
}

/* Linki w tresci (poza komponentami szablonu, ktore maja wlasne kolory) */
.paragraph a,
.faq_p a,
.text-size-regular a {
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.paragraph a:hover,
.faq_p a:hover,
.text-size-regular a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* Dostepnosc i standard mobilny - END */

/* ==========================================================================
   Poprawki responsywne
   Desktop-first: bloki od najwiekszego breakpointu do najmniejszego.
   ========================================================================== */

/* Wygladzanie fontow - w szablonie bazowym siedzialo w <style> w <head> */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Tablet i mniej (<= 991px) - START */
@media screen and (max-width: 991px) {

  /* Menu mobilne - START
     Bez duplikatu naglowka "Uslugi", ciasniejszy odstep, rowna lewa krawedz
     wszystkich pozycji, nazwy uslug w jednej linii. */
  .menu_mobile-title {
    display: none;
  }

  .dropdown-list.w--open {
    padding-top: var(--spacing--space-zero);
    padding-bottom: var(--spacing--space-zero);
  }

  .left_nav-menu {
    grid-row-gap: var(--spacing--space-zero);
  }

  .nav_column,
  .nav_list {
    grid-row-gap: var(--spacing--space-minimal);
  }

  .nav_list .link_dropdown {
    padding-left: var(--spacing--space-zero);
    margin-left: var(--spacing--space-zero);
  }

  .nav_list .link_dropdown > div {
    font-size: 0.9375rem;
    white-space: nowrap;
  }
  /* Menu mobilne - END */

  /* Hero podstrony "Umowy": mapa jest ukryta ponizej 991px,
     wiec jej kolumna nie moze rezerwowac miejsca. */
  .about-a_column.is-first {
    margin-bottom: var(--spacing--space-zero);
  }

  .section_hero-about-a .about-a_column:not(.is-first) {
    display: none;
  }

  .section_hero-about-a {
    padding-bottom: var(--spacing--space-medium);
  }

  /* Stopka: dane rejestrowe i copyright jedno pod drugim. */
  .footer_bottom-halves {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
  }
}
/* Tablet i mniej (<= 991px) - END */

/* Telefon (<= 767px) - START */
@media screen and (max-width: 767px) {
  .heading-style-h2 {
    line-height: 1.16;
  }

  /* Hero "O nas": tekst nad plywajacymi zdjeciami, slabsza podlinia,
     ukryte kadry ktore nachodzily na kolumne tekstu. */
  .headline_about-c,
  .paragraph_about--c {
    position: relative;
    z-index: 2;
  }

  .headline_about-c .paragraph.heading-style-h3 {
    font-size: 1.375rem;
    line-height: 1.3;
  }

  .wrap_image_3d.is-fourth,
  .wrap_image_3d.is-ninith,
  .wrap_image_3d.is-fifth {
    display: none;
  }

  /* Hero home: karta "poznaj Compilio" nie moze stykac sie z przyciskami. */
  .home-a_hero-bottom {
    margin-top: var(--spacing--space-medium);
  }

  /* Zdjecia wplecione w naglowek - wysrodkowane wzgledem linii tekstu. */
  .wrap_text-image,
  .image_text {
    vertical-align: middle;
  }
}
/* Telefon (<= 767px) - END */

/* Strona 404 - START
   Hero 404 korzysta ze struktury "about-a", ale ma tylko jedna kolumne
   i grupe przyciskow poza blokiem naglowka, wiec odstepy trzeba domknac. */
.section_hero-about-a.is-404 {
  padding-bottom: var(--section-padding--medium);
}

.section_hero-about-a.is-404 .about-a_column.is-first {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing--space-small);
  margin-bottom: var(--spacing--space-zero);
  display: flex;
}

/* Bez drugiej kolumny (statystyk) gap 200px z szablonu nie ma sensu. */
.section_hero-about-a.is-404 .left_about-a {
  grid-row-gap: var(--spacing--space-zero);
  row-gap: var(--spacing--space-zero);
  width: 100%;
}

.section_hero-about-a.is-404 .spacing {
  display: none;
}

@media screen and (max-width: 767px) {
  .section_hero-about-a.is-404 .button-group {
    flex-flow: row wrap;
  }
}
/* Strona 404 - END */

/* Strona dokumentacji aplikacji: hero ma tylko kafel CTA, wiec zajmuje pelna kolumne siatki */
.section_hero-home-b .hero-home-b { grid-template-columns: 1fr; }