/* Sitewide layout — max width, viewport fill, sticky footer */

html {
  overflow-x: clip;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page,
.project-page-container,
.about-main,
.content-shell,
.site-bottom {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  box-sizing: border-box;
}

/* ── Sticky footer shells ── */
.page,
.project-page-container {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page > footer,
.project-page-container > footer {
  margin-top: auto;
  flex-shrink: 0;
  width: 100%;
}

/* ── Homepage: work grid fills space between nav and footer ── */
.page > .work-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.page > .work-section .cards-grid {
  flex: 1 1 auto;
  min-height: min(52vh, 640px);
  align-content: stretch;
}

@media (min-width: 901px) {
  .page > .work-section .cards-grid {
    grid-template-rows: repeat(2, minmax(0, 1fr));
    min-height: min(58vh, 720px);
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .page > .work-section .cards-grid {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    min-height: min(62vh, 780px);
  }
}

@media (max-width: 640px) {
  .page > .work-section .cards-grid {
    min-height: 0;
  }
}

/* ── About: main grows, bottom block + footer pin to viewport bottom ── */
body:has(.about-main) {
  min-height: 100vh;
  min-height: 100dvh;
}

.about-main {
  flex: 1 0 auto;
}

.site-bottom {
  margin-top: auto;
  flex-shrink: 0;
}

.site-bottom > .content-shell > .about-footer {
  margin-top: 0;
}

/* ── Sobeys: case content grows above footer ── */
.project-page-container > .page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}