/* ============================================
   COMPOSITION - Layout Patterns
   ============================================ */

/* Section - Vertical rhythm */
.section {
/*  padding-block: var(--layout-space-section); */
}

.section-small {
  padding-block: var(--layout-space-section-sm);
}

.section__inner {
  max-width: var(--layout-content);
  margin-inline: auto;
}

.section__inner--wide {
  max-width: var(--layout-content-wide, 1400px);
}

.section__inner--narrow {
  max-width: var(--layout-content-narrow, 1120px);
}

.section__inner--full {
  max-width: none;
}

/* Container - Content width constraint */
.container {
  width: 100%;
  max-width: var(--layout-canvas);
  margin-inline: auto;
  padding-inline: var(--layout-safe-padding);
}

.container-narrow {
  max-width: 768px;
}

.container-wide {
  max-width: 1400px;
}

.container--flush {
  padding-inline: 0;
}

/* Small helpers */
.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  justify-content: space-between;
}

.footer__inner {
  display: flex;
  gap: var(--space-8);
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
}

/* Flow - Vertical spacing between children */

.flow {
  --flow-space: var(--space-6);
}

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

.flow-2xs {
  --flow-space: var(--space-1);
}

.flow-xs {
  --flow-space: var(--space-2);
}

.flow-sm {
  --flow-space: var(--space-3);
}
.flow-md {
  --flow-space: var(--space-4);
}
.flow-lg {
  --flow-space: var(--space-8);
}
.flow-section {
  --flow-space: 3.75rem;
}

/* Grid - Responsive grid layout */

.grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Auto-fit grid for responsive cards */
.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

/* Cluster - Horizontal spacing (flex wrap) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
}

.cluster-sm {
  gap: var(--space-2);
}
.cluster-lg {
  gap: var(--space-8);
}

/* Sidebar Layout */
.sidebar-layout {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .sidebar-layout {
    grid-template-columns: 250px 1fr;
  }
}

/* Switcher - Stack on small, row on large */
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--switcher-gap, var(--space-8));
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--breakpoint-md, 768px) - 100%) * 999);
}

/* Cover - Center content vertically */
.cover {
  display: flex;
  flex-direction: column;
  min-height: var(--cover-height, 100vh);
  padding: var(--space-6);
}

.cover > * {
  margin-block: var(--space-4);
}

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

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

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

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* custom */