/**
 * CUBE CSS - Layer 2: Composition
 * Layout primitives and patterns
 */

/* Cover - Full viewport height layout with flexible center */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: var(--max-width-content);
  margin-inline: auto;
  padding-inline: var(--space-sm);
  /* Space for fixed navs: main-nav + timeline-nav + media-nav */
  padding-bottom: calc(var(--height-main-nav) + var(--height-nav) + var(--height-media-nav));
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--main-padding, 2rem var(--space-sm));
}

/* Cluster - Horizontal flex layout with gap */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cluster-gap, 1rem);
  justify-content: var(--cluster-justify, flex-start);
  align-items: var(--cluster-align, center);
}

/* Switcher - Responsive layout that switches to block on narrow viewports */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-sm));
  justify-content: var(--switcher-justify, space-between);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-threshold, 30rem) - 100%) * 999);
}

/* Flow - Vertical spacing rhythm */
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/* Exception: Pages without media-nav get reduced body padding */
body.no-media-nav {
  padding-bottom: calc(var(--height-main-nav) + var(--height-nav));
}

/* Responsive adjustments for center composition */
@media (max-width: 996px) {
  body {
    max-width: var(--max-width-narrow);
  }
}