/* Laptop and desktop layout, 1024px and up.
   Phones and tablets are untouched: every rule lives inside this one media query.
   Load it AFTER site.css (and admin.css on the admin page) so it wins ties. */
@media (min-width: 1024px) {
  :root {
    --wrap: min(100% - 6rem, 112rem);        /* page width: full screen minus 3rem each side, capped on huge monitors */
    --fs-hero: clamp(4rem, 6.2vw, 7rem);
    --fs-xl: clamp(1.25rem, 1.5vw, 1.55rem);
  }

  /* ----- Public site ----- */
  .nav { width: var(--wrap); padding-left: 1.75rem; }
  .nav__links { gap: var(--s3); }

  .hero { padding-inline: 3rem; }
  .hero__inner { max-width: 64rem; }
  .hero p.lead { max-width: 44rem; }

  .section { padding-inline: 3rem; }
  .section__inner { max-width: 112rem; }
  .section__title { font-size: clamp(2.4rem, 3.4vw, 3.6rem); }
  .section__sub { max-width: 46rem; }
  #faq .max-sm, #contact .max-sm { max-width: 64rem; }   /* readable width for the FAQ and the form */

  .bento { gap: var(--s3); }
  .bento__card { padding: 2rem; }
  .portfolio-grid { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--s3); }
  .process-grid { gap: var(--s4); }
  .modal { max-width: 56rem; }

  /* ----- Admin panel ----- */
  .topbar, .main { width: var(--wrap); }
  .stats { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s3); }
  .dash-grid { gap: var(--s4); }
  .port-grid { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--s3); }
}