/* Build: 1.1_020920260701 */

/* =========================================================
   FUNDACJA RÓWNOŚCI — SITE.CSS
   ========================================================= */


/* =========================================================
   RESET / BAZA
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

html {
  font-size: 16px;
}

body {
  min-height: 100vh;
  min-height: 100dvh;

  color: #ffffff;
  font-family: "mundial", Arial, Helvetica, sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}




/* Safari / iOS: nie nadpisuj naszych kolorów automatycznymi linkami. */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}

/* =========================================================
   GŁÓWNY WRAPPER
   ========================================================= */

.site-shell {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;

  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}


/* =========================================================
   GŁÓWNA CZĘŚĆ STRONY
   ========================================================= */

.site-content {
  position: relative;

  flex: 1 0 auto;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 0;

  padding:
    clamp(5.5rem, 10vh, 8rem)
    clamp(2rem, 6vw, 6rem)
    clamp(3rem, 6vh, 5rem);
}


/* =========================================================
   LOGO / FR_intro.png — PRAWY GÓRNY RÓG
   ========================================================= */

.intro-logo-picture {
  position: absolute;

  top: clamp(1.5rem, 4vh, 3rem);
  right: clamp(1.5rem, 4vw, 4rem);

  display: block;

  width: clamp(15rem, 26vw, 29rem);
  max-width: 38vw;
  height: auto;

  object-fit: contain;

  z-index: 5;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}



.intro-logo {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* =========================================================
   HERO

   Hero ma taką samą szerokość jak grafika nagłówka.
   Dzięki temu procentowy offset kontaktu liczony jest
   bezpośrednio względem pracujemy-web.png.
   ========================================================= */

.hero {
  position: relative;

  width: min(100%, 43rem);

  margin-right: auto;
  margin-left: clamp(0rem, 3vw, 3rem);
}


/* =========================================================
   GŁÓWNA GRAFIKA — pracujemy-web.png
   ========================================================= */

.hero-picture {
  display: block;
  width: 100%;
}


.hero-image-wrap {
  position: relative;
  width: 100%;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.hero-image-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: transparent;
}

.hero-image {
  display: block;

  width: 100%;
  height: auto;

  margin: 0;

  filter: drop-shadow(0 0.65rem 1.2rem rgba(0, 0, 0, 0.18));

  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}


/* =========================================================
   KONTAKT

   W źródłowym PNG widoczna krawędź papieru zaczyna się
   około 42 px od lewej krawędzi obrazu 1448 px.

   42 / 1448 = 0.029 = 2.9%

   Dzięki wartości procentowej wyrównanie zachowuje się
   prawidłowo przy skalowaniu na desktopie, iPadzie i mobile.
   ========================================================= */

.contact {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  margin-left: 2.9%;
}

.contact-title {
  margin: 0 0 0.65rem;

  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: clamp(1.75rem, 3vw, 3.1rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.03;
  letter-spacing: -0.02em;

  /* Na desktopie cały tekst pozostaje w jednym wierszu. */
  white-space: nowrap;
}

/* Domyślnie ukrywamy kontrolowane łamanie wiersza. */
.contact-break {
  display: none;
}

/* „w kontakcie!” nigdy nie zostanie rozdzielone. */
.contact-nowrap {
  white-space: nowrap;
}

.contact-email {
  display: inline-block;

  color: rgba(255, 255, 255, 0.72);

  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 300;
  line-height: 1.4;

  text-decoration: none;
}

.email-local,
.email-at,
.email-domain {
  color: inherit;
  transition: color 180ms ease;
}

.contact-email:hover .email-local,
.contact-email:focus-visible .email-local {
  color: #b078ed;
}

.contact-email:hover .email-domain,
.contact-email:focus-visible .email-domain {
  color: #b7ec34;
}

.contact-email:hover .email-at,
.contact-email:focus-visible .email-at {
  color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   STOPKA
   ========================================================= */

.site-footer {
  position: relative;
  z-index: 2;

  flex: 0 0 auto;

  width: 100%;

  padding:
    1.25rem
    clamp(1.5rem, 5vw, 4rem)
    1.5rem;
}

.footer-line {
  display: flex;
  flex-wrap: wrap;

  gap:
    0.25rem
    0.8rem;

  margin: 0;

  font-size: clamp(0.68rem, 1vw, 0.78rem);
  font-weight: 300;
  line-height: 1.55;
}

.footer-foundation {
  color: rgba(176, 120, 237, 0.75);
}

.footer-address,
.footer-krs {
  color: rgba(183, 236, 52, 0.75);
}

.footer-rights,
.footer-copyright {
  color: rgba(177, 187, 150, 0.75);
}


/* =========================================================
   MNIEJSZE DESKTOPY / DUŻE TABLETY
   ========================================================= */

@media (max-width: 1200px) {

  .intro-logo-picture {
    width: clamp(14rem, 27vw, 22rem);
    max-width: 34vw;
  }

  .hero {
    width: min(100%, 39rem);
    margin-left: 0;
  }

}


/* =========================================================
   TABLETY / iPAD
   ========================================================= */

@media (max-width: 1024px) {

  .site-content {
    align-items: center;

    padding:
      clamp(8rem, 15vh, 10rem)
      clamp(1.75rem, 5vw, 3rem)
      3rem;
  }

  .intro-logo-picture {
    top: 1.75rem;
    right: 1.75rem;

    width: clamp(13rem, 31vw, 19rem);
    max-width: 38vw;
  }

  .hero {
    width: min(100%, 36rem);
    margin-left: 0;
  }

}


/* =========================================================
   TELEFONY

   Dopiero tutaj wymuszamy:

   Pozostańmy
   w kontakcie!
   ========================================================= */

@media (max-width: 700px) {

  .site-content {
    align-items: flex-start;

    padding:
      8.5rem
      1.35rem
      2.5rem;
  }

  .intro-logo-picture {
    top: 1.2rem;
    right: 1.2rem;

    width: min(55vw, 14rem);
    max-width: none;
  }

  .hero {
    width: min(100%, 31rem);
    margin: 0;
  }

  .contact {
    margin-top: 1.4rem;
    margin-left: 2.9%;
  }

  .contact-title {
    font-size: clamp(1.7rem, 8vw, 2.5rem);
    white-space: normal;
  }

  .contact-break {
    display: initial;
  }

  .contact-email {
    font-size: 1rem;
  }

  .site-footer {
    padding:
      1rem
      1.35rem
      1.4rem;
  }

  .footer-line {
    display: grid;
    gap: 0.15rem;
  }

}


/* =========================================================
   MAŁE TELEFONY — np. iPhone SE
   ========================================================= */

@media (max-width: 420px) {

  .site-content {
    padding:
      7.5rem
      1.15rem
      2rem;
  }

  .intro-logo-picture {
    top: 1rem;
    right: 1rem;

    width: min(58vw, 12rem);
  }

  .site-footer {
    padding-inline: 1.15rem;
  }

  .footer-line {
    font-size: 0.68rem;
  }

}