/* EchoToFuture Desktop Wide Layout V2.1
   Mobile stays compact. Desktop and large monitors use more width.
*/

@media (min-width: 1024px) {
  body {
    overflow-x: hidden;
  }

  main {
    width: min(1500px, calc(100vw - 96px)) !important;
    max-width: min(1500px, calc(100vw - 96px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main > .max-w-xs,
  main > .max-w-sm,
  main > .max-w-md,
  main > .max-w-lg,
  main > .max-w-xl,
  main > .max-w-2xl,
  main > .max-w-3xl,
  main > .max-w-4xl,
  main > .max-w-5xl,
  main > .max-w-6xl,
  main > .max-w-7xl,
  main > .container,
  main > div[class*="max-w-"],
  main > section[class*="max-w-"],
  main > article[class*="max-w-"] {
    width: min(1320px, calc(100vw - 120px)) !important;
    max-width: min(1320px, calc(100vw - 120px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main > div > .max-w-xs,
  main > div > .max-w-sm,
  main > div > .max-w-md,
  main > div > .max-w-lg,
  main > div > .max-w-xl,
  main > div > .max-w-2xl,
  main > div > .max-w-3xl,
  main > div > .max-w-4xl,
  main > div > .max-w-5xl,
  main > div > .max-w-6xl,
  main > div > .max-w-7xl {
    max-width: min(1180px, calc(100vw - 140px)) !important;
  }

  main form {
    max-width: min(960px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  main .e2f-trust-row {
    grid-template-columns: repeat(3, minmax(260px, 1fr)) !important;
    width: min(1180px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media (min-width: 1350px) {
  main {
    width: min(1640px, calc(100vw - 128px)) !important;
    max-width: min(1640px, calc(100vw - 128px)) !important;
  }

  main > .max-w-xs,
  main > .max-w-sm,
  main > .max-w-md,
  main > .max-w-lg,
  main > .max-w-xl,
  main > .max-w-2xl,
  main > .max-w-3xl,
  main > .max-w-4xl,
  main > .max-w-5xl,
  main > .max-w-6xl,
  main > .max-w-7xl,
  main > .container,
  main > div[class*="max-w-"],
  main > section[class*="max-w-"],
  main > article[class*="max-w-"] {
    width: min(1440px, calc(100vw - 160px)) !important;
    max-width: min(1440px, calc(100vw - 160px)) !important;
  }

  main h1 {
    max-width: 18ch;
  }

  main p {
    max-width: 86ch;
  }
}

@media (min-width: 1700px) {
  main {
    width: min(1780px, calc(100vw - 180px)) !important;
    max-width: min(1780px, calc(100vw - 180px)) !important;
  }

  main > .max-w-xs,
  main > .max-w-sm,
  main > .max-w-md,
  main > .max-w-lg,
  main > .max-w-xl,
  main > .max-w-2xl,
  main > .max-w-3xl,
  main > .max-w-4xl,
  main > .max-w-5xl,
  main > .max-w-6xl,
  main > .max-w-7xl,
  main > .container,
  main > div[class*="max-w-"],
  main > section[class*="max-w-"],
  main > article[class*="max-w-"] {
    width: min(1520px, calc(100vw - 220px)) !important;
    max-width: min(1520px, calc(100vw - 220px)) !important;
  }
}

/* Try to make the start page less phone-like on desktop without touching mobile */
@media (min-width: 1150px) {
  main > div:first-child,
  main > section:first-child {
    min-width: min(1080px, 100%) !important;
  }

  main > div:first-child > div,
  main > section:first-child > div {
    max-width: none !important;
  }
}

/* Admin can also use more width, but remains controlled */
@media (min-width: 1200px) {
  .e2fa-shell {
    width: min(1560px, calc(100vw - 96px)) !important;
    max-width: min(1560px, calc(100vw - 96px)) !important;
  }
}

@media (min-width: 1700px) {
  .e2fa-shell {
    width: min(1720px, calc(100vw - 160px)) !important;
    max-width: min(1720px, calc(100vw - 160px)) !important;
  }
}

/* Mobile protection */
@media (max-width: 760px) {
  main,
  main > div,
  main > section,
  main > article {
    max-width: calc(100vw - 16px) !important;
  }
}