/* Gradient text overrides - loaded AFTER Webflow CSS to ensure precedence */

/* Dark background on the html element fixes Safari's overscroll/rubber-band effect.
   The rubber-band zone is outside the body scroll container and is painted by html.
   We do NOT set this on body — body { background: white } from Webflow CSS must stay
   intact so that sections without explicit backgrounds remain white/light. */
html {
  background-color: #1e1e1e;
}

.home_dlaczego-my_heading.text-background-gradient {
  display: inline-block !important;
  background: linear-gradient(113deg, #F73 -4.11%, #FE69E6 23.13%, #F73 74.3%, #F50 88.83%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-weight: 700 !important;
}

.home_dlaczego-my_image-heading.text-background-gradient-04 {
  display: inline-block !important;
  background: var(--Enig-colour-nowy-gradient4, linear-gradient(111deg, #F73 -3.9%, #F64712 31.65%, #F73 77.68%, #F50 117.37%)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

h2.text-background-gradient-05 {
  display: inline-block !important;
  background: linear-gradient(180deg, rgba(254, 105, 230, 0.50) 0.25%, rgba(255, 122, 74, 0.50) 66.75%, rgba(255, 85, 0, 0.50) 99.75%), linear-gradient(109deg, #FFBC8A 0%, #FF7A4A 26.76%, #F50 58.49%, #FB5C18 74.53%, #F85A15 116.9%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* Prevent navbar links from wrapping between 992px and 1332px.
   Below 992px Webflow switches to the mobile hamburger menu.
   Above 1332px the default 1rem link padding fits comfortably. */
@media screen and (min-width: 992px) and (max-width: 1332px) {
  .navbar_component {
    padding-left: 2%;
    padding-right: 2%;
  }
  .navbar_link {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }
  .navbar_button-wrapper {
    margin-left: 0.5rem;
  }
}

/* webflow.css sets .w-slider { background: #dddddd } and Webflow JS may reinforce it
   via inline style. Force the references slider to be transparent. */
.references-component.w-slider {
  background: transparent !important;
}

/* Hide topbar on mobile — navbar becomes position:fixed and topbar's in-flow height
   would otherwise create a gap between the navbar and first content section */
@media screen and (max-width: 767px) {
  .topbar_component {
    display: none;
  }

  /* Reduce link spacing in mobile menu so SM icons are visible on small screens
     (e.g. iPhone 13 mini). Webflow tablet CSS sets margin-bottom: 3rem which is
     too large when all 5 links + email + SM icons must fit in one viewport. */
  .navbar_link {
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
  }
}

/* Extend footer background into iPhone home indicator safe area.
   Without viewport-fit=cover + this rule, body's white background
   shows as a white bar at the bottom on iOS Safari. */
.footer_component {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

/* Fix "...w zasadzie wszędzie" text overlapping next section on ≤991px.
   .gdzie_last-box-wrapper defaults to position:absolute (Webflow CSS line 4324).
   The position:static override only fires at min-width:1440px, so on smaller
   screens the box floats out of its grid row and bleeds into the next section.
   Also: .gdzie_item-heading.is-full-width keeps 3.3125rem at all mobile sizes
   (no Webflow override) — that wide text overflows its 1fr cell and pushes the
   right grid column wider than the left. Fix: reduce font-size + min-width:0. */
@media screen and (max-width: 991px) {
  .gdzie_last-box-wrapper {
    position: static;
    height: auto;
  }
  .gdzie_item {
    min-width: 0;
  }
  .gdzie_item-heading.is-full-width {
    font-size: 2.25rem;
  }
}

@media screen and (max-width: 767px) {
  .gdzie_item-heading.is-full-width {
    font-size: 2rem;
  }
}

@media screen and (max-width: 479px) {
  .gdzie_item-heading.is-full-width {
    font-size: 1.75rem;
  }
}

/* Below 425px: make the "w zasadzie wszędzie" box span full row width.
   The Webflow grid template puts "Area" only in column 2 of the last row.
   Redefining it as "Area Area" stretches it across both 1fr columns. */
@media screen and (max-width: 425px) {
  .gdzie_row {
    grid-template: ". ." minmax(auto, 14rem)
                   ". ." minmax(auto, 14rem)
                   ". ." minmax(auto, 14rem)
                   "Area Area"
                   / 1fr 1fr;
  }
}

/* Fix gallery-full-width section display.
   The image is position:absolute inside gallery-full-width_image-wrapper.
   We make the wrapper the size anchor (explicit height, overflow:hidden) and
   let the section shrink-wrap it. max-height overrides from Webflow mobile CSS
   are cancelled here so the section is always fully visible. */
.section_gallery-full-width {
  position: relative !important;
  left: 50% !important;
  width: 100vw !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.section_gallery-full-width .gallery-full-width_component,
.section_gallery-full-width .gallery-full-width_image-wrapper {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.section_gallery-full-width .gallery-full-width_image-wrapper {
  height: 60vh !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.section_gallery-full-width .gallery-full-width_image {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* breadcrumbs bar: w-nav sets z-index:1000 but navbar is 99 — keep breadcrumbs below navbar */
.breadcrumbs_component.w-nav {
  z-index: 1;
}

/* mobile menu CTA button: hide when navbar button is visible (>479px), show only on mobile portrait */
@media screen and (min-width: 480px) {
  .mobile_menu-cta-wrapper .button {
    display: none !important;
  }
}

/* mobile menu: pin contact text to 1.25rem across all breakpoints (text-size-large drops to
   1.125rem at ≤767px which makes mobile landscape smaller than tablet) */
.mobile_menu-cta-wrapper .text-size-large,
.mobile-menu_email-wrapper .text-size-large {
  font-size: 1.25rem !important;
}



/* mobile menu: social icons 30% smaller than the default 3rem */
.mobile-menu_social-media-wrapper .icon-embed-medium {
  width: 2.1rem;
  height: 2.1rem;
}

/* Photo strip marquee: replaces the Webflow IX2 translateX loop (action lists a-54/a-55).
   Two identical image-lists side by side = 200% total width; animating to -50% = one full
   set, so the loop is seamless. The Webflow grid layout on these classes is overridden. */
.slider-zdjecia_image-list-top {
  display: flex !important;
  width: max-content;
  animation: slider-zdjecia-marquee 80s linear infinite;
}

.slider-zdjecia_image-list {
  display: flex !important;
  gap: 1rem;
  padding-inline-end: 1rem;
}

/* padding-top:75% on the wrapper is relative to the parent list's width (~350rem in flex),
   producing a massive height. Fix: explicit height for the intended 4:3 ratio at 26rem width. */
.slider-zdjecia_image-wrapper {
  height: 19.5rem !important;
  padding-top: 0 !important;
}

@keyframes slider-zdjecia-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .slider-zdjecia_image-list-top {
    animation: none;
  }
}

/* Realizacje gallery: scroll-driven parallax (row 1 left, row 2 right).
   Handled by JS in realizacje.astro — will-change primes the compositor. */
.realizacje_layout-1_image-list {
  will-change: transform;
}

/* Realizacje type filters */
.realizacje_filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}

.realizacje_filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.125rem;
  border: 1.5px solid var(--base-color-neutral--neutral-lighter);
  border-radius: 100px;
  background: transparent;
  color: var(--base-color-neutral--neutral-dark);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.realizacje_filter-btn:hover {
  border-color: var(--base-color-brand--orange-500);
  color: var(--base-color-brand--orange-500);
}

.realizacje_filter-btn.is-active {
  background: var(--base-color-brand--orange-500);
  border-color: var(--base-color-brand--orange-500);
  color: var(--base-color-neutral--white);
}

.realizacje_filter-btn.is-active:hover {
  background: #d44a1b;
  border-color: #d44a1b;
}

@media (max-width: 479px) {
  .realizacje_filters {
    gap: 0.375rem;
  }
  .realizacje_filter-btn {
    font-size: 0.8125rem;
    padding: 0.4375rem 0.875rem;
  }
}

/* Animated gradient on "firmy Enigma Room" span inside the team intro heading.
   background-size: 500% gives the gradient enough room to shift visibly;
   alternate direction makes it flow back and forth without a hard reset. */
@keyframes textShine {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* background-image !important overrides the inline <style> without locking
   background-position — the shorthand `background !important` would set
   background-position: 0% 0% !important which CSS animations cannot override. */
.text-background-gradient {
  background-image: linear-gradient(90deg, #F73 0%, #F50 25%, #FE69E6 50%, #F50 75%, #F73 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  background-size: 200% auto !important;
  animation: textShine 2s ease-in-out infinite alternate;
}

.text-background-gradient--alt {
  animation-delay: -0.6s !important;
  animation-direction: alternate-reverse !important;
}

@media (prefers-reduced-motion: reduce) {
  .text-background-gradient { animation: none; }
}

/* Floating dot animation - reusable for decorative SVG dots across sections.
   Add class "floating-dot" (path A, slower) or "floating-dot floating-dot--b"
   (path B, faster) to any absolutely-positioned dot wrapper. */

@keyframes dot-drift-a {
  0%   { transform: translate(0,      0);       }
  18%  { transform: translate(-1.2rem, 2.1rem); }
  35%  { transform: translate(1.5rem, -0.8rem); }
  52%  { transform: translate(-0.6rem, 2.8rem); }
  70%  { transform: translate(1.8rem,  0.4rem); }
  85%  { transform: translate(-1rem,  -1.2rem); }
  100% { transform: translate(0,       0);      }
}

@keyframes dot-drift-b {
  0%   { transform: translate(0,      0);       }
  22%  { transform: translate(1.4rem, -1.6rem); }
  44%  { transform: translate(-1rem,   1.2rem); }
  66%  { transform: translate(0.8rem,  2rem);   }
  88%  { transform: translate(-1.6rem, 0.6rem); }
  100% { transform: translate(0,       0);      }
}

.floating-dot {
  pointer-events: none;
  will-change: transform;
  animation: dot-drift-a 14s ease-in-out infinite;
}

.floating-dot--b {
  animation: dot-drift-b 10s ease-in-out infinite;
}

/* Section: dots float freely but always stay behind the quote text.
   isolation: isolate creates a local stacking context so z-index on
   children is contained here and doesn't affect surrounding sections. */
.section_o-nas_cytat {
  isolation: isolate;
  overflow: hidden;
}

/* Text layer sits above the dots */
.section_o-nas_cytat .padding-global {
  position: relative;
  z-index: 1;
}

/* Dots float on their own layer below the text.
   transform and transition are driven by JS (randomDrift in o-nas.astro). */
.o-nas_cytat_shape1-wrapper {
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

/* Shape2 starts near the top of the section, overlapping the text area */
.o-nas_cytat_shape2-wrapper {
  right: auto;
  bottom: auto;
  left: 28%;
  top: 0.5rem;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .floating-dot { animation: none; }
}

/* Stacje Zagadek: mer-opis image grid placement.
   Webflow CSS assigns grid-area/place-self via page-specific w-node IDs.
   The stacje-zagadek page uses custom IDs so we mirror the same rules here. */
#w-node-sz-img4 { place-self: center; }
#w-node-sz-img3 { justify-self: end; }
#w-node-sz-img1 { grid-area: Area-3; }
#w-node-sz-img2 { grid-area: Area-2; align-self: end; }

@media screen and (max-width: 767px) {
  #w-node-sz-img2 { align-self: auto; }
}

/* Nasza oferta: whole card is the link — make it behave like a block flex column */
a.nasza-oferta_item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

a.nasza-oferta_item:hover {
  transform: translateY(-8px);
}

/* Trigger the same gradient shift on card hover as was previously on image-wrapper hover */
a.nasza-oferta_item:hover .nasza-oferta_image-wrapper.gradient-linear-nowy-07 {
  background-image: linear-gradient(109deg, #ffbc8a, #ff7a4a 26.76%, #f50 58.49% 74.53%, #f85a15 116.9%);
}

/* Nudge the arrow right on card hover to reinforce navigation affordance */
a.nasza-oferta_item .nasza-oferta_button-wrapper img {
  transition: transform 0.2s ease;
}

a.nasza-oferta_item:hover .nasza-oferta_button-wrapper img {
  transform: translateX(5px);
}