/* Containers */
.container {
  width: min(100% - 32px, var(--container-max));
  margin-inline: auto;
}

.container-narrow {
  width: min(100% - 32px, var(--container-narrow));
  margin-inline: auto;
}

.container-wide {
  width: min(100% - 32px, var(--container-wide));
  margin-inline: auto;
}

/* Sections */
.section {
  padding: clamp(2.5rem, 5vw, 5rem) 0;
}

.section-sm {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.section-lg {
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.section-alt {
  background: var(--color-surface);
}

.section-header {
  text-align: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-tag {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-brand);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.5rem;
}

.section-text {
  font-size: var(--text-md);
  color: var(--color-text-soft);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}

/* Grids */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-6);
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--spacing-6);
}

/* Flex utilities */
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-end {
  justify-content: flex-end;
}

.gap-0 { gap: 0; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-5 { gap: var(--spacing-5); }
.gap-6 { gap: var(--spacing-6); }
.gap-7 { gap: var(--spacing-7); }
.gap-8 { gap: var(--spacing-8); }

/* Spacing utilities */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-5 { margin-top: var(--spacing-5); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-7 { margin-top: var(--spacing-7); }
.mt-8 { margin-top: var(--spacing-8); }
.mt-9 { margin-top: var(--spacing-9); }
.mt-10 { margin-top: var(--spacing-10); }
.mt-12 { margin-top: var(--spacing-12); }
.mt-14 { margin-top: var(--spacing-14); }
.mt-16 { margin-top: var(--spacing-16); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-5 { margin-bottom: var(--spacing-5); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-7 { margin-bottom: var(--spacing-7); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-9 { margin-bottom: var(--spacing-9); }
.mb-10 { margin-bottom: var(--spacing-10); }
.mb-12 { margin-bottom: var(--spacing-12); }
.mb-14 { margin-bottom: var(--spacing-14); }
.mb-16 { margin-bottom: var(--spacing-16); }

.ml-0 { margin-left: 0; }
.ml-1 { margin-left: var(--spacing-1); }
.ml-2 { margin-left: var(--spacing-2); }
.ml-3 { margin-left: var(--spacing-3); }
.ml-4 { margin-left: var(--spacing-4); }
.ml-5 { margin-left: var(--spacing-5); }
.ml-6 { margin-left: var(--spacing-6); }
.ml-7 { margin-left: var(--spacing-7); }
.ml-8 { margin-left: var(--spacing-8); }

.mr-0 { margin-right: 0; }
.mr-1 { margin-right: var(--spacing-1); }
.mr-2 { margin-right: var(--spacing-2); }
.mr-3 { margin-right: var(--spacing-3); }
.mr-4 { margin-right: var(--spacing-4); }
.mr-5 { margin-right: var(--spacing-5); }
.mr-6 { margin-right: var(--spacing-6); }
.mr-7 { margin-right: var(--spacing-7); }
.mr-8 { margin-right: var(--spacing-8); }

.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
.py-7 { padding-top: var(--spacing-7); padding-bottom: var(--spacing-7); }
.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }

.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.px-7 { padding-left: var(--spacing-7); padding-right: var(--spacing-7); }
.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }

.p-0 { padding: 0; }
.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-5 { padding: var(--spacing-5); }
.p-6 { padding: var(--spacing-6); }
.p-7 { padding: var(--spacing-7); }
.p-8 { padding: var(--spacing-8); }
.p-9 { padding: var(--spacing-9); }
.p-10 { padding: var(--spacing-10); }
.p-12 { padding: var(--spacing-12); }
.p-14 { padding: var(--spacing-14); }
.p-16 { padding: var(--spacing-16); }

/* Width/Height */
.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.flex-1 {
  flex: 1;
}

/* Position */
.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

/* Overflow */
.overflow-hidden {
  overflow: hidden;
}

.overflow-auto {
  overflow: auto;
}

/* Display */
.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.hidden {
  display: none;
}

.visible {
  visibility: visible;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--color-brand);
  color: white;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 0;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Flex grid (12 column) */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--spacing-4) * -1);
  margin-right: calc(var(--spacing-4) * -1);
}

.col {
  flex: 1 0 0;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-2 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6667%; max-width: 91.6667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Aspect ratios */
.ratio-1x1 {
  aspect-ratio: 1 / 1;
}

.ratio-4x3 {
  aspect-ratio: 4 / 3;
}

.ratio-16x9 {
  aspect-ratio: 16 / 9;
}

.object-cover {
  object-fit: cover;
}

.object-contain {
  object-fit: contain;
}