/* =============================================================================
   FLUID TYPOGRAPHY
   ============================================================================= */

:root {
  --font-from:   16;
  --font-to:     16;
  --vw-from:     calc(1920 / 100);
  --vw-to:       calc(2480 / 100);
  --coefficient: calc((var(--font-to) - var(--font-from)) / (var(--vw-to) - var(--vw-from)));
  --base:        calc((var(--font-from) - var(--vw-from) * var(--coefficient)) / 16);
}

html {
  font-size: calc(var(--base) * 1rem + var(--coefficient) * 1vw);
}

@media screen and (max-width: 1920px) {
  :root {
    --font-from: 12;
    --font-to:   16;
    --vw-from:   calc(1360 / 100);
    --vw-to:     calc(1920 / 100);
  }
}

@media screen and (max-width: 1360px) {
  :root {
    --font-from: 12;
    --font-to:   12;
    --vw-from:   calc(991 / 100);
    --vw-to:     calc(1360 / 100);
  }
}

@media screen and (max-width: 991px) {
  :root {
    --font-from: 12;
    --font-to:   16;
    --vw-from:   calc(768 / 100);
    --vw-to:     calc(991 / 100);
  }
}

@media screen and (max-width: 768px) {
  :root {
    --font-from: 10;
    --font-to:   14;
    --vw-from:   calc(479 / 100);
    --vw-to:     calc(768 / 100);
  }
}

@media screen and (max-width: 479px) {
  :root {
    --font-from: 10;
    --font-to:   16;
    --vw-from:   calc(1 / 100);
    --vw-to:     calc(479 / 100);
  }
}


/* =============================================================================
   WEBFLOW OVERRIDES
   ============================================================================= */

button {
  padding: 0;
  background: transparent;
  background-color: transparent;
}

/* Webflow nav overlay — keep visible for custom dropdown */
#navbar .w-nav-overlay {
  overflow: visible;
}


/* =============================================================================
   RICH TEXT
   ============================================================================= */

/* Remove top margin on first child */
.w-richtext > :first-child,
.w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

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


/* =============================================================================
   TEXT UTILITIES
   ============================================================================= */

[data-text='truncate'] {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-text='truncate-2-lines'] {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

[data-text='truncate-3-lines'] {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}


/* =============================================================================
   VISIBILITY UTILITIES
   ============================================================================= */

.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .hide-tablet {
    display: none !important;
  }
}

@media screen and (max-width: 767px) {
  .hide-mobile-landscape {
    display: none !important;
  }
}

@media screen and (max-width: 479px) {
  .hide-mobile, [data-hide='mobile'] {
    display: none !important;
  }
}

/* Hide empty elements */
[empty='hide']:empty,
.cta_row:empty,
.better-workplace--cta_row:empty,
.grid-heading:empty,
.better-workplace--grid-heading:empty {
  display: none;
}

/* ─────────────────────────────────────────────────────────
   Background color tokens
   Selector pattern: [data-bg-color="<name>"]

   default   – neutral warm white  (home)
   mint      – cool sage           (fabryka)
   sky       – violet blue         (prezenty)
   peach     – warm amber          (kawa)
   lime      – vivid green         (owoce)
   lavender  – soft purple         (dietetyka)
   blue      – pink-blue           (kontakt)
───────────────────────────────────────────────────────── */

/* Shared radial stops used across multiple themes */
/* green-top-left  : radial 81% 46% at 10% 7%  → rgba(195, 255, 146, …) */
/* green-top-right : radial 69% 65% at 88% 8%  → rgba(213, 255, 154, …) */

[data-bg-color="default"] {
  background:
    radial-gradient(81% 46% at 10% 7%,
      rgba(195, 255, 146, 0.05) 0%,
      rgba(195, 255, 146, 0.00) 100%),
    radial-gradient(69% 65% at 88% 8%,
      rgba(213, 255, 154, 0.05) 0%,
      rgba(231, 255, 198, 0.00) 100%),
    linear-gradient(180deg,
      #FFF 0%,
      #FFF4E3 100%);
  background-blend-mode: plus-lighter, exclusion, normal;
}

[data-bg-color="mint"] {
  /* strona – fabryka */
  background:
    radial-gradient(92% 110% at 85% 144%,
      rgba(255, 245, 138, 0.60) 0%,
      rgba(255, 245, 138, 0.00) 100%),
    radial-gradient(81% 46% at 10% 7%,
      rgba(242, 246, 245, 0.05) 0%,
      rgba(242, 246, 245, 0.00) 100%),
    radial-gradient(69% 65% at 88% 8%,
      rgba(242, 246, 245, 0.05) 0%,
      rgba(231, 255, 198, 0.00) 100%),
    linear-gradient(180deg,
      #FFF 0%,
      #F2F6F5 100%);
  background-blend-mode: normal, plus-lighter, exclusion, normal;
}

[data-bg-color="sky"] {
  /* strona – prezenty */
  background:
    radial-gradient(105% 91% at 15% 99%,
      rgba(217, 237, 255, 0.30) 0%,
      rgba(219, 238, 255, 0.00) 100%),
    radial-gradient(92% 110% at 85% 144%,
      rgba(219, 232, 255, 0.60) 0%,
      rgba(170, 201, 255, 0.00) 100%),
    radial-gradient(81% 46% at 10% 7%,
      rgba(195, 255, 146, 0.05) 0%,
      rgba(195, 255, 146, 0.00) 100%),
    radial-gradient(69% 65% at 88% 8%,
      rgba(213, 255, 154, 0.05) 0%,
      rgba(231, 255, 198, 0.00) 100%),
    linear-gradient(180deg,
      #FFF 0%,
      #F9FBFF 100%);
  background-blend-mode: normal, normal, plus-lighter, exclusion, normal;
}

[data-bg-color="peach"] {
  /* strona – kawa */
  background:
    radial-gradient(105% 91% at 15% 99%,
      rgba(217, 237, 255, 0.30) 0%,
      rgba(219, 238, 255, 0.00) 100%),
    radial-gradient(92% 110% at 85% 144%,
      rgba(255, 206, 138, 0.60) 0%,
      rgba(255, 189, 138, 0.00) 100%),
    radial-gradient(81% 46% at 10% 7%,
      rgba(195, 255, 146, 0.05) 0%,
      rgba(195, 255, 146, 0.00) 100%),
    radial-gradient(69% 65% at 88% 8%,
      rgba(213, 255, 154, 0.05) 0%,
      rgba(231, 255, 198, 0.00) 100%),
    linear-gradient(180deg,
      #FFF 0%,
      #FFF4E3 100%);
  background-blend-mode: normal, normal, plus-lighter, exclusion, normal;
}

[data-bg-color="lime"] {
  /* strona – owoce */
  background:
    radial-gradient(81% 46% at 10% 7%,
      rgba(195, 255, 146, 0.05) 0%,
      rgba(195, 255, 146, 0.00) 100%),
    radial-gradient(69% 65% at 88% 8%,
      rgba(213, 255, 154, 0.05) 0%,
      rgba(231, 255, 198, 0.00) 100%),
    linear-gradient(180deg,
      #FFF 0%,
      #F3FFD2 100%);
  background-blend-mode: plus-lighter, exclusion, normal;
}

[data-bg-color="lavender"] {
  /* strona – dietetyka */
  background:
    radial-gradient(105% 91% at 15% 99%,
      rgba(255, 245, 217, 0.60) 0%,
      rgba(255, 245, 217, 0.00) 100%),
    radial-gradient(81% 46% at 10% 7%,
      rgba(195, 255, 146, 0.05) 0%,
      rgba(195, 255, 146, 0.00) 100%),
    radial-gradient(69% 65% at 88% 8%,
      rgba(213, 255, 154, 0.05) 0%,
      rgba(231, 255, 198, 0.00) 100%),
    linear-gradient(180deg,
      #FFF 0%,
      #EDE3FF 100%);
  background-blend-mode: normal, plus-lighter, exclusion, normal;
}

[data-bg-color="blue"] {
  /* strona – kontakt */
  background:
    radial-gradient(68% 85% at 2% -14%,
      rgba(255, 148, 241, 0.10) 0%,
      rgba(255, 255, 255, 0.00) 100%),
    radial-gradient(31% 44% at 27% -24%,
      rgba(255, 148, 241, 0.10) 0%,
      rgba(255, 255, 255, 0.00) 100%),
    radial-gradient(204% 130% at 110% -19%,
      rgba(109, 180, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.00) 100%),
    #EEF8FF;
}


/* =============================================================================
   SCROLLBAR
   ============================================================================= */
   
[scrollbar='hide'],
.overflow-x {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

[scrollbar='hide']::-webkit-scrollbar,
.overflow-x::-webkit-scrollbar {
  display: none;
}

[scrollbar='margin-last'] > :last-child {
  padding-right: var(--better-workplace_dimensions-tokens---spacing--sp-3xl);
}

@media screen and (max-width: 480px) {
  [scrollbar='margin-last'] > :last-child {
    padding-right: var(--better-workplace_dimensions-tokens---spacing--sp-lg);
  }
}


/* =============================================================================
   GRID
   ============================================================================= */

[data-grid-col='1'] { grid-column: 1; }
[data-grid-col='2'] { grid-column: 2; }
[data-grid-col='3'] { grid-column: 3; }

@media screen and (min-width: 1600px) {
  .grid-2.xl-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .grid-3.xl-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  [data-grid-xl-col='1'] { grid-column: 1; }
  [data-grid-xl-col='2'] { grid-column: 2; }
  [data-grid-xl-col='3'] { grid-column: 3; }
}

@media screen and (min-width:1600px) {

	#w-node-_616df9b1-b87d-b51b-eb73-60916e7c4e62-6e7c4e5f,
	#w-node-_616df9b1-b87d-b51b-eb73-60916e7c4e62-6e7c4e5f:where(.w-variant-a8b2203a-b29b-1dd1-9807-e07e86f5125b) {
		align-self: stretch
	}

	#w-node-efffa577-60bc-dc91-1dff-98e62f72c2c7-2f72c2c6:where(.w-variant-cc46c0f2-8548-738b-9113-25aa3051f817) {
		grid-column: span 3/span 3
	}

	#w-node-e3516f1b-7c14-4ed1-e9bf-4dbd6b0b2221-d10bafb2,
	#w-node-e3516f1b-7c14-4ed1-e9bf-4dbd6b0b2221-6a295bd5,
	#w-node-e3516f1b-7c14-4ed1-e9bf-4dbd6b0b2221-124551fd,
	#w-node-e3516f1b-7c14-4ed1-e9bf-4dbd6b0b2221-3d392917,
	#w-node-e3516f1b-7c14-4ed1-e9bf-4dbd6b0b2221-373eaa8a,
	#w-node-e3516f1b-7c14-4ed1-e9bf-4dbd6b0b2221-7fbb8dd7,
	#w-node-e3516f1b-7c14-4ed1-e9bf-4dbd6b0b2221-4a7a2d90,
	#w-node-e3516f1b-7c14-4ed1-e9bf-4dbd6b0b2221-93f8c1ed,
	#w-node-e3516f1b-7c14-4ed1-e9bf-4dbd6b0b2221-34dc657e,
	#w-node-e3516f1b-7c14-4ed1-e9bf-4dbd6b0b2221-c9d7f98a {
		grid-area: span 1/span 3/span 1/span 3
	}
}

@media screen and (min-width:1600px) {

	.better-workplace--card-spacer,
	.better-workplace--card-spacer:where(.w-variant-cad397a5-36cc-cd1d-d2ab-6811b5ab7a27) {
		display: block
	}

	.better-workplace--card-spacer:where(.w-variant-7279aea9-4810-bbcf-f590-9f266a42d390) {
		display: none
	}

	.better-workplace--footer_grid {
		grid-template-columns: 1fr 1fr 1fr
	}

	.better-workplace--overflow-x {
		-webkit-mask-image: linear-gradient(90deg, #0000, #000 4rem calc(100% - 4rem), #0000);
		mask-image: linear-gradient(90deg, #0000, #000 4rem calc(100% - 4rem), #0000)
	}

	.better-workplace--overflow-x:where(.w-variant-03d52acb-0005-3cce-44d6-bd845504fb4b) {
		grid-template-columns: 1fr 1fr 1fr 1fr
	}

	.better-workplace--form_field-label.better-workplace--is-bg-orange {
		font-size: var(--better-workplace_typography-primitives---font-size--font-sm)
	}

	.better-workplace--text-size-sm,
	.better-workplace--form_input.better-workplace--is-bg-orange {
		font-size: var(--better-workplace_typography-primitives---font-size--font-md)
	}

	.better-workplace--marquee_img-1 {
		width: 6rem;
		height: 4rem
	}

	.better-workplace--marquee_img-2 {
		width: 8rem;
		height: 4rem
	}

	.better-workplace--marquee_img-3 {
		width: 10rem
	}

	.better-workplace--slide {
		flex: 0 0 calc(40% - .6rem)
	}

	.better-workplace--slide.better-workplace--width-50 {
		flex: 0 0 33%
	}

	.better-workplace--card_bg-img {
		min-height: 25rem
	}

	.better-workplace--image:where(.w-variant-282bf15c-51bb-68f9-2e65-6f500eb4f1f1) {
		border-top-right-radius: 6rem;
		border-bottom-right-radius: 8rem
	}

	.better-workplace--hover-info_component {
		padding-right: 46rem
	}

	.better-workplace--hover-info_img {
		right: 10rem
	}

	.better-workplace--grid-img_wide-img-wrapper {
		aspect-ratio: 10/6;
		grid-column: span 3
	}

	.heading-style-subheading {
		--better-workplace_typography-tokens---font-family: var(--better-workplace_typography-primitives---font--body-family);
		--better-workplace_typography-tokens---text-color: var(--better-workplace---brand--orange);
		--better-workplace_typography-tokens---font-size: var(--better-workplace_dimensions-tokens---size--size-sm);
		--better-workplace_typography-tokens---line-height: var(--better-workplace_typography-primitives---line-height--150);
		--better-workplace_typography-tokens---font-weight: 700;
		--better-workplace_typography-tokens---letter-spacing: var(--better-workplace_typography-primitives---letter-spacing--0-01);
		--better-workplace_typography-tokens---text-transform: var(--better-workplace_typography-primitives---text-transform--uppercase)
	}

	.flex-col.space-between {
		height: 100%
	}

	.form_field-wrapper.padding-0 {
		padding: var(--better-workplace_dimensions-tokens---spacing--sp-none)
	}

	.form_checkbox-label.text-size-xs {
		font-size: var(--better-workplace_typography-primitives---font-size--font-sm)
	}

	.contact_grid {
		grid-template-columns: 6fr 6fr
	}

	.image-2:where(.w-variant-282bf15c-51bb-68f9-2e65-6f500eb4f1f1) {
		border-top-right-radius: 6rem;
		border-bottom-right-radius: 8rem
	}

	.image-2.aline-strech.orange-4 {
		object-fit: cover
	}

	.image-3:where(.w-variant-282bf15c-51bb-68f9-2e65-6f500eb4f1f1) {
		border-top-right-radius: 6rem;
		border-bottom-right-radius: 8rem
	}

	.form_message_text.newsletter-3 {
		width: 18rem
	}
}


/* =============================================================================
   SLIDER
   ============================================================================= */

[data-slider-width] {
  align-self: stretch;
  height: auto;
  display: flex;
  user-select: none;
  scroll-snap-align: start;
  scroll-margin-left: 0;
  min-width: 0;
  flex: 0 0 calc((100% - 0.5rem) / 2.5);
}

/* [data-slider-width] > * {
  width: 100%;
  height: 100%;
} */

/* 4 items */
[data-slider-width='25'] { flex: 0 0 calc((100% - 0.5rem * 3) / 4)     } 
/* 3 items */
[data-slider-width='33'] { flex: 0 0 calc((100% - 0.5rem * 2) / 3)     } 
/* 2.5 items */
[data-slider-width='40'] { flex: 0 0 calc((100% - 0.5rem * 1) / 2.5)   } 
/* 2 items */
[data-slider-width='50'] { flex: 0 0 calc((100% - 0.5rem * 1) / 2)     } 
/* 1.5 items */
[data-slider-width='66'] { flex: 0 0 calc((100% - 0.5rem * 2) / 3 * 2) } 
/* 1.33 items */
[data-slider-width='75'] { flex: 0 0 calc((100% - 0.5rem * 3) / 4 * 3) } 

@media (min-width: 1600px) {
  /* 4 items */
  [data-slider-width='25'] { flex: 0 0 calc((100% - 0.5rem * 3) / 4)     } 
  /* 3 → 4 items */
  [data-slider-width='33'] { flex: 0 0 calc((100% - 0.5rem * 2) / 3)     }
  /* 2.5 → 3 items */
  [data-slider-width='40'] { flex: 0 0 calc((100% - 0.5rem * 2) / 3)     } 
  /* 2 → 1.5 items */
  [data-slider-width='50'] { flex: 0 0 calc((100% - 0.5rem * 2) / 3)     } 
  /* 1.5 → 2 items */
  [data-slider-width='66'] { flex: 0 0 calc((100% - 0.5rem * 2) / 3 * 2) }  
  /* 1.33 → 1.5 items */
  [data-slider-width='75'] { flex: 0 0 calc((100% - 0.5rem * 3) / 4 * 3) }
}

@media (max-width: 991px) {
  /* 25 → 2 items (50%) */
  [data-slider-width='25'] { flex: 0 0 calc((100% - 0.5rem * 1) / 2) }
  /* 33 → 2 items (50%) */
  [data-slider-width='33'] { flex: 0 0 calc((100% - 0.5rem * 1) / 2) }
  /* 40 → ~1.25 items (80%) */
  [data-slider-width='40'] { flex: 0 0 calc((100% - 0.5rem * 1) / 1.25) }
  /* 50 → ~1.25 items (80%) */
  [data-slider-width='50'] { flex: 0 0 calc((100% - 0.5rem * 1) / 1.25) }
  /* 66 → ~1.25 items (80%) */
  [data-slider-width='66'] { flex: 0 0 calc((100% - 0.5rem * 1) / 1.25) }
  /* 75 → 1 item (100%) */
  [data-slider-width='75'] { flex: 0 0 100% }
}

@media (max-width: 767px) {
  /* bigger gap */
  [data-slider-width='25'] { flex: 0 0 calc((100% - 4rem))             }
  [data-slider-width='33'] { flex: 0 0 calc((100% - 4rem))             }
  /* smaller gap */
  [data-slider-width='40'] { flex: 0 0 calc((100% - 2.75rem))            }
  [data-slider-width='50'] { flex: 0 0 calc((100% - 2.75rem))            }
  [data-slider-width='66'] { flex: 0 0 calc((100% - 2.75rem))            }
  [data-slider-width='75'] { flex: 0 0 calc((100% - 2.75rem))            }

  :is([data-slider-width='25'], [data-slider-width='33']):last-child {
        margin-right: 3.5rem;
      }
  :is([data-slider-width='40'], [data-slider-width='50']
      [data-slider-width='66'], [data-slider-width='75']):last-child {
        margin-right: 1.25rem;
      }
}

/* Hide prev/next buttons for tablet */
@media (max-width: 991px) {
  [data-slider='wrapper'] [data-action='prev'],
  [data-slider='wrapper'] [data-action='next'] {
    display: none;
  }
}

/* Disabled state */
.disabled {
  opacity: 0.5;
  pointer-events: none;
}


/* =============================================================================
   ACCORDION
   ============================================================================= */

[aria-expanded='true'] [data-accordion='icon'] {
  transform: scaleY(-1);
}


/* =============================================================================
   BREADCRUMB
   ============================================================================= */

/* Hide arrow after the active (last) breadcrumb link */
[data-breadcrumb='link'] .w--current + svg {
  display: none;
}


/* =============================================================================
   BIG INFO ANIMATION
   ============================================================================= */

[data-animation='text-display'] [data-animation='miniature']:first-child { margin-left: 0; }
[data-animation='text-display'] [data-animation='miniature']:last-child  { margin-right: 0; }


/* =============================================================================
   BUTTONS
   ============================================================================= */

/* Button min-width override at tablet */
@media (max-width: 991px) {
  [data-wf--better-workplace--button-link--size="md-mb-sm"] > div {
    min-width: auto;
  }
}

[data-wf--better-workplace--button--size='md-mb-sm'] a {
  min-width: auto;
}

/* Remove focus outline on button background (handled elsewhere) */
.better-workplace--button:focus-within .better-workplace--button_bg,
.better-workplace--button:focus        .better-workplace--button_bg {
  display: none;
}

/* =============================================================================
   CARD HOVER ANIMATION
   ============================================================================= */

[data-animation="link-hover"] {
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media (min-width: 992px) {
  [data-animation="link-hover-wrapper"]:hover [data-animation="link-hover"] {
    opacity: 1;
  }
}

/* =============================================================================
   NAVBAR
   Two state classes on #navbar, both set by navbar.js:
     .is-scrolled  — scroll layers visible
     .is-open      — mobile menu open
   ============================================================================= */

#navbar {
  transition: padding 0.35s ease-in-out;
}

#navbar.is-scrolled {
  padding: 0;
  transition: padding 0.3s ease-out;
}


/* ── Scroll layers ────────────────────────────────────────────────────────── */

#navbar_bg,
#navbar_sh {
  opacity: 0;
  transition-delay: 0.2s;
  transition: opacity 0.3s ease-out;
}

.is-scrolled #navbar_bg,
.is-scrolled #navbar_sh {
  opacity: 1;
  transition-delay: 0;
  transition: opacity 0.3s ease-in;
}


/* ── Hamburger button ─────────────────────────────────────────────────────── */

[data-navbar="menu-button"] {
  transition: transform 0.5s ease;
}

[data-navbar="menu-button"].is-open {
  transform: scale(0.92);
}

[data-navbar="menu-button"] svg {
  width: 32px;
  height: 32px;
  overflow: visible;
}

[data-navbar="menu-button"] line {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity   0.25s ease;
}

[data-navbar="menu-button"].is-open [data-navbar="ln-top"] {
  transform: translateY(6px) rotate(45deg);
}

[data-navbar="menu-button"].is-open [data-navbar="ln-mid"] {
  opacity: 0;
  transform: scaleX(0);
  transition:
    transform 0.2s cubic-bezier(0.55, 0, 1, 0.45),
    opacity   0.2s ease;
}

[data-navbar="menu-button"].is-open [data-navbar="ln-bot"] {
  transform: translateY(-6px) rotate(-45deg);
}


/* ── Menu dropdown ────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  [data-navbar="menu"] {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease  
  }

  #navbar.is-open [data-navbar="menu"] {
    transform: translateY(0%);
    opacity: 1;
    pointer-events: auto;
    transition: transform 0.25s ease
  }
}