/* staging1: content-sized section layout (#main-section through #fifth-section)
   No viewport min-heights — sections size to content + shared top/bottom padding. */

/* Vars on html.staging1-page (not :root) so they always win over layout.css :root. */
html.staging1-page {
  --s1-trust-bar: 36px;
  --s1-column-max: var(--content-max-width, 1400px);
  --s1-gutter: clamp(1.25rem, 4vw, 2rem);
  --s1-header-clearance: 112px;
  /* Modern section rhythm — same top/bottom on all content sections */
  --s1-section-pad-top-bottom: clamp(4rem, 7vw, 6rem);
}

@media (max-width: 767px) {
  html.staging1-page {
    --s1-trust-bar: 34px;
    --s1-header-clearance: 104px;
  }
}

/* ── Page shell ── */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* Beat layout.css :root — staging1 does not use header-inflow-mount spacer */
html.staging1-page {
  --header-inflow-height: 0px;
  --s1-header-inflow: 0px;
}

body.staging1-page {
  overflow-x: hidden;
  font-family: Inter, 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size-adjust: 0.52;
}

body.staging1-page #header-placeholder,
body.staging1-page #header-inflow-mount {
  min-height: 0 !important;
  height: auto !important;
}

/* Defensive: hide spacer if an older header.js still injects it */
body.staging1-page .header-flow-spacer {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.staging1-page main {
  flex: 1 1 auto;
  width: 100%;
}

/* ── Shared section frame (content-sized; padding only) ── */
body.staging1-page .s1-section,
body.staging1-page #main-section,
body.staging1-page #second-section,
body.staging1-page #third-section,
body.staging1-page #fourth-section,
body.staging1-page #fifth-section,
body.staging1-page #werkgebied,
body.staging1-page #projecten-beeld,
body.staging1-page #faq.s1-faq {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* One standard vertical rhythm for every content section (not header/footer) */
body.staging1-page .s1-section,
body.staging1-page #second-section,
body.staging1-page #third-section,
body.staging1-page #fourth-section,
body.staging1-page #fifth-section,
body.staging1-page #werkgebied,
body.staging1-page #projecten-beeld,
body.staging1-page #faq.s1-faq {
  padding-top: var(--s1-section-pad-top-bottom) !important;
  padding-bottom: var(--s1-section-pad-top-bottom) !important;
}

body.staging1-page .s1-section {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow-x: hidden;
}

/* Hero: fixed top clearance for header; bottom matches other sections */
body.staging1-page #main-section.s1-section,
body.staging1-page #main-section {
  padding-top: 120px !important;
  padding-bottom: var(--s1-section-pad-top-bottom) !important;
}

body.staging1-page .s1-section__inner {
  width: 100%;
  max-width: var(--s1-column-max);
  margin-inline: auto;
  padding-inline: var(--s1-gutter);
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0;
}

/* Section 1 — main-section (hero) */
body.staging1-page #main-section {
  isolation: isolate;
  overflow: hidden;
  box-sizing: border-box;
}

body.staging1-page main#main-content {
  background: #ffffff;
}

body.staging1-page #main-section > .site-content-width,
body.staging1-page #main-section > .max-w-container-max {
  width: 100%;
  max-width: var(--s1-column-max);
  margin-inline: auto;
  padding-inline: var(--s1-gutter);
  padding-top: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
}

/* Section 2 — second-section (werkzaamheden) */
body.staging1-page #second-section {
  position: relative;
  z-index: 5;
  box-shadow: 0 -20px 60px rgba(78, 94, 109, 0.08), 0 -4px 16px rgba(78, 94, 109, 0.04);
}

body.staging1-page #second-section > .site-content-width,
body.staging1-page #second-section > .max-w-container-max {
  width: 100%;
  max-width: var(--s1-column-max);
  margin-inline: auto;
  padding-inline: var(--s1-gutter);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Section 3 — third-section (constructieve grondbeginselen) */
body.staging1-page #third-section {
  position: relative;
  z-index: 6;
  box-shadow: 0 -20px 60px rgba(15, 23, 42, 0.18), 0 -4px 16px rgba(15, 23, 42, 0.08);
}

body.staging1-page #third-section > .site-content-width,
body.staging1-page #third-section > .max-w-container-max {
  width: 100%;
  max-width: var(--s1-column-max);
  margin-inline: auto;
  padding-inline: var(--s1-gutter);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Section 4 — fourth-section (boek) */
body.staging1-page #fourth-section {
  position: relative;
  z-index: 7;
  box-shadow: 0 -15px 40px rgba(15, 23, 42, 0.06);
}

body.staging1-page #fourth-section.s1-section {
  padding-top: var(--s1-section-pad-top-bottom) !important;
  padding-bottom: var(--s1-section-pad-top-bottom) !important;
}

body.staging1-page #fourth-section > .site-content-width,
body.staging1-page #fourth-section > .max-w-container-max {
  width: 100%;
  max-width: var(--s1-column-max);
  margin-inline: auto;
  padding-inline: var(--s1-gutter);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Section 5 — fifth-section (offerte / scroll-reveal-cta) */
body.staging1-page #fifth-section {
  position: relative;
  z-index: 20;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding-top: var(--s1-section-pad-top-bottom) !important;
  padding-bottom: var(--s1-section-pad-top-bottom) !important;
}

body.staging1-page #fifth-section.s1-section {
  padding-top: var(--s1-section-pad-top-bottom) !important;
  padding-bottom: var(--s1-section-pad-top-bottom) !important;
}

body.staging1-page #fifth-section > .site-content-width,
body.staging1-page #fifth-section > .max-w-container-max {
  width: 100%;
  max-width: var(--s1-column-max);
  margin-inline: auto;
  padding-inline: var(--s1-gutter);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 0;
  position: relative;
  z-index: 1;
}

/* ── Breakpoint ladder (overlap / gutter / pad; no section min-heights) ── */

/* Small phones */
@media (max-width: 479px) {
  html.staging1-page {
  }
}

/* Large phones / small tablets */


/* Tablet portrait */
@media (min-width: 768px) {
  html.staging1-page {
  }
}

/* Tablet landscape / small laptop */
@media (min-width: 1024px) {
  html.staging1-page {
    --s1-gutter: clamp(1.5rem, 3vw, 2rem);
  }
}

/* Laptop */
@media (min-width: 1280px) {
  html.staging1-page {
  }
}

/* Large desktop */


/* Ultra-wide ladder (excludes short ultra-wide ~3813×1453). */
@media (min-width: 1920px) and (max-width: 3699px),
       (min-width: 1920px) and (min-height: 1601px) {
  html.staging1-page {
    --s1-column-max: 1400px;
  }
}

/* 3813×1453 / 1463 — short ultra-wide (this is the rule that matches that port) */
@media (min-width: 3700px) and (max-height: 1600px) {
  html.staging1-page {
    --s1-column-max: 1400px;
  }
}



/* Hero grid: stack on narrow, side-by-side on large */
body.staging1-page .hero-grid {
  width: 100%;
  align-items: center;
}

@media (max-width: 1023px) {
  body.staging1-page .hero-grid {
    gap: clamp(1.25rem, 4vw, 2rem);
  }
}

@media (min-width: 1024px) {
  body.staging1-page .hero-grid {
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* second-section card grid */
body.staging1-page #second-section .grid {
  width: 100%;
}

/* third-section card grid */
body.staging1-page #third-section .grid {
  width: 100%;
}

/* fourth-section grid */
body.staging1-page #fourth-section .grid {
  width: 100%;
}

/* fifth-section grid — beat layout.css + Tailwind items-start / min-h-[60vh] / py-8 */
body.staging1-page #fifth-section .grid {
  width: 100%;
  align-items: center !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ── Footer — content-sized, consistent padding (no viewport min-heights) ── */
body.staging1-page #site-footer-enhanced.sb-footer,
body.staging1-page .s1-staging-footer {
  position: relative;
  z-index: 5;
  margin-top: 0 !important;
  width: 100%;
  box-sizing: border-box;
  min-height: 0 !important;
  height: auto !important;
  display: block !important;
  overflow-x: hidden;
  padding: 0 !important;
  background: transparent;
}

/* Beat footer-enhanced.js + layout.css + sb-footer-after-cta overlap hacks */
body.staging1-page.sb-footer-after-cta #site-footer-enhanced.sb-footer {
  margin-top: 0 !important;
}

body.staging1-page #site-footer-enhanced .sb-footer__surface,
body.staging1-page.sb-footer-after-cta #site-footer-enhanced .sb-footer__surface {
  flex: none !important;
  display: block !important;
  justify-content: flex-start !important;
  width: 100%;
  min-height: 0 !important;
  height: auto !important;
  padding-top: clamp(3rem, 5vw, 4.5rem) !important;
  padding-bottom: clamp(2.5rem, 4vw, 3.5rem) !important;
  margin: 0 !important;
}

body.staging1-page #site-footer-enhanced .sb-footer__inner {
  width: 100%;
  max-width: var(--content-max-width, var(--s1-column-max, 1400px));
  margin-inline: auto;
  padding-inline: var(--content-padding-x, var(--s1-gutter));
  box-sizing: border-box;
  flex: none !important;
  min-height: 0 !important;
}

/* Staging footer strip (before footer-enhanced.js replaces it) */
body.staging1-page .s1-staging-footer {
  border-top: 1px solid rgba(78, 94, 109, 0.12);
  background: #f0f4f8;
  text-align: center;
  font-size: 0.8125rem;
  color: #43474c;
}

body.staging1-page .s1-staging-footer > p {
  width: 100%;
  max-width: var(--content-max-width, var(--s1-column-max, 1400px));
  margin-inline: auto;
  padding-inline: var(--content-padding-x, var(--s1-gutter));
  box-sizing: border-box;
}

.s1-staging-footer a {
  color: #4e5e6d;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}