/* QueryBreak wide-screen responsive expansion.
   Keeps the existing visual design while allowing the workspace to use
   more of large desktop, ultrawide, and 4K displays. */

@media (min-width: 1500px) {
  main {
    width: min(94vw, 1900px);
    max-width: none;
    margin-inline: auto;
  }

  .hero,
  .qb-python-hero,
  .mission-section,
  .panel-page {
    padding-left: clamp(44px, 3.2vw, 72px);
    padding-right: clamp(44px, 3.2vw, 72px);
  }

  .hero,
  .qb-python-hero {
    grid-template-columns: 1.08fr .92fr;
    gap: clamp(70px, 5vw, 100px);
  }

  .qb-python-hero > div:first-child {
    max-width: 680px;
    justify-self: start;
    text-align: left;
  }

  .qb-python-hero h1,
  .qb-python-hero > div > p {
    max-width: 680px;
  }

  .qb-python-terminal {
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .mission-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
  }

  .qb-learning {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}

@media (min-width: 2100px) {
  main {
    width: min(92vw, 2200px);
  }

  .hero,
  .qb-python-hero {
    min-height: 680px;
    gap: 110px;
  }

  .hero h1 {
    font-size: clamp(68px, 3.4vw, 82px);
  }

  .hero > div > p {
    max-width: 780px;
    font-size: 19px;
  }

  .terminal-preview,
  .qb-python-terminal {
    width: 100%;
  }

  /* Keep the Python message readable while matching MySQL positioning. */
  .qb-python-hero h1 {
    max-width: 680px;
  }

  .qb-python-hero > div > p {
    max-width: 680px;
  }

  .mission-grid {
    gap: 24px;
  }
}

@media (min-width: 2800px) {
  main {
    width: min(90vw, 2500px);
  }

  .mission-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}