/*
 * A plan's page (single-plan.php). The page layout's sections bring their own styles; this only sets the page
 * behind them and how the page moves to a section.
 */

.single-plan {
  width: 100%;
  background: var(--surface);
}

/* A link to a section, such as "What's included", glides there and lands clear of the sticky header */

.single-plan [id] {
  scroll-margin-top: clamp(88px, 11vw, 120px);
}

/*
 * Large screens: the wireframes are drawn for laptop widths, so on bigger monitors the whole page is drawn larger,
 * keeping its proportions (text, spacing and how tightly photos are cropped) instead of stretching thin.
 */

@media (min-width: 1800px) {
  .single-plan {
    zoom: 1.2;
  }
}

@media (min-width: 2400px) {
  .single-plan {
    zoom: 1.5;
  }
}

@media (min-width: 3400px) {
  .single-plan {
    zoom: 2;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(.single-plan) {
    scroll-behavior: smooth;
  }
}