/* Page shell */
.dp-site {
  min-height: 100vh;
  color: var(--dp-color-text);
}

.dp-main {
  position: relative;
  z-index: var(--dp-z-base);
  min-height: 1px;
}

/* Containers */
.dp-container,
.dp-container-narrow {
  width: min(100% - (var(--dp-gutter) * 2), var(--dp-container-max));
  margin-inline: auto;
}

.dp-container-narrow {
  width: min(100% - (var(--dp-gutter) * 2), var(--dp-container-narrow));
}

/* Sections */
.dp-section {
  position: relative;
  padding-block: var(--dp-section-y);
}

.dp-section--tight {
  padding-block: var(--dp-space-500);
}

.dp-section--loose {
  padding-block: var(--dp-section-y-lg);
}

.dp-section--hero {
  padding-top: var(--dp-space-600);
  padding-bottom: var(--dp-space-700);
}

.dp-section-inner {
  position: relative;
}

/* Vertical rhythm */
.dp-stack {
  display: flex;
  flex-direction: column;
  gap: var(--dp-space-300);
}

.dp-stack--sm {
  gap: var(--dp-space-200);
}

.dp-stack--md {
  gap: var(--dp-space-300);
}

.dp-stack--lg {
  gap: var(--dp-space-400);
}

.dp-stack--xl {
  gap: var(--dp-space-500);
}

/* Horizontal groups */
.dp-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dp-space-200);
}

.dp-cluster--sm {
  gap: var(--dp-space-150);
}

.dp-cluster--md {
  gap: var(--dp-space-200);
}

.dp-cluster--lg {
  gap: var(--dp-space-300);
}

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

/* Grids */
.dp-grid-2,
.dp-grid-3,
.dp-grid-4 {
  display: grid;
  gap: var(--dp-space-300);
}

.dp-grid-2--tight,
.dp-grid-3--tight,
.dp-grid-4--tight {
  gap: var(--dp-space-200);
}

.dp-grid-2--loose,
.dp-grid-3--loose,
.dp-grid-4--loose {
  gap: var(--dp-space-400);
}

/* Media wrappers */
.dp-media {
  position: relative;
  overflow: hidden;
}

.dp-media > img,
.dp-media > video,
.dp-media > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dp-media--square {
  aspect-ratio: 1 / 1;
}

.dp-media--landscape {
  aspect-ratio: 4 / 3;
}

.dp-media--video {
  aspect-ratio: 16 / 9;
}

.dp-media--product {
  aspect-ratio: 4 / 5;
}

.dp-media--hero {
  aspect-ratio: 21 / 9;
}

/* Alignment helpers */
.dp-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

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

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

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

/* Width helpers */
.dp-max-text {
  max-width: 65ch;
}

.dp-max-copy {
  max-width: 52ch;
}

.dp-full-width {
  width: 100%;
}

/* Responsive */
@media (min-width: 768px) {
  .dp-section--hero {
    padding-top: var(--dp-space-700);
    padding-bottom: var(--dp-space-800);
  }

  .dp-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dp-space-500);
  }

  .dp-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--dp-space-400);
  }

  .dp-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--dp-space-400);
  }
}

@media (min-width: 1280px) {
  .dp-section--hero {
    padding-top: var(--dp-space-800);
    padding-bottom: var(--dp-space-900);
  }

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