/* Responsive fixes – Lovable */

/* ===== MOBILE (≤767px) ===== */
@media screen and (max-width: 767px) {
  /* Reduce excessive section paddings on Webflow sections */
  section:not([class*="hero"]):not(.hero),
  .section:not([class*="hero"]),
  .section_wrap:not([class*="hero"]),
  [class*="section"]:not([class*="hero"]) {
    padding-top: clamp(2rem, 8vw, 4rem) !important;
    padding-bottom: clamp(2rem, 8vw, 4rem) !important;
  }

  /* Cap excessive min-heights on non-hero sections */
  section:not([class*="hero"]):not(.hero):not(.hero_wrap) {
    min-height: 0 !important;
  }

  /* Collapse empty spacer divs */
  .spacer,
  [class*="spacer"]:empty,
  .w-layout-blockcontainer:empty {
    display: none !important;
  }

  /* Tighter headlines on mobile */
  h1, .h1, [class*="heading-xxl"], [class*="display"] {
    font-size: clamp(2.2rem, 9vw, 3.4rem) !important;
    line-height: 1.05 !important;
  }
  h2, .h2 {
    font-size: clamp(1.6rem, 6.5vw, 2.4rem) !important;
    line-height: 1.15 !important;
  }
}

/* ===== TABLET (768–991px) ===== */
@media screen and (min-width: 768px) and (max-width: 991px) {
  /* Reduce huge container side paddings that were sized for desktop */
  .page-wrapper,
  .container,
  .w-container,
  [class*="container"] {
    padding-left: clamp(1.5rem, 4vw, 2.5rem) !important;
    padding-right: clamp(1.5rem, 4vw, 2.5rem) !important;
  }

  section:not([class*="hero"]):not(.hero),
  .section:not([class*="hero"]) {
    padding-top: clamp(3rem, 8vw, 5rem) !important;
    padding-bottom: clamp(3rem, 8vw, 5rem) !important;
  }

  /* Force burger menu up to 991px (Webflow default) */
  .w-nav-button,
  [data-collapse="medium"] .w-nav-button {
    display: block !important;
  }
  .w-nav-menu,
  .nav-menu,
  .navbar_menu {
    display: none !important;
  }
  /* When menu is opened, allow it */
  /* Hide desktop nav links inside navbar_content; show burger */
  .navbar_content .flex-block,
  .navbar_content > .w-layout-vflex {
    display: none !important;
  }
  .menu-button-2,
  .w-nav-button {
    display: flex !important;
  }
}

/* ===== Detail page (objekte/:id) ===== */
@media screen and (max-width: 900px) {
  .dp-grid {
    grid-template-columns: 1fr !important;
  }
  .dp-sidebar,
  .dp-aside {
    position: static !important;
    top: auto !important;
    width: 100% !important;
  }
}

/* ===== Global font override: Instrument Sans everywhere ===== */
html, body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, a, span, div, li, label,
[class*="heading"], [class*="text-"], [class*="body"],
.link-2, .nav-link, .text-cta, .button, .w-button {
  font-family: "Instrument Sans", sans-serif !important;
}

/* ===== Button hover animation (matches Webflow a-30/a-31) ===== */
.button .button-text.is-firts,
.button .button-text.is-second,
.button .button-circle-icon.is-first,
.button .button-circle-icon.is-second {
  transition: transform 350ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.button .button-text.is-firts {
  transform: translateY(1%);
}
.button .button-text.is-second {
  transform: translateY(50%);
}
.button .button-circle-icon.is-first {
  transform: translate(1%, 1%);
}
.button .button-circle-icon.is-second {
  transform: translate(-180%, 180%);
}

.button:hover .button-text.is-firts {
  transform: translateY(-150%);
}
.button:hover .button-text.is-second {
  transform: translateY(-100%);
}
.button:hover .button-circle-icon.is-first {
  transform: translate(180%, -180%);
}
.button:hover .button-circle-icon.is-second {
  transform: translate(0%, 0%);
}

/* ===== Fix: services-editorial grid collapsing on mobile (causing overlap with next section) =====
   The CSS Grid in the editorial blocks sometimes fails to size rows correctly inside the
   narrow `.content-wrapper.nono` (max-width:26.2rem) at <=767px. Force flex-column layout
   so each block reliably reserves the height of image + text. */
@media (max-width: 1023px) {
  .services-editorial .svc-block,
  .services-editorial .svc-block.reverse {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    align-items: stretch !important;
  }
  .services-editorial .svc-block > .svc-image-wrap,
  .services-editorial .svc-block.reverse > .svc-image-wrap {
    order: 0 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  .services-editorial .svc-block > .svc-text,
  .services-editorial .svc-block.reverse > .svc-text {
    order: 1 !important;
    width: 100% !important;
    flex: 0 0 auto !important;
  }
}

/* Ensure the narrow nono wrapper doesn't clip the editorial content on mobile,
   and remove the Webflow max-height caps that cause section overlap. */
@media (max-width: 767px) {
  .content-wrapper.nono { max-width: 100% !important; }
  .section_solutions-secondary { padding-bottom: 4rem !important; }
  .section_projects-secondary { padding-top: 4rem !important; }
}

/* Webflow's .padding-global has max-height: 80em (and 100em on .padding-section-medium)
   which truncates the section box height — causing the next section to render on top of
   overflowing content. Remove those caps. */
.padding-global,
.padding-global.padding-section-medium,
.padding-global.padding-section-medium.combo,
.padding-global.padding-section-medium.okay,
.padding-global.padding-section-medium.nonon,
.padding-global.padding-section-medium.okookk {
  max-height: none !important;
}