/* CUBE CSS - Composition Layer
   Content-agnostic layout primitives
*/

/* ========================================
   LAYOUT PRIMITIVES
   ======================================== */

/* Stack - Vertical flow with consistent spacing */
.stack {
  display: flex;
  flex-direction: column;
}

.stack > * + * {
  margin-block-start: var(--stack-space, var(--space-md));
}

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

/* Sidebar - Two-column layout with flexible widths */
.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sidebar-gap, var(--space-lg));
}

.sidebar > :first-child {
  flex-basis: var(--sidebar-width, 20rem);
  flex-grow: 1;
}

.sidebar > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-min, 50%);
}

/* Center - Horizontally centered content with max-width */
.center {
  box-sizing: content-box;
  max-inline-size: var(--center-max, 65ch);
  margin-inline: auto;
  padding-inline: var(--center-padding, var(--space-md));
}

/* Grid - Auto-fill responsive grid */
.grid {
  display: grid;
  gap: var(--grid-gap, var(--space-md));
  grid-template-columns: repeat(
    var(--grid-cols, auto-fill),
    minmax(var(--grid-min, 15rem), 1fr)
  );
}

/* Switcher - Flexbox that switches from horizontal to vertical */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-md));
}

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

/* Cover - Vertically centered hero layout */
.cover {
  display: flex;
  flex-direction: column;
  min-block-size: var(--cover-min, 100vh);
  padding: var(--cover-padding, var(--space-lg));
}

.cover > * {
  margin-block: auto;
}

.cover > :first-child:not(.cover-center) {
  margin-block-start: 0;
}

.cover > :last-child:not(.cover-center) {
  margin-block-end: 0;
}

/* Frame - Aspect ratio container */
.frame {
  aspect-ratio: var(--frame-ratio, 16 / 9);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame > img,
.frame > video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Wrapper - Max-width content container */
.wrapper {
  max-width: var(--wrapper-max, 1400px);
  margin-inline: auto;
  padding-inline: var(--wrapper-padding, var(--space-md));
}

/* Split - Asymmetric Grid Layout
   Default: 5fr 2fr split
   Customizable via --split-layout and --split-gap
*/
.split {
  display: grid;
  grid-template-columns: var(--split-layout, 5fr 2fr);
  gap: var(--split-gap, var(--space-xl));
  align-items: var(--split-align, start);
}

/* Stack on mobile automatically */
@media (max-width: 768px) {
  .split {
    grid-template-columns: 1fr;
  }
}