/* Shared breakpoint + section-size tokens.
   Media-query widths cannot use var() — keep the numbers listed here
   and reuse them everywhere: 480 / 768 / 1024 / 1440. */

:root {
  --bp-phone: 480px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-tv: 1440px;

  /* Nav is 64px. Extra space so headings are not flush under it. */
  --section-pad-top: calc(var(--nav-height) + clamp(1.75rem, 5vh, 3.5rem));
  --section-pad-bottom: clamp(1.5rem, 4vh, 2.75rem);
}

/* Phone */
@media (max-width: 480px) {
  :root {
    --section-pad-top: calc(var(--nav-height) + 1.75rem);
    --section-pad-bottom: 1.25rem;
  }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --section-pad-top: calc(var(--nav-height) + 2.25rem);
    --section-pad-bottom: 1.75rem;
  }
}

/* Desktop */
@media (min-width: 769px) and (max-width: 1440px) {
  :root {
    --section-pad-top: calc(var(--nav-height) + clamp(2rem, 5vh, 3.5rem));
    --section-pad-bottom: clamp(1.5rem, 4vh, 2.5rem);
  }
}

/* Large / TV */
@media (min-width: 1441px) {
  :root {
    --section-pad-top: calc(var(--nav-height) + 4rem);
    --section-pad-bottom: clamp(2rem, 5vh, 3.5rem);
  }
}

/* Shared section rhythm — About stays a full-bleed stage (see exception below). */
#systems,
#products,
#collaborations,
#founders {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

/* Patents matches Systems/Products: one page, content column left-aligned. */
#patents {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  min-height: 100dvh;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

#systems > .container,
#products > .container,
#collaborations > .container {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

/* Founders fills one viewport — content distributed top→bottom */
#founders > .container {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
}

/* Title + primary content never shrink below natural height (zoom-safe) */
#systems .section-title-block,
#products .section-title-block,
#patents .section-title-block,
#collaborations .section-title-block,
#founders .section-title-block,
#systems .section-content-after,
#products .section-content-after,
#patents .section-content-after,
#collaborations .collab-stage,
#founders .founders-wrapper {
  flex-shrink: 0;
}

#patents > .container {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

/* Exception: About is a cinematic full-bleed frame; extra section padding would
   break the stage crop. Nav clearance lives inside .about-stage__frame. */
#about.about-stage {
  padding-top: 0;
}