/* Layout: main, container, grid, split, section, surfaces, stack, cluster. */
/* Main --------------------------------------------------------------------- */
.cp-main { padding-block-start: var(--cp-header-clearance); }

/* Container ---------------------------------------------------------------- */
.cp-container        { width: 100%; max-width: var(--cp-container-max); margin-inline: auto; padding-inline: var(--cp-container-pad); }
.cp-container--wide  { max-width: none; }
.cp-container--flush { padding-inline: 0; }

/* Grid --------------------------------------------------------------------- */
.cp-grid          { display: grid; gap: var(--cp-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.cp-grid--2       { grid-template-columns: repeat(2, 1fr); }
.cp-grid--3       { grid-template-columns: repeat(3, 1fr); }
.cp-grid--4       { grid-template-columns: repeat(4, 1fr); }
.cp-grid--tight   { gap: var(--cp-space-4); }
.cp-grid--loose   { gap: var(--cp-space-7); }

@media (max-width: 767.98px) {
  .cp-grid--2,
  .cp-grid--3,
  .cp-grid--4 { grid-template-columns: 1fr; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .cp-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Split -------------------------------------------------------------------- */
.cp-split        { display: flex; align-items: flex-start; gap: var(--cp-space-8); }
.cp-split__aside { flex: none; inline-size: 158px; }
.cp-split__main  { flex: 1 1 auto; min-inline-size: 0; }

.cp-split--mirror { flex-direction: row-reverse; }

@media (max-width: 1199.98px) {
  .cp-split        { flex-direction: column; gap: var(--cp-space-7); }
  .cp-split__aside { inline-size: 100%; }
}

/* Section ------------------------------------------------------------------ */
.cp-section              { padding-block: var(--cp-space-12); }
.cp-section--tight       { padding-block: var(--cp-space-8); }
.cp-section--relaxed     { padding-block: var(--cp-space-14); }
.cp-section--loose       { padding-block: var(--cp-space-16); }
.cp-section--xloose      { padding-block: var(--cp-space-20); }
.cp-section--flush       { padding-block: 0; }
.cp-section--bleed       { overflow-x: clip; }
.cp-section__heading     { margin-block-end: var(--cp-space-6); }
.cp-section__lede        { border-inline-start: 2px solid var(--cp-color-brand-gold); padding-inline-start: var(--cp-space-4); }

.cp-section[data-cp-theme] { background: var(--cp-color-bg-page); color: var(--cp-color-text-primary); }

/* Surface modifiers -------------------------------------------------------- */
.cp-section--subtle      { background: var(--cp-color-bg-subtle); }
.cp-section--cream       { background: var(--cp-color-bg-cream); }
.cp-section--dark        { background: var(--cp-color-surface-dark); color: var(--cp-color-text-on-dark); --cp-color-focus-ring: #ffffff; }

/* Stack -------------------------------------------------------------------- */
.cp-stack > * + *        { margin-block-start: var(--cp-space-4); }
.cp-stack--tight > * + * { margin-block-start: var(--cp-space-2); }
.cp-stack--loose > * + * { margin-block-start: var(--cp-space-7); }
.cp-stack--xloose > * + * { margin-block-start: var(--cp-space-12); }
.cp-stack--2xloose > * + * { margin-block-start: var(--cp-space-16); }

/* Cluster ------------------------------------------------------------------ */
.cp-cluster        { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cp-space-3); }
.cp-cluster--tight { gap: var(--cp-space-2); }
.cp-cluster--between { justify-content: space-between; }
.cp-cluster--center  { justify-content: center; }
.cp-cluster--nowrap  { flex-wrap: nowrap; }
.cp-cluster--nowrap > *       { min-inline-size: 0; }
.cp-cluster--nowrap > .cp-btn { flex: none; }

@media (max-width: 767.98px) {
  .cp-cluster--nowrap { flex-wrap: wrap; }
}