/*
  Ajustes por breakpoint.
  Mobile-first: styles.css define a base; aqui só o que muda em ecrãs maiores.
*/

/* ---- Tablet (>= 768px) ---- */
@media (min-width: 48em) {
  .overview-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .credential-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-visual {
    aspect-ratio: 16 / 10;
  }

  .education-card {
    grid-template-columns: 3fr 2fr;
  }

  .education-visual {
    min-height: 100%;
  }
}

/* ---- Desktop (>= 1024px) ---- */
@media (min-width: 64em) {
  .nav-links {
    display: flex;
  }

  .nav-cta {
    display: inline-flex;
  }

  .menu-toggle {
    display: none;
  }

  .mobile-menu {
    display: none !important;
  }

  .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
  }

  .about-grid {
    grid-template-columns: 0.85fr 1.15fr;
  }

  .about-visual {
    aspect-ratio: 4 / 5;
  }

  .tech-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .fitness-grid {
    grid-template-columns: 1fr 1fr;
  }

  .manz-grid {
    grid-template-columns: 1.2fr 1fr;
  }

  .partners-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ---- Ecrãs largos (>= 90em) ---- */
@media (min-width: 90em) {
  :root {
    --gutter: max(var(--gutter), calc((100vw - 1400px) / 2));
  }
}