/* =============================================================================
   Hoard – Page-Layout-Primitives
   ============================================================================= */

.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, 1180px));
  padding-block:
    var(--hoard-page-padding-start, var(--space-5))
    var(--hoard-page-padding-end, var(--space-12));
}

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

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

.hoard-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 78ch;
}

.hoard-page-header > h1 {
  margin: 0;
  font-size: var(--font-size-3xl);
  letter-spacing: -0.02em;
}

.hoard-page-header > p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-loose);
}

.hoard-page-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

@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-3), env(safe-area-inset-left)))
      var(--hoard-page-padding-inline-end-mobile, max(var(--space-3), env(safe-area-inset-right)));
    padding-block:
      var(--hoard-page-padding-start-mobile, var(--space-3))
      var(--hoard-page-padding-end-mobile, var(--space-8));
  }

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

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

  .hoard-page-header > h1 {
    font-size: var(--font-size-2xl);
  }

  .hoard-page-header > p {
    font-size: var(--font-size-md);
  }
}

@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-6));
  }

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

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