/* Shared layout primitives for route-level page shells */
.hoard-page {
  display: flex;
  flex-direction: column;
  gap: var(--hoard-page-gap, var(--space-6));
  margin-inline: auto;
  width: min(100%, var(--hoard-page-width, 1120px));
  padding-block:
    var(--hoard-page-padding-start, var(--space-4))
    var(--hoard-page-padding-end, var(--space-8));
}

.hoard-page--centered {
  width: 100%;
  margin-inline: 0;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--hoard-centered-offset, 210px));
  padding: var(--hoard-centered-padding, var(--space-8) var(--space-4));
}

.hoard-shell-grid {
  display: grid;
  gap: var(--hoard-shell-gap, var(--space-8));
  width: min(100%, var(--hoard-shell-width, 1040px));
  padding: var(--hoard-shell-padding, var(--space-8));
}

@media (width <= 960px) {
  .hoard-page {
    width: 100%;
    gap: var(--hoard-page-gap-mobile, var(--space-5));
    padding-inline:
      var(--hoard-page-padding-inline-start-mobile, max(var(--space-2), env(safe-area-inset-left)))
      var(--hoard-page-padding-inline-end-mobile, max(var(--space-2), env(safe-area-inset-right)));
    padding-block:
      var(--hoard-page-padding-start-mobile, var(--space-2))
      var(--hoard-page-padding-end-mobile, var(--space-6));
  }

  .hoard-page--centered {
    width: 100%;
    min-height: calc(100vh - var(--hoard-centered-offset-mobile, 180px));
    padding: var(--hoard-centered-padding-mobile, var(--space-5) var(--space-2));
  }

  .hoard-shell-grid {
    width: 100%;
    gap: var(--hoard-shell-gap-mobile, var(--space-5));
    padding:
      var(--hoard-shell-padding-block-mobile, var(--space-5))
      var(--hoard-shell-padding-inline-mobile, var(--space-4));
  }
}

@media (width <= 600px) {
  .hoard-page {
    gap: var(--hoard-page-gap-mobile-xs, var(--space-4));
    padding-block:
      var(--hoard-page-padding-start-mobile-xs, var(--space-2))
      var(--hoard-page-padding-end-mobile-xs, var(--space-5));
  }

  .hoard-page--centered {
    min-height: calc(100vh - var(--hoard-centered-offset-mobile-xs, 164px));
    padding: var(--hoard-centered-padding-mobile-xs, var(--space-4) var(--space-2));
  }

  .hoard-shell-grid {
    gap: var(--hoard-shell-gap-mobile-xs, var(--space-4));
    padding:
      var(--hoard-shell-padding-block-mobile-xs, var(--space-4))
      var(--hoard-shell-padding-inline-mobile-xs, var(--space-3));
  }
}