/*
 * Go PH Public Page Template v1
 * Content-layout contract for the public website.
 *
 * Global components (header/footer/bottom-nav/scroll-top) own their own
 * viewport spacing. Page templates own only content gutters and rhythm.
 *
 * Tailwind utilities remain valid for local composition; these classes are
 * the stable reusable layout primitives for repeated page families.
 */
  :root {
    --goph-page-max: 1160px;
    --goph-page-gutter: clamp(16px, 3vw, 32px);
    --goph-page-y: clamp(40px, 5.5vw, 72px);
    --goph-page-y-lg: clamp(56px, 7vw, 96px);
    --goph-content-readable: 760px;
  }

  .goph-page-template {
    min-width: 0;
  }

  .goph-page-container {
    width: min(calc(var(--goph-page-max) + 2 * var(--goph-page-gutter)), 100%);
    margin-inline: auto;
    padding-inline: var(--goph-page-gutter);
    box-sizing: border-box;
    min-width: 0;
  }

  .goph-page-container--readable {
    max-width: calc(var(--goph-content-readable) + 2 * var(--goph-page-gutter));
  }

  .goph-page-section {
    padding-block: var(--goph-page-y);
  }

  .goph-page-section--compact {
    padding-block: clamp(28px, 4vw, 48px);
  }

  .goph-page-section--large {
    padding-block: var(--goph-page-y-lg);
  }

  .goph-page-stack {
    display: flex;
    flex-direction: column;
    gap: clamp(28px, 4vw, 56px);
  }

  .goph-page-stack--tight {
    gap: clamp(18px, 2.5vw, 32px);
  }

@media (max-width: 767px) {
  :root {
    --goph-page-gutter: 16px;
  }

  .goph-page-container {
    width: 100%;
  }

  .goph-page-section {
    padding-block: 36px;
  }

  .goph-page-section--large {
    padding-block: 48px;
  }

  .goph-page-stack {
    gap: 28px;
  }
}