/* ==========================================================================
   8-Point Spacing System (with 4px base unit)
   ==========================================================================

   Use spacing values in multiples of 4px (ideally 8px) for layout rhythm.
   --------------------------------------------------------------------------

   Token         Value    Use Case / Notes
   --------------------------------------------------------------------------
   --space-0     0px      No space
   --space-1     4px      Tiny gaps, icon padding
   --space-2     8px      Base unit, standard gap
   --space-3     12px     Minor spacing (in-between sizes)
   --space-4     16px     Body padding, small gaps
   --space-5     24px     Card padding, group spacing
   --space-6     32px     Section spacing (mobile/tablet)
   --space-7     40px     Larger section spacing
   --space-8     48px     Section-to-section spacing
   --space-9     64px     Wide spacing (desktop)
   --space-10    80px     Hero/header layout spacing
   --space-11    96px     Banner space
   --space-12    128px    Largest whitespace, 4K layout edge gutters

/* ==========================================================================
   Minor Third Font Scale (Base size: 16px)
   ==========================================================================

   Uses a ~1.2x ratio for consistent and readable typographic hierarchy.
   --------------------------------------------------------------------------

   Token         Size      Use Case
   --------------------------------------------------------------------------
   --text-xs     12.8px    Captions, legal, fine print
   --text-sm     15.36px   Subtext, form labels
   --text-base   16px      Body text
   --text-md     19.2px    Large body, paragraph lead
   --text-lg     23.04px   Section subtitles, strong labels
   --text-xl     27.65px   Card titles, minor headlines
   --text-2xl    33.18px   H4–H3 range
   --text-3xl    39.81px   H2
   --text-4xl    47.77px   H1
   --text-5xl    57.32px   Hero, intro headlines

/* ==========================================================================
   Responsive Guidelines (Breakpoints)
   ==========================================================================

   Adjust spacing/font usage based on viewport width.
   --------------------------------------------------------------------------

   mobile        < 480px      Use space 1–6, text xs–lg
   tablet        481–768px    Use space 2–8, text sm–2xl
   small desktop 769–1280px   Use space 3–9, text base–3xl
   large desktop 1281–1920px  Use space 4–10, text lg–4xl
   4K monitors   > 1920px     Use space 5–12, text xl–5xl
*/

/* ==========================================================================
   Fonts
   ==========================================================================*/

/* headers - clash-grotesk */
/* body - clash-general */

/* ==========================================================================
   Colors
   ==========================================================================*/

/* primary-hover:- #62806A */
/* primary: #455a4a */
/* Secondary -  #7f7362*/
/* headers - #191714 */
/* text - #403a31*/
/* side text - #4c453b */
/* background #f2f1ef */
/* borders: #a59d91 */

@import url(clash-grotesk.css);
@import url(general-sans.css);
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit; /* or specific sizes */
}

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

html {
  font-size: 62.5%;
  font-family: GeneralSans-Medium, sans-serif;
  color: #403a31;
  scroll-behavior: smooth;
}

body {
  font-size: 1.6rem;
  background-color: #f2f1ef;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  margin: 2.5% 5%;
  flex: 1;
}
button {
  background: none;
}
/* ==========================================================================
  Header
  ==========================================================================*/
.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #f2f1ef;
  z-index: 200;
  padding: 1.6rem;
}

.site-logo {
  position: relative;
  z-index: 210;
  display: inline-block;
}
.site-logo .logo-img {
  width: clamp(20rem, 50vw, 25rem);
  height: auto;
}

.site-logo .logo-img {
  min-width: 20rem;
  height: auto;
}
.navigation {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 20vh 10% 10%;
  gap: 15vh;
  background: #f2f1efc3;
  backdrop-filter: blur(15px);
  z-index: 100;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
.navigation.nav-show {
  transform: translateX(0);
}

.nav-list {
  margin-top: 25%;
  font-size: 2.304rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5vh;
  list-style: none;
}
.nav-item {
  color: #403a31;
  text-decoration: none;
}

.nav-links-social ul {
  list-style: none;
  display: flex;
  gap: 2.4rem;
}
.nav-social-item {
  width: 4rem;
  border-radius: 50%;
  transition: all 0.1s;
}
.nav-social-item:hover {
  transform: scale(1.1);
}

.btn-offer,
.nav-item:link,
.nav-item:visited {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  transition: all 300ms;
}
.nav-item:link,
.nav-item:visited {
  color: #403a31;
}
.nav-item:hover,
.nav-item:active {
  color: #7f7362;
}

.btn-mobile-nav {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  border: none;
  background: none;
  cursor: pointer;

  z-index: 110;
  line-height: 0;
}
.btn-mobile-nav .icon-close {
  display: none;
}
.btn-mobile-nav[aria-expanded="true"] .icon-hamburger {
  display: none;
}
.btn-mobile-nav[aria-expanded="true"] .icon-close {
  display: inline;
}

.icon-hamburger,
.icon-close {
  color: #403a31;
  width: 3.8rem;
  height: 3.8rem;
}
/* ==========================================================================
   Hero
   ==========================================================================*/
.hero-container {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  margin-bottom: 6.4rem;
}

.btn-hero {
  margin-top: 4.8rem;
}

.heading-subpage,
.heading-primary {
  color: #191714;
  letter-spacing: -0.05rem;
  font-family: GeneralSans-Semibold;
  margin-top: 9.6rem;
  font-size: 2.765rem;
  line-height: 1.2;
}

.heading-primary-content {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.heading-secondary {
  text-align: start;
  color: #191714;
  letter-spacing: -0.02rem;
  font-family: GeneralSans-Semibold;
  font-size: 3.318rem;
  line-height: 1.2;
}
.heading-tertiary {
  color: #191714;
  font-family: GeneralSans-Semibold;
  /* margin-bottom: 0.8rem; */
  font-size: 2.304rem;
  line-height: 1.3;
}

.btn {
  background-color: #455a4a;
  color: #f2f1ef;
  padding: 1.6rem 2.4rem;
  border-radius: none;
  border: none;
  font-family: GeneralSans-Semibold;
}
.btn-submit {
  width: 30vw;
  letter-spacing: 0.1rem;
  align-self: center;
  transition: all 300ms;
  max-width: 30rem;
  margin-bottom: 1.6rem;
}
.btn:hover {
  background-color: #62806a;
  cursor: pointer;
}
.img-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8rem;
  margin-top: 8rem;
}
.img-hero {
  object-fit: cover;
  max-width: 100%;
}

.section-container,
.subsection-container {
  padding: 1.6rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  margin-bottom: 4.8rem;
}

.subsection-container .heading-secondary {
  margin-bottom: 2.4rem;
}

.text-main {
  font-size: 1.902rem;
  line-height: 1.6;
}

.img-section {
  width: 100%;
  height: auto;
  aspect-ratio: 2/3;
  object-fit: cover;
  max-width: 60rem;
}
.steps .heading-secondary {
  margin-bottom: 1.6rem;
}
.step {
  display: flex;
  flex-direction: column;
  padding: 0 1.6rem 1.6rem 1.6rem;
  gap: 0.8rem;
}
.step .heading-tertiary {
  margin-bottom: 0.8rem;
}
.step-icon {
  width: 3.2rem;
  height: 3.2rem;
}
.section-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0 1.6rem;
  margin-top: 0.8rem;
}

/* ==========================================================================
  Form
   ==========================================================================*/
.form-heading {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
/* new */
.form-heading > * {
  min-width: 0;
}

.form-heading .text-wrapper {
  flex: 1 1 0;
}
/* ///////////// */
.form-section .heading-secondary {
  margin-bottom: 2.4rem;
}

.form-section .text-main {
  margin-bottom: 2.4rem;
}

.form-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr auto;
  justify-items: center;
  gap: 2.4rem;
}
.img-form {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  max-width: 60rem;
  margin-bottom: 3.2rem;
}
/* for safari */
.img-form {
  flex: 0 1 28rem;
  max-width: 100%;
}
/*///////////// */
.form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.form label {
  font-weight: 600;
  margin-top: 0.8rem;
  font-size: 1.6rem;
}
.form select,
.form input,
.form textarea {
  font-family: GeneralSans-Medium, sans-serif;

  color: #191714;
  height: 3.2rem;

  background-color: #f2f1ef;
  border: 1px solid #a59d91;
  box-shadow: none;
  font-size: 1.526rem;
  line-height: 1;
  padding: 0.4rem;
}
.side-text {
  color: #4c453b;
  font-size: 1.28rem;
}

.form textarea {
  min-height: 9.6rem;
  margin-bottom: 1.6rem;
}

.form input:focus,
.form textarea:focus {
  outline: none;
  background-color: #f2f1ef;
  border: 2px solid #7f7362;
}

.privacy-policy-note {
  color: #4c453b;
  font-size: 1.024rem;
  margin-bottom: 2.4rem;
}
.privacy-policy-note a:link,
.privacy-policy-note a:visited {
  color: #4c453b;
}

.form-status {
  font-size: 1.92rem;
  font-weight: bold;
  line-height: 1.6;
}
/* ==========================================================================
  Form spinner
   ==========================================================================*/
.spinner {
  display: inline-block;
  width: 1.92rem;
  height: 1.92rem;
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: #403a31;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  vertical-align: middle;
  margin-left: 8px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
  Footer
   ==========================================================================*/
footer {
  background-color: #d9d5d0;
  padding: 2.4rem 1.6rem 0.8rem 1.6rem;
  margin-top: 9.6rem;
  column-gap: 0.8rem;
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto;
  row-gap: 1.6rem;
  column-gap: 0.8rem;
  align-content: center;
  justify-content: center;
}
.footer-logo {
  grid-column: 1/3;
  grid-row: 1/2;
  width: 100%;
  align-self: end;
  max-width: 30rem;
}

.footer-links-social {
  grid-column: 2/3;
  grid-row: 1/3;
}

.footer-links-social ul {
  list-style: none;
  display: flex;
  justify-content: end;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.footer-contact {
  grid-column: 1/2;
  grid-row: 2/3;
}

.contacts {
  margin-top: 1.6rem;
  text-decoration: none;
}
.footer-link:link,
.footer-link:visited {
  text-decoration: none;
  color: #403a31;
}
.copyright {
  grid-column: 1/3;
  grid-row: 4/5;
  width: 100%;
  font-size: 1.28rem;
}
.copyright p {
  text-align: start;
}

.footer-links-social a {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.footer-social-item {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.footer-social-item:hover {
  transform: scale(1.1);
}

/* ==========================================================================
   Privacy Policy
   ==========================================================================*/
.intro-text {
  font-size: 1.92rem;
  line-height: 1.6;
}

.container-text-subpage {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0 2.4rem 2.4rem 2.4rem;
  gap: 1.6rem;
  margin: 2.4rem auto 1.6rem auto;
  max-width: 925px;
  /* margin-top: 2.4rem;
  margin-bottom: 1.6rem; */
}
.container-text-subpage .heading-tertiary {
  margin-top: 2.4rem;
  margin-bottom: 1.6rem;
}
.container-text-subpage,
.container-text-subpage .text-main {
  font-size: 1.6rem;
  line-height: 1.6;
}

.container-text-subpage .firm-info {
  list-style-type: none;
  list-style: none;
  display: flex;
  flex-direction: column;
  /* gap: 0.4rem; */
  margin-top: 0.4rem;
}

.container-text-subpage ul li {
  font-size: 1.536rem;
  line-height: 2;
}

.user-rights {
  line-height: 1.2;
  padding: 1.6rem;
  list-style: none;
}
.container-text-subpage ol li::marker {
  font-size: 2.304rem;
  padding-right: 1.6rem;
}

.container-text-subpage a:link,
.container-text-subpage a:visited {
  color: #403a31;
}

/* ==========================================================================
   Projects and gardens menu page
   ==========================================================================*/
.heading-designs,
.heading-gardens {
  margin-bottom: 2.4rem;
}

.gallery-container {
  margin-bottom: 4.8rem;
  padding: 0 1.6rem 1.6rem 1.6rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
}

.designs-thumbnail,
.gardens-thumbnail {
  position: relative;
  display: block;
  width: 100%;
  text-decoration: none; /* removes underline */
  color: inherit; /* keeps text color consistent */
  overflow: hidden;
  line-height: 0; /* prevents extra space below images */
}

.designs-thumbnail img,
.gardens-thumbnail img {
  transition: all 0.5s;
  display: block;
  width: 100%;
  height: auto;
}

/* Text overlay */
.thumb-text {
  font-family: GeneralSans-Medium, sans-serif;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: #26221d;
  color: #f2f1ef;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: left;
  padding: 0.8rem;
  width: 100%;
  height: auto;
  z-index: 3;
  pointer-events: none; /* text doesn't block link clicks */
  white-space: pre-line;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.designs-thumbnail img:hover,
.gardens-thumbnail img:hover {
  transform: scale(1.03);
}

.designs-thumbnail:hover .thumb-text,
.gardens-thumbnail:hover .thumb-text {
  background-color: #7f7362;
}

/* ==========================================================================
   Gallery individual
   ==========================================================================*/
.gallery-heading {
  display: grid;
  grid-template-columns: 1fr;
}

.img-gallery-border {
  overflow: hidden;
}

.gallery-img {
  width: 100%;
  cursor: pointer;
  transition: all 0.3s;
}

.gallery-container .gallery-img:hover {
  transform: scale(1.03);
}

.previous-link:link,
.previous-link:visited {
  margin-top: 2.4rem;
  text-decoration: none;
  color: #455a4a;
  font-size: 1.92rem;
  justify-self: end;
}
.previous-link:hover,
.previous-link:active {
  color: #62806a;
}

/* experimental */
#viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  backdrop-filter: blur(15px);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.3s, transform 0.3s;
  overflow: hidden;
}

#viewer.show {
  opacity: 1;
  transform: scale(1);
}

#viewer-media {
  width: 90%;
  height: auto;
  max-width: 90vw;
  display: grid;
  place-items: center;
}

#viewer-media picture,
#viewer-media img {
  display: block;
  max-width: 90%;
  max-height: calc(100dvh - 3.2rem);
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto;
}

#viewer-media picture {
  /* background-color: rgba(92, 92, 92, 0.027); */
  backdrop-filter: blur(20px);
}
#viewer .gallery-img {
  width: auto;
  height: auto;
  transform: none;
  transition: none;
  cursor: default;
}
#viewer button {
  position: absolute;
  top: 50%;
  background: #455a4a;
  color: #f2f1ef;
  border: none;
  font-size: 1.92rem;
  padding: 1rem;
  cursor: pointer;
  transition: transform 0.1s;
}

#viewer button:hover {
  background: #62806a;
}

#prev {
  left: 5vw;
}
#next {
  right: 5vw;
}
.hidden {
  display: none !important;
}
/* ==========================================================================
   Hero Animation
   ==========================================================================*/
/* Typewriter effect 1 */
@keyframes typing {
  1.00%,
  23.00% {
    content: "";
  }
  3.00%,
  22.75% {
    content: "M";
  }
  4.00%,
  22.50% {
    content: "Mi";
  }
  5.00%,
  22.25% {
    content: "Mie";
  }
  6.00%,
  22.00% {
    content: "Mies";
  }
  7.00%,
  21.75% {
    content: "Miesz";
  }
  8.00%,
  21.50% {
    content: "Mieszk";
  }
  9.00%,
  21.25% {
    content: "Mieszka";
  }
  10.00%,
  21.00% {
    content: "Mieszkaj";
  }

  25.00%,
  44.75% {
    content: "";
  }
  27.00%,
  44.50% {
    content: "C";
  }
  28.00%,
  44.25% {
    content: "Ch";
  }
  29.00%,
  44.00% {
    content: "Chi";
  }
  30.00%,
  43.75% {
    content: "Chil";
  }
  31.00%,
  43.50% {
    content: "Chill";
  }
  31.50%,
  43.25% {
    content: "Chillu";
  }
  32.00%,
  43.00% {
    content: "Chilluj";
  }

  46.50%,
  64.00% {
    content: "";
  }
  48.50%,
  63.75% {
    content: "P";
  }
  49.50%,
  63.50% {
    content: "Pr";
  }
  50.50%,
  63.25% {
    content: "Pra";
  }
  51.50%,
  63.00% {
    content: "Prac";
  }
  52.50%,
  62.75% {
    content: "Pracu";
  }
  53.50%,
  62.50% {
    content: "Pracuj";
  }

  66.00%,
  69.00% {
    content: "";
  }
  70.00%,
  85.50% {
    content: "B";
  }
  70.50%,
  85.25% {
    content: "Ba";
  }
  71.00%,
  85.00% {
    content: "Baw";
  }
  73.00%,
  84.75% {
    content: "Baw ";
  }
  74.00%,
  84.50% {
    content: "Baw s";
  }
  75.00%,
  84.25% {
    content: "Baw si";
  }
  75.50%,
  84.00% {
    content: "Baw się";
  }

  86.00%,
  99.00% {
    content: "";
  }
  89.50%,
  98.50% {
    content: "Ż";
  }
  90.00%,
  98.00% {
    content: "Ży";
  }
  90.50%,
  97.50% {
    content: "Żyj";
  }
}

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.typewriter {
  --caret: currentcolor;
}

.typewriter::before {
  content: "";
  animation: typing 15s steps(1, end) infinite;
}

.typewriter::after {
  content: "";
  border-right: 1px solid var(--caret);
  animation: blink 0.75s linear infinite;
}

.typewriter.thick::after {
  border-right: 1ch solid var(--caret);
}

@media (prefers-reduced-motion) {
  .typewriter::after {
    animation: none;
  }

  @keyframes sequencePopup {
    0%,
    100% {
      content: "Mieszkaj";
    }
    20% {
      content: "Chilluj";
    }
    40% {
      content: "Pracuj";
    }
    60% {
      content: "Baw się";
    }
    90% {
      content: "Żyj";
    }
  }

  .typewriter::before {
    content: "Mieszkaj";
    animation: sequencePopup 2s linear infinite;
  }
}