/* DESKTOP / LARGE-SCREEN OPTIMISATION
   Everything is sized in rem, so scaling the root font-size scales type, spacing
   and the content width together. Laptops keep the original look; big monitors get
   a proportionally larger layout instead of a small island of content. */
:root { --container-max: 80rem; }

@media (min-width: 1440px) { html { font-size: 106.25%; } }  /* 17px  -> ~1360px content */
@media (min-width: 1680px) { html { font-size: 112.5%; } }   /* 18px  -> ~1440px content */
@media (min-width: 1920px) { html { font-size: 118.75%; } }  /* 19px  -> ~1520px content */
@media (min-width: 2400px) { html { font-size: 137.5%; } }   /* 22px  -> ~1760px content */
@media (min-width: 3000px) { html { font-size: 175%; } }     /* 28px  -> 4K-ish screens */

/* Short laptop screens (e.g. 1366x768): keep first screens compact so heroes don't overflow */
@media (min-width: 900px) and (max-height: 800px) {
  .xp-hero, .gi-hero, .faq-hero { padding-block: clamp(2.5rem, 6vh, 4rem); }
  .xp-hero h1 { font-size: clamp(3rem, 7.5vw, 6.5rem); }
  .xp-hero__pics { max-width: 28rem; }
  .faq-hero__pic { max-width: 15rem; }
}

/* Never let very wide screens stretch photo grids or text lines */
main img { max-width: 100%; }

/* Homepage hero: always leave breathing room under the nav, even on short laptop screens */
@media (min-width: 900px) {
  .hero { min-height: max(calc(92svh - var(--nav-height)), 40rem); }
  .hero__content { padding-top: 3.5rem; padding-bottom: 6rem; }
}

/* Short laptop screens: show the start of the content cards on the first screen */
@media (min-width: 900px) and (max-height: 800px) {
  .gi-hero h1, .faq-hero h1 { font-size: clamp(2.75rem, 6.2vw, 5.5rem); }
  .gi-card { min-height: clamp(22rem, 36vw, 30rem); }
}